@ons/design-system 62.0.1 → 62.1.0

package/components/header/example-header-external-with-sub-navigation.njk

@@ -0,0 +1,132 @@
+---
+"fullWidth": true
+---
+{% from "components/header/_macro.njk" import onsHeader %}
+
+{{
+    onsHeader({
+        "title": 'Service manual',
+        "mastheadLogoUrl": '#0',
+        "titleUrl": '#0',
+        "navigation": {
+            "id": 'main-nav',
+            "ariaLabel": 'Main menu',
+            "currentPath": [ '#design-system', '#patterns', '#access-codes' ],
+            "currentPageTitle": 'Design system',
+            "itemsList": [
+                {
+                    "title": 'Service standard',
+                    "url": '#0'
+                },
+                {
+                    "title": 'Design system',
+                    "url": '#design-system'
+                },
+                {
+                    "title": 'Accessibility',
+                    "url": '#0'
+                },
+                {
+                    "title": 'Brand guidelines',
+                    "url": '#0'
+                },
+                {
+                    "title": 'Content style guide',
+                    "url": '#0'
+                }
+            ],
+            "toggleNavigationButton": {
+                "text": 'Menu',
+                "ariaLabel": 'Toggle main menu'
+            },
+            "subNavigation": {
+                "id": 'sub-nav',
+                "overviewURL": '#0',
+                "overviewText": 'Overview',
+                "ariaLabel": 'Section menu',
+                "itemsList": [
+                    {
+                        "title": 'Guidance',
+                        "url": '#0'
+                    },
+                    {
+                        "title": 'Foundations',
+                        "url": '#0'
+                    },
+                    {
+                        "title": 'Components',
+                        "url": '#0'
+                    },
+                    {
+                        "title": 'Patterns',
+                        "url": '#patterns',
+                        "sections": [
+                            {
+                                "sectionTitle": 'Ask users for...',
+                                "children": [
+                                    {
+                                        "title": 'Access codes',
+                                        "url": '#access-codes'
+                                    },
+                                    {
+                                        "title": 'Addresses',
+                                        "url": '#0'
+                                    },
+                                    {
+                                        "title": 'Dates',
+                                        "url": '#0'
+                                    },
+                                    {
+                                        "title": 'Durations',
+                                        "url": '#0'
+                                    },
+                                    {
+                                        "title": 'Email addresses',
+                                        "url": '#0'
+                                    },
+                                    {
+                                        "title": 'Numeric values',
+                                        "url": '#0'
+                                    },
+                                    {
+                                        "title": 'Phone numbers',
+                                        "url": '#0'
+                                    }
+                                ]
+                            },
+                            {
+                                "sectionTitle": 'Help users to...',
+                                "children": [
+                                    {
+                                        "title": 'Access support in multiple languages',
+                                        "url": '#0'
+                                    },
+                                    {
+                                        "title": 'Change language',
+                                        "url": '#0'
+                                    },
+                                    {
+                                        "title": 'Check answers',
+                                        "url": '#0'
+                                    },
+                                    {
+                                        "title": 'Control cookies',
+                                        "url": '#0'
+                                    },
+                                    {
+                                        "title": 'Correct errors',
+                                        "url": '#0'
+                                    },
+                                    {
+                                        "title": 'Extend a session',
+                                        "url": '#0'
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        }
+    })
+}}

package/components/header/example-header-internal.njk

@@ -0,0 +1,32 @@
+---
+"fullWidth": true
+---
+{% from "components/header/_macro.njk" import onsHeader %}
+
+{{
+    onsHeader({
+        "title": 'Service title',
+        "mastheadLogoUrl": '#0',
+        "variants": 'internal',
+        "titleUrl": '#0',
+        "serviceLinks": {
+            "id": "service-links",
+            "ariaLabel": 'Services menu',
+            "ariaListLabel": 'Menu',
+            "toggleServicesButton": {
+                "text": 'Account',
+                "ariaLabel": 'Toggle services menu'
+            },
+            "itemsList": [
+                {
+                    "title": "Jacky Turner",
+                    "iconType": 'person'
+                },
+                {
+                    "title": "Sign out",
+                    "url": "#0"
+                }
+            ]
+        }
+    })
+}}

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