@financial-times/o-autocomplete 1.9.2 → 2.0.0

package/demos/src/dynamic-custom-highlighted-suggestion/dynamic-custom-highlighted-suggestion.js

@@ -0,0 +1,127 @@
+import Autocomplete from '../../../main.js';
+import {data} from './data.js';
+import oForms from '@financial-times/o-forms';
+oForms.init();
+/**
+ * @typedef {object} CustomOption
+ * @property {string} Continent_Code - 2 letter continent code
+ * @property {string} Continent_Name - name of continent
+ * @property {string} Country_Name - name of country
+ * @property {number} Country_Number - id of country
+ * @property {string} Three_Letter_Country_Code - three letter country code
+ * @property {string} Two_Letter_Country_Code - two letter country code
+ */
+
+/**
+ * @param {CustomOption} option - The option to transform into a suggestion string
+ * @returns {string} The string to display in the suggestions dropdown for this option
+ */
+function mapOptionToSuggestedValue(option) {
+	if (typeof option !== 'object') {
+		throw new Error(`Could not map option to suggested value, unexpected type: ${typeof option}.`);
+	}
+
+	if (typeof option.Country_Name !== 'string') {
+		throw new Error(`Could not map option to suggested value, option.Country_Name is not a string`);
+	}
+
+	return option.Country_Name;
+}
+
+/**
+ * @typedef CharacterHighlight - The character and whether it should be highlighted
+ * @type {Array}
+ * @property {string} 0 - the character in the suggestion
+ * @property {boolean} 1 - should it be highlighted?
+ */
+
+/**
+ * @param {string} suggestion - Text which is going to be suggested to the user
+ * @param {string} query - Text which was typed into the autocomplete text input field by the user
+ * @returns {CharacterHighlight[]} An array of arrays which contain two items, the first is the character in the suggestion, the second is a boolean which indicates whether the character should be highlighted.
+ */
+function highlightSuggestion(suggestion, query) {
+	const result = suggestion.split('');
+
+	const matchIndex = suggestion.toLocaleLowerCase().indexOf(query.toLocaleLowerCase());
+	return result.map(function(character, index) {
+		let shouldHighlight = true;
+		const hasMatched = matchIndex > -1;
+		const characterIsWithinMatch = index >= matchIndex && index <= matchIndex + query.length - 1;
+		if (hasMatched && characterIsWithinMatch) {
+			shouldHighlight = false;
+		}
+		return [character, shouldHighlight];
+	});
+}
+
+/**
+ * @param {CustomOption} option - The option to transform into a suggestion string
+ * @param {string} [query] - Text which was typed into the autocomplete text input field by the user
+ * @returns {string} The string to display in the suggestions dropdown for this option
+ */
+function suggestionTemplate(option, query) {
+	if(typeof option === 'string') return option;
+
+	/**
+	 * @type {CharacterHighlight[]} An array of arrays which contain two items, the first is the character in the suggestion, the second is a boolean which indicates whether the character should be highlighted.
+	 */
+	const characters = highlightSuggestion(option.name, query || option.name);
+
+	let output = '';
+	for (const [character, shoudHighlight] of characters) {
+		if (shoudHighlight) {
+			output += `<span class="o-autocomplete__option--highlight">${character}</span>`;
+		} else {
+			output += `${character}`;
+		}
+	}
+	output += ` <span>(${option.Continent_Name})</span>`;
+
+	const span = document.createElement('span');
+	span.setAttribute('aria-label', option.Country_Name);
+	span.innerHTML = output;
+	return span.outerHTML;
+}
+
+/**
+ * @typedef {Function} PopulateOptions
+ * @property {Array<string>} options - The options which match the rext which was typed into the autocomplete by the user
+ */
+
+/**
+ * @param {string} query - Text which was typed into the autocomplete by the user
+ * @param {PopulateOptions} populateOptions - Function to call when ready to update the suggestions dropdown
+ * @returns {void}
+ */
+function customSuggestions(query, populateOptions) {
+	const suggestions = data;
+
+	if (!query) {
+		populateOptions([]);
+		return;
+	}
+	suggestions.sort(function(a,b) {
+		return a.Country_Name.localeCompare(b.Country_Name);
+	});
+
+	const filteredOptions = [];
+	for (const suggestion of suggestions) {
+		const lowercaseSuggestion = suggestion.Country_Name.toLocaleLowerCase();
+		if (lowercaseSuggestion.startsWith(query.toLocaleLowerCase())) {
+			filteredOptions.push(suggestion);
+		}
+	}
+	populateOptions(filteredOptions);
+}
+
+new Autocomplete(document.querySelector('[data-o-component="o-autocomplete"]'), {
+	source: customSuggestions,
+	suggestionTemplate,
+	mapOptionToSuggestedValue,
+	defaultValue: data.find((d) => d['Two_Letter_Country_Code'] === 'GB')?.Country_Name,
+	onConfirm: function (option) {
+		// eslint-disable-next-line no-console
+		console.log('You chose option', option);
+	}
+});

package/demos/src/dynamic-custom-highlighted-suggestion/dynamic-custom-highlighted-suggestion.mustache

@@ -0,0 +1,14 @@
+<form data-o-component="o-forms">
+    <div class="o-forms-field">
+        <span class="o-forms-title">
+            <label for="my-autocomplete" class="o-forms-title__main">Select your country</label>
+        </span>
+        <span class="o-forms-input o-forms-input--text">
+            <span data-o-component="o-autocomplete" class="o-autocomplete">
+                <!-- If the JavaScript executes, then this input will be progressively enhanced to an autocomplete component -->
+                <input required type="text" name="text-example" id="my-autocomplete">
+            </span>
+            <span role="alert" class="o-forms-input__error">Please fill out this field</span>
+        </span>
+    </div>
+</form>

package/demos/src/dynamic-custom-suggestion/dynamic-custom-suggestion.js

@@ -29,9 +29,10 @@ function mapOptionToSuggestedValue(option) {
 }
 /**
  * @param {CustomOption} option - The option to transform into a suggestion string
+ * @param {string} [query] - Text which was typed into the autocomplete text input field by the user
  * @returns {string} The string to display in the suggestions dropdown for this option
  */
-function suggestionTemplate(option) {
+function suggestionTemplate(option, query) { //eslint-disable-line no-unused-vars
 	if(typeof option === 'string') return option;
 	return `<div>
 		<strong>${option.Country_Name}</strong>

package/main.scss

@@ -1,13 +1,7 @@
 @import '@financial-times/math';
 @import '@financial-times/o-brand/main';
-@import '@financial-times/o-colors/main';
-@import '@financial-times/o-grid/main';
-@import '@financial-times/o-icons/main';
 @import '@financial-times/o-loading/main';
-@import '@financial-times/o-normalise/main';
-@import '@financial-times/o-spacing/main';
-@import '@financial-times/o-typography/main';
-@import '@financial-times/o-visual-effects/main';
+@import '@financial-times/o-private-foundation/main';
 
 @import 'src/scss/variables';
 @import 'src/scss/brand';
@@ -19,7 +13,8 @@
 ///		@include oAutocomplete($opts: (
 ///			// your opts here
 ///		))
-@mixin oAutocomplete ($opts: ()) {
+@mixin oAutocomplete($opts: ()) {
+	@include oPrivateFoundation();
 	// content of primary mixin
 	.o-autocomplete {
 		position: relative;
@@ -27,17 +22,21 @@
 	}
 
 	.o-autocomplete__listbox-container {
-		@include oTypographySans($scale: 0);
+		@include oPrivateTypographySans($scale: 0);
 		grid-row: 1;
 		grid-column: 1;
 	}
 
 	.o-autocomplete__visually-hidden {
-		@include oNormaliseVisuallyHidden;
+		@include oPrivateNormaliseVisuallyHidden;
 	}
 
 	.o-autocomplete__clear {
-		@include oIconsContent('cross', _oAutocompleteGet('search-close'), $size: $_o-autocomplete-icon-size);
+		@include oPrivateIconsContent(
+			'cross',
+			_oAutocompleteGet('search-close'),
+			$size: $_o-autocomplete-icon-size
+		);
 		border: 0;
 		padding: 0;
 		appearance: none;
@@ -47,7 +46,9 @@
 		align-self: center;
 		justify-self: end;
 
-		$margin-size: calc(#{$_o-autocomplete-input-space} - #{$_o-autocomplete-icon-size-excess-whitespace});
+		$margin-size: calc(
+			#{$_o-autocomplete-input-space} - #{$_o-autocomplete-icon-size-excess-whitespace}
+		);
 		margin-left: $margin-size;
 		margin-right: $margin-size;
 
@@ -60,7 +61,9 @@
 		box-sizing: border-box;
 		// This is to make the input stop before the clear button.
 		// Without this, the input's text would flow behind the clear button.
-		padding-right: calc(#{$_o-autocomplete-icon-size} + #{$_o-autocomplete-input-space * 2});
+		padding-right: calc(
+			#{$_o-autocomplete-icon-size} + #{$_o-autocomplete-input-space * 2}
+		);
 	}
 
 	.o-autocomplete__input::-ms-clear {
@@ -68,18 +71,18 @@
 	}
 
 	.o-autocomplete__menu {
-		@include oVisualEffectsShadowContent('high');
-		top: oSpacingByName('s1');
-		background-color: oColorsByName('white');
+		@include oPrivateVisualEffectsShadowContent('high');
+		top: oPrivateSpacingByName('s1');
+		background-color: oPrivateFoundationGet('o3-color-palette-white');
 		border-top: 0;
-		color: oColorsByName('black');
+		color: oPrivateFoundationGet('o3-color-palette-black');
 		margin: 0;
 		max-height: 200px; // Make this configurable as it decides how many rows to show
 		overflow-x: hidden;
-		padding-left: oSpacingByName('s2');
-		padding-right: oSpacingByName('s2');
-		padding-top: oSpacingByName('s4');
-		padding-bottom: oSpacingByName('s4');
+		padding-left: oPrivateSpacingByName('s2');
+		padding-right: oPrivateSpacingByName('s2');
+		padding-top: oPrivateSpacingByName('s4');
+		padding-bottom: oPrivateSpacingByName('s4');
 		width: 100%;
 	}
 
@@ -96,7 +99,7 @@
 	}
 
 	.o-autocomplete__menu--overlay {
-		@include oVisualEffectsShadowContent('high');
+		@include oPrivateVisualEffectsShadowContent('high');
 		box-sizing: border-box;
 	}
 
@@ -110,10 +113,10 @@
 		cursor: pointer;
 		display: block;
 		position: relative;
-		padding-left: oSpacingByName('s1');
-		padding-right: oSpacingByName('s1');
-		padding-top: oSpacingByName('s2');
-		padding-bottom: oSpacingByName('s2');
+		padding-left: oPrivateSpacingByName('s1');
+		padding-right: oPrivateSpacingByName('s1');
+		padding-top: oPrivateSpacingByName('s2');
+		padding-bottom: oPrivateSpacingByName('s2');
 	}
 
 	.o-autocomplete__option > * {
@@ -130,15 +133,22 @@
 
 	.o-autocomplete__option--focused,
 	.o-autocomplete__option:hover {
-		background-color: oColorsByName('teal');
-		border-color: oColorsByName('teal');
-		color: oColorsByName('white');
+		background-color: oPrivateFoundationGet('o3-color-palette-teal');
+		border-color: oPrivateFoundationGet('o3-color-palette-teal');
+		color: oPrivateFoundationGet('o3-color-palette-white');
 		outline: none;
 	}
 
 	.o-autocomplete__option--no-results {
-		background-color: oColorsMix(white, black, 98); // #fafafa
-		color: oColorsGetTextColor(oColorsMix(white, black, 98), $minimum-contrast: 'aa-normal');
+		background-color: oPrivateColorsMix(
+			'o3-color-palette-white',
+			'o3-color-palette-black',
+			98
+		); // #fafafa
+		color: oPrivateColorsGetTextColor(
+			oPrivateColorsMix('o3-color-palette-white', 'o3-color-palette-black', 98),
+			$minimum-contrast: 'aa-normal'
+		);
 		cursor: not-allowed;
 	}
 
@@ -146,12 +156,13 @@
 		font-weight: bolder;
 	}
 
-
 	.o-autocomplete__menu-loading {
-		@include oLoadingContent($opts: (
-			size: 'mini',
-			theme: 'dark'
-		));
+		@include oLoadingContent(
+			$opts: (
+				size: 'mini',
+				theme: 'dark',
+			)
+		);
 	}
 
 	// `.o-autocomplete__menu-loading` is declared twice intentionally.
@@ -163,21 +174,20 @@
 		grid-row: 2;
 	}
 	.o-autocomplete__menu-loading-container {
-		@include oVisualEffectsShadowContent('high');
+		@include oPrivateVisualEffectsShadowContent('high');
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		padding: oSpacingByName('s2');
+		padding: oPrivateSpacingByName('s2');
 		box-sizing: border-box;
 		min-height: 40px;
-		background-color: oColorsByName('white');
+		background-color: oPrivateFoundationGet('o3-color-palette-white');
 	}
 
-
 	.o-autocomplete__menu-loading-container,
 	.o-autocomplete__menu--overlay {
 		position: absolute;
-		top: calc(100% + #{oSpacingByName('s1')});
+		top: calc(100% + #{oPrivateSpacingByName('s1')});
 		left: 0;
 		right: 0;
 		z-index: 100;

package/origami.json

@@ -61,6 +61,14 @@
 			"js": "demos/src/dynamic-custom-suggestion/dynamic-custom-suggestion.js",
 			"hidden": true
 		},
+		{
+			"title": "Autocomplete with custom highlighted suggestion items",
+			"name": "dynamic-custom-highlighted-suggestions",
+			"template": "demos/src/dynamic-custom-highlighted-suggestion/dynamic-custom-highlighted-suggestion.mustache",
+			"description": "The source function returns objects and the suggestionTemplate transforms the objects into custom highlighted HTML suggestions",
+			"js": "demos/src/dynamic-custom-highlighted-suggestion/dynamic-custom-highlighted-suggestion.js",
+			"hidden": true
+		},
 		{
 			"title": "Pa11y",
 			"name": "pa11y",

package/package.json

@@ -1,53 +1,47 @@
 {
-  "name": "@financial-times/o-autocomplete",
-  "version": "1.9.2",
-  "description": "An origami component for autocomplete inputs",
-  "keywords": [
-    "autocomplete",
-    "typeahead"
-  ],
-  "homepage": "https://registry.origami.ft.com/components/o-autocomplete",
-  "bugs": {
-    "url": "https://github.com/Financial-Times/origami/issues/new?labels=o-autocomplete,components",
-    "email": "origami.support@ft.com",
-    "slack": "#origami-support"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Financial-Times/o-autocomplete.git"
-  },
-  "license": "MIT",
-  "type": "module",
-  "browser": "main.js",
-  "scripts": {
-    "build": "bash ../../scripts/component/build.bash",
-    "test": "bash ../../scripts/component/test.bash",
-    "debug:js": "bash ../../scripts/component/debug-js.bash",
-    "lint": "bash ../../scripts/component/lint.bash",
-    "watch": "bash ../../scripts/component/watch.bash"
-  },
-  "engines": {
-    "npm": ">7"
-  },
-  "peerDependencies": {
-    "@financial-times/math": "^1.0.0",
-    "@financial-times/o-brand": "^4.1.0",
-    "@financial-times/o-colors": "^6.5.0",
-    "@financial-times/o-grid": "^6.0.0",
-    "@financial-times/o-icons": "^7.0.1",
-    "@financial-times/o-loading": "^5.0.0",
-    "@financial-times/o-normalise": "^3.3.0",
-    "@financial-times/o-spacing": "^3.0.0",
-    "@financial-times/o-typography": "^7.4.1",
-    "@financial-times/o-visual-effects": "^4.0.1"
-  },
-  "devDependencies": {
-    "@financial-times/o-forms": "^9.9.0",
-    "@financial-times/o-normalise": "^3.3.0",
-    "@financial-times/o-utils": "^2.1.0"
-  },
-  "dependencies": {
-    "@financial-times/accessible-autocomplete": "^3.0.0"
-  },
-  "private": false
+	"name": "@financial-times/o-autocomplete",
+	"version": "2.0.0",
+	"description": "An origami component for autocomplete inputs",
+	"keywords": [
+		"autocomplete",
+		"typeahead"
+	],
+	"homepage": "https://registry.origami.ft.com/components/o-autocomplete",
+	"bugs": {
+		"url": "https://github.com/Financial-Times/origami/issues/new?labels=o-autocomplete,components",
+		"email": "origami.support@ft.com",
+		"slack": "#origami-support"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/Financial-Times/o-autocomplete.git"
+	},
+	"license": "MIT",
+	"type": "module",
+	"browser": "main.js",
+	"scripts": {
+		"build": "bash ../../scripts/component/build.bash",
+		"test": "bash ../../scripts/component/test.bash",
+		"debug:js": "bash ../../scripts/component/debug-js.bash",
+		"lint": "bash ../../scripts/component/lint.bash",
+		"watch": "bash ../../scripts/component/watch.bash"
+	},
+	"engines": {
+		"npm": ">7"
+	},
+	"peerDependencies": {
+		"@financial-times/math": "^1.0.0",
+		"@financial-times/o-brand": "^4.1.0",
+		"@financial-times/o-loading": "^6.0.0",
+		"@financial-times/o-private-foundation": "^1.0.0"
+	},
+	"devDependencies": {
+		"@financial-times/o-forms": "^10.0.0",
+		"@financial-times/o-normalise": "^3.3.2",
+		"@financial-times/o-utils": "^2.1.0"
+	},
+	"dependencies": {
+		"@financial-times/accessible-autocomplete": "^3.1.0"
+	},
+	"private": false
 }

package/src/js/autocomplete.js

@@ -3,10 +3,6 @@
 // Below are the pull-requests to accessible-autocomplete which would fix the bugs:
 // https://github.com/alphagov/accessible-autocomplete/pull/491
 // If the above pull-requests are merged and published, then we can stop using our fork
-// though switching to alphagov/accessible-autocomplete will require that consumers
-// applying `aria-labelledby` to the `ul` element
-// via the `ariaLabelledBy` option (https://github.com/Financial-Times/accessible-autocomplete/pull/6)
-// instead do so via the `menuAttributes` option (https://github.com/alphagov/accessible-autocomplete/pull/591)
 import accessibleAutocomplete from '@financial-times/accessible-autocomplete';
 
 /**
@@ -19,7 +15,7 @@ import accessibleAutocomplete from '@financial-times/accessible-autocomplete';
 
 /**
  * @param {string} suggestion - Text which is going to be suggested to the user
- * @param {string} query - Text which was typed into the autocomplete by the user
+ * @param {string} query - Text which was typed into the autocomplete text input field by the user
  * @returns {CharacterHighlight[]} An array of arrays which contain two items, the first is the character in the suggestion, the second is a boolean which indicates whether the character should be highlighted.
  */
 function highlightSuggestion(suggestion, query) {
@@ -293,13 +289,14 @@ class Autocomplete {
 					 * Used when rendering suggestions, the return value of this will be used as the innerHTML for a single suggestion.
 					 *
 					 * @param {*} option The suggestion to apply the template with.
+					 * @param {string} query Text which was typed into the autocomplete text input field by the user.
 					 * @returns {string|undefined} HTML string to represent a single suggestion.
 					 */
-					suggestion: (option) => {
+					suggestion: (option, query) => {
 						// If the suggestionTemplate override option is provided,
 						// use that to render the suggestion.
 						if(typeof this.options.suggestionTemplate === 'function') {
-							return this.options.suggestionTemplate(option);
+							return this.options.suggestionTemplate(option, query);
 						}
 						if (typeof option === 'object') {
 							// If the `mapOptionToSuggestedValue` function is defined

package/src/scss/_brand.scss

@@ -13,7 +13,7 @@
 @if oBrandIs('core') {
 	@include oBrandDefine('o-autocomplete', 'core', (
 		'variables': (
-			search-close: oColorsByName('black-80'),
+			search-close: oPrivateFoundationGet('o3-color-palette-black-80'),
 		),
 		'supports-variants': ()
 	));
@@ -22,7 +22,7 @@
 @if oBrandIs('internal') {
 	@include oBrandDefine('o-autocomplete', 'internal', (
 		'variables': (
-			search-close: oColorsByName('black-80'),
+			search-close: oPrivateFoundationGet('o3-color-palette-black-80'),
 		),
 		'supports-variants': ()
 	));

package/src/scss/_variables.scss

@@ -1,3 +1,3 @@
 $_o-autocomplete-icon-size: 25px;
 $_o-autocomplete-icon-size-excess-whitespace: div($_o-autocomplete-icon-size, 4);
-$_o-autocomplete-input-space: oSpacingByName("s2"); // match o-forms, without a direct dependency
+$_o-autocomplete-input-space: oPrivateSpacingByName("s2"); // match o-forms, without a direct dependency