@ons/design-system 70.0.17 → 72.0.1

package/components/question/_macro.njk

@@ -16,14 +16,14 @@
                 {{- params.description | safe -}}
             </div>
         {% elif params.legendIsQuestionTitle is not defined %}
-            <div class="ons-question__description ons-u-mb-m">{{- params.description | safe -}}</div>
+            <div class="ons-question__description ons-u-mb-l">{{- params.description | safe -}}</div>
         {% else %}
             {{- params.description | safe -}}
         {%- endif -%}
     {%- endset -%}
 
     {% set instHtml %}
-        <div class="ons-question__instruction ons-u-mb-m">{{ params.instruction | safe }}</div>
+        <div class="ons-question__instruction ons-u-mb-l">{{ params.instruction | safe }}</div>
     {% endset %}
 
     {% if params.definition %}
@@ -32,7 +32,7 @@
             {%
                 call onsDetails({
                     "id": params.definition.id,
-                    "classes": 'ons-u-mb-m',
+                    "classes": 'ons-u-mb-l',
                     "title": params.definition.title,
                     "headingAttributes": params.definition.headingAttributes,
                     "contentAttributes": params.definition.contentAttributes
@@ -51,7 +51,7 @@
             {%
                 call onsPanel({
                     "id": params.guidance.id,
-                    "classes": "ons-question-guidance ons-u-mb-m",
+                    "classes": "ons-question-guidance ons-u-mb-l",
                     "attributes": params.guidance.attributes
                 })
             %}
@@ -80,7 +80,7 @@
 
     <div
         {% if params.id %}id="{{ params.id }}"{% endif %}
-        class="ons-question ons-u-mb-l{{ ' ' + params.classes if params.classes else '' }}"
+        class="ons-question ons-u-mb-xl{{ ' ' + params.classes if params.classes else '' }}"
         {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
     >
         {% set additionalContent %}
@@ -114,7 +114,7 @@
 
             {# Resolves caller issue in Jinja: https://github.com/pallets/jinja/issues/371 #}
             {% set content = caller() if caller %}
-            <div class="ons-question__answer ons-u-mb-m">
+            <div class="ons-question__answer ons-u-mb-l">
                 {%
                     call onsFieldset({
                         "legendIsQuestionTitle": params.legendIsQuestionTitle,
@@ -137,7 +137,7 @@
 
             {{- additionalContent | safe -}}
 
-            <div class="ons-question__answer ons-u-mb-m">{{ caller() if caller }}</div>
+            <div class="ons-question__answer ons-u-mb-l">{{ caller() if caller }}</div>
         {% endif %}
 
         {% if params.justification %}
@@ -145,7 +145,7 @@
             {%
                 call onsDetails({
                     "id": params.justification.id,
-                    "classes": 'ons-u-mb-m',
+                    "classes": 'ons-u-mb-l',
                     "title": params.justification.title | default('Why we ask this question'),
                     "headingAttributes": params.justification.headingAttributes,
                     "contentAttributes": params.justification.contentAttributes

package/components/question/_macro.spec.js

@@ -187,7 +187,7 @@ describe('macro: question', () => {
 
             faker.renderComponent('question', EXAMPLE_QUESTION_DEFINITION);
 
-            expect(detailsSpy.occurrences[0]).toHaveProperty('classes', 'ons-u-mb-m');
+            expect(detailsSpy.occurrences[0]).toHaveProperty('classes', 'ons-u-mb-l');
             expect(detailsSpy.occurrences[0]).toHaveProperty('id', 'definition-id');
             expect(detailsSpy.occurrences[0]).toHaveProperty('title', 'Definition title');
         });
@@ -206,7 +206,7 @@ describe('macro: question', () => {
 
             faker.renderComponent('question', EXAMPLE_QUESTION_GUIDANCE);
 
-            expect(panelSpy.occurrences[0]).toHaveProperty('classes', 'ons-question-guidance ons-u-mb-m');
+            expect(panelSpy.occurrences[0]).toHaveProperty('classes', 'ons-question-guidance ons-u-mb-l');
         });
 
         it('outputs the expected panel call content', () => {
@@ -251,7 +251,7 @@ describe('macro: question', () => {
 
             faker.renderComponent('question', EXAMPLE_QUESTION_JUSTIFICATION);
 
-            expect(detailsSpy.occurrences[0]).toHaveProperty('classes', 'ons-u-mb-m');
+            expect(detailsSpy.occurrences[0]).toHaveProperty('classes', 'ons-u-mb-l');
             expect(detailsSpy.occurrences[0]).toHaveProperty('id', 'justification-id');
             expect(detailsSpy.occurrences[0]).toHaveProperty('title', 'Justification title');
         });

package/components/question/_question.scss

@@ -2,7 +2,7 @@
     margin: 1rem 0 0;
 
     &__title {
-        @extend .ons-u-mb-m;
+        @extend .ons-u-mb-l;
 
         mark,
         .ons-instruction {
@@ -16,13 +16,13 @@
 
     &__description {
         p:last-of-type {
-            margin-bottom: 0 !important;
+            @extend .ons-u-mb-no;
         }
     }
 
     &__instruction {
         background-color: var(--ons-color-instruction-tint);
-        border: 5px solid var(--ons-color-instruction);
+        border: 4px solid var(--ons-color-instruction);
         display: block;
         font-weight: $font-weight-regular;
         padding: 1rem;

package/components/radios/_macro.njk

@@ -117,7 +117,7 @@
                                             "name": radio.other.name,
                                             "borderless": true,
                                             "legend": radio.other.legend,
-                                            "legendClasses": radio.other.legendClasses | default('') + ' ons-u-mb-xs',
+                                            "legendClasses": radio.other.legendClasses | default('') + ' ons-u-mb-2xs',
                                             "attributes": radio.other.attributes,
                                             "classes": "ons-js-other-fieldset-radio",
                                             "radios": radio.other.radios

package/components/radios/_macro.spec.js

@@ -541,7 +541,7 @@ describe('macro: radios', () => {
                 name: 'example-radios-name',
                 borderless: true,
                 legend: 'Select preferred times of day',
-                legendClasses: 'extra-legend-class ons-u-mb-xs',
+                legendClasses: 'extra-legend-class ons-u-mb-2xs',
                 attributes: { a: 42 },
                 classes: 'ons-js-other-fieldset-radio',
                 radios: EXAMPLE_RADIO_ITEM_RADIOS.other.radios,

package/components/radios/_radios.scss

@@ -9,7 +9,7 @@
         &--no-border {
             @extend .ons-checkboxes__item--no-border;
 
-            margin-bottom: 0.8rem;
+            margin-bottom: 0.75rem;
             &:last-child {
                 margin-bottom: 0;
             }

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

@@ -12,7 +12,7 @@
     {{
         onsPanel({
             "body": '<p>This question is <strong>voluntary</strong></p>',
-            "classes": 'ons-u-mb-m'
+            "classes": 'ons-u-mb-l'
         })
     }}
     <form onsubmit="return false;">

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

@@ -12,7 +12,7 @@
     {{
         onsPanel({
             "body": '<p>This question is <strong>voluntary</strong></p>',
-            "classes": 'ons-u-mb-m'
+            "classes": 'ons-u-mb-l'
         })
     }}
     <form onsubmit="return false;">

package/components/related-content/_macro.spec.js

@@ -27,7 +27,7 @@ const EXAMPLE_RELATED_CONTENT_LINKS = {
             id: 'related-links',
             title: 'Related links',
             iconPosition: 'after',
-            iconSize: 'xxl',
+            iconSize: '2xl',
             itemsList: [
                 { text: 'A', url: '/article/a' },
                 { text: 'B', url: '/article/b' },
@@ -121,7 +121,7 @@ describe('macro: related-content', () => {
             ]);
 
             expect(listsSpy.occurrences[1]).toHaveProperty('iconPosition', 'after');
-            expect(listsSpy.occurrences[1]).toHaveProperty('iconSize', 'xxl');
+            expect(listsSpy.occurrences[1]).toHaveProperty('iconSize', '2xl');
             expect(listsSpy.occurrences[1]).toHaveProperty('itemsList', [
                 { text: 'A', url: '/article/a' },
                 { text: 'B', url: '/article/b' },

package/components/related-content/_related-content.scss

@@ -1,5 +1,5 @@
 .ons-related-content {
-    @extend .ons-u-mt-m;
+    @extend .ons-u-mt-l;
 
     border-top: 5px solid var(--ons-color-branded);
     padding-top: 1rem;

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

@@ -8,7 +8,7 @@
     })
 %}
     {% call onsRelatedContentSection() %}
-        <p class="ons-u-mb-xs">Telephone: 0800 587 2021</p>
+        <p class="ons-u-mb-2xs">Telephone: 0800 587 2021</p>
 
         {{
             onsList({
@@ -26,7 +26,7 @@
         }}
     {% endcall %}
     {% call onsRelatedContentSection() %}
-        <p class="ons-u-mb-xs">Live chat</p>
+        <p class="ons-u-mb-2xs">Live chat</p>
 
         {{
             onsList({

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

@@ -8,7 +8,7 @@
                 "id": 'follow-us',
                 "title": 'Follow us',
                 "iconPosition": 'before',
-                "iconSize": 'xxl',
+                "iconSize": '2xl',
                 "itemsList": [
                     {
                         "url": '#0',

package/components/reply/_macro.njk

@@ -14,7 +14,9 @@
                 "rows": params.textarea.rows
             })
         }}
-        <div class="ons-grid ons-grid--flex ons-grid--gutterless ons-grid--vertical-center ons-grid--no-wrap@s ons-u-mt-m ons-u-mb-m">
+        <div
+            class="ons-grid ons-grid-flex ons-grid--gutterless ons-grid-flex--vertical-center ons-grid-flex--no-wrap@s ons-u-mt-l ons-u-mb-l"
+        >
             <div class="ons-grid__col ons-u-mr-m ons-u-mb-s">
                 {{
                     onsButton({

package/components/reply/_macro.spec.js

@@ -24,7 +24,7 @@ const EXAMPLE_BUTTON = {
     id: 'reply-button',
     type: 'button',
     text: 'Send message',
-    classes: 'u-mb-xs',
+    classes: 'u-mb-2xs',
 };
 
 const EXAMPLE_REPLY = {

package/components/reply/reply.spec.js

@@ -12,7 +12,7 @@ const EXAMPLE_REPLY = {
         id: 'reply-button',
         type: 'button',
         text: 'Send message',
-        classes: 'u-mb-xs',
+        classes: 'u-mb-2xs',
     },
     closeLinkText: 'Close conversation',
     closeLinkUrl: '/close-conversation',

package/components/section-navigation/_macro.njk

@@ -22,7 +22,7 @@
                     {% endif %}
                     <ul class="ons-section-nav__list">
                         {% for item in section.itemsList %}
-                            {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title | lower) %}
+                            {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.text | lower) %}
                                 {% set isCurrent = true %}
                             {% else %}
                                 {% set isCurrent = false %}
@@ -33,16 +33,16 @@
                                 {% if isCurrent == true %}
                                     {{ openingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }}
                                     class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}"
-                                    aria-current="location">{{ item.title }}{{ closingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }}
+                                    aria-current="location">{{ item.text }}{{ closingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }}
                                 {% else %}
-                                    <a class="ons-section-nav__link" href="{{ item.url }}">{{ item.title }}</a>
+                                    <a class="ons-section-nav__link" href="{{ item.url }}">{{ item.text }}</a>
                                 {% endif %}
                                 {% if item.anchors and isCurrent == true %}
-                                    <ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
+                                    <ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-2xs ons-u-mb-2xs">
                                         {% for anchor in item.anchors %}
                                             <li class="ons-section-nav__item ons-list__item">
                                                 <a href="{{ anchor.url }}" class="ons-section-nav__link ons-list__link"
-                                                    >{{ anchor.title }}</a
+                                                    >{{ anchor.text }}</a
                                                 >
                                             </li>
                                         {% endfor %}
@@ -62,7 +62,7 @@
             <ul class="ons-section-nav__list">
                 {% for item in params.itemsList %}
                     {% set sectionItemHeadingLevel = headingLevel + 2 if params.title else headingLevel + 1 %}
-                    {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title | lower) %}
+                    {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.text | lower) %}
                         {% set isCurrent = true %}
                     {% else %}
                         {% set isCurrent = false %}
@@ -73,15 +73,15 @@
                         {% if isCurrent == true %}
                             {{ openingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }}
                             class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}"
-                            aria-current="location">{{ item.title }}{{ closingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }}
+                            aria-current="location">{{ item.text }}{{ closingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }}
                         {% else %}
-                            <a class="ons-section-nav__link" href="{{ item.url }}">{{ item.title }}</a>
+                            <a class="ons-section-nav__link" href="{{ item.url }}">{{ item.text }}</a>
                         {% endif %}
                         {% if item.anchors %}
-                            <ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
+                            <ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-2xs ons-u-mb-2xs">
                                 {% for anchor in item.anchors %}
                                     <li class="ons-section-nav__item ons-list__item">
-                                        <a href="{{ anchor.url }}" class="ons-section-nav__link ons-list__link">{{ anchor.title }}</a>
+                                        <a href="{{ anchor.url }}" class="ons-section-nav__link ons-list__link">{{ anchor.text }}</a>
                                     </li>
                                 {% endfor %}
                             </ul>

package/components/section-navigation/_macro.spec.js

@@ -11,11 +11,11 @@ const EXAMPLE_SECTION_NAVIGATION = {
     currentPath: '/results',
     itemsList: [
         {
-            title: 'Results',
+            text: 'Results',
             url: '/results',
         },
         {
-            title: 'Dashboard',
+            text: 'Dashboard',
             url: '/results/dashboard',
         },
     ],
@@ -26,29 +26,29 @@ const EXAMPLE_SECTION_NAVIGATION_VERTICAL = {
     currentPath: '#section-2',
     itemsList: [
         {
-            title: 'Section 1',
+            text: 'Section 1',
             url: '#section-1',
         },
         {
-            title: 'Section 2',
+            text: 'Section 2',
             url: '#section-2',
             anchors: [
                 {
-                    title: 'Sub section 1',
+                    text: 'Sub section 1',
                     url: '#sub-section-1',
                 },
                 {
-                    title: 'Sub section 2',
+                    text: 'Sub section 2',
                     url: '#sub-section-2',
                 },
                 {
-                    title: 'Sub section 3',
+                    text: 'Sub section 3',
                     url: '#sub-section-3',
                 },
             ],
         },
         {
-            title: 'Section 3',
+            text: 'Section 3',
             url: '#0',
         },
     ],
@@ -62,29 +62,29 @@ const EXAMPLE_SECTION_NAVIGATION_VERTICAL_WITH_SECTIONS = {
             title: 'Section Title',
             itemsList: [
                 {
-                    title: 'Section 1',
+                    text: 'Section 1',
                     url: '#section-1',
                 },
                 {
-                    title: 'Section 2',
+                    text: 'Section 2',
                     url: '#section-2',
                     anchors: [
                         {
-                            title: 'Sub section 1',
+                            text: 'Sub section 1',
                             url: '#sub-section-1',
                         },
                         {
-                            title: 'Sub section 2',
+                            text: 'Sub section 2',
                             url: '#sub-section-2',
                         },
                         {
-                            title: 'Sub section 3',
+                            text: 'Sub section 3',
                             url: '#sub-section-3',
                         },
                     ],
                 },
                 {
-                    title: 'Section 3',
+                    text: 'Section 3',
                     url: '#0',
                 },
             ],
@@ -159,7 +159,7 @@ describe('macro: section-navigation', () => {
                     itemsList: [
                         {
                             classes: 'extra-class another-extra-class',
-                            title: 'Section 1',
+                            text: 'Section 1',
                             url: '#section-1',
                         },
                     ],

package/components/section-navigation/_section-navigation.scss

@@ -23,13 +23,11 @@
     }
 
     &__item {
-        font-size: 1rem;
         padding: 0;
         &--active {
             border-left: 4px solid var(--ons-color-text-link-active);
-            font-weight: $font-weight-bold;
-            margin-left: -18px;
-            padding-left: 14px;
+            margin-left: -1rem;
+            padding-left: 0.75rem;
             a,
             h2,
             h3,
@@ -40,16 +38,13 @@
             }
         }
         & & {
-            margin-bottom: 0.3rem;
+            margin-bottom: 0.25rem;
         }
     }
 
     &__item-header {
         @extend .ons-u-mb-no;
-
-        font-size: 1rem;
-        font-weight: 700;
-        line-height: 1.6;
+        @extend .ons-u-fs-r--b;
     }
 
     &__sub-items {
@@ -69,7 +64,6 @@
             &--active,
             &:hover {
                 border-color: var(--ons-color-text-link-active);
-                margin: 0 1rem 0 0;
                 padding: 0;
                 a,
                 h2,

package/components/section-navigation/example-section-navigation-single-vertical-with-title.njk

@@ -7,15 +7,15 @@
         "title": "Sections title",
         "itemsList": [
             {
-                "title": "Section 1",
+                "text": "Section 1",
                 "url": "#section-1"
             },
             {
-                "title": "Section 2",
+                "text": "Section 2",
                 "url": "#0"
             },
             {
-                "title": "Section 3",
+                "text": "Section 3",
                 "url": "#0"
             }
         ]

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

@@ -9,33 +9,33 @@
                 "title": "Section Title",
                 "itemsList": [
                     {
-                        "title": "Section 1",
+                        "text": "Section 1",
                         "url": "#section-1",
                         "anchors": [
                             {
-                                "title": "Sub section 1",
+                                "text": "Sub section 1",
                                 "url": "#sub-section-1"
                             },
                             {
-                                "title": "Sub section 2",
+                                "text": "Sub section 2",
                                 "url": "#sub-section-2"
                             },
                             {
-                                "title": "Sub section 3",
+                                "text": "Sub section 3",
                                 "url": "#sub-section-3"
                             }
                         ]
                     },
                     {
-                        "title": "Section 2",
+                        "text": "Section 2",
                         "url": "#section-2"
                     },
                     {
-                        "title": "Section 3",
+                        "text": "Section 3",
                         "url": "#section-3"
                     },
                     {
-                        "title": "Section 4",
+                        "text": "Section 4",
                         "url": "#section-4"
                     }
                 ]
@@ -44,33 +44,33 @@
                 "title": "Section Title",
                 "itemsList": [
                     {
-                        "title": "Section 5",
+                        "text": "Section 5",
                         "url": "#section-5"
                     },
                     {
-                        "title": "Section 6",
+                        "text": "Section 6",
                         "url": "#section-6",
                         "anchors": [
                             {
-                                "title": "Sub section 1",
+                                "text": "Sub section 1",
                                 "url": "#sub-section-1"
                             },
                             {
-                                "title": "Sub section 2",
+                                "text": "Sub section 2",
                                 "url": "#sub-section-2"
                             },
                             {
-                                "title": "Sub section 3",
+                                "text": "Sub section 3",
                                 "url": "#sub-section-3"
                             }
                         ]
                     },
                     {
-                        "title": "Section 7",
+                        "text": "Section 7",
                         "url": "#0"
                     },
                     {
-                        "title": "Section 8",
+                        "text": "Section 8",
                         "url": "#0"
                     }
                 ]

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

@@ -5,15 +5,15 @@
         "currentPath": "#section-1",
         "itemsList": [
             {
-                "title": "Section 1",
+                "text": "Section 1",
                 "url": "#section-1"
             },
             {
-                "title": "Section 2",
+                "text": "Section 2",
                 "url": "#0"
             },
             {
-                "title": "Section 3",
+                "text": "Section 3",
                 "url": "#0"
             }
         ]

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

@@ -3,7 +3,7 @@
     onsSelect({
         "id": "select-example-with-inline-label",
         "name": "select",
-        "classes": "ons-u-wa--@xxs",
+        "classes": "ons-u-wa--@2xs",
         "label": {
             "text": "Sort by",
             "inline": true

package/components/share-page/_macro.njk

@@ -2,18 +2,18 @@
     {% from "components/list/_macro.njk" import onsList %}
 
     {% if params.title %}
-        {% set titleTag = params.titleTag | default("h2") %}
-        {% set openingTag = "<" + titleTag %}
-        {% set closingTag = "</" + titleTag + ">" %}
+        {% set titleTag = params.headingLevel | default(2) %}
+        {% set openingTag = "<h" ~ titleTag %}
+        {% set closingTag = "</h" ~ titleTag ~ ">" %}
         {{ openingTag | safe }}
-        class="ons-u-fs-r--b ons-u-mb-xs">{{ params.title }}{{ closingTag | safe }}
+        class="ons-u-fs-r--b ons-u-mb-2xs">{{ params.title }}{{ closingTag | safe }}
     {% endif %}
 
     {% if params.facebook and params.facebook == true %}
         {%
             set facebook =
             {
-                "url": 'https://www.facebook.com/sharer/sharer.php?u=' ~ params.pageURL|urlencode,
+                "url": 'https://www.facebook.com/sharer/sharer.php?u=' ~ params.pageUrl|urlencode,
                 "text": 'Facebook',
                 "iconType": 'facebook',
                 "rel": 'noreferrer external',
@@ -25,7 +25,7 @@
         {%
             set twitter =
             {
-                "url": 'https://twitter.com/intent/tweet?original_referer&text=' ~ params.pageTitle|urlencode ~ '&url=' ~ params.pageURL|urlencode,
+                "url": 'https://twitter.com/intent/tweet?original_referer&text=' ~ params.pageTitle|urlencode ~ '&url=' ~ params.pageUrl|urlencode,
                 "text": 'Twitter',
                 "iconType": 'twitter',
                 "rel": 'noreferrer external',
@@ -37,7 +37,7 @@
         onsList({
             "variants": 'inline',
             "iconPosition": 'before',
-            "iconSize": params.iconSize | default("xxl"),
+            "iconSize": params.iconSize | default("2xl"),
             "itemsList": [facebook, twitter]
         })
     }}