@ons/design-system 65.1.0 → 65.2.1

package/components/modal/_modal.scss

@@ -1,4 +1,4 @@
-$backdrop-colour: rgba(0, 0, 0, 0.8);
+$backdrop-colour: rgb(0 0 0 / 80%);
 
 .ons-modal {
   border: none;
@@ -13,7 +13,7 @@ $backdrop-colour: rgba(0, 0, 0, 0.8);
   position: fixed;
   top: 0;
 
-  @media screen and (min-width: 600px) {
+  @media screen and (width >= 600px) {
     margin-left: auto;
     margin-right: auto;
     max-width: 500px;
@@ -21,12 +21,9 @@ $backdrop-colour: rgba(0, 0, 0, 0.8);
 
   &-ie11 & {
     background: var(--ons-color-white);
-    bottom: 0;
+    inset: 50% 0 0;
     height: 350px;
-    left: 0;
     position: fixed;
-    right: 0;
-    top: 50%;
     transform: translate(0, -50%);
   }
 

package/components/mutually-exclusive/example-mutually-exclusive-checkboxes.njk

@@ -13,34 +13,34 @@
             "name": "mutually-exclusive",
             "checkboxes": [
                 {
-                    "id": "gas",
+                    "id": "gas-example-mutually-exclusive-checkbox",
                     "label": {
                         "text": "Gas"
                     },
                     "value": "gas"
                 },
                 {
-                    "id": "electric",
+                    "id": "electric-example-mutually-exclusive-checkbox",
                     "label": {
                         "text": "Electric"
                     },
                     "value": "electric"
                 },
                 {
-                    "id": "solid-fuel",
+                    "id": "solid-fuel-example-mutually-exclusive-checkbox",
                     "label": {
                         "text": "Solid fuel"
                     },
                     "value": "solid-fuel"
                 },
                 {
-                    "id": "other-fuel",
+                    "id": "other-fuel-example-mutually-exclusive-checkbox",
                     "label": {
                         "text": "Other"
                     },
                     "value": "other",
                     "other": {
-                        "id": "other-fuel-textbox",
+                        "id": "other-fuel-textbox-example-mutually-exclusive-checkbox",
                         "name": "other-fuel-answer",
                         "label": {
                         "text": "Please specify"
@@ -55,7 +55,7 @@
                 "deselectExclusiveOptionAdjective": "deselected",
                 "exclusiveOptions": [
                     {
-                        "id": "no-central-heating",
+                        "id": "no-central-heating-example-mutually-exclusive-checkbox",
                         "label": {
                             "text": "No central heating"
                         },

package/components/mutually-exclusive/example-mutually-exclusive-date-with-error.njk

@@ -2,7 +2,7 @@
 
 {{
     onsDateInput({
-        "id": "date-mutually-exclusive",
+        "id": "date-mutually-exclusive-with-error",
         "legendOrLabel": "When did you leave your last paid job?",
         "legendClasses": "ons-u-vh",
         "day": {
@@ -30,7 +30,7 @@
             "deselectExclusiveOptionAdjective": "deselected",
             "exclusiveOptions": [
                 {
-                    "id": "date-exclusive-checkbox",
+                    "id": "date-exclusive-checkbox-with-error",
                     "name": "no-paid-job",
                     "value": "no-paid-job",
                     "label": {

package/components/mutually-exclusive/example-mutually-exclusive-email.njk

@@ -8,7 +8,7 @@
 }) %}
     {{
         onsInput({
-            "id": "email",
+            "id": "email-example-mutually-exclusive",
             "type": "email",
             "label": {
                 "text": "Email address",
@@ -22,7 +22,7 @@
                 "deselectExclusiveOptionAdjective": "deselected",
                 "exclusiveOptions": [
                     {
-                        "id": "email-checkbox",
+                        "id": "email-checkbox-example-mutually-exclusive",
                         "name": "no-email",
                         "value": "no-email",
                         "label": {

package/components/mutually-exclusive/example-mutually-exclusive-multiple-options.njk

@@ -13,21 +13,21 @@
             "name": "mutually-exclusive",
             "checkboxes": [
                 {
-                    "id": "gas",
+                    "id": "gas-example-mutually-exclusive-multiple-options",
                     "label": {
                         "text": "Gas"
                     },
                     "value": "gas"
                 },
                 {
-                    "id": "electric",
+                    "id": "electric-example-mutually-exclusive-multiple-options",
                     "label": {
                         "text": "Electric"
                     },
                     "value": "electric"
                 },
                 {
-                    "id": "solid-fuel",
+                    "id": "solid-fuel-example-mutually-exclusive-multiple-options",
                     "label": {
                         "text": "Solid fuel"
                     },
@@ -41,7 +41,7 @@
                 "deselectExclusiveOptionAdjective": "deselected",
                 "exclusiveOptions": [
                     {
-                        "id": "no-central-heating",
+                        "id": "no-central-heating-example-mutually-exclusive-multiple-options",
                         "name": "no central heating",
                         "label": {
                             "text": "No central heating"
@@ -49,7 +49,7 @@
                         "value": "no-central-heating"
                     },
                     {
-                        "id": "other",
+                        "id": "other-example-mutually-exclusive-multiple-options",
                         "name": "other",
                         "label": {
                             "text": "Other"

package/components/navigation/navigation.js

@@ -44,11 +44,15 @@ export default class NavigationToggle {
     this.navigation.classList.add(this.hideClass);
   }
 
+  isHidden(el) {
+    return el.offsetParent === null;
+  }
+
   setAria() {
-    const viewportDetails = GetViewportDetails();
+    const isToggleHidden = this.isHidden(this.toggle);
     const hasAria = this.navigation.hasAttribute(attrHidden);
 
-    if (viewportDetails.width < 980) {
+    if (!isToggleHidden) {
       if (!hasAria) {
         this.closeNav();
       }

package/components/phase-banner/example-phase-banner-alpha.njk

@@ -2,9 +2,20 @@
 "fullWidth": true
 ---
 {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
+{% from "components/external-link/_macro.njk" import onsExternalLink %}
+
+{% set feedbackLink %}
+    {{
+        onsExternalLink({
+            "url": "#0",
+            "linkText": "give feedback"
+        })
+    }}
+{% endset %}
+
 {{
     onsPhaseBanner({
-        "badge": 'Alpha',
-        "html": 'This is a new service. To help us improve it, <a href="#0">give feedback</a>'
+        "badge": "Alpha",
+        "html": "This is a new service. To help us improve it, " + feedbackLink
     })
 }}

package/components/phase-banner/example-phase-banner-beta.njk

@@ -2,8 +2,19 @@
 "fullWidth": true
 ---
 {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
+{% from "components/external-link/_macro.njk" import onsExternalLink %}
+
+{% set feedbackLink %}
+    {{
+        onsExternalLink({
+            "url": "#0",
+            "linkText": "give feedback"
+        })
+    }}
+{% endset %}
+
 {{
     onsPhaseBanner({
-        "html": 'This is a new service. To help us improve it, <a href="#0">give feedback</a>'
-    })
+        "html": "This is a new service. To help us improve it, " + feedbackLink
+  })
 }}

package/components/radios/example-radios-with-clear-button-expanded.njk

@@ -26,14 +26,14 @@
                 },
                 "radios": [
                     {
-                        "id": "none",
+                        "id": "none-radio-with-clear-button-expanded",
                         "label": {
                             "text": "No religion"
                         },
                         "value": "none"
                     },
                     {
-                        "id": "christian",
+                        "id": "christian-radio-with-clear-button-expanded",
                         "label": {
                             "text": "Christian",
                             "description": "Including Church of England, Catholic, Protestant and all other Christian denominations"
@@ -41,14 +41,14 @@
                         "value": "christian"
                     },
                     {
-                        "id": "buddhist",
+                        "id": "buddhist-radio-with-clear-button-expanded",
                         "label": {
                             "text": "Buddhist"
                         },
                         "value": "buddhist"
                     },
                     {
-                        "id": "hindu",
+                        "id": "hindu-radio-with-clear-button-expanded",
                         "label": {
                             "text": "Hindu"
                         },
@@ -62,21 +62,21 @@
                         "value": "jewish"
                     },
                     {
-                        "id": "muslim",
+                        "id": "muslim-radio-with-clear-button-expanded",
                         "label": {
                             "text": "Muslim"
                         },
                         "value": "muslim"
                     },
                     {
-                        "id": "sikh",
+                        "id": "sikh-radio-with-clear-button-expanded",
                         "label": {
                             "text": "Sikh"
                         },
                         "value": "sikh"
                     },
                     {
-                        "id": "other-radio",
+                        "id": "other-radio-with-clear-button-expanded",
                         "label": {
                             "text": "Any other religion"
                         },
@@ -84,7 +84,7 @@
                         "checked": true,
                         "other": {
                             "otherType": "input",
-                            "id": "other-textbox",
+                            "id": "other-textbox-radio-with-clear-button-expanded",
                             "name": "other-answer",
                             "label": {
                                 "text": "Enter your religion"
@@ -95,4 +95,4 @@
             })
         }}
     </form>
-{% endcall %}
+{% endcall %}

package/components/radios/example-radios-with-clear-button.njk

@@ -26,14 +26,14 @@
                 },
                 "radios": [
                     {
-                        "id": "none",
+                        "id": "none-radio-with-clear-button",
                         "label": {
                             "text": "No religion"
                         },
                         "value": "none"
                     },
                     {
-                        "id": "christian",
+                        "id": "christian-radio-with-clear-button",
                         "label": {
                             "text": "Christian",
                             "description": "Including Church of England, Catholic, Protestant and all other Christian denominations"
@@ -41,49 +41,49 @@
                         "value": "christian"
                     },
                     {
-                        "id": "buddhist",
+                        "id": "buddhist-radio-with-clear-button",
                         "label": {
                             "text": "Buddhist"
                         },
                         "value": "buddhist"
                     },
                     {
-                        "id": "hindu",
+                        "id": "hindu-radio-with-clear-button",
                         "label": {
                             "text": "Hindu"
                         },
                         "value": "hindu"
                     },
                     {
-                        "id": "jewish",
+                        "id": "jewish-radio-with-clear-button",
                         "label": {
                             "text": "Jewish"
                         },
                         "value": "jewish"
                     },
                     {
-                        "id": "muslim",
+                        "id": "muslim-radio-with-clear-button",
                         "label": {
                             "text": "Muslim"
                         },
                         "value": "muslim"
                     },
                     {
-                        "id": "sikh",
+                        "id": "sikh-radio-with-clear-button",
                         "label": {
                             "text": "Sikh"
                         },
                         "value": "sikh"
                     },
                     {
-                        "id": "other-radio",
+                        "id": "other-radio-radio-with-clear-button",
                         "label": {
                             "text": "Any other religion"
                         },
                         "value": "other",
                         "other": {
                             "otherType": "input",
-                            "id": "other-textbox",
+                            "id": "other-textbox-radio-with-clear-button",
                             "name": "other-answer",
                             "label": {
                                 "text": "Enter your religion"

package/components/radios/example-radios-with-descriptions.njk

@@ -12,7 +12,7 @@
             "name": "ethnicity",
             "radios": [
                 {
-                    "id": "white",
+                    "id": "white-example-radio-with-description",
                     "label": {
                         "text": "White",
                         "description": "Includes British, Northern Irish, Irish, Gypsy, Irish Traveller, Roma or any other White background"
@@ -20,7 +20,7 @@
                     "name": "white"
                 },
                 {
-                    "id": "mixed",
+                    "id": "mixed-example-radio-with-description",
                     "label": {
                         "text": "Mixed or Multiple ethnic groups",
                         "description": "Includes White and Black Caribbean, White and Black African, White and Asian or any other Mixed or Multiple background"
@@ -28,7 +28,7 @@
                     "name": "mixed"
                 },
                 {
-                    "id": "asian",
+                    "id": "asian-example-radio-with-description",
                     "label": {
                         "text": "Asian or Asian British",
                         "description": "Includes Indian, Pakistani, Bangladeshi, Chinese or any other Asian background"
@@ -36,7 +36,7 @@
                     "name": "asian"
                 },
                 {
-                    "id": "black",
+                    "id": "black-example-radio-with-description",
                     "label": {
                         "text": "Black, Black British, Caribbean or African",
                         "description": "Includes Black British, Caribbean, African or any other Black background"
@@ -44,7 +44,7 @@
                     "name": "black"
                 },
                 {
-                    "id": "other",
+                    "id": "other-example-radio-with-description",
                     "label": {
                         "text": "Other ethnic group",
                         "description": "Includes Arab or any other ethnic group"

package/components/radios/example-radios-with-error.njk

@@ -6,14 +6,14 @@
         "dontWrap": true,
         "radios": [
             {
-                "id": "yes",
+                "id": "yes-example-radio-with-error",
                 "label": {
                     "text": "Yes"
                 },
                 "value": "yes"
             },
             {
-                "id": "no",
+                "id": "no-example-radio-with-error",
                 "label": {
                     "text": "No"
                 },
@@ -22,7 +22,7 @@
                 "other": {
                     "open": true,
                     "otherType": "input",
-                    "id": "no-textbox",
+                    "id": "no-textbox-example-radio-with-error",
                     "name": "no-answer",
                     "label": {
                         "text": "Enter your gender identity"
@@ -31,7 +31,7 @@
             }
         ],
         "error": {
-            "id": "dietary-error",
+            "id": "dietary-error-example-radio-with-error",
             "text": "Enter your gender identity"
         }
     })

package/components/radios/example-radios-with-revealed-checkboxes-expanded.njk

@@ -7,21 +7,21 @@
         "borderless": true,
         "radios": [
             {
-                "id": "post",
+                "id": "post-example-radio-with-revealed-checkbox-expanded",
                 "label": {
                     "text": "By post"
                 },
                 "value": "post"
             },
             {
-                "id": "email",
+                "id": "email-example-radio-with-revealed-checkbox-expanded",
                 "label": {
                     "text": "By email"
                 },
                 "value": "email"
             },
             {
-                "id": "phone",
+                "id": "phone-example-radio-with-revealed-checkbox-expanded",
                 "label": {
                     "text": "By phone"
                 },
@@ -30,34 +30,34 @@
                 "other": {
                     "otherType": "checkboxes",
                     "selectAllChildren": true,
-                    "id": "phone-time",
+                    "id": "phone-time-example-radio-with-revealed-checkbox-expanded",
                     "name": "phone-time",
                     "legend": "Select preferred times of day",
                     "checkboxes": [
                         {
                             "value": "anytime",
-                            "id": "anytime",
+                            "id": "anytime-example-radio-with-revealed-checkbox-expanded",
                             "label": {
                                 "text": "Anytime of day"
                             }
                         },
                         {
                             "value": "morning",
-                            "id": "morning",
+                            "id": "morning-example-radio-with-revealed-checkbox-expanded",
                             "label": {
                                 "text": "Morning"
                             }
                         },
                         {
                             "value": "afternoon",
-                            "id": "afternoon",
+                            "id": "afternoon-example-radio-with-revealed-checkbox-expanded",
                             "label": {
                                 "text": "Afternoon"
                             }
                         },
                         {
                             "value": "evening",
-                            "id": "evening",
+                            "id": "evening-example-radio-with-revealed-checkbox-expanded",
                             "label": {
                                 "text": "Evening"
                             }

package/components/radios/example-radios-with-revealed-checkboxes.njk

@@ -7,21 +7,21 @@
         "borderless": true,
         "radios": [
             {
-                "id": "post",
+                "id": "post-example-radio-with-revealed-checkbox",
                 "label": {
                     "text": "By post"
                 },
                 "value": "post"
             },
             {
-                "id": "email",
+                "id": "email-example-radio-with-revealed-checkbox",
                 "label": {
                     "text": "By email"
                 },
                 "value": "email"
             },
             {
-                "id": "phone",
+                "id": "phone-example-radio-with-revealed-checkbox",
                 "label": {
                     "text": "By phone"
                 },
@@ -29,34 +29,34 @@
                 "other": {
                     "otherType": "checkboxes",
                     "selectAllChildren": true,
-                    "id": "phone-time",
+                    "id": "phone-time-example-radio-with-revealed-checkbox",
                     "name": "phone-time",
                     "legend": "Select preferred times of day",
                     "checkboxes": [
                         {
                             "value": "anytime",
-                            "id": "anytime",
+                            "id": "anytime-example-radio-with-revealed-checkbox",
                             "label": {
                                 "text": "Anytime of day"
                             }
                         },
                         {
                             "value": "morning",
-                            "id": "morning",
+                            "id": "morning-example-radio-with-revealed-checkbox",
                             "label": {
                                 "text": "Morning"
                             }
                         },
                         {
                             "value": "afternoon",
-                            "id": "afternoon",
+                            "id": "afternoon-example-radio-with-revealed-checkbox",
                             "label": {
                                 "text": "Afternoon"
                             }
                         },
                         {
                             "value": "evening",
-                            "id": "evening",
+                            "id": "evening-example-radio-with-revealed-checkbox",
                             "label": {
                                 "text": "Evening"
                             }

package/components/radios/example-radios-with-revealed-radios-expanded.njk

@@ -7,21 +7,21 @@
         "borderless": true,
         "radios": [
             {
-                "id": "post",
+                "id": "post-example-with-revealed-radio-expanded",
                 "label": {
                     "text": "By post"
                 },
                 "value": "post"
             },
             {
-                "id": "email",
+                "id": "email-example-with-revealed-radio-expanded",
                 "label": {
                     "text": "By email"
                 },
                 "value": "email"
             },
             {
-                "id": "phone",
+                "id": "phone-example-with-revealed-radio-expanded",
                 "label": {
                     "text": "By phone"
                 },
@@ -29,34 +29,34 @@
                 "checked": true,
                 "other": {
                     "otherType": "radios",
-                    "id": "phone-time",
+                    "id": "phone-time-example-with-revealed-radio-expanded",
                     "name": "phone-time",
                     "legend": "Choose preferred time of day",
                     "radios": [
                         {
                             "value": "anytime",
-                            "id": "anytime",
+                            "id": "anytime-example-with-revealed-radio-expanded",
                             "label": {
                                 "text": "Anytime of day"
                             }
                         },
                         {
                             "value": "morning",
-                            "id": "morning",
+                            "id": "morning-example-with-revealed-radio-expanded",
                             "label": {
                                 "text": "Morning"
                             }
                         },
                         {
                             "value": "afternoon",
-                            "id": "afternoon",
+                            "id": "afternoon-example-with-revealed-radio-expanded",
                             "label": {
                                 "text": "Afternoon"
                             }
                         },
                         {
                             "value": "evening",
-                            "id": "evening",
+                            "id": "evening-example-with-revealed-radio-expanded",
                             "label": {
                                 "text": "Evening"
                             }
@@ -66,4 +66,4 @@
             }
         ]
     })
-}}
+}}