@ons/design-system 65.2.0 → 65.2.2

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 @@
             }
         ]
     })
-}}
+}}

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

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

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

@@ -11,21 +11,21 @@
             "name": "contact",
             "radios": [
                 {
-                    "id": "post",
+                    "id": "post-example-with-revealed-select-expanded",
                     "label": {
                         "text": "By post"
                     },
                     "value": "post"
                 },
                 {
-                    "id": "email",
+                    "id": "email-example-with-revealed-select-expanded",
                     "label": {
                         "text": "By email"
                     },
                     "value": "email"
                 },
                 {
-                    "id": "phone",
+                    "id": "phone-example-with-revealed-select-expanded",
                     "label": {
                         "text": "By phone"
                     },
@@ -33,7 +33,7 @@
                     "checked": true,
                     "other": {
                         "otherType": "select",
-                        "id": "phone-time",
+                        "id": "phone-time-example-with-revealed-select-expanded",
                         "name": "phone-time",
                         "label": {
                             "text": "Choose preferred time of day"
@@ -67,4 +67,4 @@
             ]
         })
     }}
-{% endcall %}
+{% endcall %}

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

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

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

@@ -12,63 +12,63 @@
             "name": "travel",
             "radios": [
                 {
-                    "id": "home",
+                    "id": "home-example-radio-with-revealed-text-input-expanded",
                     "label": {
                         "text": "Work mainly from home"
                     },
                     "value": "home"
                 },
                 {
-                    "id": "car",
+                    "id": "car-example-radio-with-revealed-text-input-expanded",
                     "label": {
                         "text": "Car or van"
                     },
                     "value": "car"
                 },
                 {
-                    "id": "underground",
+                    "id": "underground-example-radio-with-revealed-text-input-expanded",
                     "label": {
                         "text": "Underground, metro, light rail or tram"
                     },
                     "value": "underground"
                 },
                 {
-                    "id": "train",
+                    "id": "train-example-radio-with-revealed-text-input-expanded",
                     "label": {
                         "text": "Train"
                     },
                     "value": "train"
                 },
                 {
-                    "id": "bus",
+                    "id": "bus-example-radio-with-revealed-text-input-expanded",
                     "label": {
                         "text": "Bus, minibus or coach"
                     },
                     "value": "bus"
                 },
                 {
-                    "id": "bicycle",
+                    "id": "bicycle-example-radio-with-revealed-text-input-expanded",
                     "label": {
                         "text": "Bicycle"
                     },
                     "value": "bicycle"
                 },
                 {
-                    "id": "walk",
+                    "id": "walk-example-radio-with-revealed-text-input-expanded",
                     "label": {
                         "text": "Walk"
                     },
                     "value": "walk"
                 },
                 {
-                    "id": "other-radio",
+                    "id": "other-radio-with-revealed-text-input-expanded",
                     "label": {
                         "text": "Other"
                     },
                     "value": "other",
                     "checked": true,
                     "other": {
-                        "id": "other-textbox",
+                        "id": "other-textbox-example-radio-with-revealed-text-input-expanded",
                         "name": "other-answer",
                         "label": {
                             "text": "Enter how you travel"

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

@@ -12,62 +12,62 @@
             "name": "travel",
             "radios": [
                 {
-                    "id": "home",
+                    "id": "home-example-radio-with-revealed-text-input",
                     "label": {
                         "text": "Work mainly from home"
                     },
                     "value": "home"
                 },
                 {
-                    "id": "car",
+                    "id": "car-example-radio-with-revealed-text-input",
                     "label": {
                         "text": "Car or van"
                     },
                     "value": "car"
                 },
                 {
-                    "id": "underground",
+                    "id": "underground-example-radio-with-revealed-text-input",
                     "label": {
                         "text": "Underground, metro, light rail or tram"
                     },
                     "value": "underground"
                 },
                 {
-                    "id": "train",
+                    "id": "train-example-radio-with-revealed-text-input",
                     "label": {
                         "text": "Train"
                     },
                     "value": "train"
                 },
                 {
-                    "id": "bus",
+                    "id": "bus-example-radio-with-revealed-text-input",
                     "label": {
                         "text": "Bus, minibus or coach"
                     },
                     "value": "bus"
                 },
                 {
-                    "id": "bicycle",
+                    "id": "bicycle-example-radio-with-revealed-text-input",
                     "label": {
                         "text": "Bicycle"
                     },
                     "value": "bicycle"
                 },
                 {
-                    "id": "walk",
+                    "id": "walk-example-radio-with-revealed-text-input",
                     "label": {
                         "text": "Walk"
                     },
                     "value": "walk"
                 },
                 {
-                    "id": "other-radio",
+                    "id": "other-radio-example-radio-with-revealed-text-input",
                     "label": {
                         "text": "Other"
                     },
                     "value": "other",
                     "other": {
-                        "id": "other-textbox",
+                        "id": "other-textbox-example-radio-with-revealed-text-input",
                         "name": "other-answer",
                         "label": {
                             "text": "Enter how you travel"