@ons/design-system 62.0.2 → 62.1.1

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

@@ -0,0 +1,38 @@
+---
+title: "Example: Interstitial page with interviewer note"
+layout: ~
+---
+{# TO DO: To be used in a new 'Interstitial' page pattern #}
+
+{% extends "layout/_template.njk" %}
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/details/_macro.njk" import onsDetails %}
+{% from "components/input/_macro.njk" import onsInput %}
+{% from "components/button/_macro.njk" import onsButton %}
+
+{% set pageConfig = {
+    "header": {
+        "title": "Interviewer led interstitial"
+    },
+    "breadcrumbs": {
+        "ariaLabel": 'Breadcrumbs',
+        "itemsList": [
+            {
+                "url": '#0',
+                "text": 'Previous'
+            }
+        ]
+    }
+} %}
+
+{% 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>",
+        "submitButton": {
+            "variants": "timer",
+            "text": "Continue"
+        }
+    }) %}
+    {% endcall %}
+{% endblock %}

package/components/question/example-question-no-fieldset.njk

@@ -0,0 +1,46 @@
+---
+title: "Example: Question without a fieldset"
+layout: ~
+---
+{% extends "layout/_template.njk" %}
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/details/_macro.njk" import onsDetails %}
+{% from "components/input/_macro.njk" import onsInput %}
+{% from "components/button/_macro.njk" import onsButton %}
+
+{% set pageConfig = {
+    "header": {
+        "title": "Question example"
+    },
+    "breadcrumbs": {
+        "ariaLabel": 'Breadcrumbs',
+        "itemsList": [
+            {
+                "url": '#0',
+                "text": 'Previous'
+            }
+        ]
+    }
+} %}
+
+{% block main %}
+    {% call onsQuestion({
+        "title": "How many visitors are staying overnight at 3 Severn Road on 13 May 2019?",
+        "description": "<p>Enter “0” if there are no visitors staying overnight</p>",
+        "justification": {
+            "title": "Why we ask this question",
+            "content": "<p>Visitor information is collected to ensure that everyone is counted, in order to produce accurate estimates of the population, to facilitate effective planning and funding decisions.</p>"
+        },
+        "submitButton": true
+    }) %}
+        {{ onsInput({
+            "id": "number-of-visitors",
+            "name": "number-of-visitors",
+            "type": "number",
+            "width": "2",
+            "label": {
+                "text": "Number of visitors"
+            }
+        }) }}
+    {% endcall %}
+{% endblock %}

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

@@ -0,0 +1,97 @@
+{% 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",
+                        "other": {
+                            "otherType": "input",
+                            "id": "other-textbox",
+                            "name": "other-answer",
+                            "label": {
+                                "text": "Enter your religion"
+                            }
+                        }
+                    }
+                ]
+            })
+        }}
+    </form>
+{% endcall %}

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

@@ -0,0 +1,57 @@
+{% from "components/radios/_macro.njk" import onsRadios %}
+{% from "components/question/_macro.njk" import onsQuestion %}
+
+{% call onsQuestion({
+    "title": "What is your ethnic group or background?",
+    "classes": "ons-u-mt-no",
+    "legendIsQuestionTitle": true
+}) %}
+    {{
+        onsRadios({
+            "dontWrap": true,
+            "name": "ethnicity",
+            "radios": [
+                {
+                    "id": "white",
+                    "label": {
+                        "text": "White",
+                        "description": "Includes British, Northern Irish, Irish, Gypsy, Irish Traveller, Roma or any other White background"
+                    },
+                    "name": "white"
+                },
+                {
+                    "id": "mixed",
+                    "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"
+                    },
+                    "name": "mixed"
+                },
+                {
+                    "id": "asian",
+                    "label": {
+                        "text": "Asian or Asian British",
+                        "description": "Includes Indian, Pakistani, Bangladeshi, Chinese or any other Asian background"
+                    },
+                    "name": "asian"
+                },
+                {
+                    "id": "black",
+                    "label": {
+                        "text": "Black, Black British, Caribbean or African",
+                        "description": "Includes Black British, Caribbean, African or any other Black background"
+                    },
+                    "name": "black"
+                },
+                {
+                    "id": "other",
+                    "label": {
+                        "text": "Other ethnic group",
+                        "description": "Includes Arab or any other ethnic group"
+                    },
+                    "name": "other"
+                }
+            ]
+        })
+    }}
+{% endcall %}

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

@@ -0,0 +1,38 @@
+{% from "components/radios/_macro.njk" import onsRadios %}
+
+{{
+    onsRadios({
+        "name": "gender-identity",
+        "dontWrap": true,
+        "radios": [
+            {
+                "id": "yes",
+                "label": {
+                    "text": "Yes"
+                },
+                "value": "yes"
+            },
+            {
+                "id": "no",
+                "label": {
+                    "text": "No"
+                },
+                "value": "no",
+                "checked": true,
+                "other": {
+                    "open": true,
+                    "otherType": "input",
+                    "id": "no-textbox",
+                    "name": "no-answer",
+                    "label": {
+                        "text": "Enter your gender identity"
+                    }
+                }
+            }
+        ],
+        "error": {
+            "id": "dietary-error",
+            "text": "Enter your gender identity"
+        }
+    })
+}}

package/components/radios/example-radios-with-revealed-checkboxes.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",
+                "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.njk

@@ -0,0 +1,68 @@
+{% 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",
+                "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.njk

@@ -0,0 +1,69 @@
+{% 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",
+                    "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.njk

@@ -0,0 +1,80 @@
+{% 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",
+                    "other": {
+                        "id": "other-textbox",
+                        "name": "other-answer",
+                        "label": {
+                            "text": "Enter how you travel"
+                        }
+                    }
+                }
+            ]
+        })
+    }}
+{% endcall %}

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

@@ -0,0 +1,59 @@
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/radios/_macro.njk" import onsRadios %}
+
+{% call onsQuestion({
+    "title": "How satisfied are you with this service?",
+    "legendIsQuestionTitle": true
+}) %}
+    {{
+        onsRadios({
+            "dontWrap": true,
+            "name": "satisfaction",
+            "or": "Or",
+            "radios": [
+                {
+                    "id": "very-satisfied",
+                    "label": {
+                        "text": "Very satisfied"
+                    },
+                    "value": "very-satisfied"
+                },
+                {
+                    "id": "somewhat-satisfied",
+                    "label": {
+                        "text": "Somewhat satisfied"
+                    },
+                    "value": "somewhat-satisfied"
+                },
+                {
+                    "id": "neither",
+                    "label": {
+                        "text": "Neither satisfied or dissatisfied"
+                    },
+                    "value": "neither"
+                },
+                {
+                    "id": "somewhat-dissatisfied",
+                    "label": {
+                        "text": "Somewhat dissatisfied"
+                    },
+                    "value": "somewhat-dissatisfied"
+                },
+                {
+                    "id": "very-dissatisfied",
+                    "label": {
+                        "text": "Very dissatisfied"
+                    },
+                    "value": "very-dissatisfied"
+                },
+                {
+                    "id": "no",
+                    "label": {
+                        "text": "I don’t want to give feedback"
+                    },
+                    "value": "no"
+                }
+            ]
+        })
+    }}
+{% endcall %}

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

@@ -0,0 +1,40 @@
+{% from "components/radios/_macro.njk" import onsRadios %}
+{% from "components/question/_macro.njk" import onsQuestion %}
+
+{% call onsQuestion({
+    "title": "Is the gender you identify with the same as your sex registered at birth?",
+    "classes": "ons-u-mt-no",
+    "legendIsQuestionTitle": true
+}) %}
+    {{
+        onsRadios({
+            "dontWrap": true,
+            "name": "gender-identity",
+            "radios": [
+                {
+                    "id": "yes",
+                    "label": {
+                        "text": "Yes"
+                    },
+                    "value": "yes"
+                },
+                {
+                    "id": "no",
+                    "label": {
+                        "text": "No"
+                    },
+                    "value": "no",
+                    "other": {
+                        "open": true,
+                        "otherType": "input",
+                        "id": "no-textbox",
+                        "name": "no-answer",
+                        "label": {
+                            "text": "Enter your gender identity"
+                        }
+                    }
+                }
+            ]
+        })
+    }}
+{% endcall %}