From 08fc0ffa925708a9a607bfb1aae1e1a0057f728c Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Wed, 20 Nov 2024 19:12:34 +0800
Subject: [PATCH] pkp/pkp-lib#10624 Add slots for rendering
 FieldBaseAutosuggest options

pkp/pkp-lib#10624 Add ROR and NewTab icons

pkp/pkp-lib#10624 Update Autosuggest component

pkp/pkp-lib#10624 Apply changes from icon component

pkp/pkp-lib#10624 Remove FieldCombobox component

pkp/pkp-lib#10624 Remove autosuggest props in api

pkp/pkp-lib#10624 Move methods from FieldBaseAutosuggest to useAutosuggest API

Revert "pkp/pkp-lib#10624 Move methods from FieldBaseAutosuggest to useAutosuggest API"

This reverts commit b23bbdcbab2b28d2a6bbce5146a12ab960deba0a.

pkp/pkp-lib#10624 Move autosuggest functions from api to component

pkp/pkp-lib#10624 Add ROR autosuggest component

pkp/pkp-lib#10624 Add isMultiple prop to Autosuggest component

pkp/pkp-lib#10624 Remove inputName and deselectLabel props

pkp/pkp-lib#10624 Simplify data handling from fetch api for ror autosuggest component

pkp/pkp-lib#10624 Use mock data for ror autosuggest story

pkp/pkp-lib#10624 Remove custom options story in FieldBaseAutosuggest component

pkp/pkp-lib#10624 Render Autosuggest component even if prop isDisabled value is true

pkp/pkp-lib#10624 Reduce input props for the autosuggest component
---
 src/components/Form/fields/Autosuggest.vue    | 215 ++++++++++++++++++
 .../Form/fields/FieldBaseAutosuggest.mdx      |   9 +
 .../Form/fields/FieldBaseAutosuggest.vue      | 191 ++++++----------
 .../Form/fields/FieldControlledVocab.vue      |   5 +-
 .../fields/FieldRorAutosuggest.stories.js     |  40 ++++
 .../Form/fields/FieldRorAutosuggest.vue       | 131 +++++++++++
 src/components/Icon/Icon.stories.js           |   2 +
 src/components/Icon/Icon.vue                  |   4 +
 src/components/Icon/icons/NewTab.vue          |  11 +
 src/components/Icon/icons/ROR.vue             |  36 +++
 src/composables/useAutosuggest.js             |   3 +
 src/mocks/institutions.json                   |  94 ++++++++
 12 files changed, 613 insertions(+), 128 deletions(-)
 create mode 100644 src/components/Form/fields/Autosuggest.vue
 create mode 100644 src/components/Form/fields/FieldRorAutosuggest.stories.js
 create mode 100644 src/components/Form/fields/FieldRorAutosuggest.vue
 create mode 100644 src/components/Icon/icons/NewTab.vue
 create mode 100644 src/components/Icon/icons/ROR.vue
 create mode 100644 src/composables/useAutosuggest.js
 create mode 100644 src/mocks/institutions.json

diff --git a/src/components/Form/fields/Autosuggest.vue b/src/components/Form/fields/Autosuggest.vue
new file mode 100644
index 000000000..2da1184b9
--- /dev/null
+++ b/src/components/Form/fields/Autosuggest.vue
@@ -0,0 +1,215 @@
+<template>
+	<span class="-screenReader">{{ selectedLabel }}</span>
+	<span v-if="!currentSelected.length" class="-screenReader">
+		{{ t('common.none') }}
+	</span>
+	<PkpBadge
+		v-for="item in currentSelected"
+		v-else
+		:key="item.value"
+		class="pkpAutosuggest__selection"
+	>
+		{{ item.label }}
+		<slot v-if="item.hasSlot" name="input-slot" />
+		<button
+			v-if="!isDisabled"
+			class="pkpAutosuggest__deselect text-negative hover:text-on-dark"
+			@click.stop.prevent="deselect(item)"
+		>
+			<Icon icon="Cancel" class="h-3 w-3" />
+			<span class="-screenReader">
+				{{ t('common.removeItem', {item: item.label}) }}
+			</span>
+		</button>
+	</PkpBadge>
+	<Combobox
+		:id="id"
+		:key="id"
+		:model-value="null"
+		class="pkpAutosuggest__autosuggester"
+		as="div"
+		@update:model-value="selectSuggestion"
+	>
+		<ComboboxInput
+			class="pkpAutosuggest__input"
+			v-bind="inputProps"
+			autocomplete="off"
+			:disabled="isDisabled || !enableSuggestions"
+			@change="(event) => handleChange(event)"
+			@focus="() => handleFocus(true)"
+			@blur="() => handleFocus(false)"
+		/>
+		<ComboboxOptions
+			v-if="
+				suggestions.length ||
+				(allowCustom && localInputValue?.length) ||
+				isLoading
+			"
+			class="autosuggest__results-container autosuggest__results"
+		>
+			<ComboboxOption
+				v-if="isLoading"
+				v-slot="{active}"
+				as="template"
+				:disabled="true"
+			>
+				<li
+					class="autosuggest__results-item"
+					:class="active && 'autosuggest__results-item--highlighted'"
+				>
+					<Spinner />
+					{{ t('common.loading') }}
+				</li>
+			</ComboboxOption>
+			<ComboboxOption
+				v-if="
+					allowCustom &&
+					localInputValue?.length &&
+					!suggestions.includes(localInputValue)
+				"
+				v-slot="{active}"
+				as="template"
+			>
+				<li
+					class="autosuggest__results-item"
+					:class="active && 'autosuggest__results-item--highlighted'"
+				>
+					{{ localInputValue }}
+				</li>
+			</ComboboxOption>
+			<template v-if="!isLoading && enableSuggestions">
+				<ComboboxOption
+					v-for="suggestion in suggestions"
+					:key="suggestion.value"
+					v-slot="{active}"
+					:value="suggestion"
+					as="template"
+				>
+					<li
+						class="autosuggest__results-item flex items-center"
+						:class="active && 'autosuggest__results-item--highlighted'"
+					>
+						<slot
+							v-if="slots['option']"
+							name="option"
+							:suggestion="suggestion"
+						/>
+						<span v-else>{{ suggestion.label }}</span>
+					</li>
+				</ComboboxOption>
+			</template>
+		</ComboboxOptions>
+	</Combobox>
+</template>
+<script setup>
+import {useSlots, ref, inject, computed} from 'vue';
+import {
+	Combobox,
+	ComboboxInput,
+	ComboboxOption,
+	ComboboxOptions,
+} from '@headlessui/vue';
+import PkpBadge from '@/components/Badge/Badge.vue';
+import Icon from '@/components/Icon/Icon.vue';
+import Spinner from '@/components/Spinner/Spinner.vue';
+
+const slots = useSlots();
+
+const props = defineProps({
+	/* ID to be assigned to the Combobox component */
+	id: {
+		type: String,
+		required: true,
+	},
+	/* Array of suggestions to the autosuggest component */
+	suggestions: {
+		type: Array,
+		default: () => [],
+	},
+	/* Label to be used for the selected items */
+	selectedLabel: {
+		type: String,
+		required: true,
+	},
+	/* Array of currently selected items */
+	currentSelected: {
+		type: Array,
+		default: () => [],
+	},
+	/* The input model value */
+	inputValue: {
+		type: String,
+		default: () => '',
+	},
+	/* If the autosuggest component is disabled */
+	isDisabled: {
+		type: Boolean,
+		default: () => false,
+	},
+	/* If the list of suggestions is loading */
+	isLoading: {
+		type: Boolean,
+		default: () => false,
+	},
+	/* If multiple entries are allowed to be selected */
+	isMultiple: {
+		type: Boolean,
+		default: () => true,
+	},
+	/* Prefix of the input's parent container and its label */
+	controlPrefixId: {
+		type: String,
+		default: () => 'default-autosuggest',
+	},
+});
+
+/**
+ * Props to pass to the input field
+ */
+const inputProps = {
+	'aria-describedby': `${props.controlPrefixId}-selected`,
+	class: 'pkpAutosuggest__input',
+	id: `${props.controlPrefixId}-control`,
+	disabled: props.isDisabled,
+};
+
+const enableSuggestions = computed(() => {
+	if (props.isMultiple) {
+		return true;
+	}
+
+	// disable multiple selections if only a single item is allowed and an item is already selected.
+	return !props.currentSelected.length;
+});
+
+const emit = defineEmits([
+	'update:inputValue',
+	'focus-changed',
+	'select-suggestion',
+	'deselect',
+]);
+
+const allowCustom = inject('allowCustom', false);
+const localInputValue = ref('');
+const isFocused = ref(false);
+
+function handleChange(event) {
+	localInputValue.value = event.target.value.trim();
+	emit('update:inputValue', localInputValue.value);
+}
+
+function handleFocus(state) {
+	isFocused.value = state;
+	emit('focus-changed', state);
+}
+
+function selectSuggestion(suggestion) {
+	emit('select-suggestion', suggestion);
+}
+
+function deselect(item) {
+	emit('deselect', item);
+}
+
+defineExpose({handleFocus});
+</script>
diff --git a/src/components/Form/fields/FieldBaseAutosuggest.mdx b/src/components/Form/fields/FieldBaseAutosuggest.mdx
index fbde357ad..2f74646ed 100644
--- a/src/components/Form/fields/FieldBaseAutosuggest.mdx
+++ b/src/components/Form/fields/FieldBaseAutosuggest.mdx
@@ -44,5 +44,14 @@ The following autosuggest fields are available to be used.
 - `FieldControlledVocab` can be used to enter metadata such as keywords and subjects.
 - `FieldSelectSubmissions` can be used to find and select submissions.
 
+## Customizing options
+
+The component allows for flexible customization of its options through named slots. This lets you control how suggestions are displayed and interact within the options. See [Custom Options](?path=/story/forms-fieldbaseautosuggest--custom-options) for sample implemenation.
+
+### Named Slots
+
+- `input-slot`: Customizes the input area of the combobox.
+- `option`: Defines how each suggestion is rendered in the dropdown.
+
 <Primary />
 <Controls />
diff --git a/src/components/Form/fields/FieldBaseAutosuggest.vue b/src/components/Form/fields/FieldBaseAutosuggest.vue
index 3e12db31f..8fdf1777d 100644
--- a/src/components/Form/fields/FieldBaseAutosuggest.vue
+++ b/src/components/Form/fields/FieldBaseAutosuggest.vue
@@ -45,7 +45,7 @@
 				:class="{
 					'pkpAutosuggest__inputWrapper--multilingual':
 						isMultilingual && locales.length > 1,
-					'pkpAutosuggest__inputWrapper--focus': isFocused,
+					'pkpAutosuggest__inputWrapper--focus': inputFocused,
 				}"
 				@click="setFocusToInput"
 			>
@@ -80,81 +80,21 @@
 					/>
 				</div>
 				<!-- End Heading part repeated for inline scenario -->
-				<span class="-screenReader">{{ selectedLabel }}</span>
-				<span v-if="!currentValue.length" class="-screenReader">
-					{{ t('common.none') }}
-				</span>
-				<PkpBadge
-					v-for="item in currentSelected"
-					v-else
-					:key="item.value"
-					class="pkpAutosuggest__selection"
-				>
-					{{ item.label }}
-					<button
-						v-if="!isDisabled"
-						class="pkpAutosuggest__deselect text-negative hover:text-on-dark"
-						@click.stop.prevent="deselect(item)"
-					>
-						<Icon icon="Cancel" class="h-3 w-3" />
-						<span class="-screenReader">
-							{{ deselectLabel.replace('{$item}', item.label) }}
-						</span>
-					</button>
-				</PkpBadge>
-				<Combobox
-					v-if="!isDisabled"
-					:id="autosuggestId"
-					:key="autosuggestId"
-					:model-value="null"
-					class="pkpAutosuggest__autosuggester"
-					as="div"
-					@update:modelValue="selectSuggestion"
+				<Autosuggest
+					v-bind="autoSuggestProps"
+					ref="inputRef"
+					v-model:inputValue="inputValue"
+					@select-suggestion="selectSuggestion"
+					@deselect="deselect"
+					@focus-changed="changeFocus"
 				>
-					<ComboboxInput
-						ref="autosuggestInput"
-						class="pkpAutosuggest__input"
-						v-bind="inputProps"
-						@change="inputValue = $event.target.value.trim()"
-						@focus="() => (isFocused = true)"
-						@blur="() => (isFocused = false)"
-					/>
-					<ComboboxOptions
-						v-if="suggestions.length || (allowCustom && inputValue?.length)"
-						class="autosuggest__results-container autosuggest__results"
-					>
-						<ComboboxOption
-							v-if="
-								allowCustom &&
-								inputValue?.length &&
-								!suggestions.includes(inputValue)
-							"
-							v-slot="{active}"
-							as="template"
-						>
-							<li
-								class="autosuggest__results-item"
-								:class="active && 'autosuggest__results-item--highlighted'"
-							>
-								{{ inputValue }}
-							</li>
-						</ComboboxOption>
-						<ComboboxOption
-							v-for="suggestion in suggestions"
-							:key="suggestion.value"
-							v-slot="{active}"
-							:value="suggestion"
-							as="template"
-						>
-							<li
-								class="autosuggest__results-item"
-								:class="active && 'autosuggest__results-item--highlighted'"
-							>
-								{{ suggestion.label }}
-							</li>
-						</ComboboxOption>
-					</ComboboxOptions>
-				</Combobox>
+					<template v-if="$slots['input-slot']" #input-slot>
+						<slot name="input-slot"></slot>
+					</template>
+					<template v-if="$slots.option" #option="{suggestion}">
+						<slot name="option" :suggestion="suggestion"></slot>
+					</template>
+				</Autosuggest>
 				<span class="pkpAutosuggest__endslot">
 					<slot name="end"></slot>
 				</span>
@@ -176,37 +116,25 @@
 
 <script>
 import FieldBase from './FieldBase.vue';
-import PkpBadge from '@/components/Badge/Badge.vue';
+import Autosuggest from './Autosuggest.vue';
 import FormFieldLabel from '@/components/Form/FormFieldLabel.vue';
 import Tooltip from '@/components/Tooltip/Tooltip.vue';
 import HelpButton from '@/components/HelpButton/HelpButton.vue';
 import FieldError from '@/components/Form/FieldError.vue';
 import MultilingualProgress from '@/components/MultilingualProgress/MultilingualProgress.vue';
-import Icon from '@/components/Icon/Icon.vue';
-
-import {
-	Combobox,
-	ComboboxInput,
-	ComboboxOption,
-	ComboboxOptions,
-} from '@headlessui/vue';
+
 import ajaxError from '@/mixins/ajaxError';
 import debounce from 'debounce';
 
 export default {
 	name: 'FieldBaseAutosuggest',
 	components: {
-		PkpBadge,
-		Combobox,
-		ComboboxInput,
-		ComboboxOption,
-		ComboboxOptions,
 		FormFieldLabel,
 		Tooltip,
 		HelpButton,
 		FieldError,
-		Icon,
 		MultilingualProgress,
+		Autosuggest,
 	},
 	extends: FieldBase,
 	mixins: [ajaxError],
@@ -256,11 +184,16 @@ export default {
 			type: String,
 			required: true,
 		},
+		/** If the combobox should allow multiple options to be selected */
+		isMultiple: {
+			type: Boolean,
+			default: () => true,
+		},
 	},
 	data() {
 		return {
 			inputValue: '',
-			isFocused: false,
+			inputFocused: false,
 			suggestions: [],
 		};
 	},
@@ -308,24 +241,6 @@ export default {
 			);
 		},
 
-		/**
-		 * Props to pass to the input field
-		 *
-		 * @return {Object}
-		 */
-		inputProps() {
-			let props = {
-				'aria-describedby': this.describedByIds,
-				class: 'pkpAutosuggest__input',
-				id: this.controlId,
-				name: this.name,
-			};
-			if (this.isDisabled) {
-				props.disabled = 'disabled';
-			}
-			return props;
-		},
-
 		/**
 		 * Is this field in a right-to-left language
 		 */
@@ -333,6 +248,33 @@ export default {
 			var direction = document.body.getAttribute('dir');
 			return direction === 'rtl';
 		},
+		autoSuggestProps() {
+			return {
+				id: this.autosuggestId,
+				suggestions: this.suggestions,
+				selectedLabel: this.selectedLabel,
+				currentSelected: this.currentSelected,
+				isDisabled: this.isDisabled,
+				controlPrefixId: this.compileId(),
+			};
+		},
+	},
+	watch: {
+		inputValue(newVal, oldVal) {
+			if (newVal === oldVal) {
+				return;
+			}
+			this.getSuggestions();
+		},
+	},
+	mounted() {
+		// Inline labels can not be used with multilingual fields
+		if (this.isMultilingual && this.isLabelInline) {
+			throw new Error(
+				'An inline label can not be used with a multilingual autosuggest field. This error encountered in the field ' +
+					this.name,
+			);
+		}
 	},
 	methods: {
 		/**
@@ -357,7 +299,14 @@ export default {
 				return;
 			}
 
-			this.$refs.autosuggestInput.$el.focus();
+			this.$refs.inputRef.handleFocus(true);
+		},
+
+		/**
+		 * Change the input focus state
+		 */
+		changeFocus(state) {
+			this.inputFocused = state;
 		},
 
 		/**
@@ -421,6 +370,11 @@ export default {
 		 * Emit events to change the selected items and the field's value
 		 */
 		setSelected(selected) {
+			if (selected?.length > 1 && !this.isMultiple) {
+				// override selected value if only one option can be selected
+				selected = [selected[1]];
+			}
+
 			this.$emit('change', this.name, 'selected', selected, this.localeKey);
 			this.$emit(
 				'change',
@@ -443,23 +397,6 @@ export default {
 			);
 		},
 	},
-	watch: {
-		inputValue(newVal, oldVal) {
-			if (newVal === oldVal) {
-				return;
-			}
-			this.getSuggestions();
-		},
-	},
-	mounted() {
-		// Inline labels can not be used with multilingual fields
-		if (this.isMultilingual && this.isLabelInline) {
-			throw new Error(
-				'An inline label can not be used with a multilingual autosuggest field. This error encountered in the field ' +
-					this.name,
-			);
-		}
-	},
 };
 </script>
 
diff --git a/src/components/Form/fields/FieldControlledVocab.vue b/src/components/Form/fields/FieldControlledVocab.vue
index 6c463b305..b5f2939fc 100644
--- a/src/components/Form/fields/FieldControlledVocab.vue
+++ b/src/components/Form/fields/FieldControlledVocab.vue
@@ -1,16 +1,19 @@
 <script>
+import {provide} from 'vue';
 import FieldBaseAutosuggest from './FieldBaseAutosuggest.vue';
 import debounce from 'debounce';
 
 export default {
 	name: 'FieldControlledVocab',
 	extends: FieldBaseAutosuggest,
+	setup() {
+		provide('allowCustom', true);
+	},
 	data() {
 		return {
 			allSuggestions: [],
 			suggestionsLoaded: false,
 			suggestionsLoading: false,
-			allowCustom: true,
 		};
 	},
 	methods: {
diff --git a/src/components/Form/fields/FieldRorAutosuggest.stories.js b/src/components/Form/fields/FieldRorAutosuggest.stories.js
new file mode 100644
index 000000000..68a75679f
--- /dev/null
+++ b/src/components/Form/fields/FieldRorAutosuggest.stories.js
@@ -0,0 +1,40 @@
+import {http, HttpResponse} from 'msw';
+import FieldRorAutosuggest from './FieldRorAutosuggest.vue';
+import InstitutionsMock from '@/mocks/institutions.json';
+
+export default {
+	title: 'Components/FieldRorAutosuggest',
+	component: FieldRorAutosuggest,
+	render: (args) => ({
+		components: {FieldRorAutosuggest},
+		setup() {
+			return {args};
+		},
+		template: '<FieldRorAutosuggest v-bind="args" />',
+	}),
+	parameters: {
+		msw: {
+			handlers: [
+				http.get('https://api.ror.org/v2/organizations', async () => {
+					return HttpResponse.json(InstitutionsMock);
+				}),
+			],
+		},
+		docs: {
+			story: {
+				height: '300px',
+			},
+		},
+	},
+};
+
+export const Default = {
+	render: (args) => ({
+		components: {FieldRorAutosuggest},
+		setup() {
+			return {args};
+		},
+		template: '<FieldRorAutosuggest v-bind="args" />',
+	}),
+	args: {},
+};
diff --git a/src/components/Form/fields/FieldRorAutosuggest.vue b/src/components/Form/fields/FieldRorAutosuggest.vue
new file mode 100644
index 000000000..5eb747cb4
--- /dev/null
+++ b/src/components/Form/fields/FieldRorAutosuggest.vue
@@ -0,0 +1,131 @@
+<template>
+	<div
+		class="relative"
+		:class="{
+			'pkpAutosuggest--disabled': autoSuggestProps.isDisabled,
+		}"
+	>
+		<div class="relative mt-1 w-full">
+			<div
+				:id="autoSuggestProps.inputDescribedByIds"
+				ref="values"
+				class="pkpAutosuggest__inputWrapper pkpFormField__input"
+				:class="{
+					'pkpAutosuggest__inputWrapper--focus': isFocused,
+				}"
+				@click="setFocusToInput"
+			>
+				<Autosuggest
+					v-bind="autoSuggestProps"
+					@update:input-value="updateInputValue"
+					@select-suggestion="handleSelect"
+					@deselect="handleDeselect"
+					@focus-changed="changeFocus"
+				>
+					<template #input-slot>
+						<Icon icon="ROR" class="ms-2 h-auto w-6" :inline="true" />
+					</template>
+					<template #option="{suggestion}">
+						{{ suggestion.label }}
+						<Icon
+							v-if="suggestion.hasSlot"
+							icon="ROR"
+							class="ms-2 h-auto w-6"
+							:inline="true"
+						/>
+						<a
+							v-if="suggestion.hasSlot"
+							:href="suggestion.href"
+							target="_blank"
+							class="ms-auto flex"
+						>
+							<span class="sr-only">Open link in new tab</span>
+							<Icon icon="NewTab" class="h-5 w-5 text-primary" :inline="true" />
+						</a>
+					</template>
+				</Autosuggest>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import {ref, watch, computed} from 'vue';
+import Autosuggest from './Autosuggest.vue';
+import Icon from '@/components/Icon/Icon.vue';
+import {useFetch} from '@/composables/useFetch';
+
+const currentSelected = ref([]);
+const inputValue = ref('');
+const isFocused = ref(false);
+
+const url = 'https://api.ror.org/v2/organizations';
+const queryParams = computed(() => ({
+	query: inputValue.value,
+}));
+
+const {
+	data: suggestions,
+	isLoading,
+	fetch: fetchSuggestions,
+} = useFetch(url, {
+	query: queryParams,
+});
+
+const staticProps = {
+	id: 'default-autosuggest-autosuggest',
+	selectedLabel: 'Selected',
+	isMultiple: false,
+};
+
+const autoSuggestProps = computed(() => ({
+	...staticProps,
+	suggestions: mappedSuggestions.value,
+	currentSelected: currentSelected.value,
+	isLoading: isLoading.value,
+}));
+
+const mappedSuggestions = computed(() => {
+	return suggestions.value?.items.map((item) => {
+		// get the name from "ror_display" type
+		const name = item.names?.find((i) =>
+			i.types.includes('ror_display'),
+		)?.value;
+
+		return {
+			value: item.id,
+			label: name,
+			hasSlot: true,
+			href: item.id,
+		};
+	});
+});
+
+watch(queryParams, () => {
+	getSuggestions();
+});
+
+async function getSuggestions() {
+	await fetchSuggestions();
+}
+
+function updateInputValue(value) {
+	inputValue.value = value;
+}
+
+function changeFocus(focused) {
+	isFocused.value = focused;
+}
+
+function handleSelect(suggestion) {
+	if (!currentSelected.value.some((item) => item.value === suggestion.value)) {
+		currentSelected.value.push(suggestion);
+	}
+}
+
+function handleDeselect(item) {
+	currentSelected.value = currentSelected.value.filter(
+		(selected) => selected.value !== item.value,
+	);
+}
+</script>
diff --git a/src/components/Icon/Icon.stories.js b/src/components/Icon/Icon.stories.js
index 580f440c3..74614545a 100644
--- a/src/components/Icon/Icon.stories.js
+++ b/src/components/Icon/Icon.stories.js
@@ -132,6 +132,7 @@ export const IconGallery = {
 			'NavDoi',
 			'NavAdmin',
 			'New',
+			'NewTab',
 			'Notifications',
 			'NotVisible',
 			'OpenReview',
@@ -149,6 +150,7 @@ export const IconGallery = {
 			'ReviewAssignments',
 			'ReviewRequestDeclined',
 			'ReviewSent',
+			'ROR',
 			'Search',
 			'Settings',
 			'Sitemap',
diff --git a/src/components/Icon/Icon.vue b/src/components/Icon/Icon.vue
index d7f658560..412fbaa22 100644
--- a/src/components/Icon/Icon.vue
+++ b/src/components/Icon/Icon.vue
@@ -80,6 +80,7 @@ import MySubmissions from './icons/MySubmissions.vue';
 import NavDoi from './icons/NavDoi.vue';
 import NavAdmin from './icons/NavAdmin.vue';
 import New from './icons/New.vue';
+import NewTab from './icons/NewTab.vue';
 import Notifications from './icons/Notifications.vue';
 import NotVisible from './icons/NotVisible.vue';
 import OpenReview from './icons/OpenReview.vue';
@@ -97,6 +98,7 @@ import ReinstateReviewer from './icons/ReinstateReviewer.vue';
 import ReviewAssignments from './icons/ReviewAssignments.vue';
 import ReviewRequestDeclined from './icons/ReviewRequestDeclined.vue';
 import ReviewSent from './icons/ReviewSent.vue';
+import ROR from './icons/ROR.vue';
 import Search from './icons/Search.vue';
 import Settings from './icons/Settings.vue';
 import Sitemap from './icons/Sitemap.vue';
@@ -190,6 +192,7 @@ const svgIcons = {
 	NavDoi,
 	NavAdmin,
 	New,
+	NewTab,
 	Notifications,
 	NotVisible,
 	OpenReview,
@@ -207,6 +210,7 @@ const svgIcons = {
 	ReviewAssignments,
 	ReviewRequestDeclined,
 	ReviewSent,
+	ROR,
 	Search,
 	Settings,
 	Sitemap,
diff --git a/src/components/Icon/icons/NewTab.vue b/src/components/Icon/icons/NewTab.vue
new file mode 100644
index 000000000..e91e106a9
--- /dev/null
+++ b/src/components/Icon/icons/NewTab.vue
@@ -0,0 +1,11 @@
+<template>
+	<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M13.75 1.875H18.125V6.25M17.1875 2.8125L12.5 7.5M10.625 3.125H5C4.50272 3.125 4.02581 3.32254 3.67417 3.67417C3.32254 4.02581 3.125 4.50272 3.125 5V15C3.125 15.4973 3.32254 15.9742 3.67417 16.3258C4.02581 16.6775 4.50272 16.875 5 16.875H15C15.4973 16.875 15.9742 16.6775 16.3258 16.3258C16.6775 15.9742 16.875 15.4973 16.875 15V9.375"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/ROR.vue b/src/components/Icon/icons/ROR.vue
new file mode 100644
index 000000000..75e59d1f8
--- /dev/null
+++ b/src/components/Icon/icons/ROR.vue
@@ -0,0 +1,36 @@
+<template>
+	<svg viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g clip-path="url(#clip0_5753_4959)">
+			<path
+				d="M9.90815 1.38672L8.13303 4.10574L6.35645 1.38672H9.90815Z"
+				fill="#53BAA1"
+			/>
+			<path
+				d="M17.3364 1.38672L15.5613 4.10574L13.7847 1.38672H17.3364Z"
+				fill="#53BAA1"
+			/>
+			<path
+				d="M6.35645 17.6775L8.13303 14.957L9.90815 17.6775H6.35645Z"
+				fill="#53BAA1"
+			/>
+			<path
+				d="M13.7847 17.6775L15.5613 14.957L17.3364 17.6775H13.7847Z"
+				fill="#53BAA1"
+			/>
+			<path
+				d="M21.1589 10.1002C21.7881 9.98315 22.2667 9.70364 22.593 9.26315C22.9208 8.82266 23.0832 8.28705 23.0832 7.65925C23.0832 7.13827 22.9925 6.7051 22.8125 6.35681C22.6325 6.00851 22.3881 5.73193 22.0823 5.52559C21.7764 5.32071 21.4193 5.1729 21.0125 5.0851C20.6057 4.99729 20.1754 4.95339 19.7232 4.95339H16.2754V7.709C16.2476 7.62851 16.2184 7.54949 16.1862 7.47047C15.9476 6.89242 15.614 6.39925 15.1852 5.99242C14.7564 5.58559 14.2501 5.27242 13.6618 5.05437C13.075 4.83632 12.4325 4.72656 11.7359 4.72656C11.0393 4.72656 10.3984 4.83632 9.81007 5.05437C9.22324 5.27242 8.71544 5.58559 8.28666 5.99242C7.90324 6.35681 7.59593 6.79144 7.36471 7.29486C7.33105 6.93339 7.24617 6.62022 7.11007 6.35681C6.93007 6.00851 6.68568 5.73193 6.37983 5.52559C6.07398 5.32071 5.7169 5.1729 5.31007 5.0851C4.90324 4.99729 4.473 4.95339 4.0208 4.95339H0.574463V13.8627H2.5369V10.3007H3.50568L5.36861 13.8627H7.72178L5.45788 10.1002C6.08715 9.98315 6.56568 9.70364 6.89202 9.26315C6.90666 9.24266 6.91983 9.22071 6.93446 9.20022C6.93154 9.269 6.93007 9.33778 6.93007 9.40803C6.93007 10.1207 7.05007 10.7675 7.28861 11.3456C7.52715 11.9236 7.8608 12.4168 8.28958 12.8236C8.7169 13.2305 9.22471 13.5436 9.813 13.7617C10.3998 13.9797 11.0423 14.0895 11.7389 14.0895C12.4354 14.0895 13.0764 13.9797 13.6647 13.7617C14.2515 13.5436 14.7593 13.2305 15.1881 12.8236C15.6154 12.4168 15.9491 11.9236 16.1891 11.3456C16.2213 11.268 16.2506 11.1875 16.2784 11.107V13.8627H18.2408V10.3007H19.2096L21.0725 13.8627H23.4257L21.1589 10.1002ZM5.18715 8.21242C5.08178 8.34705 4.95007 8.4451 4.79056 8.50803C4.63105 8.57095 4.45251 8.609 4.25641 8.62071C4.05885 8.63388 3.873 8.63973 3.69593 8.63973H2.53837V6.61437H3.82178C3.99739 6.61437 4.17885 6.62754 4.36324 6.65242C4.54763 6.67729 4.71154 6.72559 4.85349 6.79729C4.99544 6.869 5.11398 6.97144 5.20617 7.10607C5.29837 7.24071 5.34519 7.42071 5.34519 7.64754C5.34519 7.889 5.29251 8.07778 5.18715 8.21242ZM14.3115 10.5597C14.1813 10.908 13.9954 11.2095 13.751 11.4656C13.5081 11.7217 13.2169 11.9207 12.8759 12.0641C12.5364 12.2075 12.1559 12.2778 11.7374 12.2778C11.3174 12.2778 10.9384 12.2061 10.5989 12.0641C10.2593 11.9222 9.96812 11.7217 9.72373 11.4656C9.4808 11.2095 9.29349 10.908 9.16324 10.5597C9.033 10.2114 8.96861 9.82803 8.96861 9.40803C8.96861 8.99681 9.033 8.61486 9.16324 8.26217C9.29349 7.90949 9.47934 7.60656 9.72373 7.35046C9.96666 7.09437 10.2579 6.89534 10.5989 6.75193C10.9384 6.60998 11.3174 6.53827 11.7374 6.53827C12.1574 6.53827 12.5364 6.60998 12.8759 6.75193C13.2154 6.89388 13.5067 7.09437 13.751 7.35046C13.994 7.60656 14.1813 7.91095 14.3115 8.26217C14.4418 8.61486 14.5062 8.99681 14.5062 9.40803C14.5062 9.82803 14.4418 10.2114 14.3115 10.5597ZM20.8881 8.21242C20.7828 8.34705 20.651 8.4451 20.4915 8.50803C20.332 8.57095 20.1535 8.609 19.9574 8.62071C19.7598 8.63388 19.574 8.63973 19.3969 8.63973H18.2393V6.61437H19.5228C19.6984 6.61437 19.8798 6.62754 20.0642 6.65242C20.2486 6.67729 20.4125 6.72559 20.5545 6.79729C20.6964 6.869 20.815 6.97144 20.9071 7.10607C20.9993 7.24071 21.0462 7.42071 21.0462 7.64754C21.0462 7.889 20.9935 8.07778 20.8881 8.21242Z"
+				fill="#202826"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_5753_4959">
+				<rect
+					width="24"
+					height="17.2683"
+					fill="white"
+					transform="translate(0 0.898438)"
+				/>
+			</clipPath>
+		</defs>
+	</svg>
+</template>
diff --git a/src/composables/useAutosuggest.js b/src/composables/useAutosuggest.js
new file mode 100644
index 000000000..3592eee27
--- /dev/null
+++ b/src/composables/useAutosuggest.js
@@ -0,0 +1,3 @@
+export function useAutosuggest() {
+	return {};
+}
diff --git a/src/mocks/institutions.json b/src/mocks/institutions.json
new file mode 100644
index 000000000..f767533e0
--- /dev/null
+++ b/src/mocks/institutions.json
@@ -0,0 +1,94 @@
+{
+	"items": [
+		{
+			"id": "https://ror.org/03dbr7087",
+			"names": [
+				{
+					"types": "ror_display",
+					"value": "University of Toronto"
+				}
+			]
+		},
+		{
+			"id": "https://ror.org/002h8g185",
+			"names": [
+				{
+					"types": "ror_display",
+					"value": "University of Bath"
+				}
+			]
+		},
+		{
+			"id": "https://ror.org/01ej9dk98",
+			"names": [
+				{
+					"types": "ror_display",
+					"value": "University of Melbourne"
+				}
+			]
+		},
+		{
+			"id": "https://ror.org/046ak2485",
+			"names": [
+				{
+					"types": "ror_display",
+					"value": "Technical University of Berlin"
+				}
+			]
+		},
+		{
+			"id": "https://ror.org/045zwes19",
+			"names": [
+				{
+					"types": "ror_display",
+					"value": "University of West Los Angeles"
+				}
+			]
+		},
+		{
+			"id": "https://ror.org/015h4rf69",
+			"names": [
+				{
+					"types": "ror_display",
+					"value": "Niagara College"
+				}
+			]
+		},
+		{
+			"id": "https://ror.org/03tjw1547",
+			"names": [
+				{
+					"types": "ror_display",
+					"value": "Innovate Niagara"
+				}
+			]
+		},
+		{
+			"id": "https://ror.org/05r04zn83",
+			"names": [
+				{
+					"types": "ror_display",
+					"value": "Regional Municipality of Niagara"
+				}
+			]
+		},
+		{
+			"id": "https://ror.org/05309tf52",
+			"names": [
+				{
+					"types": "ror_display",
+					"value": "Niagara University"
+				}
+			]
+		},
+		{
+			"names": [
+				{
+					"types": "ror_display",
+					"value": "Niagara Association of Medicine"
+				}
+			]
+		}
+	],
+	"itemsMax": 10
+}