@ons/design-system 62.0.2 → 62.1.0

package/components/mutually-exclusive/example-mutually-exclusive-multiple-options.njk

@@ -0,0 +1,63 @@
+{% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
+{% from "components/question/_macro.njk" import onsQuestion %}
+
+{% call onsQuestion({
+    "title": "What type of central heating do you have?",
+    "legendIsQuestionTitle": true
+}) %}
+    {{
+        onsCheckboxes({
+            "id": "central-heating-answers",
+            "dontWrap": true,
+            "checkboxesLabel": "Select all that apply",
+            "name": "mutually-exclusive",
+            "checkboxes": [
+                {
+                    "id": "gas",
+                    "label": {
+                        "text": "Gas"
+                    },
+                    "value": "gas"
+                },
+                {
+                    "id": "electric",
+                    "label": {
+                        "text": "Electric"
+                    },
+                    "value": "electric"
+                },
+                {
+                    "id": "solid-fuel",
+                    "label": {
+                        "text": "Solid fuel"
+                    },
+                    "value": "solid-fuel"
+                }
+            ],
+            "mutuallyExclusive": {
+                "or": "Or",
+                "deselectMessage": "Selecting these will uncheck all other checkboxes",
+                "deselectGroupAdjective": "deselected",
+                "deselectExclusiveOptionAdjective": "deselected",
+                "exclusiveOptions": [
+                    {
+                        "id": "no-central-heating",
+                        "name": "no central heating",
+                        "label": {
+                            "text": "No central heating"
+                        },
+                        "value": "no-central-heating"
+                    },
+                    {
+                        "id": "other",
+                        "name": "other",
+                        "label": {
+                            "text": "Other"
+                        },
+                        "value": "other"
+                    }
+                ]
+            }
+        })
+    }}
+{% endcall %}

package/components/mutually-exclusive/example-mutually-exclusive-number.njk

@@ -0,0 +1,43 @@
+{% from "components/input/_macro.njk" import onsInput %}
+{% from "components/question/_macro.njk" import onsQuestion %}
+
+{% call onsQuestion({
+    "title": "What was your annual income before tax in 2018/19?",
+    "legendIsQuestionTitle": true
+}) %}
+    {{
+        onsInput({
+            "id": "currency",
+            "dontWrap": true,
+            "type": "number",
+            "width": "4",
+            "attributes": {
+                "min": 0
+            },
+            "label": {
+                "text": "Gross annual income"
+            },
+            "prefix": {
+                "title": "British pounds (GBP)",
+                "text": "£",
+                "id": "annual-salary-gpb-prefix"
+            },
+            "mutuallyExclusive": {
+                "or": "Or",
+                "deselectMessage": "Selecting this will clear your inputted annual income",
+                "deselectGroupAdjective": "cleared",
+                "deselectExclusiveOptionAdjective": "deselected",
+                "exclusiveOptions": [
+                    {
+                        "id": "currency-checkbox",
+                        "name": "no-currency",
+                        "value": "no-currency",
+                        "label": {
+                            "text": "I prefer not to say"
+                        }
+                    }
+                ]
+            }
+        })
+    }}
+{% endcall %}

package/components/mutually-exclusive/example-mutually-exclusive-textarea.njk

@@ -0,0 +1,40 @@
+{% from "components/textarea/_macro.njk" import onsTextarea %}
+{% from "components/question/_macro.njk" import onsQuestion %}
+
+{% call onsQuestion({
+    "title": "What do you think of this service?",
+    "legendIsQuestionTitle": true
+}) %}
+    {{
+        onsTextarea({
+            "id": "feedback",
+            "name": "feedback",
+            "dontWrap": true,
+            "width": "30",
+            "label": {
+                "text": "Enter your feedback"
+            },
+            "charCheckLimit": {
+                "limit": 200,
+                "charCountSingular": "You have {x} character remaining",
+                "charCountPlural": "You have {x} characters remaining"
+            },
+            "mutuallyExclusive": {
+                "or": "Or",
+                "deselectMessage": "Selecting this will clear your feedback",
+                "deselectGroupAdjective": "cleared",
+                "deselectExclusiveOptionAdjective": "deselected",
+                "exclusiveOptions": [
+                    {
+                        "id": "feedback-checkbox",
+                        "name": "no-feedback",
+                        "value": "no-feedback",
+                        "label": {
+                            "text": "I don’t want to provide feedback"
+                        }
+                    }
+                ]
+            }
+        })
+    }}
+{% endcall %}

package/components/pagination/example-pagination-first.njk

@@ -0,0 +1,24 @@
+{% from "components/pagination/_macro.njk" import onsPagination %}
+
+{{
+    onsPagination({
+        "previous": "Previous",
+        "next": "Next",
+        "hideRangeIndicator": true,
+        "pages": [
+            {
+                "url": "#page1",
+                "current": true
+            },
+            {
+                "url": "#page2"
+            },
+            {
+                "url": "#page3"
+            },
+            {
+                "url": "#page4"
+            }
+        ]
+    })
+}}

package/components/pagination/example-pagination-last.njk

@@ -0,0 +1,24 @@
+{% from "components/pagination/_macro.njk" import onsPagination %}
+
+{{
+    onsPagination({
+        "previous": "Previous",
+        "next": "Next",
+        "hideRangeIndicator": true,
+        "pages": [
+            {
+                "url": "#page1"
+            },
+            {
+                "url": "#page2"
+            },
+            {
+                "url": "#page3"
+            },
+            {
+                "url": "#page4",
+                "current": true
+            }
+        ]
+    })
+}}

package/components/pagination/example-pagination-with-no-range-indicator.njk

@@ -0,0 +1,42 @@
+{% from "components/pagination/_macro.njk" import onsPagination %}
+
+{{
+    onsPagination({
+        "previous": "Previous",
+        "next": "Next",
+        "hideRangeIndicator": true,
+        "pages": [
+            {
+                "url": "#page1"
+            },
+            {
+                "url": "#page2"
+            },
+            {
+                "url": "#page3"
+            },
+            {
+                "url": "#page4"
+            },
+            {
+                "url": "#page5",
+                "current": true
+            },
+            {
+                "url": "#page6"
+            },
+            {
+                "url": "#page7"
+            },
+            {
+                "url": "#page8"
+            },
+            {
+                "url": "#page9"
+            },
+            {
+                "url": "#page10"
+            }
+        ]
+    })
+}}

package/components/pagination/example-pagination.njk

@@ -0,0 +1,116 @@
+{% from "components/pagination/_macro.njk" import onsPagination %}
+
+{{
+    onsPagination({
+        "previous": "Previous",
+        "next": "Next",
+        "pages": [
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0",
+                "current": true
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            }
+        ]
+    })
+}}

package/components/panel/example-panel-bare.njk

@@ -0,0 +1,9 @@
+{% from "components/panel/_macro.njk" import onsPanel %}
+
+{% call onsPanel({
+        "type": 'bare',
+        "iconType": 'lock'
+    })
+%}
+    Here is some text with an icon
+{% endcall %}

package/components/panel/example-panel-with-announcement.njk

@@ -0,0 +1,18 @@
+---
+
+"fullWidth": true
+---
+{% from "components/panel/_macro.njk" import onsPanel %}
+
+{% call onsPanel({
+        "type": 'announcement'
+    })
+%}
+
+<p class="ons-u-mb-no">National lockdown: stay at home</p>
+
+<div class="ons-u-fs-r">
+    <p>Coronavirus (COVID-19) remains a serious threat across the country. <a href="#0">Find out more</a></p>
+</div>
+
+{% endcall %}

package/components/panel/example-panel-with-error-details.njk

@@ -0,0 +1,18 @@
+{% from "components/input/_macro.njk" import onsInput %}
+
+{{
+    onsInput({
+        "id": 'number',
+        "type": 'number',
+        "width": '5',
+        "attributes": {
+            "min": 0
+        },
+        "label": {
+            "text": 'Number of employees paid monthly'
+        },
+        "error": {
+            "text": 'Enter a number'
+        }
+    })
+}}

package/components/panel/example-panel-with-error-summary.njk

@@ -0,0 +1,25 @@
+{% from "components/panel/_macro.njk" import onsPanel %}
+{% from "components/lists/_macro.njk" import onsList %}
+
+{% call onsPanel({
+        "title": 'There are 2 problems with your answer',
+        "type": 'error'
+}) %}
+    {{
+        onsList({
+            "element": 'ol',
+            "itemsList": [
+                {
+                    "text": 'Enter a number',
+                    "url": '#container-test-number',
+                    "variants": "inPageLink"
+                },
+                {
+                    "text": 'Enter a number less than or equal to 100',
+                    "url": '#container-test-percent',
+                    "variants": "inPageLink"
+                }
+            ]
+        })
+    }}
+{% endcall %}

package/components/panel/example-panel-with-information.njk

@@ -0,0 +1,7 @@
+{% from "components/panel/_macro.njk" import onsPanel %}
+
+{{
+    onsPanel({
+        "body": '<p>Include all rooms built or converted for use as bedrooms</p>'
+    })
+}}

package/components/panel/example-panel-with-spacious-information.njk

@@ -0,0 +1,7 @@
+{% from "components/panel/_macro.njk" import onsPanel %}
+{{
+    onsPanel({
+        "spacious": true,
+        "body": '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><ul><li>VAT</li><li>Internet sales</li></ul>'
+    })
+}}

package/components/panel/example-panel-with-success-message.njk

@@ -0,0 +1,10 @@
+{% from "components/panel/_macro.njk" import onsPanel %}
+
+{{
+    onsPanel({
+        "type": 'success',
+        "id": 'success-id',
+        "iconType": 'check',
+        "body": 'Information has been successfully submitted'
+    })
+}}

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

@@ -0,0 +1,8 @@
+{% from "components/panel/_macro.njk" import onsPanel %}
+
+{% call onsPanel({
+        "type": 'warn'
+    })
+%}
+    All of the information about this person will be deleted
+{% endcall %}

package/components/password/example-password.njk

@@ -0,0 +1,11 @@
+{% from "components/password/_macro.njk" import onsPassword %}
+
+{{
+    onsPassword({
+        "id": "password",
+        "label": {
+            "text": "Password"
+        },
+        "showPasswordText": "Show password"
+    })
+}}

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