@ons/design-system 65.0.0 → 65.2.0

package/components/question/example-question-interviewer-note.njk

@@ -25,7 +25,7 @@ layout: ~
 {% block main %}
     {% call onsQuestion({
         "title": "<mark class=\"ons-instruction\">Interviewer note:</mark>Who to interview",
-        "instruction": "<p>Only interview a person who was usually living at the property on <em>Sunday 21 March 2021</em>.</p><p>If none of those house members are available, you must save and sign out and return to the address to interview one of them at a later date.</p>",
+        "instruction": "<p>Only interview a person who was usually living at the property on <strong>Sunday 21 March 2021</strong>.</p><p>If none of those house members are available, you must save and sign out and return to the address to interview one of them at a later date.</p>",
         "submitButton": {
             "variants": "timer",
             "text": "Continue"

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

@@ -0,0 +1,98 @@
+{% from "components/radios/_macro.njk" import onsRadios %}
+{% from "components/button/_macro.njk" import onsButton %}
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/panel/_macro.njk" import onsPanel %}
+
+{% call onsQuestion({
+    "title": "What is your religion?",
+    "legendIsQuestionTitle": true
+}) %}
+    {{
+        onsPanel({
+            "body": '<p>This question is <strong>voluntary</strong></p>',
+            "classes": 'ons-u-mb-m'
+        })
+    }}
+    <form onsubmit="return false;">
+        {{
+            onsRadios({
+                "dontWrap": true,
+                "name": "religion",
+                "clearRadios": {
+                    "text": "Clear selection",
+                    "name": "clear-radios",
+                    "ariaClearText": "You can clear your answer using the clear selection button after the radio inputs",
+                    "ariaClearedText": "You have cleared your answer"
+                },
+                "radios": [
+                    {
+                        "id": "none",
+                        "label": {
+                            "text": "No religion"
+                        },
+                        "value": "none"
+                    },
+                    {
+                        "id": "christian",
+                        "label": {
+                            "text": "Christian",
+                            "description": "Including Church of England, Catholic, Protestant and all other Christian denominations"
+                        },
+                        "value": "christian"
+                    },
+                    {
+                        "id": "buddhist",
+                        "label": {
+                            "text": "Buddhist"
+                        },
+                        "value": "buddhist"
+                    },
+                    {
+                        "id": "hindu",
+                        "label": {
+                            "text": "Hindu"
+                        },
+                        "value": "hindu"
+                    },
+                    {
+                        "id": "jewish",
+                        "label": {
+                            "text": "Jewish"
+                        },
+                        "value": "jewish"
+                    },
+                    {
+                        "id": "muslim",
+                        "label": {
+                            "text": "Muslim"
+                        },
+                        "value": "muslim"
+                    },
+                    {
+                        "id": "sikh",
+                        "label": {
+                            "text": "Sikh"
+                        },
+                        "value": "sikh"
+                    },
+                    {
+                        "id": "other-radio",
+                        "label": {
+                            "text": "Any other religion"
+                        },
+                        "value": "other",
+                        "checked": true,
+                        "other": {
+                            "otherType": "input",
+                            "id": "other-textbox",
+                            "name": "other-answer",
+                            "label": {
+                                "text": "Enter your religion"
+                            }
+                        }
+                    }
+                ]
+            })
+        }}
+    </form>
+{% endcall %}

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

@@ -0,0 +1,70 @@
+{% from "components/radios/_macro.njk" import onsRadios %}
+
+{{
+    onsRadios({
+        "legend": "How would you like us to contact you?",
+        "name": "contact",
+        "borderless": true,
+        "radios": [
+            {
+                "id": "post",
+                "label": {
+                    "text": "By post"
+                },
+                "value": "post"
+            },
+            {
+                "id": "email",
+                "label": {
+                    "text": "By email"
+                },
+                "value": "email"
+            },
+            {
+                "id": "phone",
+                "label": {
+                    "text": "By phone"
+                },
+                "value": "phone",
+                "checked": true,
+                "other": {
+                    "otherType": "checkboxes",
+                    "selectAllChildren": true,
+                    "id": "phone-time",
+                    "name": "phone-time",
+                    "legend": "Select preferred times of day",
+                    "checkboxes": [
+                        {
+                            "value": "anytime",
+                            "id": "anytime",
+                            "label": {
+                                "text": "Anytime of day"
+                            }
+                        },
+                        {
+                            "value": "morning",
+                            "id": "morning",
+                            "label": {
+                                "text": "Morning"
+                            }
+                        },
+                        {
+                            "value": "afternoon",
+                            "id": "afternoon",
+                            "label": {
+                                "text": "Afternoon"
+                            }
+                        },
+                        {
+                            "value": "evening",
+                            "id": "evening",
+                            "label": {
+                                "text": "Evening"
+                            }
+                        }
+                    ]
+                }
+            }
+        ]
+    })
+}}

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

@@ -0,0 +1,69 @@
+{% from "components/radios/_macro.njk" import onsRadios %}
+
+{{
+    onsRadios({
+        "legend": "How would you like us to contact you?",
+        "name": "contact",
+        "borderless": true,
+        "radios": [
+            {
+                "id": "post",
+                "label": {
+                    "text": "By post"
+                },
+                "value": "post"
+            },
+            {
+                "id": "email",
+                "label": {
+                    "text": "By email"
+                },
+                "value": "email"
+            },
+            {
+                "id": "phone",
+                "label": {
+                    "text": "By phone"
+                },
+                "value": "phone",
+                "checked": true,
+                "other": {
+                    "otherType": "radios",
+                    "id": "phone-time",
+                    "name": "phone-time",
+                    "legend": "Choose preferred time of day",
+                    "radios": [
+                        {
+                            "value": "anytime",
+                            "id": "anytime",
+                            "label": {
+                                "text": "Anytime of day"
+                            }
+                        },
+                        {
+                            "value": "morning",
+                            "id": "morning",
+                            "label": {
+                                "text": "Morning"
+                            }
+                        },
+                        {
+                            "value": "afternoon",
+                            "id": "afternoon",
+                            "label": {
+                                "text": "Afternoon"
+                            }
+                        },
+                        {
+                            "value": "evening",
+                            "id": "evening",
+                            "label": {
+                                "text": "Evening"
+                            }
+                        }
+                    ]
+                }
+            }
+        ]
+    })
+}}

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

@@ -0,0 +1,70 @@
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/radios/_macro.njk" import onsRadios %}
+
+{% call onsQuestion({
+    "title": "How would you like us to contact you?",
+    "legendIsQuestionTitle": true
+}) %}
+    {{
+        onsRadios({
+            "dontWrap": true,
+            "name": "contact",
+            "radios": [
+                {
+                    "id": "post",
+                    "label": {
+                        "text": "By post"
+                    },
+                    "value": "post"
+                },
+                {
+                    "id": "email",
+                    "label": {
+                        "text": "By email"
+                    },
+                    "value": "email"
+                },
+                {
+                    "id": "phone",
+                    "label": {
+                        "text": "By phone"
+                    },
+                    "value": "phone",
+                    "checked": true,
+                    "other": {
+                        "otherType": "select",
+                        "id": "phone-time",
+                        "name": "phone-time",
+                        "label": {
+                            "text": "Choose preferred time of day"
+                        },
+                        "options": [
+                            {
+                                "value": "",
+                                "text": "Select an option",
+                                "disabled": true,
+                                "selected": true
+                            },
+                            {
+                                "value": "anytime",
+                                "text": "Any time of day"
+                            },
+                            {
+                                "value": "morning",
+                                "text": "Morning"
+                            },
+                            {
+                                "value": "afternoon",
+                                "text": "Afternoon"
+                            },
+                            {
+                                "value": "evening",
+                                "text": "Evening"
+                            }
+                        ]
+                    }
+                }
+            ]
+        })
+    }}
+{% endcall %}

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

@@ -0,0 +1,81 @@
+{% from "components/radios/_macro.njk" import onsRadios %}
+{% from "components/question/_macro.njk" import onsQuestion %}
+
+{% call onsQuestion({
+    "title": "How do you usually travel to work?",
+    "classes": "ons-u-mt-no",
+    "legendIsQuestionTitle": true
+}) %}
+    {{
+        onsRadios({
+            "dontWrap": true,
+            "name": "travel",
+            "radios": [
+                {
+                    "id": "home",
+                    "label": {
+                        "text": "Work mainly from home"
+                    },
+                    "value": "home"
+                },
+                {
+                    "id": "car",
+                    "label": {
+                        "text": "Car or van"
+                    },
+                    "value": "car"
+                },
+                {
+                    "id": "underground",
+                    "label": {
+                        "text": "Underground, metro, light rail or tram"
+                    },
+                    "value": "underground"
+                },
+                {
+                    "id": "train",
+                    "label": {
+                        "text": "Train"
+                    },
+                    "value": "train"
+                },
+                {
+                    "id": "bus",
+                    "label": {
+                        "text": "Bus, minibus or coach"
+                    },
+                    "value": "bus"
+                },
+                {
+                    "id": "bicycle",
+                    "label": {
+                        "text": "Bicycle"
+                    },
+                    "value": "bicycle"
+                },
+                {
+                    "id": "walk",
+                    "label": {
+                        "text": "Walk"
+                    },
+                    "value": "walk"
+                },
+                {
+                    "id": "other-radio",
+                    "label": {
+                        "text": "Other"
+                    },
+                    "value": "other",
+                    "checked": true,
+                    "other": {
+                        "id": "other-textbox",
+                        "name": "other-answer",
+                        "label": {
+                            "text": "Enter how you travel"
+                        }
+                    }
+                }
+            ]
+        })
+    }}
+{% endcall %}

package/components/relationships/_macro.spec.js

@@ -6,7 +6,7 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_RELATIONSHIPS = {
-  playback: "Amanda Bloggs is Joe Bloggs' <em>…</em>",
+  playback: "Amanda Bloggs is Joe Bloggs' <strong>…</strong>",
   name: 'relationship',
   dontWrap: true,
   legendIsQuestionTitle: true,
@@ -18,8 +18,8 @@ const EXAMPLE_RELATIONSHIPS = {
         text: 'Grandparent',
       },
       attributes: {
-        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <em>grandparents</em>',
-        'data-playback': "Amanda Bloggs is Joe Bloggs' <em>grandparents</em>",
+        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <strong>grandparents</strong>',
+        'data-playback': "Amanda Bloggs is Joe Bloggs' <strong>grandparents</strong>",
       },
     },
     {
@@ -29,8 +29,8 @@ const EXAMPLE_RELATIONSHIPS = {
         text: 'Other relation',
       },
       attributes: {
-        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <em>other relation</em>',
-        'data-playback': "Amanda Bloggs is Joe Bloggs' <em>other relation</em>",
+        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <strong>other relation</strong>',
+        'data-playback': "Amanda Bloggs is Joe Bloggs' <strong>other relation</strong>",
       },
     },
     {
@@ -41,8 +41,8 @@ const EXAMPLE_RELATIONSHIPS = {
         description: 'Including foster child',
       },
       attributes: {
-        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is <em>unrelated</em> to Joe Bloggs',
-        'data-playback': 'Amanda Bloggs is <em>unrelated</em> to Joe Bloggs',
+        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs',
+        'data-playback': 'Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs',
       },
     },
   ],
@@ -82,10 +82,8 @@ describe('macro: relationships', () => {
   it('has the provided `playback` text', () => {
     const $ = cheerio.load(renderComponent('relationships', EXAMPLE_RELATIONSHIPS));
 
-    const playbackContent = $('.ons-relationships__playback')
-      .html()
-      .trim();
-    expect(playbackContent).toBe("Amanda Bloggs is Joe Bloggs' <em>…</em>");
+    const playbackContent = $('.ons-relationships__playback').html().trim();
+    expect(playbackContent).toBe("Amanda Bloggs is Joe Bloggs' <strong>…</strong>");
   });
 
   it('has playback paragraph hidden initially', async () => {

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

@@ -45,7 +45,7 @@ layout: ~
     }}
     {% endcall %}
     {% call onsQuestion({
-        "title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>…</em>",
+        "title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>…</strong>",
         "description": "<p>Complete the sentence by selecting the appropriate relationship</p>",
         "readDescriptionFirst": true,
         "legendIsQuestionTitle": true,
@@ -53,7 +53,7 @@ layout: ~
         "submitButton": true
     }) %}
         {{ onsRelationships({
-            "playback": "Amanda Bloggs is Joe Bloggs' <em>…</em>",
+            "playback": "Amanda Bloggs is Joe Bloggs' <strong>…</strong>",
             "name": "relationship",
             "dontWrap": true,
             "error": {
@@ -68,8 +68,8 @@ layout: ~
                         "text": "Husband or wife"
                     },
                     "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>husband or wife</em>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>husband or wife</em>"
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>husband or wife</strong>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>husband or wife</strong>"
                     }
                 },
                 {
@@ -79,8 +79,8 @@ layout: ~
                         "text": "Legally registered civil partner"
                     },
                     "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>legally registered civil partner</em>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>legally registered civil partner</em>"
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>legally registered civil partner</strong>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>legally registered civil partner</strong>"
                     }
                 },
                 {
@@ -90,8 +90,8 @@ layout: ~
                         "text": "Partner"
                     },
                     "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>partner</em>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>partner</em>"
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>partner</strong>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>partner</strong>"
                     }
                 },
                 {
@@ -101,8 +101,8 @@ layout: ~
                         "text": "Son or daughter"
                     },
                     "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>son or daughter</em>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>son or daughter</em>"
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>son or daughter</strong>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>son or daughter</strong>"
                     }
                 },
                 {
@@ -112,8 +112,8 @@ layout: ~
                         "text": "Stepchild"
                     },
                     "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>stepchild</em>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>stepchild</em>"
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>stepchild</strong>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>stepchild</strong>"
                     }
                 },
                 {
@@ -123,8 +123,8 @@ layout: ~
                         "text": "Brother or sister"
                     },
                     "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>brother or sister</em>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>brother or sister</em>"
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>brother or sister</strong>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>brother or sister</strong>"
                     }
                 },
                 {
@@ -134,8 +134,8 @@ layout: ~
                         "text": "Stepbrother or stepsister"
                     },
                     "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>stepbrother or sister</em>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>stepbrother or sister</em>"
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>stepbrother or sister</strong>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>stepbrother or sister</strong>"
                     }
                 },
                 {
@@ -145,8 +145,8 @@ layout: ~
                         "text": "Mother or father"
                     },
                     "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>mother or father</em>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>mother or father</em>"
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>mother or father</strong>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>mother or father</strong>"
                     }
                 },
                 {
@@ -156,8 +156,8 @@ layout: ~
                         "text": "Stepmother or stepfather"
                     },
                     "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>stepmother or stepfather</em>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>stepmother or stepfather</em>"
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>stepmother or stepfather</strong>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>stepmother or stepfather</strong>"
                     }
                 },
                 {
@@ -167,8 +167,8 @@ layout: ~
                         "text": "Grandchild"
                     },
                     "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>grandchild</em>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>grandchild</em>"
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>grandchild</strong>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>grandchild</strong>"
                     }
                 },
                 {
@@ -178,8 +178,8 @@ layout: ~
                         "text": "Grandparent"
                     },
                     "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>grandparents</em>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>grandparents</em>"
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>grandparents</strong>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>grandparents</strong>"
                     }
                 },
                 {
@@ -189,8 +189,8 @@ layout: ~
                         "text": "Other relation"
                     },
                     "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>other relation</em>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>other relation</em>"
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>other relation</strong>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>other relation</strong>"
                     }
                 },
                 {
@@ -201,8 +201,8 @@ layout: ~
                         "description": "Including foster child"
                     },
                     "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is <em>unrelated</em> to Joe Bloggs",
-                        "data-playback": "Amanda Bloggs is <em>unrelated</em> to Joe Bloggs"
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs",
+                        "data-playback": "Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs"
                     }
                 }
             ]