@ons/design-system 62.0.2 → 62.1.1

package/components/header/example-header-neutral-for-multicoloured-logo.njk

@@ -0,0 +1,59 @@
+---
+"fullWidth": true
+---
+{% from "components/header/_macro.njk" import onsHeader %}
+
+{{
+    onsHeader({
+        "title": 'ONS Service',
+        "variants": 'neutral',
+        "mastheadLogoUrl": '#0',
+        "serviceLinks": {
+            "id": "service-links",
+            "ariaLabel": 'Services menu',
+            "ariaListLabel": 'Menu',
+            "toggleServicesButton": {
+                "text": 'Account',
+                "ariaLabel": 'Toggle services menu'
+            },
+            "itemsList": [
+                {
+                    "title": "Help",
+                    "url": "#0"
+                },
+                {
+                    "title": "My Account",
+                    "url": "#0"
+                },
+                {
+                    "title": "Sign out",
+                    "url": "#0"
+                }
+            ]
+        },
+        "navigation": {
+            "id": 'main-nav',
+            "ariaLabel": 'Main menu',
+            "currentPath": '#menu-item-2',
+            "currentPageTitle": 'Design system',
+            "itemsList": [
+                {
+                    "title": 'Menu item 1',
+                    "url": '#0'
+                },
+                {
+                    "title": 'Menu item 2',
+                    "url": '#menu-item-2'
+                },
+                {
+                    "title": 'Menu item 3',
+                    "url": '#0'
+                }
+            ],
+            "toggleNavigationButton": {
+                "text": 'Menu',
+                "ariaLabel": 'Toggle main menu'
+            }
+        }
+    })
+}}

package/components/hero/example-hero-dark.njk

@@ -0,0 +1,15 @@
+---
+"fullWidth": true
+---
+{% from "components/hero/_macro.njk" import onsHero %}
+{{
+    onsHero({
+        "title": 'Design and build digital services for the ONS',
+        "text": 'Everything you need to make accessible, consistent digital products',
+        "button": {
+            "url": '#0',
+            "text": 'Get started'
+        },
+        "variants": ['dark']
+    })
+}}

package/components/hero/example-hero-default.njk

@@ -0,0 +1,14 @@
+---
+"fullWidth": true
+---
+{% from "components/hero/_macro.njk" import onsHero %}
+{{
+    onsHero({
+        "title": 'Design and build digital services for the ONS',
+        "text": 'Everything you need to make accessible, consistent digital products',
+        "button": {
+            "url": '#0',
+            "text": 'Get started'
+        }
+    })
+}}

package/components/images/example-images-for-regular-screens.njk

@@ -0,0 +1,8 @@
+{% from "components/images/_macro.njk" import onsImage %}
+{{
+    onsImage({
+        "url": '/img/small/woman-in-purple-dress-shirt.jpg',
+        "alt": 'Woman in a purple dress shirt using a laptop',
+        "caption": 'Image 1 - Woman in a purple dress shirt using a laptop'
+    })
+}}

package/components/images/example-images-for-retina-screens.njk

@@ -0,0 +1,10 @@
+{% from "components/images/_macro.njk" import onsImage %}
+{{
+    onsImage({
+        "image": {
+            "smallSrc": '/img/small/woman-in-purple-dress-shirt.jpg',
+            "largeSrc": '/img/large/woman-in-purple-dress-shirt.jpg'
+        },
+        "caption": 'Image 1 - Woman in a purple dress shirt using a laptop'
+    })
+}}

package/components/input/example-input-email.njk

@@ -0,0 +1,12 @@
+{% from "components/input/_macro.njk" import onsInput %}
+{{
+    onsInput({
+        "id": "email",
+        "type": "email",
+        "autocomplete": "email",
+        "label": {
+            "text": "Email address",
+            "description": "This will not be stored and only used once to send your confirmation"
+        }
+    })
+}}

package/components/input/example-input-number-prefixed.njk

@@ -0,0 +1,17 @@
+{% from "components/input/_macro.njk" import onsInput %}
+{{
+    onsInput({
+        "id": "prefixed",
+        "type": "number",
+        "width": "6",
+        "autocomplete": "off",
+        "label": {
+            "text": "Your annual salary before taxes"
+        },
+        "prefix": {
+            "title": "British pounds (GBP)",
+            "text": "£",
+            "id": "annual-salary-gpb-prefix"
+        }
+    })
+}}

package/components/input/example-input-number-suffixed.njk

@@ -0,0 +1,34 @@
+{% from "components/input/_macro.njk" import onsInput %}
+{{
+    onsInput({
+        "id": "suffixed-per-cent",
+        "type": "number",
+        "width": "3",
+        "autocomplete": "off",
+        "label": {
+            "text": "People with internet access"
+        },
+        "suffix": {
+            "title": "per cent",
+            "text": "%",
+            "id": "internet-access-per-cent-suffix"
+        }
+    })
+}}
+{{
+    onsInput({
+        "id": "suffixed-centimetres",
+        "type": "number",
+        "width": "4",
+        "autocomplete": "off",
+        "label": {
+            "text": "Length",
+            "description": "For example enter 1250 for 12.5m"
+        },
+        "suffix": {
+            "title": "centimetres",
+            "text": "cm",
+            "id": "length-cm-suffix"
+        }
+    })
+}}

package/components/input/example-input-number.njk

@@ -0,0 +1,15 @@
+{% from "components/input/_macro.njk" import onsInput %}
+{{
+    onsInput({
+        "id": "number",
+        "type": "number",
+        "width": "2",
+        "autocomplete": "off",
+        "attributes": {
+            "min": 0
+        },
+        "label": {
+            "text": "Number of bedrooms"
+        }
+    })
+}}

package/components/input/example-input-numeric-values.njk

@@ -0,0 +1,64 @@
+{% from "components/input/_macro.njk" import onsInput %}
+{{
+    onsInput({
+        "id": "number",
+        "type": "number",
+        "width": "2",
+        "autocomplete": "off",
+        "attributes": {
+            "min": 0
+        },
+        "label": {
+            "text": "Number of bedrooms"
+        }
+    })
+}}
+{{
+    onsInput({
+        "id": "prefixed",
+        "type": "number",
+        "width": "6",
+        "autocomplete": "off",
+        "label": {
+            "text": "Your annual salary before taxes"
+        },
+        "prefix": {
+            "text": "£",
+            "title": "British pounds (GBP)",
+            "id": "annual-salary-gpb-prefix"
+        }
+    })
+}}
+{{
+    onsInput({
+        "id": "suffixed-percent",
+        "type": "number",
+        "width": "3",
+        "autocomplete": "off",
+        "label": {
+            "text": "People with internet access"
+        },
+        "suffix": {
+            "title": "per cent",
+            "text": "%",
+            "id": "internet-access-per-cent-suffix"
+        }
+    })
+}}
+{{
+    onsInput({
+        "id": "suffixed-centimetres",
+        "type": "number",
+        "width": "4",
+        "autocomplete": "off",
+        "label": {
+            "text": "Length",
+            "description": "For example enter 1250 for 12.5m"
+        },
+        "suffix": {
+            "title": "centimetres",
+            "text": "cm",
+            "id": "length-cm-suffix"
+        }
+    })
+}}

package/components/input/example-input-telephone.njk

@@ -0,0 +1,13 @@
+{% from "components/input/_macro.njk" import onsInput %}
+{{
+    onsInput({
+        "id": "telephone",
+        "type": "tel",
+        "autocomplete": "tel",
+        "width": "15",
+        "label": {
+            "text": "UK mobile number",
+            "description": "This will not be stored and only used once to send your access code"
+        }
+    })
+}}

package/components/input/example-input-text-width-constrained.njk

@@ -0,0 +1,11 @@
+{% from "components/input/_macro.njk" import onsInput %}
+{{
+    onsInput({
+        "id": "text-width",
+        "width": "7",
+        "autocomplete": "postal-code",
+        "label": {
+            "text": "Postcode"
+        }
+    })
+}}

package/components/input/example-input-text-with-character-limit-checker.njk

@@ -0,0 +1,17 @@
+{% from "components/input/_macro.njk" import onsInput %}
+{{
+    onsInput({
+        "id": "text",
+        "label": {
+            "text": "Enter some text"
+        },
+        "width": "10",
+        "charCheckLimit": {
+            "limit": 10,
+            "charCountOverLimitSingular": "{x} character too many",
+            "charCountOverLimitPlural": "{x} characters too many",
+            "charCountSingular": "You have {x} character remaining",
+            "charCountPlural": "You have {x} characters remaining"
+        }
+    })
+}}

package/components/input/example-input-text-with-description.njk

@@ -0,0 +1,10 @@
+{% from "components/input/_macro.njk" import onsInput %}
+{{
+    onsInput({
+        "id": "text",
+        "label": {
+            "text": "Enter some text",
+            "description": "Example description hint text"
+        }
+    })
+}}

package/components/input/example-input-text.njk

@@ -0,0 +1,9 @@
+{% from "components/input/_macro.njk" import onsInput %}
+{{
+    onsInput({
+        "id": "text",
+        "label": {
+            "text": "Enter some text"
+        }
+    })
+}}

package/components/label/example-label-with-description.njk

@@ -0,0 +1,8 @@
+{% from "components/label/_macro.njk" import onsLabel %}
+{{
+    onsLabel({
+        "text": "Label",
+        "for": "some-input",
+        "description": "An example description"
+    })
+}}

package/components/label/example-label.njk

@@ -0,0 +1,8 @@
+{% from "components/label/_macro.njk" import onsLabel %}
+{{
+    onsLabel({
+        "id": 'label',
+        "for": "some-input",
+        "text": 'Label'
+    })
+}}

package/components/metadata/example-metadata.njk

@@ -0,0 +1,57 @@
+{% from "components/metadata/_macro.njk" import onsMetadata %}
+{{
+    onsMetadata({
+        "classes": "ons-u-mb-no",
+        "metadataLabel": "Information about this business and its survey requirements",
+        "termCol": "2",
+        "descriptionCol": "10",
+        "itemsList": [
+            {
+                "term": "Survey:",
+                "descriptions": [
+                    {
+                        "description": "Bricks & Blocks"
+                    }
+                ]
+            },
+            {
+                "term": "RU Refs:",
+                "descriptions": [
+                    {
+                        "description": "49900000118"
+                    },
+                    {
+                        "description": "49300005832"
+                    }
+                ]
+            },
+            {
+                "term": "Business:",
+                "descriptions": [
+                    {
+                        "description": "Bolts & Ratchets Ltd."
+                    }
+                ]
+            },
+            {
+                "term": "Trading as:",
+                "descriptions": [
+                    {
+                        "description": "Bolts & Ratchets"
+                    }
+                ]
+            },
+            {
+                "term": "To:",
+                "descriptions": [
+                    {
+                        "description": "Jacky Turner"
+                    },
+                    {
+                        "description": "Louise Goodland"
+                    }
+                ]
+            }
+        ]
+    })
+}}

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

@@ -0,0 +1,71 @@
+{% 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"
+                },
+                {
+                    "id": "other-fuel",
+                    "label": {
+                        "text": "Other"
+                    },
+                    "value": "other",
+                    "other": {
+                        "id": "other-fuel-textbox",
+                        "name": "other-fuel-answer",
+                        "label": {
+                        "text": "Please specify"
+                        }
+                    }
+                }
+            ],
+            "mutuallyExclusive": {
+                "or": "Or",
+                "deselectMessage": "Selecting this will uncheck all other checkboxes",
+                "deselectGroupAdjective": "deselected",
+                "deselectExclusiveOptionAdjective": "deselected",
+                "exclusiveOptions": [
+                    {
+                        "id": "no-central-heating",
+                        "label": {
+                            "text": "No central heating"
+                        },
+                        "attributes": {
+                            "data-attribute": "Example attribute"
+                        },
+                        "value": "no-central-heating"
+                    }
+                ]
+            }
+        })
+    }}
+{% endcall %}

package/components/mutually-exclusive/example-mutually-exclusive-date-with-error.njk

@@ -0,0 +1,47 @@
+{% from "components/date-input/_macro.njk" import onsDateInput %}
+
+{{
+    onsDateInput({
+        "id": "date-mutually-exclusive",
+        "legendOrLabel": "When did you leave your last paid job?",
+        "legendClasses": "ons-u-vh",
+        "day": {
+            "label": {
+                "text": "Day"
+            },
+            "name": "day-exclusive"
+        },
+        "month": {
+            "label": {
+                "text": "Month"
+            },
+            "name": "month-exclusive"
+        },
+        "year": {
+            "label": {
+                "text": "Year"
+            },
+            "name": "year-exclusive"
+        },
+        "mutuallyExclusive": {
+            "or": "Or",
+            "deselectMessage": "Selecting this will clear the date if one has been inputted",
+            "deselectGroupAdjective": "cleared",
+            "deselectExclusiveOptionAdjective": "deselected",
+            "exclusiveOptions": [
+                {
+                    "id": "date-exclusive-checkbox",
+                    "name": "no-paid-job",
+                    "value": "no-paid-job",
+                    "label": {
+                        "text": "I have never had a paid job"
+                    }
+                }
+            ]
+        },
+        "error": {
+            "id": 'date-mutually-exclusive-error',
+            "text": 'Enter when you left your last paid job'
+        }
+    })
+}}

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

@@ -0,0 +1,49 @@
+{% from "components/date-input/_macro.njk" import onsDateInput %}
+{% from "components/question/_macro.njk" import onsQuestion %}
+
+{% call onsQuestion({
+    "title": "When did you leave your last paid job?",
+    "description": "<p>For example, 31 3 2018</p>",
+    "legendIsQuestionTitle": true
+}) %}
+    {{
+        onsDateInput({
+            "id": "date-mutually-exclusive",
+            "dontWrap": true,
+            "day": {
+                "label": {
+                    "text": "Day"
+                },
+                "name": "day-exclusive"
+            },
+            "month": {
+                "label": {
+                    "text": "Month"
+                },
+                "name": "month-exclusive"
+            },
+            "year": {
+                "label": {
+                    "text": "Year"
+                },
+                "name": "year-exclusive"
+            },
+            "mutuallyExclusive": {
+                "or": "Or",
+                "deselectMessage": "Selecting this will clear the date if one has been inputted",
+                "deselectGroupAdjective": "cleared",
+                "deselectExclusiveOptionAdjective": "deselected",
+                "exclusiveOptions": [
+                    {
+                        "id": "date-exclusive-checkbox",
+                        "name": "no-paid-job",
+                        "value": "no-paid-job",
+                        "label": {
+                            "text": "I have never had a paid job"
+                        }
+                    }
+                ]
+            }
+        })
+    }}
+{% endcall %}

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

@@ -0,0 +1,45 @@
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/duration/_macro.njk" import onsDuration %}
+
+{% call onsQuestion({
+    "title": "How long have you lived at this address?",
+    "description": "<p>Enter “0” into the years field if you have lived at this address for less than a year</p>",
+    "legendIsQuestionTitle": true
+}) %}
+    {{ onsDuration({
+        "id": "address-duration",
+        "dontWrap": true,
+        "field1": {
+            "id": "address-duration-years",
+            "name": "address-duration-years",
+            "suffix": {
+                "text": "Years",
+                "id": "address-duration-years-suffix"
+            }
+        },
+        "field2": {
+            "id": "address-duration-months",
+            "name": "address-duration-months",
+            "suffix": {
+                "text": "Months",
+                "id": "address-duration-months-suffix"
+            }
+        },
+        "mutuallyExclusive": {
+            "or": "Or",
+            "deselectMessage": "Selecting this will clear the date if one has been inputted",
+            "deselectGroupAdjective": "cleared",
+            "deselectExclusiveOptionAdjective": "deselected",
+            "exclusiveOptions": [
+                {
+                    "id": "duration-exclusive-checkbox",
+                    "name": "no-duration",
+                    "value": "no-duration",
+                    "label": {
+                        "text": "I have not moved in to this address yet"
+                    }
+                }
+            ]
+        }
+    }) }}
+{% endcall %}

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

@@ -0,0 +1,36 @@
+{% from "components/input/_macro.njk" import onsInput %}
+{% from "components/question/_macro.njk" import onsQuestion %}
+
+{% call onsQuestion({
+    "title": "Get a confirmation email",
+    "description": "<p>Enter your email address if you would like to be sent confirmation that you have completed your survey</p>",
+    "legendIsQuestionTitle": true
+}) %}
+    {{
+        onsInput({
+            "id": "email",
+            "type": "email",
+            "label": {
+                "text": "Email address",
+                "description": "This will not be stored and only used once to send your confirmation"
+            },
+            "dontWrap": true,
+            "mutuallyExclusive": {
+                "or": "Or",
+                "deselectMessage": "Selecting this will clear your email",
+                "deselectGroupAdjective": "cleared",
+                "deselectExclusiveOptionAdjective": "deselected",
+                "exclusiveOptions": [
+                    {
+                        "id": "email-checkbox",
+                        "name": "no-email",
+                        "value": "no-email",
+                        "label": {
+                            "text": "I don’t want to receive a confirmation email"
+                        }
+                    }
+                ]
+            }
+        })
+    }}
+{% endcall %}