@financial-times/o-autocomplete 1.3.2 → 1.6.0

package/.prettierrc.toml

@@ -0,0 +1,8 @@
+printWidth = 80
+trailingComma = "es5"
+semi = true
+singleQuote = true
+useTabs = true
+bracketSpacing = false
+jsxBracketSameLine = true
+arrowParens = "avoid"

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## [1.6.0](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.5.0...o-autocomplete-v1.6.0) (2021-12-09)
+
+
+### Features
+
+* support internal brand on o-autocomplete ([f519cf8](https://www.github.com/Financial-Times/origami/commit/f519cf8b668304ece9e0cc5e64940ad4295343ce))
+
+## [1.5.0](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.4.1...o-autocomplete-v1.5.0) (2021-11-24)
+
+
+### Features
+
+* allow npm 8 in engines config ([eeb1cae](https://www.github.com/Financial-Times/origami/commit/eeb1cae6e7f0379e647f2b41240b1f294997d528))
+
+### [1.4.1](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.4.0...o-autocomplete-v1.4.1) (2021-11-08)
+
+
+### Bug Fixes
+
+* pin components to latest o-brand, or greater ([3a6ccea](https://www.github.com/Financial-Times/origami/commit/3a6ccea1e838e4a2003322ca1f855d0b87b26b60))
+
+## [1.4.0](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.3.2...o-autocomplete-v1.4.0) (2021-11-08)
+
+
+### Features
+
+* Rename master brand in component origami.json ([f642faf](https://www.github.com/Financial-Times/origami/commit/f642faf0574d84ea8185b56e6090c8015def27e6))
+
 ### [1.3.2](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.3.1...o-autocomplete-v1.3.2) (2021-11-02)
 
 

package/demos/src/dynamic-complex/dynamic-complex.js

@@ -2,20 +2,19 @@ import Autocomplete from '../../../main.js';
 import {data} from './data.js';
 
 /**
- * @typedef {Object} CustomOption
- * @property {String} Continent_Code
- * @property {String} Continent_Name
- * @property {String} Country_Name
- * @property {Number} Country_Number
- * @property {String} Three_Letter_Country_Code
- * @property {String} Two_Letter_Country_Code
+ * @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|undefined} 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 (option) {
 		return option.Country_Name;
@@ -57,6 +56,7 @@ new Autocomplete(document.querySelector('[data-o-component="o-autocomplete"]'),
 	source: customSuggestions,
 	mapOptionToSuggestedValue,
 	onConfirm: function (option) {
+		// eslint-disable-next-line no-console
 		console.log('You chose option', option);
 	}
 });

package/main.scss

@@ -1,3 +1,4 @@
+@import '@financial-times/math';
 @import '@financial-times/o-brand/main';
 @import '@financial-times/o-colors/main';
 @import '@financial-times/o-grid/main';

package/origami.json

@@ -2,7 +2,8 @@
 	"origamiType": "component",
 	"origamiVersion": "2.0",
 	"brands": [
-		"master"
+	  "core",
+	  "internal"
 	],
 	"support": "https://github.com/Financial-Times/origami/issues/new?labels=o-autocomplete,components",
 	"supportContact": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/o-autocomplete",
-  "version": "1.3.2",
+  "version": "1.6.0",
   "description": "An origami component for autocomplete inputs",
   "keywords": [
     "autocomplete",
@@ -25,10 +25,11 @@
     "lint": "bash ../../scripts/component/lint.bash"
   },
   "engines": {
-    "npm": ">=7"
+    "npm": "^7 || ^8"
   },
   "peerDependencies": {
-    "@financial-times/o-brand": "^4.0.2",
+    "@financial-times/math": "^1.0.0",
+    "@financial-times/o-brand": "^4.1.0",
     "@financial-times/o-colors": "^6.0.1",
     "@financial-times/o-grid": "^6.0.0",
     "@financial-times/o-icons": "^7.0.1",
@@ -40,5 +41,7 @@
   },
   "dependencies": {
     "@financial-times/accessible-autocomplete": "^2.1.2"
-  }
+  },
+  "percy": true,
+  "private": false
 }

package/src/js/autocomplete.js

@@ -7,10 +7,18 @@
 // If the above pull-requests are merged and published, then we can stop using our fork
 import accessibleAutocomplete from '@financial-times/accessible-autocomplete';
 
+/**
+ * @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 by the user
- * @returns {[string, boolean][]} 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.
+ * @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('');
@@ -29,6 +37,7 @@ function highlightSuggestion(suggestion, query) {
 
 /**
  * Create DOM for the loading container.
+ *
  * @returns {HTMLDivElement} The loading container.
  */
 function createLoadingContainer() {
@@ -42,7 +51,8 @@ function createLoadingContainer() {
 
 /**
  * Show the loading panel
- * @param {AutoComplete} instance The autocomplete instance whose loading panel should be shown
+ *
+ * @param {Autocomplete} instance The autocomplete instance whose loading panel should be shown
  * @returns {void}
  */
 function showLoadingPane(instance) {
@@ -55,7 +65,8 @@ function showLoadingPane(instance) {
 
 /**
  * Hide the loading panel
- * @param {AutoComplete} instance The autocomplete instance whose loading panel should be hidden
+ *
+ * @param {Autocomplete} instance The autocomplete instance whose loading panel should be hidden
  * @returns {void}
  */
 function hideLoadingPane(instance) {
@@ -71,8 +82,9 @@ function hideLoadingPane(instance) {
 /**
  * Create the DOM tree which corresponds to
  * <button class="o-autocomplete__clear" type="button" aria-controls=${autocompleteEl.id} title="Clear input">
- * 	<span class="o-autocomplete__visually-hidden">Clear input</span>
+ *		<span class="o-autocomplete__visually-hidden">Clear input</span>
  * </button>
+ *
  * @param {string} id The id of the autocomplete input to associate the clear button with
  * @returns {HTMLButtonElement} The clear button DOM tree
  */
@@ -87,7 +99,8 @@ function createClearButton(id) {
 
 /**
  * Attach the clear button and corresponding event listeners to the o-autocomplete instance
- * @param {AutoComplete} instance The autocomplete instance to setup the clear button for
+ *
+ * @param {Autocomplete} instance The autocomplete instance to setup the clear button for
  * @returns {void}
  */
 function initClearButton(instance) {
@@ -144,22 +157,22 @@ function initClearButton(instance) {
  * @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}
-*/
+ */
 
 /**
  * @callback MapOptionToSuggestedValue
  * @param {*} option - The option to transform into a suggestion string
  * @returns {string} The string to display as the suggestions for this option
-*/
+ */
 
 /**
  * @callback onConfirm
  * @param {*} option - The option the user selected
  * @returns {void}
-*/
+ */
 
 /**
- * @typedef {Object} AutocompleteOptions
+ * @typedef {object} AutocompleteOptions
  * @property {Source} [source] - The function which retrieves the suggestions to display
  * @property {MapOptionToSuggestedValue} [mapOptionToSuggestedValue] - Function which transforms a suggestion before rendering
  * @property {onConfirm} [onConfirm] - Function which is called when the user selects an option
@@ -168,6 +181,7 @@ function initClearButton(instance) {
 class Autocomplete {
 	/**
 	 * Class constructor.
+	 *
 	 * @param {HTMLElement} [autocompleteEl] - The component element in the DOM
 	 * @param {AutocompleteOptions} [options={}] - An options object for configuring the component
 	 */
@@ -214,7 +228,7 @@ class Autocomplete {
 			 * @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}
-			*/
+			 */
 			this.options.source = (query, populateOptions) => {
 				showLoadingPane(this);
 				/**
@@ -256,6 +270,7 @@ class Autocomplete {
 				templates: {
 					/**
 					 * 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.
 					 * @returns {string} HTML string to represent a single suggestion.
 					 */
@@ -279,6 +294,7 @@ class Autocomplete {
 					},
 					/**
 					 * Used when a suggestion is selected, the return value of this will be used as the value for the input element.
+					 *
 					 * @param {*} option The suggestion which was selected.
 					 * @returns {string} String to represent the suggestion.
 					 */
@@ -340,13 +356,14 @@ class Autocomplete {
 
 	/**
 	 * Used when rendering suggestions, the return value of this will be used as the innerHTML for a single suggestion.
+	 *
 	 * @param {string} suggestedValue The suggestion to apply the template with.
 	 * @returns {string} HTML string to be represent a single suggestion.
 	 */
 	suggestionTemplate (suggestedValue) {
 		// o-autocomplete has a UI design to highlight characters in the suggestions.
 		/**
-		 * @type {[string, boolean][]} 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.
+		 * @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(suggestedValue, this.autocompleteEl.querySelector('input').value);
 
@@ -367,8 +384,9 @@ class Autocomplete {
 	/**
 	 * Get the data attributes from the AutocompleteElement. If the element is being set up
 	 * declaratively, this method is used to extract the data attributes from the DOM.
+	 *
 	 * @param {HTMLElement} autocompleteEl - The component element in the DOM
-	 * @returns {Object} An options object which can be used for configuring the component
+	 * @returns {object} An options object which can be used for configuring the component
 	 */
 	static getDataAttributes (autocompleteEl) {
 		if (!(autocompleteEl instanceof HTMLElement)) {
@@ -385,8 +403,9 @@ class Autocomplete {
 	}
 	/**
 	 * Initialise o-autocomplete component/s.
-	 * @param {(HTMLElement|String)} rootElement - The root element to intialise the component in, or a CSS selector for the root element
-	 * @param {Object} [options={}] - An options object for configuring the component
+	 *
+	 * @param {(HTMLElement | string)} rootElement - The root element to intialise the component in, or a CSS selector for the root element
+	 * @param {object} [options={}] - An options object for configuring the component
 	 * @returns {Autocomplete|Autocomplete[]} The newly constructed Autocomplete components
 	 */
 	static init (rootElement, options) {

package/src/scss/_brand.scss

@@ -18,3 +18,12 @@
 		'supports-variants': ()
 	));
 }
+
+@if oBrandIs('internal') {
+	@include oBrandDefine('o-autocomplete', 'internal', (
+		'variables': (
+			search-close: oColorsByName('black-80'),
+		),
+		'supports-variants': ()
+	));
+}

package/src/scss/_variables.scss

@@ -1,3 +1,3 @@
 $_o-autocomplete-icon-size: 25px;
-$_o-autocomplete-icon-size-excess-whitespace: $_o-autocomplete-icon-size / 4;
+$_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

package/app.json

@@ -1,12 +0,0 @@
-{
-  "name": "o-autocomplete",
-  "scripts": {},
-  "env": {},
-  "formation": {},
-  "addons": [],
-  "buildpacks": [
-    {
-      "url": "heroku/nodejs"
-    }
-  ]
-}