@financial-times/o-autocomplete 1.10.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +46 -41
  2. package/MIGRATION.md +18 -0
  3. package/README.md +130 -111
  4. package/main.scss +51 -41
  5. package/package.json +45 -51
  6. package/src/scss/_brand.scss +2 -2
  7. package/src/scss/_variables.scss +1 -1
package/CHANGELOG.md CHANGED
@@ -1,137 +1,142 @@
1
1
  # Changelog
2
2
 
3
- ## [1.10.0](https://github.com/Financial-Times/origami/compare/o-autocomplete-v1.9.2...o-autocomplete-v1.10.0) (2024-04-19)
3
+ ## [2.0.0](https://github.com/Financial-Times/origami/compare/o-autocomplete-v1.10.0...o-autocomplete-v2.0.0) (2025-02-20)
4
+
5
+ ### ⚠ BREAKING CHANGES
6
+
7
+ This introduces a new design language and visually breaking changes. Including mobile optimised typography, icons, and buttons (see [MIGRATION.md](./MIGRATION.md)).
8
+
9
+ #### Origami 3: Principles, Purpose, and Impact
10
+
11
+ For anyone in P&T. We covered what’s new in Origami 3 (o3), why it matters, and what’s next.
12
+
13
+ [Slides](https://docs.google.com/presentation/d/1Qs8RHpMrDxxP5LyrVlnsUHnS3AriRK5-IboUeneRyMs/edit#slide=id.g764506c38c_0_357) | [Recording](https://drive.google.com/file/d/1OMW9zdTOEUvWyW1trsFqL3XhpTejYelO/view)
14
+
15
+ #### Origami 3: Bridging design & code
16
+
17
+ For designers and engineers alike. How to work with design guidelines, design foundations, and techniques for designer–engineer collaboration.
4
18
 
19
+ [Slides](https://docs.google.com/presentation/d/1pGBKFNv-g8RbY2g3SJ7v823XBI-MQqpjHrdgg9B6bzI/edit#slide=id.g764506c38c_0_357) | [Recording](https://drive.google.com/file/d/14hWVKM690arNEWROPHx9gmebnOUa6wlM/view)
20
+
21
+ #### Origami 3: Engineers’ Deep Dive
22
+
23
+ We got into the technical detail. Working with Origami CSS (no more Sass), custom elements, JSX templates, etc.
24
+
25
+ [Slides](https://docs.google.com/presentation/d/1s1S959CwZYnd0Q89EhsDFLFUuy2HZ9UnpBVaDHDFX7A/edit#slide=id.g3347c4befb5_0_402) | [Recording](https://drive.google.com/file/d/1hDtSN8Ce_P0Vr_dv0KXuXhs5Q9aHfvAp/view)
26
+
27
+ ## [1.10.0](https://github.com/Financial-Times/origami/compare/o-autocomplete-v1.9.2...o-autocomplete-v1.10.0) (2024-04-19)
5
28
 
6
29
  ### Features
7
30
 
8
- * Enable highlighting of custom suggestions ([#1516](https://github.com/Financial-Times/origami/issues/1516)) ([c326099](https://github.com/Financial-Times/origami/commit/c3260998c4a8926f875e7ba95134b230ca517669))
31
+ - Enable highlighting of custom suggestions ([#1516](https://github.com/Financial-Times/origami/issues/1516)) ([c326099](https://github.com/Financial-Times/origami/commit/c3260998c4a8926f875e7ba95134b230ca517669))
9
32
 
10
33
  ## [1.9.2](https://github.com/Financial-Times/origami/compare/o-autocomplete-v1.9.1...o-autocomplete-v1.9.2) (2024-04-12)
11
34
 
12
-
13
35
  ### Bug Fixes
14
36
 
15
- * Update financial-times/accessible-autocomplete ([#1524](https://github.com/Financial-Times/origami/issues/1524)) ([8bcd024](https://github.com/Financial-Times/origami/commit/8bcd02402f3fa50e35756d3eb2a22b10435d634b))
37
+ - Update financial-times/accessible-autocomplete ([#1524](https://github.com/Financial-Times/origami/issues/1524)) ([8bcd024](https://github.com/Financial-Times/origami/commit/8bcd02402f3fa50e35756d3eb2a22b10435d634b))
16
38
 
17
39
  ## [1.9.1](https://github.com/Financial-Times/origami/compare/o-autocomplete-v1.9.0...o-autocomplete-v1.9.1) (2023-10-27)
18
40
 
19
-
20
41
  ### Bug Fixes
21
42
 
22
- * Update node and npm ([c371fc3](https://github.com/Financial-Times/origami/commit/c371fc3f7f2d66266dbca95862ecef3ddeb1f339))
43
+ - Update node and npm ([c371fc3](https://github.com/Financial-Times/origami/commit/c371fc3f7f2d66266dbca95862ecef3ddeb1f339))
23
44
 
24
45
  ## [1.9.0](https://github.com/Financial-Times/origami/compare/o-autocomplete-v1.8.1...o-autocomplete-v1.9.0) (2023-09-08)
25
46
 
26
-
27
47
  ### Features
28
48
 
29
- * Add an `autoselect` option ([c414db4](https://github.com/Financial-Times/origami/commit/c414db4780e8f74bffb25e9a04004c4d450077f4))
49
+ - Add an `autoselect` option ([c414db4](https://github.com/Financial-Times/origami/commit/c414db4780e8f74bffb25e9a04004c4d450077f4))
30
50
 
31
51
  ## [1.8.1](https://github.com/Financial-Times/origami/compare/o-autocomplete-v1.8.0...o-autocomplete-v1.8.1) (2023-08-25)
32
52
 
33
-
34
53
  ### Bug Fixes
35
54
 
36
- * update o-typography dependency ([fb45b47](https://github.com/Financial-Times/origami/commit/fb45b47274241ea828f7dd50233441a76a215a51))
55
+ - update o-typography dependency ([fb45b47](https://github.com/Financial-Times/origami/commit/fb45b47274241ea828f7dd50233441a76a215a51))
37
56
 
38
57
  ## [1.8.0](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.7.4...o-autocomplete-v1.8.0) (2023-05-30)
39
58
 
40
-
41
59
  ### Features
42
60
 
43
- * autocomplete, add a suggestionTemplate override option ([23e1397](https://www.github.com/Financial-Times/origami/commit/23e1397deb29034faaf009c16e41ab169dcc3a42))
61
+ - autocomplete, add a suggestionTemplate override option ([23e1397](https://www.github.com/Financial-Times/origami/commit/23e1397deb29034faaf009c16e41ab169dcc3a42))
44
62
 
45
63
  ### [1.7.4](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.7.3...o-autocomplete-v1.7.4) (2023-04-28)
46
64
 
47
-
48
65
  ### Bug Fixes
49
66
 
50
- * Require latest minor version of o-colors, o-buttons, and o-forms ([#1098](https://www.github.com/Financial-Times/origami/issues/1098)) ([b856ca6](https://www.github.com/Financial-Times/origami/commit/b856ca66c9ec555f3c70833ffa35cb05cd19841f))
67
+ - Require latest minor version of o-colors, o-buttons, and o-forms ([#1098](https://www.github.com/Financial-Times/origami/issues/1098)) ([b856ca6](https://www.github.com/Financial-Times/origami/commit/b856ca66c9ec555f3c70833ffa35cb05cd19841f))
51
68
 
52
69
  ### [1.7.3](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.7.2...o-autocomplete-v1.7.3) (2023-01-20)
53
70
 
54
-
55
71
  ### Bug Fixes
56
72
 
57
- * ensure components depend on the latest o-normalise version ([e910236](https://www.github.com/Financial-Times/origami/commit/e910236454318ce1bf198a06da7e76c0893c9142))
73
+ - ensure components depend on the latest o-normalise version ([e910236](https://www.github.com/Financial-Times/origami/commit/e910236454318ce1bf198a06da7e76c0893c9142))
58
74
 
59
75
  ### [1.7.2](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.7.1...o-autocomplete-v1.7.2) (2022-12-21)
60
76
 
61
-
62
77
  ### Bug Fixes
63
78
 
64
- * require 3.3.0 or higher ([fc180c6](https://www.github.com/Financial-Times/origami/commit/fc180c619755daa1b7bfe65509f354cf0de113bf))
79
+ - require 3.3.0 or higher ([fc180c6](https://www.github.com/Financial-Times/origami/commit/fc180c619755daa1b7bfe65509f354cf0de113bf))
65
80
 
66
81
  ### [1.7.1](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.7.0...o-autocomplete-v1.7.1) (2022-12-08)
67
82
 
68
-
69
83
  ### Bug Fixes
70
84
 
71
- * handle dynamic input changes when validating forms ([69ac478](https://www.github.com/Financial-Times/origami/commit/69ac4780922aded1dd4ce9b62b8437c454f0adba))
85
+ - handle dynamic input changes when validating forms ([69ac478](https://www.github.com/Financial-Times/origami/commit/69ac4780922aded1dd4ce9b62b8437c454f0adba))
72
86
 
73
87
  ## [1.7.0](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.6.2...o-autocomplete-v1.7.0) (2022-09-14)
74
88
 
75
-
76
89
  ### Features
77
90
 
78
- * autocomplete, add a `defaultValue` for a default input value ([#812](https://www.github.com/Financial-Times/origami/issues/812)) ([70a77ae](https://www.github.com/Financial-Times/origami/commit/70a77ae218c9c19967fe3bb32c18206d7cd9c2c3))
91
+ - autocomplete, add a `defaultValue` for a default input value ([#812](https://www.github.com/Financial-Times/origami/issues/812)) ([70a77ae](https://www.github.com/Financial-Times/origami/commit/70a77ae218c9c19967fe3bb32c18206d7cd9c2c3))
79
92
 
80
93
  ### [1.6.2](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.6.1...o-autocomplete-v1.6.2) (2022-04-21)
81
94
 
82
-
83
95
  ### Bug Fixes
84
96
 
85
- * Adds basic existence checking to most module entry points ([#714](https://www.github.com/Financial-Times/origami/issues/714)) ([7ba3a61](https://www.github.com/Financial-Times/origami/commit/7ba3a61d0de2a32d3a27a225fd4258b3820c7bda))
97
+ - Adds basic existence checking to most module entry points ([#714](https://www.github.com/Financial-Times/origami/issues/714)) ([7ba3a61](https://www.github.com/Financial-Times/origami/commit/7ba3a61d0de2a32d3a27a225fd4258b3820c7bda))
86
98
 
87
99
  ### [1.6.1](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.6.0...o-autocomplete-v1.6.1) (2022-01-13)
88
100
 
89
-
90
101
  ### Bug Fixes
91
102
 
92
- * expand all uses of docs to documentation ([26f8d9d](https://www.github.com/Financial-Times/origami/commit/26f8d9d8cbbe3e78902d8c3951b37e08150a77bd))
103
+ - expand all uses of docs to documentation ([26f8d9d](https://www.github.com/Financial-Times/origami/commit/26f8d9d8cbbe3e78902d8c3951b37e08150a77bd))
93
104
 
94
105
  ## [1.6.0](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.5.0...o-autocomplete-v1.6.0) (2021-12-09)
95
106
 
96
-
97
107
  ### Features
98
108
 
99
- * support internal brand on o-autocomplete ([f519cf8](https://www.github.com/Financial-Times/origami/commit/f519cf8b668304ece9e0cc5e64940ad4295343ce))
109
+ - support internal brand on o-autocomplete ([f519cf8](https://www.github.com/Financial-Times/origami/commit/f519cf8b668304ece9e0cc5e64940ad4295343ce))
100
110
 
101
111
  ## [1.5.0](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.4.1...o-autocomplete-v1.5.0) (2021-11-24)
102
112
 
103
-
104
113
  ### Features
105
114
 
106
- * allow npm 8 in engines config ([eeb1cae](https://www.github.com/Financial-Times/origami/commit/eeb1cae6e7f0379e647f2b41240b1f294997d528))
115
+ - allow npm 8 in engines config ([eeb1cae](https://www.github.com/Financial-Times/origami/commit/eeb1cae6e7f0379e647f2b41240b1f294997d528))
107
116
 
108
117
  ### [1.4.1](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.4.0...o-autocomplete-v1.4.1) (2021-11-08)
109
118
 
110
-
111
119
  ### Bug Fixes
112
120
 
113
- * pin components to latest o-brand, or greater ([3a6ccea](https://www.github.com/Financial-Times/origami/commit/3a6ccea1e838e4a2003322ca1f855d0b87b26b60))
121
+ - pin components to latest o-brand, or greater ([3a6ccea](https://www.github.com/Financial-Times/origami/commit/3a6ccea1e838e4a2003322ca1f855d0b87b26b60))
114
122
 
115
123
  ## [1.4.0](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.3.2...o-autocomplete-v1.4.0) (2021-11-08)
116
124
 
117
-
118
125
  ### Features
119
126
 
120
- * Rename master brand in component origami.json ([f642faf](https://www.github.com/Financial-Times/origami/commit/f642faf0574d84ea8185b56e6090c8015def27e6))
127
+ - Rename master brand in component origami.json ([f642faf](https://www.github.com/Financial-Times/origami/commit/f642faf0574d84ea8185b56e6090c8015def27e6))
121
128
 
122
129
  ### [1.3.2](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.3.1...o-autocomplete-v1.3.2) (2021-11-02)
123
130
 
124
-
125
131
  ### Bug Fixes
126
132
 
127
- * correct o-autocomplete markup ([f3d73b6](https://www.github.com/Financial-Times/origami/commit/f3d73b623d19bdfb7fac507cd40712d0032648fb))
128
- * Update `o-brand` in components, replace "master" with "core" ([322617e](https://www.github.com/Financial-Times/origami/commit/322617ea80f30a6825d9c36872e05574b871ea82))
133
+ - correct o-autocomplete markup ([f3d73b6](https://www.github.com/Financial-Times/origami/commit/f3d73b623d19bdfb7fac507cd40712d0032648fb))
134
+ - Update `o-brand` in components, replace "master" with "core" ([322617e](https://www.github.com/Financial-Times/origami/commit/322617ea80f30a6825d9c36872e05574b871ea82))
129
135
 
130
136
  ### [1.3.1](https://www.github.com/Financial-Times/origami/compare/o-autocomplete-v1.3.0...o-autocomplete-v1.3.1) (2021-09-21)
131
137
 
132
-
133
138
  ### Bug Fixes
134
139
 
135
- * Add homepage, bugs and support email to the package.json ([6c0de60](https://www.github.com/Financial-Times/origami/commit/6c0de60ebd6e64c4dd16d000fcc6b79412ce30f4))
136
- * update bugs urls ([3ea0ca0](https://www.github.com/Financial-Times/origami/commit/3ea0ca03bcb6e55142a77387ad0fff5ddf056d44))
137
- * update origami json urls ([c757653](https://www.github.com/Financial-Times/origami/commit/c7576532b5a14f0462d5346dfb63238be025602e))
140
+ - Add homepage, bugs and support email to the package.json ([6c0de60](https://www.github.com/Financial-Times/origami/commit/6c0de60ebd6e64c4dd16d000fcc6b79412ce30f4))
141
+ - update bugs urls ([3ea0ca0](https://www.github.com/Financial-Times/origami/commit/3ea0ca03bcb6e55142a77387ad0fff5ddf056d44))
142
+ - update origami json urls ([c757653](https://www.github.com/Financial-Times/origami/commit/c7576532b5a14f0462d5346dfb63238be025602e))
package/MIGRATION.md ADDED
@@ -0,0 +1,18 @@
1
+ ## Migration Guide
2
+
3
+ ### Migrating from v1 to v2
4
+
5
+ This major release introduces a new design language and visually breaking changes. This includes mobile optimised typography, icons, and buttons. It also removes peer dependencies from deprecated "o2" components.
6
+
7
+ To upgrade, replace the following "o2" components with their "o3" equivalent:
8
+
9
+ - [o-normalise](../o-normalise/MIGRATION.md)
10
+ - [o-spacing](../o-spacing/MIGRATION.md)
11
+ - [o-colors](../o-colors/MIGRATION.md)
12
+ - [o-icons](../o-icons/MIGRATION.md)
13
+ - [o-buttons](../o-buttons/MIGRATION.md)
14
+ - [o-typography](../o-typography/MIGRATION.md)
15
+ - [o-editorial-typography](../o-editorial-typography/MIGRATION.md)
16
+ - [o-big-number](../o-big-number/MIGRATION.md)
17
+ - [o-quote](../o-quote/MIGRATION.md)
18
+ - [o-fonts](../o-fonts/MIGRATION.md)
package/README.md CHANGED
@@ -4,18 +4,18 @@ An Origami component for autocomplete inputs. This is built on top of the excell
4
4
 
5
5
  - [Usage](#usage)
6
6
  - [Markup](#markup)
7
- - [For a static set of suggestions](#for-a-static-set-of-suggestions)
8
- - [For a dynamic set of suggestions](#for-a-dynamic-set-of-suggestions)
9
- - [Use with o-forms](#use-with-o-forms)
7
+ - [For a static set of suggestions](#for-a-static-set-of-suggestions)
8
+ - [For a dynamic set of suggestions](#for-a-dynamic-set-of-suggestions)
9
+ - [Use with o-forms](#use-with-o-forms)
10
10
  - [Sass](#sass)
11
11
  - [JavaScript](#javascript)
12
- - [dynamic suggestions function](#dynamic-suggestions-function)
13
- - [mapOptionToSuggestedValue](#mapoptiontosuggestedvalue)
14
- - [onConfirm](#onconfirm)
12
+ - [dynamic suggestions function](#dynamic-suggestions-function)
13
+ - [mapOptionToSuggestedValue](#mapoptiontosuggestedvalue)
14
+ - [onConfirm](#onconfirm)
15
15
  - [Keyboard Support](#keyboard-support)
16
- - [When focus is within the text input](#when-focus-is-within-the-text-input)
17
- - [When focus is within the suggestions menu](#when-focus-is-within-the-suggestions-menu)
18
- - [When focus is within the clear button](#when-focus-is-within-the-clear-button)
16
+ - [When focus is within the text input](#when-focus-is-within-the-text-input)
17
+ - [When focus is within the suggestions menu](#when-focus-is-within-the-suggestions-menu)
18
+ - [When focus is within the clear button](#when-focus-is-within-the-clear-button)
19
19
  - [Migration](#migration)
20
20
  - [Contact](#contact)
21
21
  - [Licence](#licence)
@@ -33,11 +33,11 @@ To provide a static set of suggestions, we recommend using a `select` element. o
33
33
  ```html
34
34
  <label for="my-autocomplete">Select your country</label>
35
35
  <span data-o-component="o-autocomplete" class="o-autocomplete">
36
- <select id="my-autocomplete">
37
- <option value="fr">France</option>
38
- <option value="de">Germany</option>
39
- <option value="gb">United Kingdom</option>
40
- </select>
36
+ <select id="my-autocomplete">
37
+ <option value="fr">France</option>
38
+ <option value="de">Germany</option>
39
+ <option value="gb">United Kingdom</option>
40
+ </select>
41
41
  </span>
42
42
  ```
43
43
 
@@ -46,9 +46,10 @@ To provide a static set of suggestions, we recommend using a `select` element. o
46
46
  To provide a dynamic set of suggestions, provide a javascript function or name of a javascript function on the window object which follows the [dynamic-suggestions-function](#dynamic-suggestions-function) <abbr title="application programming interface">API</abbr>.
47
47
 
48
48
  The input element requires an `id` attribute, this is used within the component to implement the accessibility features.
49
+
49
50
  ```html
50
51
  <span data-o-component="o-autocomplete" class="o-autocomplete">
51
- <input id="my-autocomplete" type="text" >
52
+ <input id="my-autocomplete" type="text" />
52
53
  </span>
53
54
  ```
54
55
 
@@ -57,27 +58,29 @@ The input element requires an `id` attribute, this is used within the component
57
58
  To have styling for labels, you will need to use [o-forms](https://registry.origami.ft.com/components/o-forms) as part of the autocomplete implementation.
58
59
 
59
60
  Below is an example of how to combine o-forms and o-autocomplete components together. Note the `label` and `select` element are connected using `for` and `id` attributes.
61
+
60
62
  ```html
61
- <span class="o-forms-field" >
62
- <label for="my-autocomplete" class="o-forms-title">
63
- <span class="o-forms-title__main">Select your country</span>
64
- </label>
65
- <span class="o-forms-input o-forms-input--select">
66
- <span data-o-component="o-autocomplete" class="o-autocomplete">
67
- <select id="my-autocomplete">
68
- <option value=""></option>
69
- <option>Afghanistan</option>
70
- </select>
71
- </span>
72
- </span>
63
+ <span class="o-forms-field">
64
+ <label for="my-autocomplete" class="o-forms-title">
65
+ <span class="o-forms-title__main">Select your country</span>
66
+ </label>
67
+ <span class="o-forms-input o-forms-input--select">
68
+ <span data-o-component="o-autocomplete" class="o-autocomplete">
69
+ <select id="my-autocomplete">
70
+ <option value=""></option>
71
+ <option>Afghanistan</option>
72
+ </select>
73
+ </span>
74
+ </span>
73
75
  </span>
74
76
  ```
77
+
75
78
  ## Sass
76
79
 
77
80
  Use `@include oAutocomplete()` to include styles for all `o-autocomplete` features.
78
81
 
79
82
  ```scss
80
- @import "@financial-times/o-autocomplete/main";
83
+ @import '@financial-times/o-autocomplete/main';
81
84
 
82
85
  @include oAutocomplete();
83
86
  ```
@@ -86,7 +89,7 @@ Use `@include oAutocomplete()` to include styles for all `o-autocomplete` featur
86
89
 
87
90
  JavaScript is initialised automatically for [Origami Build Service](https://www.ft.com/__origami/service/build/v3/) users.
88
91
 
89
- If your project is using a manual build process, initialise `o-autocomplete` manually.
92
+ If your project is using a manual build process, initialise `o-autocomplete` manually.
90
93
  For example call the `init` method to initialise all `o-autocomplete` instances in the document:
91
94
 
92
95
  ```js
@@ -98,9 +101,12 @@ Or pass an element to initialise a specific `o-autocomplete` instance:
98
101
 
99
102
  ```js
100
103
  import oAutocomplete from 'o-autocomplete';
101
- const oAutocompleteElement = document.getElementById('my-o-autocomplete-element');
104
+ const oAutocompleteElement = document.getElementById(
105
+ 'my-o-autocomplete-element'
106
+ );
102
107
  new oAutocomplete(oAutocompleteElement);
103
108
  ```
109
+
104
110
  ### dynamic suggestions function
105
111
 
106
112
  #### Example
@@ -117,15 +123,17 @@ import oAutocomplete from 'o-autocomplete';
117
123
  * @param {string} query - Text which was typed into the autocomplete by the user
118
124
  * @param {PopulateOptions} populateOptions - Function to call when ready to update the suggestions dropdown
119
125
  * @returns {void}
120
- */
126
+ */
121
127
  async function customSuggestions(query, populateOptions) {
122
128
  const suggestions = await getSuggestions(query);
123
129
  populateOptions(suggestions);
124
130
  }
125
131
 
126
- const oAutocompleteElement = document.getElementById('my-o-autocomplete-element');
132
+ const oAutocompleteElement = document.getElementById(
133
+ 'my-o-autocomplete-element'
134
+ );
127
135
  new oAutocomplete(oAutocompleteElement, {
128
- source: customSuggestions
136
+ source: customSuggestions,
129
137
  });
130
138
  ```
131
139
 
@@ -135,20 +143,20 @@ If wanting to supply dynamic suggestions, you will need to provide a function wh
135
143
 
136
144
  #### (query, suggestionsCallback) ⇒ <code>void</code>
137
145
 
138
- | Param | Type | Description |
139
- | --- | --- | --- |
140
- | query | <code>string</code> | Text which was typed into the text input |
146
+ | Param | Type | Description |
147
+ | ------------------- | -------------------------------------------------------- | ---------------------------------------------------------- |
148
+ | query | <code>string</code> | Text which was typed into the text input |
141
149
  | suggestionsCallback | [<code>suggestionsCallback</code>](#suggestionsCallback) | Function to call when ready to update the suggestions menu |
142
150
 
143
151
  <a name="suggestionsCallback"></a>
144
152
 
145
153
  #### suggestionsCallback : <code>function</code>
146
- **Properties**
147
154
 
148
- | Name | Type | Description |
149
- | --- | --- | --- |
150
- | options | <code>Array.&lt;*&gt;</code> | The options which match the entered query |
155
+ **Properties**
151
156
 
157
+ | Name | Type | Description |
158
+ | ------- | ----------------------------- | ----------------------------------------- |
159
+ | options | <code>Array.&lt;\*&gt;</code> | The options which match the entered query |
152
160
 
153
161
  ### mapOptionToSuggestedValue
154
162
 
@@ -157,7 +165,6 @@ If the `source` function is returning an array of strings which are already suit
157
165
 
158
166
  The most common scenario which requires having to define a `mapOptionToSuggestedValue` function is when the `source` function is returning an array of objects, where one of the properties in the object should be used as the suggestion.
159
167
 
160
-
161
168
  #### Example
162
169
 
163
170
  ```js
@@ -171,25 +178,28 @@ async function customSuggestions(query, populateOptions) {
171
178
  /**
172
179
  * @param {{"suggestionText": string}} option - The option to transform into a suggestion string
173
180
  * @returns {string} The string to display as the suggestions for this option
174
- */
181
+ */
175
182
  function mapOptionToSuggestedValue(option) {
176
183
  return option.suggestionText;
177
184
  }
178
185
 
179
- const oAutocompleteElement = document.getElementById('my-o-autocomplete-element');
186
+ const oAutocompleteElement = document.getElementById(
187
+ 'my-o-autocomplete-element'
188
+ );
180
189
  new oAutocomplete(oAutocompleteElement, {
181
- mapOptionToSuggestedValue,
182
- source: customSuggestions,
190
+ mapOptionToSuggestedValue,
191
+ source: customSuggestions,
183
192
  });
184
193
  ```
185
194
 
186
195
  <a name="MapOptionToSuggestedValue"></a>
187
196
 
188
197
  #### MapOptionToSuggestedValue ⇒ <code>string</code>
198
+
189
199
  **Returns**: <code>string</code> - The string to display as the suggestions for this option
190
200
 
191
- | Param | Type | Description |
192
- | --- | --- | --- |
201
+ | Param | Type | Description |
202
+ | ------ | --------------- | ------------------------------------------------ |
193
203
  | option | <code>\*</code> | The option to transform into a suggestion string |
194
204
 
195
205
  ### onConfirm
@@ -229,7 +239,6 @@ new oAutocomplete(oAutocompleteElement, {
229
239
  });
230
240
  ```
231
241
 
232
-
233
242
  ### suggestionTemplate
234
243
 
235
244
  This function is used to override the default rendering of suggestion items, with a function that returns a custom HTML string for the given option.
@@ -265,10 +274,12 @@ function suggestionTemplate(option) {
265
274
  `;
266
275
  }
267
276
 
268
- const oAutocompleteElement = document.getElementById('my-o-autocomplete-element');
277
+ const oAutocompleteElement = document.getElementById(
278
+ 'my-o-autocomplete-element'
279
+ );
269
280
  new oAutocomplete(oAutocompleteElement, {
270
- suggestionTemplate,
271
- source: customSuggestions,
281
+ suggestionTemplate,
282
+ source: customSuggestions,
272
283
  });
273
284
  ```
274
285
 
@@ -278,23 +289,26 @@ Using the `query` value to apply highlighting to one of the `option` properties:
278
289
  import oAutocomplete from 'o-autocomplete';
279
290
 
280
291
  async function customSuggestions(query, populateOptions) {
281
- const suggestions = await getSuggestions(query);
282
- populateOptions(suggestions);
292
+ const suggestions = await getSuggestions(query);
293
+ populateOptions(suggestions);
283
294
  }
284
295
 
285
296
  function highlightSuggestion(suggestion, query) {
286
- const result = suggestion.split('');
287
-
288
- const matchIndex = suggestion.toLocaleLowerCase().indexOf(query.toLocaleLowerCase());
289
- return result.map(function(character, index) {
290
- let shouldHighlight = true;
291
- const hasMatched = matchIndex > -1;
292
- const characterIsWithinMatch = index >= matchIndex && index <= matchIndex + query.length - 1;
293
- if (hasMatched && characterIsWithinMatch) {
294
- shouldHighlight = false;
295
- }
296
- return [character, shouldHighlight];
297
- });
297
+ const result = suggestion.split('');
298
+
299
+ const matchIndex = suggestion
300
+ .toLocaleLowerCase()
301
+ .indexOf(query.toLocaleLowerCase());
302
+ return result.map(function (character, index) {
303
+ let shouldHighlight = true;
304
+ const hasMatched = matchIndex > -1;
305
+ const characterIsWithinMatch =
306
+ index >= matchIndex && index <= matchIndex + query.length - 1;
307
+ if (hasMatched && characterIsWithinMatch) {
308
+ shouldHighlight = false;
309
+ }
310
+ return [character, shouldHighlight];
311
+ });
298
312
  }
299
313
 
300
314
  /**
@@ -302,39 +316,42 @@ function highlightSuggestion(suggestion, query) {
302
316
  * @param {string} [query] - Text which was typed into the autocomplete text input field by the user
303
317
  * @returns {string} The HTML to render in the suggestion list*/
304
318
  function suggestionTemplate(option, query) {
305
- const characters = highlightSuggestion(option.name, query || option.name);
306
-
307
- let output = '';
308
- for (const [character, shoudHighlight] of characters) {
309
- if (shoudHighlight) {
310
- output += `<span class="o-autocomplete__option--highlight">${character}</span>`;
311
- } else {
312
- output += `${character}`;
313
- }
314
- }
315
- output += ` (${option.role})`;
316
- const span = document.createElement('span');
317
- span.setAttribute('aria-label', option.name);
318
- span.innerHTML = output;
319
- return span.outerHTML;
319
+ const characters = highlightSuggestion(option.name, query || option.name);
320
+
321
+ let output = '';
322
+ for (const [character, shoudHighlight] of characters) {
323
+ if (shoudHighlight) {
324
+ output += `<span class="o-autocomplete__option--highlight">${character}</span>`;
325
+ } else {
326
+ output += `${character}`;
327
+ }
328
+ }
329
+ output += ` (${option.role})`;
330
+ const span = document.createElement('span');
331
+ span.setAttribute('aria-label', option.name);
332
+ span.innerHTML = output;
333
+ return span.outerHTML;
320
334
  }
321
335
 
322
- const oAutocompleteElement = document.getElementById('my-o-autocomplete-element');
336
+ const oAutocompleteElement = document.getElementById(
337
+ 'my-o-autocomplete-element'
338
+ );
323
339
  new oAutocomplete(oAutocompleteElement, {
324
- suggestionTemplate,
325
- source: customSuggestions,
340
+ suggestionTemplate,
341
+ source: customSuggestions,
326
342
  });
327
343
  ```
328
344
 
329
345
  <a name="SuggestionTemplate"></a>
330
346
 
331
347
  #### SuggestionTemplate ⇒ <code>string</code>
348
+
332
349
  **Returns**: <code>string</code> - The HTML string to render as the suggestion for this option
333
350
 
334
- | Param | Type | Description |
335
- | --- | --- | --- |
336
- | option | <code>\*</code> | The option to transform into a suggestion |
337
- | query | <code>string</code> | Text which was typed into the autocomplete text input field by the user |
351
+ | Param | Type | Description |
352
+ | ------ | ------------------- | ----------------------------------------------------------------------- |
353
+ | option | <code>\*</code> | The option to transform into a suggestion |
354
+ | query | <code>string</code> | Text which was typed into the autocomplete text input field by the user |
338
355
 
339
356
  ### onConfirm
340
357
 
@@ -377,8 +394,8 @@ new oAutocomplete(oAutocompleteElement, {
377
394
 
378
395
  #### onConfirm ⇒ <code>void</code>
379
396
 
380
- | Param | Type | Description |
381
- | --- | --- | --- |
397
+ | Param | Type | Description |
398
+ | ------ | --------------- | ---------------------------- |
382
399
  | option | <code>\*</code> | The option the user selected |
383
400
 
384
401
  #### `defaultValue` (default: `''`)
@@ -393,40 +410,42 @@ _When progressively enhancing a [static set of suggestions](#for-a-static-set-of
393
410
 
394
411
  ### When focus is within the text input
395
412
 
396
- Key|Function
397
- ---|---
398
- Down Arrow | If the suggestions menu is displayed, moves focus to the first suggested value in the suggestions menu.
399
- Enter | If the suggestions menu is displayed, does nothing.
400
- Escape | If the suggestions menu is displayed, closes it.
413
+ | Key | Function |
414
+ | ---------- | ------------------------------------------------------------------------------------------------------- |
415
+ | Down Arrow | If the suggestions menu is displayed, moves focus to the first suggested value in the suggestions menu. |
416
+ | Enter | If the suggestions menu is displayed, does nothing. |
417
+ | Escape | If the suggestions menu is displayed, closes it. |
401
418
 
402
419
  ### When focus is within the suggestions menu
403
420
 
404
- Key|Function
405
- ---|---
406
- Enter | <ul><li>Sets the text input value to the content of the focused option in the suggestions menu.</li><li>Closes the suggestions menu.</li><li>Sets focus on the text input.</li></ul>
407
- Tab | <ul><li>Sets the text input value to the content of the focused option in the suggestions menu.</li><li>Closes the suggestions menu.</li><li>Sets focus on the clear button.</li></ul>
408
- Space | <ul><li>Sets the text input value to the content of the focused option in the suggestions menu.</li><li>Closes the suggestions menu.</li><li>Sets focus on the text input.</li></ul>
409
- Up Arrow | If focus is on the first option, returns focus to the text input. Otherwise, moves focus to and selects the previous option in the suggestions menu.
410
- Down Arrow | If focus is on the last option, does nothing. Otherwise, moves focus to and selects the next option in the suggestions menu.
411
- Backspace | Returns focus to the text input and deletes the character prior to the cursor
412
- Printable Characters | <ul><li>Moves focus to the text input.</li><li>Types the characters into the text input.</li></ul>
421
+ | Key | Function |
422
+ | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
423
+ | Enter | <ul><li>Sets the text input value to the content of the focused option in the suggestions menu.</li><li>Closes the suggestions menu.</li><li>Sets focus on the text input.</li></ul> |
424
+ | Tab | <ul><li>Sets the text input value to the content of the focused option in the suggestions menu.</li><li>Closes the suggestions menu.</li><li>Sets focus on the clear button.</li></ul> |
425
+ | Space | <ul><li>Sets the text input value to the content of the focused option in the suggestions menu.</li><li>Closes the suggestions menu.</li><li>Sets focus on the text input.</li></ul> |
426
+ | Up Arrow | If focus is on the first option, returns focus to the text input. Otherwise, moves focus to and selects the previous option in the suggestions menu. |
427
+ | Down Arrow | If focus is on the last option, does nothing. Otherwise, moves focus to and selects the next option in the suggestions menu. |
428
+ | Backspace | Returns focus to the text input and deletes the character prior to the cursor |
429
+ | Printable Characters | <ul><li>Moves focus to the text input.</li><li>Types the characters into the text input.</li></ul> |
413
430
 
414
431
  ### When focus is within the clear button
415
432
 
416
- Key|Function
417
- ---|---
418
- Enter | <ul><li>Moves focus to the text input.</li><li>Removes all the characters within the text input.</li></ul>
419
- Space | <ul><li>Moves focus to the text input.</li><li>Removes all the characters within the text input.</li></ul>
420
-
433
+ | Key | Function |
434
+ | ----- | ---------------------------------------------------------------------------------------------------------- |
435
+ | Enter | <ul><li>Moves focus to the text input.</li><li>Removes all the characters within the text input.</li></ul> |
436
+ | Space | <ul><li>Moves focus to the text input.</li><li>Removes all the characters within the text input.</li></ul> |
421
437
 
422
438
  ## Migration
423
439
 
424
- State | Major Version | Last Minor Release | Migration guide |
425
- :---: | :---: | :---: | :---:
426
- ✨ active | 1 | 1.0 | N/A |
440
+ | State | Major Version | Last Minor Release | Migration guide |
441
+ | :----------: | :-----------: | :----------------: | :---------------------------------------------------: |
442
+ | ⚠ maintained | 3 | n/a | [migrate to v2](MIGRATION.md#migrating-from-v1-to-v2) |
443
+ | ⚠ maintained | 1 | 1.10 | N/A |
427
444
 
428
445
  ## Contact
446
+
429
447
  If you have any questions or comments about this component, or need help using it, please either [raise an issue](https://github.com/Financial-Times/o-autocomplete/issues), visit [##origami-support](https://financialtimes.slack.com/messages/#origami-support/) or email [origami.support@ft.com](mailto:origami.support@ft.com).
430
448
 
431
449
  ## Licence
450
+
432
451
  This software is published by the Financial Times under the [MIT licence](http://opensource.org/licenses/MIT).
package/main.scss CHANGED
@@ -1,13 +1,7 @@
1
1
  @import '@financial-times/math';
2
2
  @import '@financial-times/o-brand/main';
3
- @import '@financial-times/o-colors/main';
4
- @import '@financial-times/o-grid/main';
5
- @import '@financial-times/o-icons/main';
6
3
  @import '@financial-times/o-loading/main';
7
- @import '@financial-times/o-normalise/main';
8
- @import '@financial-times/o-spacing/main';
9
- @import '@financial-times/o-typography/main';
10
- @import '@financial-times/o-visual-effects/main';
4
+ @import '@financial-times/o-private-foundation/main';
11
5
 
12
6
  @import 'src/scss/variables';
13
7
  @import 'src/scss/brand';
@@ -19,7 +13,8 @@
19
13
  /// @include oAutocomplete($opts: (
20
14
  /// // your opts here
21
15
  /// ))
22
- @mixin oAutocomplete ($opts: ()) {
16
+ @mixin oAutocomplete($opts: ()) {
17
+ @include oPrivateFoundation();
23
18
  // content of primary mixin
24
19
  .o-autocomplete {
25
20
  position: relative;
@@ -27,17 +22,21 @@
27
22
  }
28
23
 
29
24
  .o-autocomplete__listbox-container {
30
- @include oTypographySans($scale: 0);
25
+ @include oPrivateTypographySans($scale: 0);
31
26
  grid-row: 1;
32
27
  grid-column: 1;
33
28
  }
34
29
 
35
30
  .o-autocomplete__visually-hidden {
36
- @include oNormaliseVisuallyHidden;
31
+ @include oPrivateNormaliseVisuallyHidden;
37
32
  }
38
33
 
39
34
  .o-autocomplete__clear {
40
- @include oIconsContent('cross', _oAutocompleteGet('search-close'), $size: $_o-autocomplete-icon-size);
35
+ @include oPrivateIconsContent(
36
+ 'cross',
37
+ _oAutocompleteGet('search-close'),
38
+ $size: $_o-autocomplete-icon-size
39
+ );
41
40
  border: 0;
42
41
  padding: 0;
43
42
  appearance: none;
@@ -47,7 +46,9 @@
47
46
  align-self: center;
48
47
  justify-self: end;
49
48
 
50
- $margin-size: calc(#{$_o-autocomplete-input-space} - #{$_o-autocomplete-icon-size-excess-whitespace});
49
+ $margin-size: calc(
50
+ #{$_o-autocomplete-input-space} - #{$_o-autocomplete-icon-size-excess-whitespace}
51
+ );
51
52
  margin-left: $margin-size;
52
53
  margin-right: $margin-size;
53
54
 
@@ -60,7 +61,9 @@
60
61
  box-sizing: border-box;
61
62
  // This is to make the input stop before the clear button.
62
63
  // Without this, the input's text would flow behind the clear button.
63
- padding-right: calc(#{$_o-autocomplete-icon-size} + #{$_o-autocomplete-input-space * 2});
64
+ padding-right: calc(
65
+ #{$_o-autocomplete-icon-size} + #{$_o-autocomplete-input-space * 2}
66
+ );
64
67
  }
65
68
 
66
69
  .o-autocomplete__input::-ms-clear {
@@ -68,18 +71,18 @@
68
71
  }
69
72
 
70
73
  .o-autocomplete__menu {
71
- @include oVisualEffectsShadowContent('high');
72
- top: oSpacingByName('s1');
73
- background-color: oColorsByName('white');
74
+ @include oPrivateVisualEffectsShadowContent('high');
75
+ top: oPrivateSpacingByName('s1');
76
+ background-color: oPrivateFoundationGet('o3-color-palette-white');
74
77
  border-top: 0;
75
- color: oColorsByName('black');
78
+ color: oPrivateFoundationGet('o3-color-palette-black');
76
79
  margin: 0;
77
80
  max-height: 200px; // Make this configurable as it decides how many rows to show
78
81
  overflow-x: hidden;
79
- padding-left: oSpacingByName('s2');
80
- padding-right: oSpacingByName('s2');
81
- padding-top: oSpacingByName('s4');
82
- padding-bottom: oSpacingByName('s4');
82
+ padding-left: oPrivateSpacingByName('s2');
83
+ padding-right: oPrivateSpacingByName('s2');
84
+ padding-top: oPrivateSpacingByName('s4');
85
+ padding-bottom: oPrivateSpacingByName('s4');
83
86
  width: 100%;
84
87
  }
85
88
 
@@ -96,7 +99,7 @@
96
99
  }
97
100
 
98
101
  .o-autocomplete__menu--overlay {
99
- @include oVisualEffectsShadowContent('high');
102
+ @include oPrivateVisualEffectsShadowContent('high');
100
103
  box-sizing: border-box;
101
104
  }
102
105
 
@@ -110,10 +113,10 @@
110
113
  cursor: pointer;
111
114
  display: block;
112
115
  position: relative;
113
- padding-left: oSpacingByName('s1');
114
- padding-right: oSpacingByName('s1');
115
- padding-top: oSpacingByName('s2');
116
- padding-bottom: oSpacingByName('s2');
116
+ padding-left: oPrivateSpacingByName('s1');
117
+ padding-right: oPrivateSpacingByName('s1');
118
+ padding-top: oPrivateSpacingByName('s2');
119
+ padding-bottom: oPrivateSpacingByName('s2');
117
120
  }
118
121
 
119
122
  .o-autocomplete__option > * {
@@ -130,15 +133,22 @@
130
133
 
131
134
  .o-autocomplete__option--focused,
132
135
  .o-autocomplete__option:hover {
133
- background-color: oColorsByName('teal');
134
- border-color: oColorsByName('teal');
135
- color: oColorsByName('white');
136
+ background-color: oPrivateFoundationGet('o3-color-palette-teal');
137
+ border-color: oPrivateFoundationGet('o3-color-palette-teal');
138
+ color: oPrivateFoundationGet('o3-color-palette-white');
136
139
  outline: none;
137
140
  }
138
141
 
139
142
  .o-autocomplete__option--no-results {
140
- background-color: oColorsMix(white, black, 98); // #fafafa
141
- color: oColorsGetTextColor(oColorsMix(white, black, 98), $minimum-contrast: 'aa-normal');
143
+ background-color: oPrivateColorsMix(
144
+ 'o3-color-palette-white',
145
+ 'o3-color-palette-black',
146
+ 98
147
+ ); // #fafafa
148
+ color: oPrivateColorsGetTextColor(
149
+ oPrivateColorsMix('o3-color-palette-white', 'o3-color-palette-black', 98),
150
+ $minimum-contrast: 'aa-normal'
151
+ );
142
152
  cursor: not-allowed;
143
153
  }
144
154
 
@@ -146,12 +156,13 @@
146
156
  font-weight: bolder;
147
157
  }
148
158
 
149
-
150
159
  .o-autocomplete__menu-loading {
151
- @include oLoadingContent($opts: (
152
- size: 'mini',
153
- theme: 'dark'
154
- ));
160
+ @include oLoadingContent(
161
+ $opts: (
162
+ size: 'mini',
163
+ theme: 'dark',
164
+ )
165
+ );
155
166
  }
156
167
 
157
168
  // `.o-autocomplete__menu-loading` is declared twice intentionally.
@@ -163,21 +174,20 @@
163
174
  grid-row: 2;
164
175
  }
165
176
  .o-autocomplete__menu-loading-container {
166
- @include oVisualEffectsShadowContent('high');
177
+ @include oPrivateVisualEffectsShadowContent('high');
167
178
  display: flex;
168
179
  justify-content: center;
169
180
  align-items: center;
170
- padding: oSpacingByName('s2');
181
+ padding: oPrivateSpacingByName('s2');
171
182
  box-sizing: border-box;
172
183
  min-height: 40px;
173
- background-color: oColorsByName('white');
184
+ background-color: oPrivateFoundationGet('o3-color-palette-white');
174
185
  }
175
186
 
176
-
177
187
  .o-autocomplete__menu-loading-container,
178
188
  .o-autocomplete__menu--overlay {
179
189
  position: absolute;
180
- top: calc(100% + #{oSpacingByName('s1')});
190
+ top: calc(100% + #{oPrivateSpacingByName('s1')});
181
191
  left: 0;
182
192
  right: 0;
183
193
  z-index: 100;
package/package.json CHANGED
@@ -1,53 +1,47 @@
1
1
  {
2
- "name": "@financial-times/o-autocomplete",
3
- "version": "1.10.0",
4
- "description": "An origami component for autocomplete inputs",
5
- "keywords": [
6
- "autocomplete",
7
- "typeahead"
8
- ],
9
- "homepage": "https://registry.origami.ft.com/components/o-autocomplete",
10
- "bugs": {
11
- "url": "https://github.com/Financial-Times/origami/issues/new?labels=o-autocomplete,components",
12
- "email": "origami.support@ft.com",
13
- "slack": "#origami-support"
14
- },
15
- "repository": {
16
- "type": "git",
17
- "url": "git+https://github.com/Financial-Times/o-autocomplete.git"
18
- },
19
- "license": "MIT",
20
- "type": "module",
21
- "browser": "main.js",
22
- "scripts": {
23
- "build": "bash ../../scripts/component/build.bash",
24
- "test": "bash ../../scripts/component/test.bash",
25
- "debug:js": "bash ../../scripts/component/debug-js.bash",
26
- "lint": "bash ../../scripts/component/lint.bash",
27
- "watch": "bash ../../scripts/component/watch.bash"
28
- },
29
- "engines": {
30
- "npm": ">7"
31
- },
32
- "peerDependencies": {
33
- "@financial-times/math": "^1.0.0",
34
- "@financial-times/o-brand": "^4.1.0",
35
- "@financial-times/o-colors": "^6.5.0",
36
- "@financial-times/o-grid": "^6.0.0",
37
- "@financial-times/o-icons": "^7.0.1",
38
- "@financial-times/o-loading": "^5.0.0",
39
- "@financial-times/o-normalise": "^3.3.0",
40
- "@financial-times/o-spacing": "^3.0.0",
41
- "@financial-times/o-typography": "^7.4.1",
42
- "@financial-times/o-visual-effects": "^4.0.1"
43
- },
44
- "devDependencies": {
45
- "@financial-times/o-forms": "^9.9.0",
46
- "@financial-times/o-normalise": "^3.3.0",
47
- "@financial-times/o-utils": "^2.1.0"
48
- },
49
- "dependencies": {
50
- "@financial-times/accessible-autocomplete": "^3.1.0"
51
- },
52
- "private": false
2
+ "name": "@financial-times/o-autocomplete",
3
+ "version": "2.0.0",
4
+ "description": "An origami component for autocomplete inputs",
5
+ "keywords": [
6
+ "autocomplete",
7
+ "typeahead"
8
+ ],
9
+ "homepage": "https://registry.origami.ft.com/components/o-autocomplete",
10
+ "bugs": {
11
+ "url": "https://github.com/Financial-Times/origami/issues/new?labels=o-autocomplete,components",
12
+ "email": "origami.support@ft.com",
13
+ "slack": "#origami-support"
14
+ },
15
+ "repository": {
16
+ "type": "git",
17
+ "url": "git+https://github.com/Financial-Times/o-autocomplete.git"
18
+ },
19
+ "license": "MIT",
20
+ "type": "module",
21
+ "browser": "main.js",
22
+ "scripts": {
23
+ "build": "bash ../../scripts/component/build.bash",
24
+ "test": "bash ../../scripts/component/test.bash",
25
+ "debug:js": "bash ../../scripts/component/debug-js.bash",
26
+ "lint": "bash ../../scripts/component/lint.bash",
27
+ "watch": "bash ../../scripts/component/watch.bash"
28
+ },
29
+ "engines": {
30
+ "npm": ">7"
31
+ },
32
+ "peerDependencies": {
33
+ "@financial-times/math": "^1.0.0",
34
+ "@financial-times/o-brand": "^4.1.0",
35
+ "@financial-times/o-loading": "^6.0.0",
36
+ "@financial-times/o-private-foundation": "^1.0.0"
37
+ },
38
+ "devDependencies": {
39
+ "@financial-times/o-forms": "^10.0.0",
40
+ "@financial-times/o-normalise": "^3.3.2",
41
+ "@financial-times/o-utils": "^2.1.0"
42
+ },
43
+ "dependencies": {
44
+ "@financial-times/accessible-autocomplete": "^3.1.0"
45
+ },
46
+ "private": false
53
47
  }
package/src/scss/_brand.scss CHANGED
@@ -13,7 +13,7 @@
13
13
  @if oBrandIs('core') {
14
14
  @include oBrandDefine('o-autocomplete', 'core', (
15
15
  'variables': (
16
- search-close: oColorsByName('black-80'),
16
+ search-close: oPrivateFoundationGet('o3-color-palette-black-80'),
17
17
  ),
18
18
  'supports-variants': ()
19
19
  ));
@@ -22,7 +22,7 @@
22
22
  @if oBrandIs('internal') {
23
23
  @include oBrandDefine('o-autocomplete', 'internal', (
24
24
  'variables': (
25
- search-close: oColorsByName('black-80'),
25
+ search-close: oPrivateFoundationGet('o3-color-palette-black-80'),
26
26
  ),
27
27
  'supports-variants': ()
28
28
  ));
package/src/scss/_variables.scss CHANGED
@@ -1,3 +1,3 @@
1
1
  $_o-autocomplete-icon-size: 25px;
2
2
  $_o-autocomplete-icon-size-excess-whitespace: div($_o-autocomplete-icon-size, 4);
3
- $_o-autocomplete-input-space: oSpacingByName("s2"); // match o-forms, without a direct dependency
3
+ $_o-autocomplete-input-space: oPrivateSpacingByName("s2"); // match o-forms, without a direct dependency