@ons/design-system 62.0.1 → 62.1.0

package/components/select/example-select.njk

@@ -0,0 +1,50 @@
+{% from "components/select/_macro.njk" import onsSelect %}
+{{
+    onsSelect({
+        "id": "select",
+        "name": "select",
+        "label": {
+            "text": "Question topic"
+        },
+        "options": [
+            {
+                "value": "",
+                "text": "Select an option",
+                "disabled": true,
+                "selected": true
+            },
+            {
+                "value": 1,
+                "text": "General"
+            },
+            {
+                "value": "people-who-live-here",
+                "text": "People who live here"
+            },
+            {
+                "value": "visitors",
+                "text": "Visitors"
+            },
+            {
+                "value": "household-accommodation",
+                "text": "Household and accommodation"
+            },
+            {
+                "value": "personal-details",
+                "text": "Personal details"
+            },
+            {
+                "value": "health",
+                "text": "Health"
+            },
+            {
+                "value": "qualifications",
+                "text": "Qualifications"
+            },
+            {
+                "value": "employment",
+                "text": "Employment"
+            }
+        ]
+    })
+}}

package/components/share-page/example-share-page.njk

@@ -0,0 +1,11 @@
+{% from "components/share-page/_macro.njk" import onsSharePage %}
+
+{{
+    onsSharePage({
+        "title": 'Share this post',
+        "pageTitle": 'A page to share',
+        "pageURL": 'https://example.com/a-page-to-share',
+        "facebook": true,
+        "twitter": true
+    })
+}}

package/components/skip-to-content/example-skip-to-content.njk

@@ -0,0 +1,10 @@
+---
+fullWidth: true
+---
+{% from "components/skip-to-content/_macro.njk" import onsSkipToContent %}
+{{
+    onsSkipToContent({
+        "url": '#main',
+        "text": 'Skip to content'
+    })
+}}

package/components/status/example-status-dead.njk

@@ -0,0 +1,7 @@
+{% from "components/status/_macro.njk" import onsStatus %}
+{{
+    onsStatus({
+        "label": 'Not started',
+        "type": 'dead'
+    })
+}}

package/components/status/example-status-error.njk

@@ -0,0 +1,7 @@
+{% from "components/status/_macro.njk" import onsStatus %}
+{{
+    onsStatus({
+        "label": 'Refused',
+        "type": 'error'
+    })
+}}

package/components/status/example-status-neutral-information.njk

@@ -0,0 +1,6 @@
+{% from "components/status/_macro.njk" import onsStatus %}
+{{
+    onsStatus({
+        "label": 'Ready'
+    })
+}}

package/components/status/example-status-pending.njk

@@ -0,0 +1,7 @@
+{% from "components/status/_macro.njk" import onsStatus %}
+{{
+    onsStatus({
+        "label": 'Pending',
+        "type": 'pending'
+    })
+}}

package/components/status/example-status-small.njk

@@ -0,0 +1,8 @@
+{% from "components/status/_macro.njk" import onsStatus %}
+{{
+    onsStatus({
+        "label": 'Live',
+        "type": 'success',
+        "size": 'small'
+    })
+}}

package/components/status/example-status-success.njk

@@ -0,0 +1,7 @@
+{% from "components/status/_macro.njk" import onsStatus %}
+{{
+    onsStatus({
+        "label": 'In progress',
+        "type": 'success'
+    })
+}}

package/components/summary/example-summary-grouped-total.njk

@@ -0,0 +1,67 @@
+{% from "components/summary/_macro.njk" import onsSummary %}
+{{
+    onsSummary({
+        "summaries": [
+            {
+                "groups": [
+                    {
+                        "groupTitle": "Summary - Section Title",
+                        "rows": [
+                            {
+                                "rowTitle": "Total value of acquisitions for transport assets and equipment",
+                                "rowItems": [
+                                    {
+                                        "valueList": [
+                                            {
+                                                "text": "£9,000.00"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "rowTitle": "Total value of acquisitions for computers and peripheral devices (hardware)",
+                                "rowItems": [
+                                    {
+                                        "valueList": [
+                                            {
+                                                "text": "£225,000.00"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "rowTitle": "Grand total for value of acquisitions",
+                                "total": true,
+                                "rowItems": [
+                                    {
+                                        "valueList": [
+                                            {
+                                                "text": "£234,000.00"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    })
+}}

package/components/summary/example-summary-grouped-with-errors.njk

@@ -0,0 +1,96 @@
+{% from "components/summary/_macro.njk" import onsSummary %}
+{{
+    onsSummary({
+        "summaries": [
+            {
+                "groups": [
+                    {
+                        "groupTitle": "Summary - Section Title",
+                        "rows": [
+                            {
+                                "rowTitle": "For the period 1 May 2017 to 31 May 2017, what was the total turnover of Essential Enterprise Ltd?",
+                                "rowItems": [
+                                    {
+                                        "valueList": [
+                                            {
+                                                "text": "£600.00"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "rowTitle": "What was the value of the business's total sales of food?",
+                                "errorMessage": "Change one or more of the figures so they sum to £600",
+                                "error": true,
+                                "rowItems": [
+                                    {
+                                        "valueList": [
+                                            {
+                                                "text": "£123.00"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "rowTitle": "What was the value of the business's total sales of alcohol, confectionery and tobacco?",
+                                "error": true,
+                                "rowItems": [
+                                    {
+                                        "valueList": [
+                                            {
+                                                "text": "£200.00"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "rowTitle": "What was the value of the business's total sales of clothing and footwear?",
+                                "error": true,
+                                "rowItems": [
+                                    {
+                                        "valueList": [
+                                            {
+                                                "text": "£50.00"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    })
+}}

package/components/summary/example-summary-grouped.njk

@@ -0,0 +1,353 @@
+{% from "components/summary/_macro.njk" import onsSummary %}
+
+<h1>Your answers</h1>
+
+{{
+    onsSummary({
+        "summaries": [
+            {
+                "summaryTitle": "John Doe",
+                "groups": [
+                    {
+                        "groupTitle": "Personal details",
+                        "rows": [
+                            {
+                                "rowTitle": "Are you John Doe?",
+                                "rowItems": [
+                                    {
+                                        "valueList": [
+                                            {
+                                                "text": "Yes I am"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "rowTitle": "What's your date of birth?",
+                                "rowItems": [
+                                    {
+                                        "valueList": [
+                                            {
+                                                "text": "1 January 1981"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "rowTitle": "What is your sex?",
+                                "rowItems": [
+                                    {
+                                        "valueList": [
+                                            {
+                                                "text": "Male"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "groupTitle": "Identity and health",
+                        "rows": [
+                            {
+                                "rowTitle": "What is your country of birth?",
+                                "rowItems": [
+                                    {
+                                        "valueList": [
+                                            {
+                                                "text": "England"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "rowTitle": "What passports do you hold?",
+                                "rowItems": [
+                                    {
+                                        "valueList": [
+                                            {
+                                                "text": "United Kingdom"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "groupTitle": "Qualifications",
+                        "rows": [
+                            {
+                                "rowTitle": "Have you completed an apprenticeship?",
+                                "rowItems": [
+                                    {
+                                        "valueList": [
+                                            {
+                                                "text": "Yes"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "rowTitle": "Have you achieved a GCSE or equivalent qualification?",
+                                "rowItems": [
+                                    {
+                                        "valueList": [
+                                            {
+                                                "text": "5 GCSEs grades A* to C or 9 to 4"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        "groupTitle": "Employment history",
+                        "rows": [
+                            {
+                                "rowItems": [
+                                    {
+                                        "rowTitle": "Name of UK company",
+                                        "valueList": [
+                                            {
+                                                "text": "Company A"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            },
+                                            {
+                                                "text": "Remove",
+                                                "ariaLabel": "Remove company",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "rowTitle": "Head office location",
+                                        "valueList": [
+                                            {
+                                                "text": "Cardiff"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "rowTitle": "Is this UK company your current employer?",
+                                        "valueList": [
+                                            {
+                                                "text": "No"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "rowItems": [
+                                    {
+                                        "rowTitle": "Name of UK company",
+                                        "valueList": [
+                                            {
+                                                "text": "Company A"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            },
+                                            {
+                                                "text": "Remove",
+                                                "ariaLabel": "Remove company",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "rowTitle": "Head office location",
+                                        "valueList": [
+                                            {
+                                                "text": "Newport"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "rowTitle": "Is this UK company your current employer?",
+                                        "valueList": [
+                                            {
+                                                "text": "Yes"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ],
+                        "summaryLink": {
+                            "text": "Add a UK company or branch",
+                            "url": "#0",
+                            "attributes": {
+                                "data-qa": "add-item-link"
+                            }
+                        }
+                    },
+                    {
+                        "groupTitle": "Spending",
+                        "rows": [
+                            {
+                                "rowTitle": "What are your monthly household expenses?",
+                                "rowItems": [
+                                    {
+                                        "rowTitle": "Food",
+                                        "valueList": [
+                                            {
+                                                "text": "£50.00"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "rowTitle": "Utilities",
+                                        "valueList": [
+                                            {
+                                                "text": "£65.00"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "rowTitle": "Transport",
+                                        "valueList": [
+                                            {
+                                                "text": "£70.00"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        "rowTitle": "Other",
+                                        "valueList": [
+                                            {
+                                                "text": "Lorem ipsum dolor sit amet, consectetur adipiscing 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."
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Change",
+                                                "ariaLabel": "Change answer",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    })
+}}

package/components/summary/example-summary-household-no-rows.njk

@@ -0,0 +1,20 @@
+{% from "components/summary/_macro.njk" import onsSummary %}
+
+{{ onsSummary({
+    "summaries": [
+        {
+            "groups": [
+                {
+                    "placeholderText": "There are no householders",
+                    "summaryLink": {
+                        "text": "Add someone to this household",
+                        "url": "#0",
+                        "attributes": {
+                            "data-qa": "add-item-link"
+                        }
+                    }
+                }
+            ]
+        }
+    ]
+}) }}