@ons/design-system 62.0.1 → 62.1.0

package/components/mutually-exclusive/example-mutually-exclusive-date-with-error.njk

@@ -0,0 +1,47 @@
+{% from "components/date-input/_macro.njk" import onsDateInput %}
+
+{{
+    onsDateInput({
+        "id": "date-mutually-exclusive",
+        "legendOrLabel": "When did you leave your last paid job?",
+        "legendClasses": "ons-u-vh",
+        "day": {
+            "label": {
+                "text": "Day"
+            },
+            "name": "day-exclusive"
+        },
+        "month": {
+            "label": {
+                "text": "Month"
+            },
+            "name": "month-exclusive"
+        },
+        "year": {
+            "label": {
+                "text": "Year"
+            },
+            "name": "year-exclusive"
+        },
+        "mutuallyExclusive": {
+            "or": "Or",
+            "deselectMessage": "Selecting this will clear the date if one has been inputted",
+            "deselectGroupAdjective": "cleared",
+            "deselectExclusiveOptionAdjective": "deselected",
+            "exclusiveOptions": [
+                {
+                    "id": "date-exclusive-checkbox",
+                    "name": "no-paid-job",
+                    "value": "no-paid-job",
+                    "label": {
+                        "text": "I have never had a paid job"
+                    }
+                }
+            ]
+        },
+        "error": {
+            "id": 'date-mutually-exclusive-error',
+            "text": 'Enter when you left your last paid job'
+        }
+    })
+}}

package/components/mutually-exclusive/example-mutually-exclusive-date.njk

@@ -0,0 +1,49 @@
+{% from "components/date-input/_macro.njk" import onsDateInput %}
+{% from "components/question/_macro.njk" import onsQuestion %}
+
+{% call onsQuestion({
+    "title": "When did you leave your last paid job?",
+    "description": "<p>For example, 31 3 2018</p>",
+    "legendIsQuestionTitle": true
+}) %}
+    {{
+        onsDateInput({
+            "id": "date-mutually-exclusive",
+            "dontWrap": true,
+            "day": {
+                "label": {
+                    "text": "Day"
+                },
+                "name": "day-exclusive"
+            },
+            "month": {
+                "label": {
+                    "text": "Month"
+                },
+                "name": "month-exclusive"
+            },
+            "year": {
+                "label": {
+                    "text": "Year"
+                },
+                "name": "year-exclusive"
+            },
+            "mutuallyExclusive": {
+                "or": "Or",
+                "deselectMessage": "Selecting this will clear the date if one has been inputted",
+                "deselectGroupAdjective": "cleared",
+                "deselectExclusiveOptionAdjective": "deselected",
+                "exclusiveOptions": [
+                    {
+                        "id": "date-exclusive-checkbox",
+                        "name": "no-paid-job",
+                        "value": "no-paid-job",
+                        "label": {
+                            "text": "I have never had a paid job"
+                        }
+                    }
+                ]
+            }
+        })
+    }}
+{% endcall %}

package/components/mutually-exclusive/example-mutually-exclusive-duration.njk

@@ -0,0 +1,45 @@
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/duration/_macro.njk" import onsDuration %}
+
+{% call onsQuestion({
+    "title": "How long have you lived at this address?",
+    "description": "<p>Enter “0” into the years field if you have lived at this address for less than a year</p>",
+    "legendIsQuestionTitle": true
+}) %}
+    {{ onsDuration({
+        "id": "address-duration",
+        "dontWrap": true,
+        "field1": {
+            "id": "address-duration-years",
+            "name": "address-duration-years",
+            "suffix": {
+                "text": "Years",
+                "id": "address-duration-years-suffix"
+            }
+        },
+        "field2": {
+            "id": "address-duration-months",
+            "name": "address-duration-months",
+            "suffix": {
+                "text": "Months",
+                "id": "address-duration-months-suffix"
+            }
+        },
+        "mutuallyExclusive": {
+            "or": "Or",
+            "deselectMessage": "Selecting this will clear the date if one has been inputted",
+            "deselectGroupAdjective": "cleared",
+            "deselectExclusiveOptionAdjective": "deselected",
+            "exclusiveOptions": [
+                {
+                    "id": "duration-exclusive-checkbox",
+                    "name": "no-duration",
+                    "value": "no-duration",
+                    "label": {
+                        "text": "I have not moved in to this address yet"
+                    }
+                }
+            ]
+        }
+    }) }}
+{% endcall %}

package/components/mutually-exclusive/example-mutually-exclusive-email.njk

@@ -0,0 +1,36 @@
+{% from "components/input/_macro.njk" import onsInput %}
+{% from "components/question/_macro.njk" import onsQuestion %}
+
+{% call onsQuestion({
+    "title": "Get a confirmation email",
+    "description": "<p>Enter your email address if you would like to be sent confirmation that you have completed your survey</p>",
+    "legendIsQuestionTitle": true
+}) %}
+    {{
+        onsInput({
+            "id": "email",
+            "type": "email",
+            "label": {
+                "text": "Email address",
+                "description": "This will not be stored and only used once to send your confirmation"
+            },
+            "dontWrap": true,
+            "mutuallyExclusive": {
+                "or": "Or",
+                "deselectMessage": "Selecting this will clear your email",
+                "deselectGroupAdjective": "cleared",
+                "deselectExclusiveOptionAdjective": "deselected",
+                "exclusiveOptions": [
+                    {
+                        "id": "email-checkbox",
+                        "name": "no-email",
+                        "value": "no-email",
+                        "label": {
+                            "text": "I don’t want to receive a confirmation email"
+                        }
+                    }
+                ]
+            }
+        })
+    }}
+{% endcall %}

package/components/mutually-exclusive/example-mutually-exclusive-multiple-options.njk

@@ -0,0 +1,63 @@
+{% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
+{% from "components/question/_macro.njk" import onsQuestion %}
+
+{% call onsQuestion({
+    "title": "What type of central heating do you have?",
+    "legendIsQuestionTitle": true
+}) %}
+    {{
+        onsCheckboxes({
+            "id": "central-heating-answers",
+            "dontWrap": true,
+            "checkboxesLabel": "Select all that apply",
+            "name": "mutually-exclusive",
+            "checkboxes": [
+                {
+                    "id": "gas",
+                    "label": {
+                        "text": "Gas"
+                    },
+                    "value": "gas"
+                },
+                {
+                    "id": "electric",
+                    "label": {
+                        "text": "Electric"
+                    },
+                    "value": "electric"
+                },
+                {
+                    "id": "solid-fuel",
+                    "label": {
+                        "text": "Solid fuel"
+                    },
+                    "value": "solid-fuel"
+                }
+            ],
+            "mutuallyExclusive": {
+                "or": "Or",
+                "deselectMessage": "Selecting these will uncheck all other checkboxes",
+                "deselectGroupAdjective": "deselected",
+                "deselectExclusiveOptionAdjective": "deselected",
+                "exclusiveOptions": [
+                    {
+                        "id": "no-central-heating",
+                        "name": "no central heating",
+                        "label": {
+                            "text": "No central heating"
+                        },
+                        "value": "no-central-heating"
+                    },
+                    {
+                        "id": "other",
+                        "name": "other",
+                        "label": {
+                            "text": "Other"
+                        },
+                        "value": "other"
+                    }
+                ]
+            }
+        })
+    }}
+{% endcall %}

package/components/mutually-exclusive/example-mutually-exclusive-number.njk

@@ -0,0 +1,43 @@
+{% from "components/input/_macro.njk" import onsInput %}
+{% from "components/question/_macro.njk" import onsQuestion %}
+
+{% call onsQuestion({
+    "title": "What was your annual income before tax in 2018/19?",
+    "legendIsQuestionTitle": true
+}) %}
+    {{
+        onsInput({
+            "id": "currency",
+            "dontWrap": true,
+            "type": "number",
+            "width": "4",
+            "attributes": {
+                "min": 0
+            },
+            "label": {
+                "text": "Gross annual income"
+            },
+            "prefix": {
+                "title": "British pounds (GBP)",
+                "text": "£",
+                "id": "annual-salary-gpb-prefix"
+            },
+            "mutuallyExclusive": {
+                "or": "Or",
+                "deselectMessage": "Selecting this will clear your inputted annual income",
+                "deselectGroupAdjective": "cleared",
+                "deselectExclusiveOptionAdjective": "deselected",
+                "exclusiveOptions": [
+                    {
+                        "id": "currency-checkbox",
+                        "name": "no-currency",
+                        "value": "no-currency",
+                        "label": {
+                            "text": "I prefer not to say"
+                        }
+                    }
+                ]
+            }
+        })
+    }}
+{% endcall %}

package/components/mutually-exclusive/example-mutually-exclusive-textarea.njk

@@ -0,0 +1,40 @@
+{% from "components/textarea/_macro.njk" import onsTextarea %}
+{% from "components/question/_macro.njk" import onsQuestion %}
+
+{% call onsQuestion({
+    "title": "What do you think of this service?",
+    "legendIsQuestionTitle": true
+}) %}
+    {{
+        onsTextarea({
+            "id": "feedback",
+            "name": "feedback",
+            "dontWrap": true,
+            "width": "30",
+            "label": {
+                "text": "Enter your feedback"
+            },
+            "charCheckLimit": {
+                "limit": 200,
+                "charCountSingular": "You have {x} character remaining",
+                "charCountPlural": "You have {x} characters remaining"
+            },
+            "mutuallyExclusive": {
+                "or": "Or",
+                "deselectMessage": "Selecting this will clear your feedback",
+                "deselectGroupAdjective": "cleared",
+                "deselectExclusiveOptionAdjective": "deselected",
+                "exclusiveOptions": [
+                    {
+                        "id": "feedback-checkbox",
+                        "name": "no-feedback",
+                        "value": "no-feedback",
+                        "label": {
+                            "text": "I don’t want to provide feedback"
+                        }
+                    }
+                ]
+            }
+        })
+    }}
+{% endcall %}

package/components/navigation/_macro.njk

@@ -51,7 +51,7 @@
     </div>
     {% if params.navigation.subNavigation %}
         <nav class="ons-navigation ons-navigation--sub ons-u-d-no@xxs@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes }}" id="{{ params.navigation.subNavigation.id }}" aria-label="{{ params.navigation.subNavigation.ariaLabel | default("Section menu") }}" data-analytics="header-section-navigation">
-            <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.navigation.fullWidth }}{{ ' ons-container--wide' if params.wide or params.navigation.wide }}">
+            <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.fullWidth or params.navigation.fullWidth }}{{ ' ons-container--wide' if params.wide or params.navigation.wide }}">
                 <ul class="ons-navigation__list ons-navigation__list">
                     {% for item in (params.navigation.subNavigation.itemsList if params.navigation.subNavigation.itemsList is iterable else params.navigation.subNavigation.itemsList.items()) %}
                         <li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}">

package/components/pagination/example-pagination-first.njk

@@ -0,0 +1,24 @@
+{% from "components/pagination/_macro.njk" import onsPagination %}
+
+{{
+    onsPagination({
+        "previous": "Previous",
+        "next": "Next",
+        "hideRangeIndicator": true,
+        "pages": [
+            {
+                "url": "#page1",
+                "current": true
+            },
+            {
+                "url": "#page2"
+            },
+            {
+                "url": "#page3"
+            },
+            {
+                "url": "#page4"
+            }
+        ]
+    })
+}}

package/components/pagination/example-pagination-last.njk

@@ -0,0 +1,24 @@
+{% from "components/pagination/_macro.njk" import onsPagination %}
+
+{{
+    onsPagination({
+        "previous": "Previous",
+        "next": "Next",
+        "hideRangeIndicator": true,
+        "pages": [
+            {
+                "url": "#page1"
+            },
+            {
+                "url": "#page2"
+            },
+            {
+                "url": "#page3"
+            },
+            {
+                "url": "#page4",
+                "current": true
+            }
+        ]
+    })
+}}

package/components/pagination/example-pagination-with-no-range-indicator.njk

@@ -0,0 +1,42 @@
+{% from "components/pagination/_macro.njk" import onsPagination %}
+
+{{
+    onsPagination({
+        "previous": "Previous",
+        "next": "Next",
+        "hideRangeIndicator": true,
+        "pages": [
+            {
+                "url": "#page1"
+            },
+            {
+                "url": "#page2"
+            },
+            {
+                "url": "#page3"
+            },
+            {
+                "url": "#page4"
+            },
+            {
+                "url": "#page5",
+                "current": true
+            },
+            {
+                "url": "#page6"
+            },
+            {
+                "url": "#page7"
+            },
+            {
+                "url": "#page8"
+            },
+            {
+                "url": "#page9"
+            },
+            {
+                "url": "#page10"
+            }
+        ]
+    })
+}}

package/components/pagination/example-pagination.njk

@@ -0,0 +1,116 @@
+{% from "components/pagination/_macro.njk" import onsPagination %}
+
+{{
+    onsPagination({
+        "previous": "Previous",
+        "next": "Next",
+        "pages": [
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0",
+                "current": true
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            },
+            {
+                "url": "#0"
+            }
+        ]
+    })
+}}

package/components/panel/example-panel-bare.njk

@@ -0,0 +1,9 @@
+{% from "components/panel/_macro.njk" import onsPanel %}
+
+{% call onsPanel({
+        "type": 'bare',
+        "iconType": 'lock'
+    })
+%}
+    Here is some text with an icon
+{% endcall %}

package/components/panel/example-panel-with-announcement.njk

@@ -0,0 +1,18 @@
+---
+
+"fullWidth": true
+---
+{% from "components/panel/_macro.njk" import onsPanel %}
+
+{% call onsPanel({
+        "type": 'announcement'
+    })
+%}
+
+<p class="ons-u-mb-no">National lockdown: stay at home</p>
+
+<div class="ons-u-fs-r">
+    <p>Coronavirus (COVID-19) remains a serious threat across the country. <a href="#0">Find out more</a></p>
+</div>
+
+{% endcall %}

package/components/panel/example-panel-with-error-details.njk

@@ -0,0 +1,18 @@
+{% from "components/input/_macro.njk" import onsInput %}
+
+{{
+    onsInput({
+        "id": 'number',
+        "type": 'number',
+        "width": '5',
+        "attributes": {
+            "min": 0
+        },
+        "label": {
+            "text": 'Number of employees paid monthly'
+        },
+        "error": {
+            "text": 'Enter a number'
+        }
+    })
+}}

package/components/panel/example-panel-with-error-summary.njk

@@ -0,0 +1,25 @@
+{% from "components/panel/_macro.njk" import onsPanel %}
+{% from "components/lists/_macro.njk" import onsList %}
+
+{% call onsPanel({
+        "title": 'There are 2 problems with your answer',
+        "type": 'error'
+}) %}
+    {{
+        onsList({
+            "element": 'ol',
+            "itemsList": [
+                {
+                    "text": 'Enter a number',
+                    "url": '#container-test-number',
+                    "variants": "inPageLink"
+                },
+                {
+                    "text": 'Enter a number less than or equal to 100',
+                    "url": '#container-test-percent',
+                    "variants": "inPageLink"
+                }
+            ]
+        })
+    }}
+{% endcall %}

package/components/panel/example-panel-with-information.njk

@@ -0,0 +1,7 @@
+{% from "components/panel/_macro.njk" import onsPanel %}
+
+{{
+    onsPanel({
+        "body": '<p>Include all rooms built or converted for use as bedrooms</p>'
+    })
+}}

package/components/panel/example-panel-with-spacious-information.njk

@@ -0,0 +1,7 @@
+{% from "components/panel/_macro.njk" import onsPanel %}
+{{
+    onsPanel({
+        "spacious": true,
+        "body": '<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p><ul><li>VAT</li><li>Internet sales</li></ul>'
+    })
+}}

package/components/panel/example-panel-with-success-message.njk

@@ -0,0 +1,10 @@
+{% from "components/panel/_macro.njk" import onsPanel %}
+
+{{
+    onsPanel({
+        "type": 'success',
+        "id": 'success-id',
+        "iconType": 'check',
+        "body": 'Information has been successfully submitted'
+    })
+}}

package/components/panel/example-panel-with-warning.njk

@@ -0,0 +1,8 @@
+{% from "components/panel/_macro.njk" import onsPanel %}
+
+{% call onsPanel({
+        "type": 'warn'
+    })
+%}
+    All of the information about this person will be deleted
+{% endcall %}

package/components/password/example-password.njk

@@ -0,0 +1,11 @@
+{% from "components/password/_macro.njk" import onsPassword %}
+
+{{
+    onsPassword({
+        "id": "password",
+        "label": {
+            "text": "Password"
+        },
+        "showPasswordText": "Show password"
+    })
+}}