@ons/design-system 62.0.1 → 62.1.0

package/components/relationships/example-relationships-you.njk

@@ -0,0 +1,187 @@
+---
+title: "Example: First-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": "Joe Bloggs is your <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({
+            "legend": "Joe Bloggs is your <em>…</em>",
+            "legendClasses": "ons-u-vh",
+            "playback": "Joe Bloggs is your <em>…</em>",
+            "name": "relationship",
+            "dontWrap": true,
+            "radios": [
+                {
+                    "id": "husband-wife",
+                    "value": "husband-wife",
+                    "label": {
+                        "text": "Husband or wife"
+                    },
+                    "attributes": {
+                        "data-title": "Joe Bloggs is your <em>husband or wife</em>",
+                        "data-playback": "Joe Bloggs is your <em>husband or wife</em>"
+                    }
+                },
+                {
+                    "id": "civil-partner",
+                    "value": "civil-partner",
+                    "label": {
+                        "text": "Legally registered civil partner"
+                    },
+                    "attributes": {
+                        "data-title": "Joe Bloggs is your <em>legally registered civil partner</em>",
+                        "data-playback": "Joe Bloggs is your <em>legally registered civil partner</em>"
+                    }
+                },
+                {
+                    "id": "partner",
+                    "value": "partner",
+                    "label": {
+                        "text": "Partner"
+                    },
+                    "attributes": {
+                        "data-title": "Joe Bloggs is your <em>partner</em>",
+                        "data-playback": "Joe Bloggs is your <em>partner</em>"
+                    }
+                },
+                {
+                    "id": "son-daughter",
+                    "value": "son-daughter",
+                    "label": {
+                        "text": "Son or daughter"
+                    },
+                    "attributes": {
+                        "data-title": "Joe Bloggs is your <em>son or daughter</em>",
+                        "data-playback": "Joe Bloggs is your <em>son or daughter</em>"
+                    }
+                },
+                {
+                    "id": "stepchild",
+                    "value": "stepchild",
+                    "label": {
+                        "text": "Stepchild"
+                    },
+                    "attributes": {
+                        "data-title": "Joe Bloggs is your <em>stepchild</em>",
+                        "data-playback": "Joe Bloggs is your <em>stepchild</em>"
+                    }
+                },
+                {
+                    "id": "brother-sister",
+                    "value": "brother-sister",
+                    "label": {
+                        "text": "Brother or sister"
+                    },
+                    "attributes": {
+                        "data-title": "Joe Bloggs is your <em>brother or sister</em>",
+                        "data-playback": "Joe Bloggs is your <em>brother or sister</em>"
+                    }
+                },
+                {
+                    "id": "stepbrother-stepsister",
+                    "value": "stepbrother-stepsister",
+                    "label": {
+                        "text": "Stepbrother or stepsister"
+                    },
+                    "attributes": {
+                        "data-title": "Joe Bloggs is your <em>stepbrother or sister</em>",
+                        "data-playback": "Joe Bloggs is your <em>stepbrother or sister</em>"
+                    }
+                },
+                {
+                    "id": "mother-father",
+                    "value": "mother-father",
+                    "label": {
+                        "text": "Mother or father"
+                    },
+                    "attributes": {
+                        "data-title": "Joe Bloggs is your <em>mother or father</em>",
+                        "data-playback": "Joe Bloggs is your <em>mother or father</em>"
+                    }
+                },
+                {
+                    "id": "stepmother-stepfather",
+                    "value": "stepmother-stepfather",
+                    "label": {
+                        "text": "Stepmother or stepfather"
+                    },
+                    "attributes": {
+                        "data-title": "Joe Bloggs is your <em>stepmother or stepfather</em>",
+                        "data-playback": "Joe Bloggs is your <em>stepmother or stepfather</em>"
+                    }
+                },
+                {
+                    "id": "grandchild",
+                    "value": "grandchild",
+                    "label": {
+                        "text": "Grandchild"
+                    },
+                    "attributes": {
+                        "data-title": "Joe Bloggs is your <em>grandchild</em>",
+                        "data-playback": "Joe Bloggs is your <em>grandchild</em>"
+                    }
+                },
+                {
+                    "id": "grandparent",
+                    "value": "grandparent",
+                    "label": {
+                        "text": "Grandparent"
+                    },
+                    "attributes": {
+                        "data-title": "Joe Bloggs is your <em>grandparent</em>",
+                        "data-playback": "Joe Bloggs is your <em>grandparent</em>"
+                    }
+                },
+                {
+                    "id": "other-relation",
+                    "value": "other-relation",
+                    "label": {
+                        "text": "Other relation"
+                    },
+                    "attributes": {
+                        "data-title": "Joe Bloggs is your <em>other relation</em>",
+                        "data-playback": "Joe Bloggs is your <em>other relation</em>"
+                    }
+                },
+                {
+                    "id": "unrelated",
+                    "value": "unrelated",
+                    "label": {
+                        "text": "Unrelated",
+                        "description": "Including foster child"
+                    },
+                    "attributes": {
+                        "data-title": "Joe Bloggs is <em>unrelated</em> to you",
+                        "data-playback": "Joe Bloggs is <em>unrelated</em> to you"
+                    }
+                }
+            ]
+        }) }}
+    {% endcall %}
+{% endblock %}

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