@ons/design-system 62.0.1 → 62.1.0

package/components/radios/example-radios-with-revealed-text-input.njk

@@ -0,0 +1,80 @@
+{% from "components/radios/_macro.njk" import onsRadios %}
+{% from "components/question/_macro.njk" import onsQuestion %}
+
+{% call onsQuestion({
+    "title": "How do you usually travel to work?",
+    "classes": "ons-u-mt-no",
+    "legendIsQuestionTitle": true
+}) %}
+    {{
+        onsRadios({
+            "dontWrap": true,
+            "name": "travel",
+            "radios": [
+                {
+                    "id": "home",
+                    "label": {
+                        "text": "Work mainly from home"
+                    },
+                    "value": "home"
+                },
+                {
+                    "id": "car",
+                    "label": {
+                        "text": "Car or van"
+                    },
+                    "value": "car"
+                },
+                {
+                    "id": "underground",
+                    "label": {
+                        "text": "Underground, metro, light rail or tram"
+                    },
+                    "value": "underground"
+                },
+                {
+                    "id": "train",
+                    "label": {
+                        "text": "Train"
+                    },
+                    "value": "train"
+                },
+                {
+                    "id": "bus",
+                    "label": {
+                        "text": "Bus, minibus or coach"
+                    },
+                    "value": "bus"
+                },
+                {
+                    "id": "bicycle",
+                    "label": {
+                        "text": "Bicycle"
+                    },
+                    "value": "bicycle"
+                },
+                {
+                    "id": "walk",
+                    "label": {
+                        "text": "Walk"
+                    },
+                    "value": "walk"
+                },
+                {
+                    "id": "other-radio",
+                    "label": {
+                        "text": "Other"
+                    },
+                    "value": "other",
+                    "other": {
+                        "id": "other-textbox",
+                        "name": "other-answer",
+                        "label": {
+                            "text": "Enter how you travel"
+                        }
+                    }
+                }
+            ]
+        })
+    }}
+{% endcall %}

package/components/radios/example-radios-with-separator.njk

@@ -0,0 +1,59 @@
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/radios/_macro.njk" import onsRadios %}
+
+{% call onsQuestion({
+    "title": "How satisfied are you with this service?",
+    "legendIsQuestionTitle": true
+}) %}
+    {{
+        onsRadios({
+            "dontWrap": true,
+            "name": "satisfaction",
+            "or": "Or",
+            "radios": [
+                {
+                    "id": "very-satisfied",
+                    "label": {
+                        "text": "Very satisfied"
+                    },
+                    "value": "very-satisfied"
+                },
+                {
+                    "id": "somewhat-satisfied",
+                    "label": {
+                        "text": "Somewhat satisfied"
+                    },
+                    "value": "somewhat-satisfied"
+                },
+                {
+                    "id": "neither",
+                    "label": {
+                        "text": "Neither satisfied or dissatisfied"
+                    },
+                    "value": "neither"
+                },
+                {
+                    "id": "somewhat-dissatisfied",
+                    "label": {
+                        "text": "Somewhat dissatisfied"
+                    },
+                    "value": "somewhat-dissatisfied"
+                },
+                {
+                    "id": "very-dissatisfied",
+                    "label": {
+                        "text": "Very dissatisfied"
+                    },
+                    "value": "very-dissatisfied"
+                },
+                {
+                    "id": "no",
+                    "label": {
+                        "text": "I don’t want to give feedback"
+                    },
+                    "value": "no"
+                }
+            ]
+        })
+    }}
+{% endcall %}

package/components/radios/example-radios-with-visible-text-input.njk

@@ -0,0 +1,40 @@
+{% from "components/radios/_macro.njk" import onsRadios %}
+{% from "components/question/_macro.njk" import onsQuestion %}
+
+{% call onsQuestion({
+    "title": "Is the gender you identify with the same as your sex registered at birth?",
+    "classes": "ons-u-mt-no",
+    "legendIsQuestionTitle": true
+}) %}
+    {{
+        onsRadios({
+            "dontWrap": true,
+            "name": "gender-identity",
+            "radios": [
+                {
+                    "id": "yes",
+                    "label": {
+                        "text": "Yes"
+                    },
+                    "value": "yes"
+                },
+                {
+                    "id": "no",
+                    "label": {
+                        "text": "No"
+                    },
+                    "value": "no",
+                    "other": {
+                        "open": true,
+                        "otherType": "input",
+                        "id": "no-textbox",
+                        "name": "no-answer",
+                        "label": {
+                            "text": "Enter your gender identity"
+                        }
+                    }
+                }
+            ]
+        })
+    }}
+{% endcall %}

package/components/radios/example-radios-without-border.njk

@@ -0,0 +1,48 @@
+{% from "components/radios/_macro.njk" import onsRadios %}
+
+{{
+    onsRadios({
+        "name": "download-format",
+        "legend": "Select download format",
+        "borderless": true,
+        "radios": [
+            {
+                "id": "xls",
+                "label": {
+                    "text": "XLS format (78.9 KB)",
+                    "description": "Includes supporting information"
+                },
+                "value": "xls"
+            },
+            {
+                "id": "csv",
+                "label": {
+                    "text": "CSV format (554.7 KB)"
+                },
+                "value": "csv"
+            },
+            {
+                "id": "csvw",
+                "label": {
+                    "text": "CSVW format (1.9 KB)"
+                },
+                "value": "csvw"
+            },
+            {
+                "id": "json",
+                "label": {
+                    "text": "JSON file (10.9 KB)"
+                },
+                "value": "json"
+            },
+            {
+                "id": "supporting",
+                "label": {
+                    "text": "Support information (2.6 KB)"
+                },
+                "value": "supporting"
+            }
+        ]
+    })
+}}
+

package/components/radios/examples-radios.njk

@@ -0,0 +1,38 @@
+{% from "components/radios/_macro.njk" import onsRadios %}
+{% from "components/question/_macro.njk" import onsQuestion %}
+
+{% call onsQuestion({
+    "title": "What type of accommodation do you live in?",
+    "classes": "ons-u-mt-no",
+    "legendIsQuestionTitle": true
+}) %}
+    {{
+        onsRadios({
+            "name": "property-type",
+            "dontWrap": true,
+            "radios": [
+                {
+                    "id": "house",
+                    "label": {
+                        "text": "House or bungalow"
+                    },
+                    "value": "house"
+                },
+                {
+                    "id": "flat",
+                    "label": {
+                        "text": "Flat, maisonette or apartment"
+                    },
+                    "value": "flat"
+                },
+                {
+                    "id": "mobile",
+                    "label": {
+                        "text": "Caravan or other mobile or temporary structure"
+                    },
+                    "value": "mobile"
+                }
+            ]
+        })
+    }}
+{% endcall %}

package/components/related-content/example-related-content-general.njk

@@ -0,0 +1,44 @@
+{% from "components/related-content/_macro.njk" import onsRelatedContent %}
+{% from "components/related-content/_section-macro.njk" import onsRelatedContentSection %}
+{% from "components/lists/_macro.njk" import onsList %}
+
+{% call onsRelatedContent({
+    "ariaLabel": 'Related content'
+}) %}
+    {% call onsRelatedContentSection() %}
+        <p class="ons-u-mb-xs">Telephone: 0800 587 2021</p>
+
+        {{
+            onsList({
+                "classes": 'ons-u-mb-no',
+                "variants": 'bare',
+                "itemsList": [
+                    {
+                        "text": 'Monday to Friday, 8am to 8pm'
+                    },
+                    {
+                        "text": 'Saturday, 8am to 1pm'
+                    }
+                ]
+            })
+        }}
+    {% endcall %}
+    {% call onsRelatedContentSection() %}
+        <p class="ons-u-mb-xs">Live chat</p>
+
+        {{
+            onsList({
+                "classes": 'ons-u-mb-no',
+                "variants": 'bare',
+                "itemsList": [
+                    {
+                        "text": 'Monday to Friday, 10am to 5pm'
+                    },
+                    {
+                        "text": 'Saturday, 9am to 3pm'
+                    }
+                ]
+            })
+        }}
+    {% endcall %}
+{% endcall %}

package/components/related-content/example-related-content-multiple-rows-of-links.njk

@@ -0,0 +1,51 @@
+{% from "components/related-content/_macro.njk" import onsRelatedContent %}
+
+{{ onsRelatedContent({
+    "ariaLabel": 'Related content',
+    "rows": [
+        {
+            "id": 'related-help-with-the-census',
+            "title": 'Help with the census',
+            "itemsList": [
+                {
+                    "text": 'I’m moving house',
+                    "url": '#0'
+                },
+                {
+                    "text": 'What if I’m away or abroad on Census Day?',
+                    "url": '#0'
+                },
+                {
+                    "text": 'Get an access code or paper census',
+                    "url": '#0'
+                },
+                {
+                    "text": 'Find a census support centre',
+                    "url": '#0'
+                },
+                {
+                    "text": 'Languages',
+                    "url": '#0'
+                },
+                {
+                    "text": 'Accessibility',
+                    "url": '#0'
+                }
+            ]
+        },
+        {
+            "id": 'related-content',
+            "title": 'Related content',
+            "itemsList": [
+                {
+                    "text": 'How we will contact or visit you',
+                    "url": '#0'
+                },
+                {
+                    "text": 'Media enquiries',
+                    "url": '#0'
+                }
+            ]
+        }
+    ]
+}) }}

package/components/related-content/example-related-content-social-media.njk

@@ -0,0 +1,40 @@
+{% from "components/related-content/_macro.njk" import onsRelatedContent %}
+
+{{ onsRelatedContent({
+    "ariaLabel": 'Social media links',
+    "rows": [
+        {
+            "id": 'follow-us',
+            "title": 'Follow us',
+            "variants": 'social',
+            "iconPosition": 'before',
+            "iconSize": 'xxl',
+            "itemsList": [
+                {
+                    "url": '#0',
+                    "text": 'Twitter',
+                    "iconType": 'twitter',
+                    "rel": 'noreferrer external'
+                },
+                {
+                    "url": '#0',
+                    "text": 'Facebook',
+                    "iconType": 'facebook',
+                    "rel": 'noreferrer external'
+                },
+                {
+                    "url": '#0',
+                    "text": 'Instagram',
+                    "iconType": 'instagram',
+                    "rel": 'noreferrer external'
+                },
+                {
+                    "url": '#0',
+                    "text": 'LinkedIn',
+                    "iconType": 'linkedin',
+                    "rel": 'noreferrer external'
+                }
+            ]
+        }
+    ]
+}) }}

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

@@ -0,0 +1,211 @@
+---
+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 %}
+{% from "components/panel/_macro.njk" import onsPanel %}
+{% from "components/lists/_macro.njk" import onsList %}
+
+{% set pageConfig = {
+    "header": {
+        "title": "Relationships example"
+    },
+    "breadcrumbs": {
+        "ariaLabel": 'Breadcrumbs',
+        "itemsList": [
+            {
+                "url": '#0',
+                "text": 'Previous'
+            }
+        ]
+    }
+} %}
+
+{% block main %}
+
+    {% call
+        onsPanel({
+            title: "There is a problem with your answer",
+            type: "error"
+        })
+    %}
+    {{
+        onsList({
+            "element": "ol",
+            "itemsList": [
+                {
+                    "text": "Select a relationship",
+                    "url": "#relationship-error",
+                    "variants": "inPageLink"
+                }
+            ]
+        })
+    }}
+    {% endcall %}
+    {% 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,
+            "error": {
+                "id": "relationship-error",
+                "text": "Select a relationship"
+            },
+            "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 %}