@ons/design-system 65.1.0 → 65.2.1

package/README.md

@@ -33,6 +33,7 @@ To enable this we use [nvm (Node Version Manager)](https://github.com/creationix
 
 ```bash
 yarn install
+husky install
 ```
 
 ### Start a local server

package/components/access-code/access-code.scss

@@ -6,17 +6,17 @@
     text-transform: uppercase;
     width: 15.1em;
 
-    @media all and (min-width: 375px) {
+    @media all and (width >= 375px) {
       font-size: 20px !important;
       width: 15.1em !important;
     }
 
-    @media all and (max-width: 374px) {
+    @media all and (width <= 374px) {
       letter-spacing: 0;
       max-width: 12.6em !important;
     }
 
-    @media all and (max-width: 299px) {
+    @media all and (width <= 299px) {
       max-width: 100%;
     }
 

package/components/access-code/example-access-code-error.njk

@@ -74,7 +74,7 @@ layout: ~
     {% endset %}
 
     {% call onsDetails({
-            "id": "details",
+            "id": "details-access-code-error",
             "title": "Need to answer separately from your household?",
             "button": {
                 "close": "Hide this",

package/components/access-code/example-access-code.njk

@@ -18,7 +18,7 @@ layout: ~
     <h1 class="ons-u-mt-l">Start study</h1>
 
     {{ onsAccessCode({
-        "id": "access-code",
+        "id": "access-code-example",
         "name": "access-code",
         "postTextboxLinkText": "Where to find your access code",
         "postTextboxLinkUrl": "#0",

package/components/accordion/example-accordion-open.njk

@@ -13,14 +13,14 @@
             "name": "dietary",
             "checkboxes": [
                 {
-                    "id": "data",
+                    "id": "data-checkbox",
                     "label": {
                         "text": "Data (309)"
                     },
                     "value": "data"
                 },
                 {
-                    "id": "publications",
+                    "id": "publications-checkbox",
                     "label": {
                         "text": "Publications (137)"
                     },
@@ -33,21 +33,21 @@
                         "name": "name",
                         "checkboxes": [
                             {
-                                "id": "datasets",
+                                "id": "datasets-checkbox",
                                 "label": {
                                     "text": "Datasets (100)"
                                 },
                                 "value": "datasets"
                             },
                             {
-                                "id": "timeseries",
+                                "id": "timeseries-checkbox",
                                 "label": {
                                     "text": "Timeseries (20)"
                                 },
                                 "value": "timeseries"
                             },
                             {
-                                "id": "requested",
+                                "id": "requested-checkbox",
                                 "label": {
                                     "text": "User requested data (16)"
                                 },
@@ -57,7 +57,7 @@
                     }
                 },
                 {
-                    "id": "areas",
+                    "id": "areas-checkbox",
                     "label": {
                         "text": "Areas (0)"
                     },
@@ -78,7 +78,7 @@
             "name": "dietary",
             "checkboxes": [
                 {
-                    "id": "crime",
+                    "id": "crime-checkbox",
                     "label": {
                         "text": "Crime (200)"
                     },
@@ -86,14 +86,14 @@
                     "checked": true
                 },
                 {
-                    "id": "education",
+                    "id": "education-checkbox",
                     "label": {
                         "text": "Education (55)"
                     },
-                    "value": "education"
+                    "value": "education-checkbox"
                 },
                 {
-                    "id": "disability",
+                    "id": "disability-checkbox",
                     "label": {
                         "text": "Disability (67)"
                     },

package/components/accordion/example-accordion.njk

@@ -2,7 +2,7 @@
 
 {{
     onsAccordion({
-        "id": "accordion",
+        "id": "accordion-example",
         "allButton": {
             "open": "Show all",
             "close": "Hide all"

package/components/address-input/example-address-input-editable.njk

@@ -1,11 +1,11 @@
 {% from "components/address-input/_macro.njk" import onsAddressInput %}
 
 {{ onsAddressInput({
-    "id": "address",
+    "id": "address-input-editable",
     "dontWrap": true,
     "label": {
         "text": "Enter address or postcode and select from results",
-        "id": "address-label"
+        "id": "address-label-input-editable"
     },
     "isEditable": true,
     "mandatory": true,

package/components/address-input/example-address-input-manual.njk

@@ -1,12 +1,12 @@
 {% from "components/address-input/_macro.njk" import onsAddressInput %}
 
 {{ onsAddressInput({
-    "id": "address",
+    "id": "address-input-manual",
     "dontWrap": true,
     "manualEntry": true,
     "label": {
         "text": "Enter address or postcode and select from results",
-        "id": "address-label"
+        "id": "address-label-input-manual"
     },
     "line1": {
         "label": "Address line 1"
@@ -20,4 +20,4 @@
     "postcode": {
         "label": "Postcode"
     }
-}) }}
+}) }}

package/components/address-input/example-address-input.njk

@@ -1,11 +1,11 @@
 {% from "components/address-input/_macro.njk" import onsAddressInput %}
 
 {{ onsAddressInput({
-    "id": "address",
+    "id": "address-input",
     "dontWrap": true,
     "label": {
         "text": "Enter address or postcode and select from results",
-        "id": "address-label"
+        "id": "address-label-input"
     },
     "isEditable": false,
     "mandatory": true,

package/components/autosuggest/_autosuggest.scss

@@ -51,7 +51,7 @@
       border-bottom: 1px solid var(--ons-color-input-border);
     }
 
-    &:not(&--no-results):not(&--more-results):hover,
+    &:not(&--no-results, &--more-results):hover,
     &--focused:not(&--no-results) {
       background: var(--ons-color-text-link-hover);
       border-color: var(--ons-color-text-link-hover);
@@ -63,7 +63,7 @@
       }
     }
 
-    &:active:not(&--no-results):not(&--more-results) {
+    &:active:not(&--no-results, &--more-results) {
       background: var(--ons-color-focus);
       color: var(--ons-color-text-link-focus);
 
@@ -91,11 +91,6 @@
     }
   }
 
-  &__wrapper {
-    max-width: max-content;
-    width: 100%;
-  }
-
   &__panel.ons-panel--warn {
     background: none;
     border: 0;
@@ -133,7 +128,7 @@
   &--header {
     .ons-autosuggest__results {
       border: none;
-      box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.6);
+      box-shadow: 0 0 5px 0 rgb(34 34 34 / 60%);
       left: 0;
       position: absolute;
       z-index: 10;

package/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 %}
@@ -36,14 +37,13 @@
     >
 
         {% set autosuggestResults %}
-            <div class="ons-autosuggest__results ons-js-autosuggest-results">
+            <div class="ons-autosuggest__results ons-js-autosuggest-results{% if params.width %} ons-input--w-{{ params.width }}{% else %} ons-input--w-20{% endif %}">
                 <div id="{{ params.resultsTitleId }}" class="ons-autosuggest__results-title ons-u-fs-s">{{ params.resultsTitle }}</div>
                 <ul class="ons-autosuggest__listbox ons-js-autosuggest-listbox" title="{{ params.resultsTitle }}" role="listbox" id="{{ params.id }}-listbox" tabindex="-1"></ul>
             </div>
             <div class="ons-autosuggest__instructions ons-u-vh ons-js-autosuggest-instructions" id="{{ params.id }}-instructions" tabindex="-1">{{ params.instructions }}</div>
             <div class="ons-autosuggest__status ons-u-vh ons-js-autosuggest-aria-status" aria-live="assertive" aria-atomic="true" role="status" tabindex="-1"></div>
         {% endset %}
-        <div class="ons-autosuggest__wrapper">
             {{ onsInput({
                 "id": params.id,
                 "classes": "ons-js-autosuggest-input " + (params.classes if params.classes else ''),
@@ -69,6 +69,5 @@
             {% if not params.mutuallyExclusive %}
                 {{ autosuggestResults | safe }}
             {% endif %}
-         </div>
     </div>
 {% endmacro %}

package/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) {