@ons/design-system 65.2.0 → 65.2.1

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

@@ -8,55 +8,55 @@
         "borderless": true,
         "checkboxes": [
             {
-                "id": "post",
+                "id": "post-example-with-revealed-radios",
                 "label": {
                     "text": "By post"
                 },
                 "value": "post"
             },
             {
-                "id": "email",
+                "id": "email-example-with-revealed-radios",
                 "label": {
                     "text": "By email"
                 },
                 "value": "email"
             },
             {
-                "id": "phone",
+                "id": "phone-example-with-revealed-radios",
                 "label": {
                     "text": "By phone"
                 },
                 "value": "phone",
                 "other": {
                     "otherType": "radios",
-                    "id": "phone-time",
+                    "id": "phone-time-example-with-revealed-radios",
                     "name": "phone-time",
                     "legend": "Choose preferred time of day",
                     "radios": [
                         {
                             "value": "anytime",
-                            "id": "anytime",
+                            "id": "anytime-example-with-revealed-radios",
                             "label": {
                                 "text": "Any time of day"
                             }
                         },
                         {
                             "value": "morning",
-                            "id": "morning",
+                            "id": "morning-example-with-revealed-radios",
                             "label": {
                                 "text": "Morning"
                             }
                         },
                         {
                             "value": "afternoon",
-                            "id": "afternoon",
+                            "id": "afternoon-example-with-revealed-radios",
                             "label": {
                                 "text": "Afternoon"
                             }
                         },
                         {
                             "value": "evening",
-                            "id": "evening",
+                            "id": "evening-example-with-revealed-radios",
                             "label": {
                                 "text": "Evening"
                             }

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

@@ -13,21 +13,21 @@
             "name": "contact",
             "checkboxes": [
                 {
-                    "id": "post",
+                    "id": "post-example-checkbox-with-revealed-select-expanded",
                     "label": {
                         "text": "By post"
                     },
                     "value": "post"
                 },
                 {
-                    "id": "email",
+                    "id": "email-example-checkbox-with-revealed-select-expanded",
                     "label": {
                         "text": "By email"
                     },
                     "value": "email"
                 },
                 {
-                    "id": "phone",
+                    "id": "phone-example-checkbox-with-revealed-select-expanded",
                     "label": {
                         "text": "By phone"
                     },
@@ -35,7 +35,7 @@
                     "checked": true,
                     "other": {
                         "otherType": "select",
-                        "id": "phone-time",
+                        "id": "phone-time-example-checkbox-with-revealed-select-expanded",
                         "name": "phone-time",
                         "label": {
                             "text": "Choose preferred time of day"

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

@@ -13,28 +13,28 @@
             "name": "contact",
             "checkboxes": [
                 {
-                    "id": "post",
+                    "id": "post-example-checkbox-with-revealed-select",
                     "label": {
                         "text": "By post"
                     },
                     "value": "post"
                 },
                 {
-                    "id": "email",
+                    "id": "email-example-checkbox-with-revealed-select",
                     "label": {
                         "text": "By email"
                     },
                     "value": "email"
                 },
                 {
-                    "id": "phone",
+                    "id": "phone-example-checkbox-with-revealed-select",
                     "label": {
                         "text": "By phone"
                     },
                     "value": "phone",
                     "other": {
                         "otherType": "select",
-                        "id": "phone-time",
+                        "id": "phone-time-example-checkbox-with-revealed-select",
                         "name": "phone-time",
                         "label": {
                             "text": "Choose preferred time of day"

package/components/checkboxes/example-checkboxes-with-revealed-text-input-expanded.njk

@@ -12,42 +12,42 @@
             "dontWrap": true,
             "checkboxes": [
                 {
-                    "id": "gluten-free",
+                    "id": "gluten-free-example-checkbox-with-revealed-text-input-expanded",
                     "label": {
                         "text": "Gluten free"
                     },
                     "value": "gluten-free"
                 },
                 {
-                    "id": "lactose-intolerant",
+                    "id": "lactose-intolerant-example-checkbox-with-revealed-text-input-expanded",
                     "label": {
                         "text": "Lactose intolerant"
                     },
                     "value": "lactose-intolerant"
                 },
                 {
-                    "id": "vegan",
+                    "id": "vegan-example-checkbox-with-revealed-text-input-expanded",
                     "label": {
                         "text": "Vegan"
                     },
                     "value": "vegan"
                 },
                 {
-                    "id": "vegetarian",
+                    "id": "vegetarian-example-checkbox-with-revealed-text-input-expanded",
                     "label": {
                         "text": "Vegetarian"
                     },
                     "value": "vegetarian"
                 },
                 {
-                    "id": "other-checkbox",
+                    "id": "other-checkbox-with-revealed-text-input-expanded",
                     "label": {
                         "text": "Other"
                     },
                     "value": "other",
                     "checked": true,
                     "other": {
-                        "id": "other-textbox",
+                        "id": "other-textbox-example-checkbox-with-revealed-text-input-expanded",
                         "name": "other-answer",
                         "label": {
                             "text": "Enter dietary requirements"

package/components/checkboxes/example-checkboxes-with-revealed-text-input.njk

@@ -12,41 +12,41 @@
             "dontWrap": true,
             "checkboxes": [
                 {
-                    "id": "gluten-free",
+                    "id": "gluten-free-example-checkbox-with-revealed-text-input",
                     "label": {
                         "text": "Gluten free"
                     },
                     "value": "gluten-free"
                 },
                 {
-                    "id": "lactose-intolerant",
+                    "id": "lactose-intolerant-example-checkbox-with-revealed-text-input",
                     "label": {
                         "text": "Lactose intolerant"
                     },
                     "value": "lactose-intolerant"
                 },
                 {
-                    "id": "vegan",
+                    "id": "vegan-example-checkbox-with-revealed-text-input",
                     "label": {
                         "text": "Vegan"
                     },
                     "value": "vegan"
                 },
                 {
-                    "id": "vegetarian",
+                    "id": "vegetarian-example-checkbox-with-revealed-text-input",
                     "label": {
                         "text": "Vegetarian"
                     },
                     "value": "vegetarian"
                 },
                 {
-                    "id": "other-checkbox",
+                    "id": "other-checkbox-with-revealed-text-input",
                     "label": {
                         "text": "Other"
                     },
                     "value": "other",
                     "other": {
-                        "id": "other-textbox",
+                        "id": "other-textbox-example-checkbox-with-revealed-text-input",
                         "name": "other-answer",
                         "label": {
                             "text": "Enter dietary requirements"

package/components/checkboxes/example-checkboxes-with-select-all-button.njk

@@ -18,28 +18,28 @@
             },
             "checkboxes": [
                 {
-                    "id": "mobile-phone",
+                    "id": "mobile-phone-example-checkbox-with-select-all-button",
                     "label": {
                         "text": "Mobile phone"
                     },
                     "value": "mobile-phone"
                 },
                 {
-                    "id": "tablet",
+                    "id": "tablet-example-checkbox-with-select-all-button",
                     "label": {
                         "text": "Tablet"
                     },
                     "value": "tablet"
                 },
                 {
-                    "id": "laptop",
+                    "id": "laptop-example-checkbox-with-select-all-button",
                     "label": {
                         "text": "Laptop"
                     },
                     "value": "laptop"
                 },
                 {
-                    "id": "desktop",
+                    "id": "desktop-example-checkbox-with-select-all-button",
                     "label": {
                         "text": "Desktop computer"
                     },

package/components/checkboxes/example-checkboxes-with-visible-text-input.njk

@@ -13,42 +13,42 @@
             "name": "dietary",
             "checkboxes": [
                 {
-                    "id": "gluten-free",
+                    "id": "gluten-free-example-checkbox-with-visible-text-input",
                     "label": {
                         "text": "Gluten free"
                     },
                     "value": "gluten-free"
                 },
                 {
-                    "id": "lactose-intolerant",
+                    "id": "lactose-intolerant-example-checkbox-with-visible-text-input",
                     "label": {
                         "text": "Lactose intolerant"
                     },
                     "value": "lactose-intolerant"
                 },
                 {
-                    "id": "vegan",
+                    "id": "vegan-example-checkbox-with-visible-text-input",
                     "label": {
                         "text": "Vegan"
                     },
                     "value": "vegan"
                 },
                 {
-                    "id": "vegetarian",
+                    "id": "vegetarian-example-checkbox-with-visible-text-input",
                     "label": {
                         "text": "Vegetarian"
                     },
                     "value": "vegetarian"
                 },
                 {
-                    "id": "other-checkbox",
+                    "id": "other-checkbox-with-visible-text-input",
                     "label": {
                         "text": "Other"
                     },
                     "value": "other",
                     "other": {
                         "open": true,
-                        "id": "other-textbox",
+                        "id": "other-textbox-example-checkbox-with-visible-text-input",
                         "name": "other-answer",
                         "label": {
                             "text": "Enter dietary requirements"

package/components/checkboxes/example-checkboxes-without-border.njk

@@ -8,21 +8,21 @@
         "borderless": true,
         "checkboxes": [
             {
-                "id": "booklet",
+                "id": "booklet-example-checkbox-without-border",
                 "label": {
                     "text": "Booklet"
                 },
                 "value": "booklet"
             },
             {
-                "id": "logo",
+                "id": "logo-example-checkbox-without-border",
                 "label": {
                     "text": "Logo"
                 },
                 "value": "logo"
             },
             {
-                "id": "poster",
+                "id": "poster-example-checkbox-without-border",
                 "label": {
                     "text": "Poster"
                 },

package/components/checkboxes/example-checkboxes.njk

@@ -13,28 +13,28 @@
             "name": "devices",
             "checkboxes": [
                 {
-                    "id": "mobile-phone",
+                    "id": "mobile-phone-example",
                     "label": {
                         "text": "Mobile phone"
                     },
                     "value": "mobile-phone"
                 },
                 {
-                    "id": "tablet",
+                    "id": "tablet-example",
                     "label": {
                         "text": "Tablet"
                     },
                     "value": "tablet"
                 },
                 {
-                    "id": "laptop",
+                    "id": "laptop-example",
                     "label": {
                         "text": "Laptop"
                     },
                     "value": "laptop"
                 },
                 {
-                    "id": "desktop",
+                    "id": "desktop-example",
                     "label": {
                         "text": "Desktop computer"
                     },

package/components/date-input/example-date-input-error.njk

@@ -2,7 +2,7 @@
 {% from "components/date-input/_macro.njk" import onsDateInput %}
 {{
     onsDateInput({
-        "id": "period-from-date",
+        "id": "period-from-date-input-error-example",
         "legendOrLabel": "Period from:",
         "description": "For example, 31 3 2019",
         "day": {
@@ -31,7 +31,7 @@
 
 {{
     onsDateInput({
-        "id": "period-to-date",
+        "id": "period-to-date-input-error-example",
         "legendOrLabel": "Period to:",
         "description": "For example, 31 3 2020",
         "day": {

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

@@ -2,7 +2,7 @@
 
 {{
     onsDateInput({
-        "id": "date",
+        "id": "date-input-example",
         "legendOrLabel": "Date of birth",
         "description": "For example, 31 3 1980",
         "day": {

package/components/details/example-details-with-warning.njk

@@ -3,7 +3,7 @@
 
 {%
     call onsDetails({
-        "id": "details",
+        "id": "details-example-with-warning",
         "title": "Need to answer separately from your household?"
     })
 %}

package/components/details/example-details.njk

@@ -2,7 +2,7 @@
 
 {{
     onsDetails({
-        "id": "details",
+        "id": "details-example",
         "title": "What is a photovoltaic system?",
         "content": "<p>A typical photovoltaic system employs solar panels, each comprising a number of solar cells, which generate electrical power. PV installations may be ground-mounted, rooftop mounted or wall mounted. The mount may be fixed, or use a solar tracker to follow the sun across the sky.</p>"
     })

package/components/duration/example-duration-error.njk

@@ -3,27 +3,27 @@
 
 {{
     onsDuration({
-        "id": "address-duration",
+        "id": "address-duration-error-example",
         "legendOrLabel": 'How long have you lived at this address?',
         "legendClasses": 'ons-u-vh',
         "field1": {
-            "id": "address-duration-years",
+            "id": "address-duration-years-error-example",
             "name": "address-duration-years",
             "suffix": {
                 "text": "Years",
-                "id": "address-duration-years-suffix"
+                "id": "address-duration-years-suffix-error-example"
             }
         },
         "field2": {
-            "id": "address-duration-months",
+            "id": "address-duration-months-error-example",
             "name": "address-duration-months",
             "suffix": {
                 "text": "Months",
-                "id": "address-duration-months-suffix"
+                "id": "address-duration-months-suffix-error-example"
             }
         },
         "error": {
-            "id": "address-duration-error",
+            "id": "address-duration-error-example",
             "text": "Enter how long you have lived at this address"
         }
     })

package/components/duration/example-duration.njk

@@ -7,25 +7,25 @@
     "legendIsQuestionTitle": true
 }) %}
     {{ onsDuration({
-        "id": "address-duration",
+        "id": "address-duration-example",
         "dontWrap": true,
         "field1": {
-            "id": "address-duration-years",
+            "id": "address-duration-years-example",
             "name": "address-duration-years",
             "suffix": {
                 "text": "Years",
-                "id": "address-duration-years-suffix"
+                "id": "address-duration-years-suffix-example"
             },
             "attributes": {
                 "autocomplete": "off"
             }
         },
         "field2": {
-            "id": "address-duration-months",
+            "id": "address-duration-months-example",
             "name": "address-duration-months",
             "suffix": {
                 "text": "Months",
-                "id": "address-duration-months-suffix"
+                "id": "address-duration-months-suffix-example"
             },
             "attributes": {
                 "autocomplete": "off"

package/components/header/example-header-external-with-service-links.njk

@@ -9,7 +9,7 @@
         "mastheadLogoUrl": '#0',
         "titleUrl": '#0',
         "serviceLinks": {
-            "id": "service-links",
+            "id": "service-links-external",
             "ariaLabel": 'Services menu',
             "ariaListLabel": 'Menu',
             "toggleServicesButton": {

package/components/header/example-header-internal.njk

@@ -10,7 +10,7 @@
         "variants": 'internal',
         "titleUrl": '#0',
         "serviceLinks": {
-            "id": "service-links",
+            "id": "service-links-internal",
             "ariaLabel": 'Services menu',
             "ariaListLabel": 'Menu',
             "toggleServicesButton": {

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

@@ -1,7 +1,7 @@
 {% from "components/input/_macro.njk" import onsInput %}
 {{
     onsInput({
-        "id": "email",
+        "id": "email-example-input-email",
         "type": "email",
         "autocomplete": "email",
         "label": {

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

@@ -1,7 +1,7 @@
 {% from "components/input/_macro.njk" import onsInput %}
 {{
     onsInput({
-        "id": "number",
+        "id": "number-example-input",
         "type": "number",
         "width": "2",
         "autocomplete": "off",

package/components/input/example-input-numeric-values.njk

@@ -1,7 +1,7 @@
 {% from "components/input/_macro.njk" import onsInput %}
 {{
     onsInput({
-        "id": "number",
+        "id": "number-example-input-numeric-values",
         "type": "number",
         "width": "2",
         "autocomplete": "off",
@@ -15,7 +15,7 @@
 }}
 {{
     onsInput({
-        "id": "prefixed",
+        "id": "prefixed-example-input-numeric-values",
         "type": "number",
         "width": "6",
         "autocomplete": "off",
@@ -25,13 +25,13 @@
         "prefix": {
             "text": "£",
             "title": "British pounds (GBP)",
-            "id": "annual-salary-gpb-prefix"
+            "id": "annual-salary-gpb-prefix-example-input-numeric-values"
         }
     })
 }}
 {{
     onsInput({
-        "id": "suffixed-percent",
+        "id": "suffixed-percent-example-input-numeric-values",
         "type": "number",
         "width": "3",
         "autocomplete": "off",
@@ -41,13 +41,13 @@
         "suffix": {
             "title": "per cent",
             "text": "%",
-            "id": "internet-access-per-cent-suffix"
+            "id": "internet-access-per-cent-suffix-example-input-numeric-values"
         }
     })
 }}
 {{
     onsInput({
-        "id": "suffixed-centimetres",
+        "id": "suffixed-centimetres-example-input-numeric-values",
         "type": "number",
         "width": "4",
         "autocomplete": "off",
@@ -58,7 +58,7 @@
         "suffix": {
             "title": "centimetres",
             "text": "cm",
-            "id": "length-cm-suffix"
+            "id": "length-cm-suffix-example-input-numeric-values"
         }
     })
 }}

package/components/input/example-input-text-with-character-limit-checker.njk

@@ -1,7 +1,7 @@
 {% from "components/input/_macro.njk" import onsInput %}
 {{
     onsInput({
-        "id": "text",
+        "id": "text-example-input-with-char-limit-checker",
         "label": {
             "text": "Enter some text"
         },

package/components/input/example-input-text-with-description.njk

@@ -1,7 +1,7 @@
 {% from "components/input/_macro.njk" import onsInput %}
 {{
     onsInput({
-        "id": "text",
+        "id": "text-example-input-with-description",
         "label": {
             "text": "Enter some text",
             "description": "Example description hint text"

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

@@ -1,7 +1,7 @@
 {% from "components/input/_macro.njk" import onsInput %}
 {{
     onsInput({
-        "id": "text",
+        "id": "text-example-input",
         "label": {
             "text": "Enter some text"
         }