Feature/add params to overwrite default language in autosuggest compo…

…nent (#2765) * added language parameter to autosuggest component * fix failing test * update * fix merge conflict * update yarn lock * update package.json * added unit tests * update test * modfied generate npm-package file * revert changes
ONSdigital · Aug 11, 2023 · 6f3fed4 · 6f3fed4
1 parent 422a6dc
commit 6f3fed4
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 72 deletions.
diff --git a/ci/generate-npm-package.js b/ci/generate-npm-package.js
@@ -9,7 +9,7 @@ const newComponentsPath = `${cwd}/components`;
 const templatesPath = `${sourcePath}/layout`;
 const newTemplatesPath = `${cwd}/layout`;
 const assetFolders = ['css', 'favicons', 'fonts', 'img', 'scripts', 'js'];
-const builtAssetsFolders = assetFolders.map(folder => `${cwd}/build/${folder}`);
+const builtAssetsFolders = assetFolders.map((folder) => `${cwd}/build/${folder}`);
 const newSassPath = `${cwd}/scss`;
 
 async function removeExistingFolders() {
@@ -27,7 +27,7 @@ async function copyAssets() {
     await fs.ensureDir(folder);
 
     try {
-      const files = (await fs.readdir(builtPath)).filter(path => !path.includes('patternlib'));
+      const files = (await fs.readdir(builtPath)).filter((path) => !path.includes('patternlib'));
 
       for (let file of files) {
         if (file.match(/(\.\w+)$/)) {
@@ -37,7 +37,7 @@ async function copyAssets() {
           const nestedBuiltPath = `${builtPath}/${file}`;
           await fs.ensureDir(newFolderPath);
 
-          const nestedFiles = (await fs.readdir(nestedBuiltPath)).filter(path => !path.includes('patternlib'));
+          const nestedFiles = (await fs.readdir(nestedBuiltPath)).filter((path) => !path.includes('patternlib'));
 
           for (let nestedFile of nestedFiles) {
             await fs.copy(`${nestedBuiltPath}/${nestedFile}`, `${newFolderPath}/${nestedFile}`);

diff --git a/src/components/autosuggest/_macro-options.md b/src/components/autosuggest/_macro-options.md
@@ -25,3 +25,4 @@
 | attributes            | object                                                        | false                            | HTML attributes (for example, data attributes) to add to the input                                                                                           |
 | autocomplete          | string                                                        | true                             | Autocomplete attribute used to override the browsers native autocomplete                                                                                     |
 | accessiblePlaceholder | boolean                                                       | false                            | Will add the provided label as an accessible placeholder                                                                                                     |
+| language              | string                                                        | false                            | The ISO 639-1 Code will override the default language in page. Please note that only 'en', 'cy' and 'ni' is currently supported                              |
diff --git a/src/components/autosuggest/_macro.njk b/src/components/autosuggest/_macro.njk
@@ -28,6 +28,7 @@
         {% if params.tooManyResults %}data-too-many-results="{{ params.tooManyResults }}"{% endif %}
         {% if params.errorMessageAPI %}data-error-api="{{ params.errorMessageAPI }}"{% endif %}
         {% if params.errorMessageAPILinkText %}data-error-api-link-text="{{ params.errorMessageAPILinkText }}"{% endif %}
+        {% if params.language %}data-lang="{{ params.language }}"{% endif %}
         {% if params.options %}
             {% if params.options.oneYearAgo %}data-options-one-year-ago="true"{% endif %}
             {% if params.options.regionCode %}data-options-region-code="{{ params.options.regionCode }}"{% endif %}

diff --git a/src/components/autosuggest/autosuggest.js b/src/components/autosuggest/autosuggest.js
@@ -3,6 +3,7 @@ import AutosuggestUI from './autosuggest.ui';
 export default class Autosuggest {
   constructor(context) {
     this.context = context;
+    this.language = context.getAttribute('data-lang');
 
     this.autosuggest = new AutosuggestUI({
       context,
@@ -13,7 +14,7 @@ export default class Autosuggest {
   }
 
   get lang() {
-    return document.documentElement.getAttribute('lang').toLowerCase();
+    return !this.language ? document.documentElement.getAttribute('lang').toLowerCase() : this.language.toLowerCase();
   }
 
   async onSelect(result) {