@ons/design-system 62.0.2 → 62.1.0

package/components/relationships/example-relationships.njk

@@ -0,0 +1,185 @@
+---
+title: "Example: Third-person relationship question"
+layout: ~
+---
+{% extends "layout/_template.njk" %}
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/relationships/_macro.njk" import onsRelationships %}
+
+{% set pageConfig = {
+    "header": {
+        "title": "Relationships example"
+    },
+    "breadcrumbs": {
+        "ariaLabel": 'Breadcrumbs',
+        "itemsList": [
+            {
+                "url": '#0',
+                "text": 'Previous'
+            }
+        ]
+    }
+} %}
+
+{% block main %}
+    {% call onsQuestion({
+        "title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>…</em>",
+        "description": "<p>Complete the sentence by selecting the appropriate relationship</p>",
+        "readDescriptionFirst": true,
+        "legendIsQuestionTitle": true,
+        "legendTitleClasses": "ons-js-relationships-legend",
+        "submitButton": true
+    }) %}
+        {{ onsRelationships({
+            "playback": "Amanda Bloggs is Joe Bloggs' <em>…</em>",
+            "name": "relationship",
+            "dontWrap": true,
+            "radios": [
+                {
+                    "id": "husband-wife",
+                    "value": "husband-wife",
+                    "label": {
+                        "text": "Husband or wife"
+                    },
+                    "attributes": {
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>husband or wife</em>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>husband or wife</em>"
+                    }
+                },
+                {
+                    "id": "civil-partner",
+                    "value": "civil-partner",
+                    "label": {
+                        "text": "Legally registered civil partner"
+                    },
+                    "attributes": {
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>legally registered civil partner</em>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>legally registered civil partner</em>"
+                    }
+                },
+                {
+                    "id": "partner",
+                    "value": "partner",
+                    "label": {
+                        "text": "Partner"
+                    },
+                    "attributes": {
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>partner</em>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>partner</em>"
+                    }
+                },
+                {
+                    "id": "son-daughter",
+                    "value": "son-daughter",
+                    "label": {
+                        "text": "Son or daughter"
+                    },
+                    "attributes": {
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>son or daughter</em>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>son or daughter</em>"
+                    }
+                },
+                {
+                    "id": "stepchild",
+                    "value": "stepchild",
+                    "label": {
+                        "text": "Stepchild"
+                    },
+                    "attributes": {
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>stepchild</em>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>stepchild</em>"
+                    }
+                },
+                {
+                    "id": "brother-sister",
+                    "value": "brother-sister",
+                    "label": {
+                        "text": "Brother or sister"
+                    },
+                    "attributes": {
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>brother or sister</em>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>brother or sister</em>"
+                    }
+                },
+                {
+                    "id": "stepbrother-stepsister",
+                    "value": "stepbrother-stepsister",
+                    "label": {
+                        "text": "Stepbrother or stepsister"
+                    },
+                    "attributes": {
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>stepbrother or sister</em>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>stepbrother or sister</em>"
+                    }
+                },
+                {
+                    "id": "mother-father",
+                    "value": "mother-father",
+                    "label": {
+                        "text": "Mother or father"
+                    },
+                    "attributes": {
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>mother or father</em>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>mother or father</em>"
+                    }
+                },
+                {
+                    "id": "stepmother-stepfather",
+                    "value": "stepmother-stepfather",
+                    "label": {
+                        "text": "Stepmother or stepfather"
+                    },
+                    "attributes": {
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>stepmother or stepfather</em>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>stepmother or stepfather</em>"
+                    }
+                },
+                {
+                    "id": "grandchild",
+                    "value": "grandchild",
+                    "label": {
+                        "text": "Grandchild"
+                    },
+                    "attributes": {
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>grandchild</em>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>grandchild</em>"
+                    }
+                },
+                {
+                    "id": "grandparent",
+                    "value": "grandparent",
+                    "label": {
+                        "text": "Grandparent"
+                    },
+                    "attributes": {
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>grandparents</em>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>grandparents</em>"
+                    }
+                },
+                {
+                    "id": "other-relation",
+                    "value": "other-relation",
+                    "label": {
+                        "text": "Other relation"
+                    },
+                    "attributes": {
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>other relation</em>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>other relation</em>"
+                    }
+                },
+                {
+                    "id": "unrelated",
+                    "value": "unrelated",
+                    "label": {
+                        "text": "Unrelated",
+                        "description": "Including foster child"
+                    },
+                    "attributes": {
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is <em>unrelated</em> to Joe Bloggs",
+                        "data-playback": "Amanda Bloggs is <em>unrelated</em> to Joe Bloggs"
+                    }
+                }
+            ]
+        }) }}
+    {% endcall %}
+{% endblock %}

package/components/search/example-search-with-character-check.njk

@@ -0,0 +1,23 @@
+{% from "components/input/_macro.njk" import onsInput %}
+
+{{
+    onsInput({
+        "id": 'search-field',
+        "label": {
+            'text': 'Filter results',
+            "classes": 'ons-u-pb-xxs ons-u-mb-no'
+        },
+        "searchButton": {
+            "text": 'Filter'
+        },
+        "width": "10",
+        "charCheckLimit": {
+            "charcheckCountdown": true,
+            "limit": 10,
+            "charCountSingular": "{x} more character needed",
+            "charCountPlural": "{x} more characters needed",
+            "charCountOverLimitSingular": "{x} character too many",
+            "charCountOverLimitPlural": "{x} characters too many"
+        }
+    })
+}}

package/components/search/example-search-with-placeholder.njk

@@ -0,0 +1,16 @@
+{% from "components/input/_macro.njk" import onsInput %}
+
+{{
+    onsInput({
+        "id": 'search-field',
+        "label": {
+            "text": 'Search this service'
+        },
+        "accessiblePlaceholder": true,
+        "searchButton": {
+            "visuallyHideButtonText": true,
+            "text": 'Search',
+            "iconType": 'search'
+        }
+    })
+}}

package/components/search/example-search.njk

@@ -0,0 +1,16 @@
+{% from "components/input/_macro.njk" import onsInput %}
+
+{{
+    onsInput({
+        "id": 'search-field',
+        "label": {
+            'text': 'Search',
+            "classes": 'ons-u-pb-xxs ons-u-mb-no'
+        },
+        "searchButton": {
+            "visuallyHideButtonText": true,
+            "text": 'Search',
+            "iconType": 'search'
+        }
+    })
+}}

package/components/section-navigation/example-section-navigation-vertical.njk

@@ -0,0 +1,40 @@
+{% from "components/section-navigation/_macro.njk" import onsSectionNavigation %}
+{{
+    onsSectionNavigation({
+        "variants": "vertical",
+        "id": "section-menu",
+        "currentPath": "#section-2",
+        "itemsList": [
+            {
+                "title": "Section 1",
+                "url": "#section-1"
+            },
+            {
+                "title": "Section 2",
+                "url": "#section-2",
+                "anchors": [
+                    {
+                        "title": "Sub section 1",
+                        "url": "#sub-section-1"
+                    },
+                    {
+                        "title": "Sub section 2",
+                        "url": "#sub-section-2"
+                    },
+                    {
+                        "title": "Sub section 3",
+                        "url": "#sub-section-3"
+                    }
+                ]
+            },
+            {
+                "title": "Section 3",
+                "url": "#0"
+            },
+            {
+                "title": "Section 4",
+                "url": "#0"
+            }
+        ]
+    })
+}}

package/components/section-navigation/example-section-navigation.njk

@@ -0,0 +1,21 @@
+{% from "components/section-navigation/_macro.njk" import onsSectionNavigation %}
+{{
+    onsSectionNavigation({
+        "id": "section-menu",
+        "currentPath": "#section-1",
+        "itemsList": [
+            {
+                "title": "Section 1",
+                "url": "#section-1"
+            },
+            {
+                "title": "Section 2",
+                "url": "#0"
+            },
+            {
+                "title": "Section 3",
+                "url": "#0"
+            }
+        ]
+    })
+}}

package/components/select/example-select-wide.njk

@@ -0,0 +1,55 @@
+{% from "components/select/_macro.njk" import onsSelect %}
+{{
+    onsSelect({
+        "id": "select-wide",
+        "name": "select",
+        "classes": "ons-input--block",
+        "label": {
+            "text": "Question topic"
+        },
+        "options": [
+            {
+                "value": "",
+                "text": "Select an option",
+                "disabled": true,
+                "selected": true
+            },
+            {
+                "value": "general",
+                "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"
+            },
+            {
+                "value": "gdp",
+                "text": "Gross Domestic Product figures for year ending April 2018"
+            }
+        ]
+    })
+}}

package/components/select/example-select-with-error.njk

@@ -0,0 +1,58 @@
+{% from "components/select/_macro.njk" import onsSelect %}
+
+{{
+    onsSelect({
+        "id": "select",
+        "name": "select",
+        "label": {
+            "text": "Question topic"
+        },
+        "label": {
+            "text": "Question topic"
+        },
+        "options": [
+            {
+                "value": "",
+                "text": "Select an option",
+                "disabled": true,
+                "selected": true
+            },
+            {
+                "value": "general",
+                "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"
+            }
+        ],
+        "error": {
+            "id": "select-error",
+            "text": "Select a question topic"
+        }
+    })
+}}

package/components/select/example-select-with-inline-label.njk

@@ -0,0 +1,23 @@
+{% from "components/select/_macro.njk" import onsSelect %}
+{{
+    onsSelect({
+        "id": "select",
+        "name": "select",
+        "classes": "ons-u-wa--@xxs",
+        "label": {
+            "text": "Sort by",
+            "inline": true
+        },
+        "options": [
+            {
+                "value": "best-match",
+                "text": "Best match",
+                "selected": true
+            },
+            {
+                "value": "latest",
+                "text": "Latest"
+            }
+        ]
+    })
+}}

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"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    })
+}}