@ons/design-system 70.0.16 → 72.0.0

package/components/panel/_panel.scss

@@ -33,11 +33,11 @@
 
     // Removes inherited bottom margin to make whitespace inside panel equal
     > *:last-child {
-        margin-bottom: 0;
+        @extend .ons-u-mb-no;
     }
 
     .ons-field {
-        margin-bottom: 0;
+        @extend .ons-u-mb-no;
     }
 
     &:focus {
@@ -66,17 +66,17 @@
         // Removes inherited bottom margin to make whitespace inside panel equal
         > *:last-child,
         strong > *:last-child {
-            margin-bottom: 0;
+            @extend .ons-u-mb-no;
         }
 
-        &.ons-icon-margin--xxxl {
+        &.ons-icon-margin--3xl {
             padding-left: 2.7rem !important;
 
             @include mq(m) {
                 padding-left: 3.5rem !important;
             }
         }
-        &.ons-icon-margin--xxl {
+        &.ons-icon-margin--2xl {
             padding-left: 2.45rem !important;
 
             @include mq(m) {
@@ -121,7 +121,8 @@
 
         &--footer {
             background-color: var(--ons-color-grey-15) !important;
-            margin-bottom: 0;
+            @extend .ons-u-mb-no;
+
             padding: 1rem 0 !important;
         }
     }
@@ -130,7 +131,8 @@
     &--announcement {
         border: 0 !important;
         color: var(--ons-color-white);
-        margin-bottom: 0;
+        @extend .ons-u-mb-no;
+
         outline: none !important;
         padding: 1rem 0 !important;
         a {
@@ -198,6 +200,7 @@
         }
 
         &__icon {
+            top: 1.2rem;
             background-color: var(--ons-color-white);
             color: var(--ons-color-black);
             display: flex;
@@ -217,10 +220,10 @@
     &--success & {
         &__icon {
             left: 0;
+            top: 0.875rem;
             padding-left: 1rem;
             .ons-icon {
                 fill: var(--ons-color-success) !important;
-                margin-top: -15% !important;
             }
         }
     }
@@ -231,6 +234,7 @@
 
     &--bare & {
         &__icon {
+            top: -0.2rem;
             height: 1.3rem;
             width: 1.3rem;
         }

package/components/password/_macro.njk

@@ -35,7 +35,7 @@
                 "id": params.id,
                 "name": params.name,
                 "type": "password",
-                "classes": "ons-u-mt-xs ons-js-password-input" + (" ons-input--error" if params.error else ""),
+                "classes": "ons-u-mt-2xs ons-js-password-input" + (" ons-input--error" if params.error else ""),
                 "dontWrap": true
             })
         }}

package/components/password/_macro.spec.js

@@ -115,7 +115,7 @@ describe('macro: password', () => {
             id: 'example-password',
             name: 'example-password-name',
             type: 'password',
-            classes: 'ons-u-mt-xs ons-js-password-input',
+            classes: 'ons-u-mt-2xs ons-js-password-input',
             dontWrap: true,
         });
     });
@@ -130,7 +130,7 @@ describe('macro: password', () => {
             id: 'example-password',
             name: 'example-password-name',
             type: 'password',
-            classes: 'ons-u-mt-xs ons-js-password-input ons-input--error',
+            classes: 'ons-u-mt-2xs ons-js-password-input ons-input--error',
             dontWrap: true,
         });
     });

package/components/phase-banner/_macro.njk

@@ -1,7 +1,7 @@
 {% macro onsPhaseBanner(params) %}
     <div class="ons-phase-banner">
         <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
-            <div class="ons-grid ons-grid--flex ons-grid--gutterless ons-grid--vertical-top ons-grid--no-wrap">
+            <div class="ons-grid ons-grid-flex ons-grid--gutterless ons-grid-flex--vertical-center ons-grid-flex--no-wrap">
                 {% if not params.hideBadge %}
                     <div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-flex-no-shrink">
                         <strong class="ons-phase-banner__badge">{{ params.badge | default("Beta") }}</strong>

package/components/phase-banner/_phase-banner.scss

@@ -2,12 +2,11 @@
     background: var(--ons-color-white);
     border-bottom: 1px solid var(--ons-color-borders);
     padding: 0.5rem 0;
-
     &__badge {
         background: var(--ons-color-black);
         color: var(--ons-color-white);
-        font-size: 0.85rem;
-        line-height: 1em;
+        @extend .ons-u-fs-s--b;
+
         margin: 0 0.5rem 0 0;
         outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
         padding: 0.4rem;
@@ -15,6 +14,6 @@
     }
 
     &__desc {
-        margin-top: 0.3rem;
+        margin-top: 0.25rem;
     }
 }

package/components/phase-banner/example-phase-banner-alpha.njk

@@ -9,7 +9,7 @@
     {{
         onsExternalLink({
             "url": "#0",
-            "linkText": "give feedback"
+            "text": "give feedback"
         })
     }}
 {% endset %}

package/components/phase-banner/example-phase-banner-beta.njk

@@ -9,7 +9,7 @@
     {{
         onsExternalLink({
             "url": "#0",
-            "linkText": "give feedback"
+            "text": "give feedback"
         })
     }}
 {% endset %}

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,12 @@
     }
 
     &__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 +39,12 @@
             }
         }
         & & {
-            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;
     }
 
     &__sub-items {

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