@ons/design-system 64.0.0 → 65.1.0

package/components/mutually-exclusive/_macro.njk

@@ -7,6 +7,7 @@
     {# Resolves caller issue in Jinja: https://github.com/pallets/jinja/issues/371 #}
     {% set content = caller() %}
     {% set exclusiveOptionsLength = params.exclusiveOptions | length %}
+    {% set or = params.or | default("Or") %}
 
     {% call onsFieldset({
         "id": params.id,
@@ -26,7 +27,7 @@
             {% endif %}
             {% if exclusiveOptionsLength == 1 %}
                 <p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s">
-                    <span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">{{ params.or }}</span>
+                    <span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">{{ or }}</span>
                     {{
                         onsCheckbox({
                             "id": params.exclusiveOptions[0].id,
@@ -38,7 +39,7 @@
                             "deselectMessage": params.deselectMessage,
                             "inputClasses": "ons-js-exclusive-option",
                             "label": {
-                                "text": '<span class="ons-u-vh">' + params.or + ', </span> ' + params.exclusiveOptions[0].label.text,
+                                "text": '<span class="ons-u-vh">' + or + ', </span> ' + params.exclusiveOptions[0].label.text,
                                 "description": params.exclusiveOptions[0].label.description
                             }
                         })
@@ -46,7 +47,7 @@
                 </p>
             {% elif exclusiveOptionsLength > 1 %}
                 <p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s">
-                    <span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">{{ params.or }}</span>
+                    <span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">{{ or }}</span>
                     {{
                         onsRadios({
                             "dontWrap": true,

package/components/navigation/_macro.njk

@@ -14,7 +14,7 @@
                     {% endif %}
                     {{ onsAutosuggest({
                         "id": "ons-site-search",
-                        "containerClasses": "ons-autosuggest-input--header",
+                        "containerClasses": "ons-autosuggest--header",
                         "classes": autosuggestClasses,
                         "label": {
                             "text": params.siteSearchAutosuggest.label,
@@ -42,7 +42,7 @@
                 <ul class="ons-navigation__list">
                     {% for item in params.navigation.itemsList %}
                         <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) }}">
-                           <a class="ons-navigation__link" href="{{ item.url }}" {% if item.id %}id="{{ item.id }}" {% endif %}{% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %}>{{ item.title }}</a>
+                           <a class="ons-navigation__link" href="{{ item.url }}" {% if item.id %}id="{{ item.id }}" {% endif %}{% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %}>{% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}</a>
                         </li>
                     {% endfor %}
                 </ul>
@@ -55,7 +55,7 @@
                 <ul class="ons-navigation__list ons-navigation__list">
                     {% for item in params.navigation.subNavigation.itemsList %}
                         <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) }}">
-                            <a class="ons-navigation__link ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
+                            <a class="ons-navigation__link ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}" {% endif %}>{% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}</a>
                         </li>
                     {% endfor %}
                 </ul>
@@ -68,7 +68,7 @@
                 "type": "button",
                 "variants": ["mobile", "dropdown"],
                 "attributes": {
-                    "aria-label": "Toggle section navigation",
+                    "aria-label": "Toggle " + params.navigation.currentPageTitle + " menu" if params.navigation.currentPageTitle else "Toggle section menu",
                     "aria-controls": params.navigation.subNavigation.id,
                     "aria-expanded": "false"
                 }
@@ -81,14 +81,14 @@
                         </li>
                         {% for item in params.navigation.subNavigation.itemsList %}
                             <li class="ons-navigation__item {{ ' ons-navigation__item--active' if (item.url == params.navigation.subNavigation.currentPath) or (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}">
-                                <a class="ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}--mobile" {% endif %}>{{ item.title }}</a>
+                                <a class="ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}--mobile" {% endif %}>{% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}</a>
                                 {% if item.sections %}
                                     {% for section in item.sections %}
                                         {% if section.sectionTitle %}<h3 class="ons-navigation__list-header">{{ section.sectionTitle }}</h3>{% endif %}
                                         <ul class="ons-navigation__list ons-navigation__list--child ons-list--dashed ons-u-ml-s ons-u-mt-xs">
                                             {% for child in section.children %}
                                                 <li class="ons-navigation__item ons-list__item {{ ' ons-navigation__item--active' if (child.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and child.url in params.navigation.currentPath) }}">
-                                                    <a class="ons-navigation__link ons-navigation__link--section" href="{{ child.url }}" {% if child.ariaLabel %}aria-label="{{ child.ariaLabel }}" {% endif %} {% if child.id %}id="{{ child.id }}" {% endif %}>{{ child.title }}</a>
+                                                    <a class="ons-navigation__link ons-navigation__link--section" href="{{ child.url }}" {% if child.ariaLabel %}aria-label="{{ child.ariaLabel }}" {% endif %} {% if child.id %}id="{{ child.id }}" {% endif %}>{% if child.title %}{{ child.title }}{% elif child.text %}{{ child.text }}{% endif %}</a>
                                                 </li>
                                             {% endfor %}
                                         </ul>

package/components/navigation/_macro.spec.js

@@ -10,7 +10,7 @@ const PARAMS = {
   id: 'main-nav',
   ariaLabel: 'Main menu',
   currentPath: ['#1', '/sub-item-1', '/sub-item-2/child-item-1'],
-  currentPageTitle: 'Main nav item 2',
+  currentPageTitle: 'main nav item 2',
   itemsList: [
     {
       title: 'Main nav item 1',
@@ -130,7 +130,7 @@ describe('macro: navigation', () => {
         accessiblePlaceholder: true,
         autocomplete: 'off',
         id: 'ons-site-search',
-        containerClasses: 'ons-autosuggest-input--header',
+        containerClasses: 'ons-autosuggest--header',
         classes: 'ons-input-search ons-input-search--icon',
         label: {
           text: 'Search the design system',
@@ -210,12 +210,12 @@ describe('macro: navigation', () => {
       faker.renderComponent('navigation', { navigation: PARAMS });
 
       expect(buttonSpy.occurrences).toContainEqual({
-        text: 'Main nav item 2',
+        text: 'main nav item 2',
         classes: 'ons-u-d-no ons-js-sub-navigation-button',
         variants: ['mobile', 'dropdown'],
         type: 'button',
         attributes: {
-          'aria-label': 'Toggle section navigation',
+          'aria-label': 'Toggle main nav item 2 menu',
           'aria-controls': 'sub-nav',
           'aria-expanded': 'false',
         },

package/components/pagination/_macro.njk

@@ -1,4 +1,5 @@
 {% macro onsPagination(params) %}
+    {% from "components/icon/_macro.njk" import onsIcon %}
     {% set currentPageIndex = params.currentPageNumber|int %}
     {% set totalPages = params.pages | length|int %}
     {% set position = "Page " ~ currentPageIndex ~ " of " ~ totalPages %}
@@ -13,7 +14,14 @@
             {% if currentPageIndex != 1 %}
                 {% set prevPageIndex = currentPageIndex - 2 %}
                 <li class="ons-pagination__item ons-pagination__item--previous">
-                    <a href="{{ params.pages[prevPageIndex].url }}" class="ons-pagination__link" rel="prev" aria-label="Go to the previous page (Page {{ currentPageIndex - 1 }})">{{ params.previous }}</a>
+                    <a href="{{ params.pages[prevPageIndex].url }}" class="ons-pagination__link ons-pagination__link--no-underline" rel="prev" aria-label="Go to the previous page (Page {{ currentPageIndex - 1 }})">
+                        {{ onsIcon({
+                            "iconType": 'arrow-previous',
+                            "classes": 'ons-u-mr-xs',
+                            "iconSize": 'm'
+                        }) }}
+                        <span class="ons-pagination__link-text">{{ params.previous | default("Previous") }}</span>
+                    </a>
                 </li>
             {% endif %}
             {% if currentPageIndex > 2 %}
@@ -60,7 +68,14 @@
             {% endif %}
             {% if totalPages > 1 and totalPages != currentPageIndex %}
                 <li class="ons-pagination__item ons-pagination__item--next">
-                    <a href="{{ params.pages[currentPageIndex].url }}" class="ons-pagination__link" rel="next" aria-label="Go to the next page (Page {{ currentPageIndex + 1 }})">{{ params.next }}</a>
+                    <a href="{{ params.pages[currentPageIndex].url }}" class="ons-pagination__link ons-pagination__link--no-underline" rel="next" aria-label="Go to the next page (Page {{ currentPageIndex + 1 }})">
+                        <span class="ons-pagination__link-text">{{ params.next | default("Next") }}</span>
+                        {{ onsIcon({
+                            "iconType": 'arrow-next',
+                            "classes": 'ons-u-ml-xs',
+                            "iconSize": 'm'
+                        }) }}
+                    </a>
                 </li>
             {% endif %}
         </ul>

package/components/pagination/_pagination.scss

@@ -39,12 +39,26 @@ $pagination-item-width: 2.5rem;
     min-width: $pagination-item-width;
   }
 
+  &__link--no-underline {
+    text-decoration: none;
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
   &__link {
     border-radius: 3px;
     box-shadow: none;
     display: block;
     padding: $pagination-item-padding;
 
+    &-text {
+      @extend .ons-u-fs-r--b;
+
+      display: inline-block;
+      vertical-align: middle;
+    }
+
     &:focus {
       border-radius: 0;
     }

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

@@ -2,8 +2,6 @@
 
 {{
     onsPagination({
-        "previous": "Previous",
-        "next": "Next",
         "hideRangeIndicator": true,
         "currentPageNumber": 1,
         "pages": [

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

@@ -2,8 +2,6 @@
 
 {{
     onsPagination({
-        "previous": "Previous",
-        "next": "Next",
         "hideRangeIndicator": true,
         "currentPageNumber": 4,
         "pages": [

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

@@ -2,8 +2,6 @@
 
 {{
     onsPagination({
-        "previous": "Previous",
-        "next": "Next",
         "hideRangeIndicator": true,
         "currentPageNumber": 5,
         "pages": [

package/components/pagination/example-pagination.njk

@@ -2,8 +2,6 @@
 
 {{
     onsPagination({
-        "previous": "Previous",
-        "next": "Next",
         "currentPageNumber": 5,
         "pages": [
             {

package/components/panel/_macro.njk

@@ -81,7 +81,7 @@
                 </span>
             {% endif %}
 
-            <div class="ons-panel__body{% if params.iconSize %} ons-svg-icon-margin--{{ params.iconSize }}{% endif %}">{{ (params.body if params else "") | safe }}
+            <div class="ons-panel__body{% if params.iconSize %} ons-icon-margin--{{ params.iconSize }}{% endif %}">{{ (params.body if params else "") | safe }}
                 {{ caller() if caller }}
             </div>
         </div>

package/components/panel/_panel.scss

@@ -69,42 +69,42 @@
       margin-bottom: 0;
     }
 
-    &.ons-svg-icon-margin--xxxl {
+    &.ons-icon-margin--xxxl {
       padding-left: 2.7rem !important;
 
       @include mq(m) {
         padding-left: 3.5rem !important;
       }
     }
-    &.ons-svg-icon-margin--xxl {
+    &.ons-icon-margin--xxl {
       padding-left: 2.45rem !important;
 
       @include mq(m) {
         padding-left: 2.9rem !important;
       }
     }
-    &.ons-svg-icon-margin--xl {
+    &.ons-icon-margin--xl {
       padding-left: 2.35rem !important;
 
       @include mq(m) {
         padding-left: 2.55rem !important;
       }
     }
-    &.ons-svg-icon-margin--l {
+    &.ons-icon-margin--l {
       padding-left: 2.25rem !important;
 
       @include mq(m) {
         padding-left: 2.35rem !important;
       }
     }
-    &.ons-svg-icon-margin--m {
+    &.ons-icon-margin--m {
       padding-left: 2.05rem !important;
 
       @include mq(m) {
         padding-left: 2.2rem !important;
       }
     }
-    &.ons-svg-icon-margin--s {
+    &.ons-icon-margin--s {
       padding-left: 1.7rem !important;
     }
   }
@@ -216,7 +216,7 @@
     &__icon {
       left: 0;
       padding-left: 1rem;
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-success) !important;
         margin-top: -15% !important;
       }

package/components/password/_macro.njk

@@ -24,7 +24,7 @@
                 "inputClasses": "ons-js-password-toggle",
                 "name": "show-password",
                 "label": {
-                    "text": params.showPasswordText
+                    "text": params.showPasswordText | default("Show password")
                 }
             })
         }}

package/components/password/example-password.njk

@@ -5,7 +5,6 @@
         "id": "password",
         "label": {
             "text": "Password"
-        },
-        "showPasswordText": "Show password"
+        }
     })
 }}

package/components/question/example-question-interviewer-note.njk

@@ -25,7 +25,7 @@ layout: ~
 {% block main %}
     {% call onsQuestion({
         "title": "<mark class=\"ons-instruction\">Interviewer note:</mark>Who to interview",
-        "instruction": "<p>Only interview a person who was usually living at the property on <em>Sunday 21 March 2021</em>.</p><p>If none of those house members are available, you must save and sign out and return to the address to interview one of them at a later date.</p>",
+        "instruction": "<p>Only interview a person who was usually living at the property on <strong>Sunday 21 March 2021</strong>.</p><p>If none of those house members are available, you must save and sign out and return to the address to interview one of them at a later date.</p>",
         "submitButton": {
             "variants": "timer",
             "text": "Continue"

package/components/quote/_quote.scss

@@ -17,7 +17,7 @@
     position: relative;
   }
 
-  .ons-svg-icon {
+  .ons-icon {
     fill: var(--ons-color-grey-75) !important;
     height: 1.85rem;
     left: 0;

package/components/radios/_macro.njk

@@ -2,7 +2,7 @@
     {% from "components/fieldset/_macro.njk" import onsFieldset %}
     {% from "components/button/_macro.njk" import onsButton %}
     {% from "components/label/_macro.njk" import onsLabel %}
-
+    
     {% call onsFieldset({
         "id": params.id,
         "classes": params.classes,

package/components/radios/example-radios-with-clear-button-expanded.njk

@@ -0,0 +1,98 @@
+{% from "components/radios/_macro.njk" import onsRadios %}
+{% from "components/button/_macro.njk" import onsButton %}
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/panel/_macro.njk" import onsPanel %}
+
+{% call onsQuestion({
+    "title": "What is your religion?",
+    "legendIsQuestionTitle": true
+}) %}
+    {{
+        onsPanel({
+            "body": '<p>This question is <strong>voluntary</strong></p>',
+            "classes": 'ons-u-mb-m'
+        })
+    }}
+    <form onsubmit="return false;">
+        {{
+            onsRadios({
+                "dontWrap": true,
+                "name": "religion",
+                "clearRadios": {
+                    "text": "Clear selection",
+                    "name": "clear-radios",
+                    "ariaClearText": "You can clear your answer using the clear selection button after the radio inputs",
+                    "ariaClearedText": "You have cleared your answer"
+                },
+                "radios": [
+                    {
+                        "id": "none",
+                        "label": {
+                            "text": "No religion"
+                        },
+                        "value": "none"
+                    },
+                    {
+                        "id": "christian",
+                        "label": {
+                            "text": "Christian",
+                            "description": "Including Church of England, Catholic, Protestant and all other Christian denominations"
+                        },
+                        "value": "christian"
+                    },
+                    {
+                        "id": "buddhist",
+                        "label": {
+                            "text": "Buddhist"
+                        },
+                        "value": "buddhist"
+                    },
+                    {
+                        "id": "hindu",
+                        "label": {
+                            "text": "Hindu"
+                        },
+                        "value": "hindu"
+                    },
+                    {
+                        "id": "jewish",
+                        "label": {
+                            "text": "Jewish"
+                        },
+                        "value": "jewish"
+                    },
+                    {
+                        "id": "muslim",
+                        "label": {
+                            "text": "Muslim"
+                        },
+                        "value": "muslim"
+                    },
+                    {
+                        "id": "sikh",
+                        "label": {
+                            "text": "Sikh"
+                        },
+                        "value": "sikh"
+                    },
+                    {
+                        "id": "other-radio",
+                        "label": {
+                            "text": "Any other religion"
+                        },
+                        "value": "other",
+                        "checked": true,
+                        "other": {
+                            "otherType": "input",
+                            "id": "other-textbox",
+                            "name": "other-answer",
+                            "label": {
+                                "text": "Enter your religion"
+                            }
+                        }
+                    }
+                ]
+            })
+        }}
+    </form>
+{% endcall %}

package/components/radios/example-radios-with-revealed-checkboxes-expanded.njk

@@ -0,0 +1,70 @@
+{% from "components/radios/_macro.njk" import onsRadios %}
+
+{{
+    onsRadios({
+        "legend": "How would you like us to contact you?",
+        "name": "contact",
+        "borderless": true,
+        "radios": [
+            {
+                "id": "post",
+                "label": {
+                    "text": "By post"
+                },
+                "value": "post"
+            },
+            {
+                "id": "email",
+                "label": {
+                    "text": "By email"
+                },
+                "value": "email"
+            },
+            {
+                "id": "phone",
+                "label": {
+                    "text": "By phone"
+                },
+                "value": "phone",
+                "checked": true,
+                "other": {
+                    "otherType": "checkboxes",
+                    "selectAllChildren": true,
+                    "id": "phone-time",
+                    "name": "phone-time",
+                    "legend": "Select preferred times of day",
+                    "checkboxes": [
+                        {
+                            "value": "anytime",
+                            "id": "anytime",
+                            "label": {
+                                "text": "Anytime of day"
+                            }
+                        },
+                        {
+                            "value": "morning",
+                            "id": "morning",
+                            "label": {
+                                "text": "Morning"
+                            }
+                        },
+                        {
+                            "value": "afternoon",
+                            "id": "afternoon",
+                            "label": {
+                                "text": "Afternoon"
+                            }
+                        },
+                        {
+                            "value": "evening",
+                            "id": "evening",
+                            "label": {
+                                "text": "Evening"
+                            }
+                        }
+                    ]
+                }
+            }
+        ]
+    })
+}}

package/components/radios/example-radios-with-revealed-radios-expanded.njk

@@ -0,0 +1,69 @@
+{% from "components/radios/_macro.njk" import onsRadios %}
+
+{{
+    onsRadios({
+        "legend": "How would you like us to contact you?",
+        "name": "contact",
+        "borderless": true,
+        "radios": [
+            {
+                "id": "post",
+                "label": {
+                    "text": "By post"
+                },
+                "value": "post"
+            },
+            {
+                "id": "email",
+                "label": {
+                    "text": "By email"
+                },
+                "value": "email"
+            },
+            {
+                "id": "phone",
+                "label": {
+                    "text": "By phone"
+                },
+                "value": "phone",
+                "checked": true,
+                "other": {
+                    "otherType": "radios",
+                    "id": "phone-time",
+                    "name": "phone-time",
+                    "legend": "Choose preferred time of day",
+                    "radios": [
+                        {
+                            "value": "anytime",
+                            "id": "anytime",
+                            "label": {
+                                "text": "Anytime of day"
+                            }
+                        },
+                        {
+                            "value": "morning",
+                            "id": "morning",
+                            "label": {
+                                "text": "Morning"
+                            }
+                        },
+                        {
+                            "value": "afternoon",
+                            "id": "afternoon",
+                            "label": {
+                                "text": "Afternoon"
+                            }
+                        },
+                        {
+                            "value": "evening",
+                            "id": "evening",
+                            "label": {
+                                "text": "Evening"
+                            }
+                        }
+                    ]
+                }
+            }
+        ]
+    })
+}}

package/components/radios/example-radios-with-revealed-select-expanded.njk

@@ -0,0 +1,70 @@
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/radios/_macro.njk" import onsRadios %}
+
+{% call onsQuestion({
+    "title": "How would you like us to contact you?",
+    "legendIsQuestionTitle": true
+}) %}
+    {{
+        onsRadios({
+            "dontWrap": true,
+            "name": "contact",
+            "radios": [
+                {
+                    "id": "post",
+                    "label": {
+                        "text": "By post"
+                    },
+                    "value": "post"
+                },
+                {
+                    "id": "email",
+                    "label": {
+                        "text": "By email"
+                    },
+                    "value": "email"
+                },
+                {
+                    "id": "phone",
+                    "label": {
+                        "text": "By phone"
+                    },
+                    "value": "phone",
+                    "checked": true,
+                    "other": {
+                        "otherType": "select",
+                        "id": "phone-time",
+                        "name": "phone-time",
+                        "label": {
+                            "text": "Choose preferred time of day"
+                        },
+                        "options": [
+                            {
+                                "value": "",
+                                "text": "Select an option",
+                                "disabled": true,
+                                "selected": true
+                            },
+                            {
+                                "value": "anytime",
+                                "text": "Any time of day"
+                            },
+                            {
+                                "value": "morning",
+                                "text": "Morning"
+                            },
+                            {
+                                "value": "afternoon",
+                                "text": "Afternoon"
+                            },
+                            {
+                                "value": "evening",
+                                "text": "Evening"
+                            }
+                        ]
+                    }
+                }
+            ]
+        })
+    }}
+{% endcall %}