@ons/design-system 62.0.1 → 62.1.0

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

@@ -0,0 +1,10 @@
+---
+"fullWidth": true
+---
+{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
+{{
+    onsPhaseBanner({
+        "badge": 'Alpha',
+        "html": 'This is a new service. To help us improve it, <a href="#0">give feedback</a>'
+    })
+}}

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

@@ -0,0 +1,9 @@
+---
+"fullWidth": true
+---
+{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
+{{
+    onsPhaseBanner({
+        "html": 'This is a new service. To help us improve it, <a href="#0">give feedback</a>'
+    })
+}}

package/components/question/example-question-ccs.njk

@@ -0,0 +1,49 @@
+---
+title: "Example: Question with an interviewer instruction"
+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": "Interviewer led question example"
+    },
+    "breadcrumbs": {
+        "ariaLabel": 'Breadcrumbs',
+        "itemsList": [
+            {
+                "url": '#0',
+                "text": 'Previous'
+            }
+        ]
+    }
+} %}
+
+{% block main %}
+    {% call onsQuestion({
+        "title": "How many visitors do you have staying overnight at 3 Severn Road on Sunday 21 March 2021?",
+        "description": "<p>A visitor is anyone aged <strong>16 years or over</strong> who usually lives at another address. Enter “0” if there are no visitors staying overnight.</p>",
+        "instruction": "<p>Tell respondent to turn to <strong>Showcard 2</strong> or show them the following Electronic Showcard</p>",
+        "definition": {
+            "title": "Electronic Showcard",
+            "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/question/example-question-fieldset.njk

@@ -0,0 +1,99 @@
+---
+title: "Example: Question as a fieldset"
+layout: ~
+---
+{% extends "layout/_template.njk" %}
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/details/_macro.njk" import onsDetails %}
+{% from "components/panel/_macro.njk" import onsPanel %}
+{% from "components/radios/_macro.njk" import onsRadios %}
+{% from "components/button/_macro.njk" import onsButton %}
+
+{% set pageConfig = {
+    "header": {
+        "title": "Question example"
+    },
+    "breadcrumbs": {
+        "ariaLabel": 'Breadcrumbs',
+        "itemsList": [
+            {
+                "url": '#0',
+                "text": 'Previous'
+            }
+        ]
+    }
+} %}
+
+{% set questionTitle = "On 1 May 2016, what was the number of employees for Bolt and Ratchet?" %}
+
+{% block main %}
+    {% call onsQuestion({
+        "title": questionTitle,
+        "description": "<p>This is all employees aged 16 years or over that your organisation employs</p>",
+        "definition": {
+            "title": "What we mean by “employee”",
+            "content": "<p>An employee is a person that your organisation directly pays from its payroll(s), in return for carrying out a full-time or part-time job</p>"
+        },
+        "guidance": {
+            "lists": [
+                {
+                    "listHeading": "Include:",
+                    "itemsList": [
+                        {
+                            "text": "all employees in Great Britain (England, Scotland and Wales), both full and part-time, who received pay in the relevant period"
+                        }
+                    ]
+                },
+                {
+                    "listHeading": "Exclude:",
+                    "itemsList": [
+                        {
+                            "text": "trainees on government schemes"
+                        },
+                        {
+                            "text": "employees working abroad unless paid directly from this business’s GB payroll"
+                        }
+                    ]
+                }
+            ]
+        },
+        "justification": {
+            "title": "Why we ask this question",
+            "content": "<p>We ask this question in order to understand the size of organisations in the UK</p>"
+        },
+        "submitButton": true
+    }) %}
+
+        {{ onsRadios({
+        "id": "number-of-employees",
+        "name": "number-of-employees",
+        "legend": questionTitle,
+        "legendClasses": "ons-u-vh",
+        "radios": [
+            {
+                "id": "number-of-employees-1-9",
+                "label": {
+                    "text": "1 – 9 employees"
+                },
+                "value": "1-9"
+            },
+            {
+                "id": "number-of-employees-10-49",
+                "label": {
+                    "text": "10 – 49 employees"
+                },
+                "value": "10-49"
+            },
+            {
+                "id": "number-of-employees-50-100",
+                "label": {
+                    "text": "50 – 100+ employees",
+                    "description": "Include multi-corporations"
+                },
+                "value": "50-100"
+            }
+        ]
+        }) }}
+
+    {% endcall %}
+{% endblock %}

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 %}