@ons/design-system 70.0.17 → 72.0.1

package/components/list/_macro.spec.js

@@ -178,7 +178,19 @@ describe('macro: list', () => {
             const $ = cheerio.load(
                 renderComponent('list', {
                     element: 'ol',
-                    itemsList: [{ text: 'Only item' }],
+                    attributes: {
+                        a: 123,
+                        b: 456,
+                    },
+                    itemsList: [
+                        {
+                            text: 'Only item',
+                            attributes: {
+                                c: 789,
+                                d: 123,
+                            },
+                        },
+                    ],
                 }),
             );
 
@@ -193,6 +205,16 @@ describe('macro: list', () => {
             it('does not output any <li> elements', () => {
                 expect($('.ons-list li').length).toBe(0);
             });
+
+            it('has additionally provided list `attributes`', () => {
+                expect($('.ons-list').attr('a')).toBe('123');
+                expect($('.ons-list').attr('b')).toBe('456');
+            });
+
+            it('has additionally provided list item `attributes`', () => {
+                expect($('.ons-list--p').attr('c')).toBe('789');
+                expect($('.ons-list--p').attr('d')).toBe('123');
+            });
         });
 
         it('has additionally provided `attributes`', () => {
@@ -247,6 +269,25 @@ describe('macro: list', () => {
 
                 expect($('a').length).toBe(0);
             });
+
+            it('has additionally provided `attributes`', () => {
+                const $ = cheerio.load(
+                    renderComponent('list', {
+                        itemsList: [
+                            {
+                                ...item,
+                                attributes: {
+                                    a: 123,
+                                    b: 456,
+                                },
+                            },
+                        ],
+                    }),
+                );
+
+                expect($('.ons-list__item').attr('a')).toBe('123');
+                expect($('.ons-list__item').attr('b')).toBe('456');
+            });
         });
 
         describe('content with an internal link', () => {
@@ -380,7 +421,7 @@ describe('macro: list', () => {
                 expect($('.ons-list__link .ons-u-vh').text()).toBe(' (opens in a new tab)');
             });
 
-            it('has additionally provided `attributes`', () => {
+            it('list item has additionally provided `attributes`', () => {
                 const $ = cheerio.load(
                     renderComponent('list', {
                         itemsList: [
@@ -396,8 +437,8 @@ describe('macro: list', () => {
                     }),
                 );
 
-                expect($('.ons-list__link').attr('a')).toBe('123');
-                expect($('.ons-list__link').attr('b')).toBe('456');
+                expect($('.ons-list__item').attr('a')).toBe('123');
+                expect($('.ons-list__item').attr('b')).toBe('456');
             });
 
             it('renders visually hidden prefix', () => {
@@ -451,7 +492,7 @@ describe('macro: list', () => {
 
                 expect(externalLinkSpy.occurrences[0]).toEqual({
                     url: 'https://example.com/external-link',
-                    linkText: expectedItemText,
+                    text: expectedItemText,
                 });
             });
 
@@ -603,12 +644,12 @@ describe('macro: list', () => {
                 itemsList: [{ text: 'First item' }, { text: 'Second item', iconType: 'print' }, { text: 'Third item' }],
                 iconPosition,
                 iconType: 'check',
-                iconSize: 'xxl',
+                iconSize: '2xl',
             });
 
-            expect(iconsSpy.occurrences[0]).toEqual({ iconType: 'check', iconSize: 'xxl' });
-            expect(iconsSpy.occurrences[1]).toEqual({ iconType: 'print', iconSize: 'xxl' });
-            expect(iconsSpy.occurrences[2]).toEqual({ iconType: 'check', iconSize: 'xxl' });
+            expect(iconsSpy.occurrences[0]).toEqual({ iconType: 'check', iconSize: '2xl' });
+            expect(iconsSpy.occurrences[1]).toEqual({ iconType: 'print', iconSize: '2xl' });
+            expect(iconsSpy.occurrences[2]).toEqual({ iconType: 'check', iconSize: '2xl' });
         });
 
         it('renders the icon before the item text', () => {

package/components/list/example-inline-list-with-social-icon-prefix.njk

@@ -3,7 +3,7 @@
     onsList({
         "variants": 'inline',
         "iconPosition": 'before',
-        "iconSize": 'xxl',
+        "iconSize": '2xl',
         "itemsList": [
             {
                 "url": '#0',

package/components/message/_macro.njk

@@ -21,15 +21,15 @@
                     </dd>
                 </div>
             </dl>
-            {% if params.unreadLink %}
+            {% if params.unreadLinkUrl %}
                 <a
                     class="ons-message__unread-link"
                     {% if params.unreadLinkId %}id="{{ params.unreadLinkId }}"{% endif %}
-                    href="{{ params.unreadLink }}"
+                    href="{{ params.unreadLinkUrl }}"
                     >{{ params.unreadLinkText }}</a
                 >
             {% endif %}
         </div>
-        <div class="ons-message__body" {% if params.messageID %}id="{{ params.messageID }}"{% endif %}>{{ caller() }}</div>
+        <div class="ons-message__body" {% if params.messageId %}id="{{ params.messageId }}"{% endif %}>{{ caller() }}</div>
     </div>
 {%- endmacro -%}

package/components/message/_macro.spec.js

@@ -15,13 +15,13 @@ const EXAMPLE_MESSAGE_MINIMAL = {
 
 const EXAMPLE_MESSAGE = {
     ...EXAMPLE_MESSAGE_MINIMAL,
-    unreadLink: 'https://example.com/message/1',
+    unreadLinkUrl: 'https://example.com/message/1',
     unreadLinkText: 'Unread message',
     id: 'message1',
     fromId: 'from1',
     sentId: 'sent1',
     unreadLinkId: 'unreadLink1',
-    messageID: 'messageBody1',
+    messageId: 'messageBody1',
 };
 
 describe('macro: message', () => {
@@ -92,7 +92,7 @@ describe('macro: message', () => {
         expect($('.ons-message__timestamp .ons-message__value').attr('id')).toBe('sent1');
     });
 
-    it('has the provided `unreadLink`', () => {
+    it('has the provided `unreadLinkUrl`', () => {
         const $ = cheerio.load(renderComponent('message', EXAMPLE_MESSAGE, ['Message content...']));
 
         expect($('.ons-message__unread-link').attr('href')).toBe('https://example.com/message/1');

package/components/message-list/_macro.njk

@@ -3,7 +3,7 @@
         {% for message in params.messages %}
             <li class="ons-message-item" aria-labelledby="{{ message.id }}">
                 <h3 class="ons-message-item__subject" id="{{ message.id }}">
-                    <a href="{{ message.url }}" class="ons-u-fs-r--b">{{ message.subject }}</a>
+                    <a href="{{ message.subject.url }}" class="ons-u-fs-r--b">{{ message.subject.text }}</a>
                     {% if message.unread %}<span class="ons-message-item__unread ons-u-fs-s">({{ params.unreadText }})</span>{% endif %}
                 </h3>
                 <dl class="ons-message-item__metadata" aria-label="{{ params.ariaLabelMetaData | default("Message metadata") }}">
@@ -20,7 +20,7 @@
                     {{ message.body | safe }}
                 </div>
                 <div class="ons-message-item__link ons-u-vh">
-                    <a href="{{ message.url }}">{{ params.hiddenReadLabel }}: {{ message.subject }}</a>
+                    <a href="{{ message.subject.url }}">{{ params.hiddenReadLabel }}: {{ message.subject.text }}</a>
                 </div>
             </li>
         {% endfor %}

package/components/message-list/_macro.spec.js

@@ -14,16 +14,20 @@ const EXAMPLE_MESSAGE_LIST_MINIMAL = {
         {
             id: 'message1',
             unread: true,
-            url: 'https://example.com/message/1',
-            subject: 'Example message subject',
+            subject: {
+                url: 'https://example.com/message/1',
+                text: 'Example message subject',
+            },
             fromText: 'Example Sender 1',
             dateText: 'Tue 4 Jul 2020 at 7:47',
             body: 'An example message.',
         },
         {
             id: 'message2',
-            url: 'https://example.com/message/2',
-            subject: 'Another example message subject',
+            subject: {
+                url: 'https://example.com/message/2',
+                text: 'Another example message subject',
+            },
             fromText: 'Example Sender 2',
             dateText: 'Mon 1 Oct 2019 at 9:52',
             body: 'Another example message.',

package/components/message-list/_message-list.scss

@@ -12,7 +12,7 @@
     }
 
     &__subject {
-        margin: 0 0 0.2rem;
+        margin: 0 0 0.25rem;
     }
 
     &__metadata {
@@ -20,7 +20,7 @@
 
         &-term,
         &-value {
-            margin: 0 0 0.3rem;
+            margin: 0 0 0.25rem;
         }
     }
 }

package/components/navigation/_macro.njk

@@ -3,12 +3,12 @@
     {% from "components/autosuggest/_macro.njk" import onsAutosuggest %}
     <div class="ons-navigation-wrapper{{ ' ons-navigation-wrapper--neutral' if params.variants == 'neutral' }}">
         <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 }}"
+            class="ons-container ons-container--gutterless@2xs@l{{ ' ons-container--full-width' if params.fullWidth or params.navigation.fullWidth }}{{ ' ons-container--wide' if params.wide or params.navigation.wide }}"
         >
             {% if params.siteSearchAutosuggest %}
                 <div class="ons-navigation-search ons-js-navigation-search">
                     {% set autosuggestClasses = "ons-input-search ons-input-search--icon" %}
-                    {% set autosuggestLabelClasses = "ons-u-pl-l" %}
+                    {% set autosuggestLabelClasses = "ons-u-pl-xl" %}
                     {% if params.variants == "neutral" %}
                         {% set autosuggestClasses = autosuggestClasses + ' ons-input-search--dark' %}
                     {% else %}
@@ -77,13 +77,13 @@
     {% if params.navigation.subNavigation %}
         {% if not params.navigation.subNavigation.removeHorizontalSubNav %}
             <nav
-                class="ons-navigation ons-navigation--sub ons-u-d-no@xxs@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes else '' }}"
+                class="ons-navigation ons-navigation--sub ons-u-d-no@2xs@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes else '' }}"
                 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.fullWidth or params.navigation.fullWidth }}{{ ' ons-container--wide' if params.wide or params.navigation.wide }}"
+                    class="ons-container ons-container--gutterless@2xs@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 %}
@@ -123,20 +123,20 @@
                 })
             }}
             <nav
-                class="ons-navigation ons-navigation--sub-mobile ons-u-d-no ons-js-secondary-nav ons-u-mt-xs"
+                class="ons-navigation ons-navigation--sub-mobile ons-u-d-no ons-js-secondary-nav ons-u-mt-2xs"
                 id="{{ params.navigation.subNavigation.id }}--mobile"
                 aria-hidden="true"
                 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.navigation.wide }}"
+                    class="ons-container ons-container--gutterless@2xs@l{{ ' ons-container--full-width' if params.navigation.fullWidth }}{{ ' ons-container--wide' if params.navigation.wide }}"
                 >
                     <ul class="ons-navigation__list ons-navigation__list--parent">
                         <li
-                            class="ons-navigation__item{{ ' ons-navigation__item--active' if (params.navigation.subNavigation.overviewURL == params.navigation.subNavigation.currentPath) }}"
+                            class="ons-navigation__item{{ ' ons-navigation__item--active' if (params.navigation.subNavigation.overviewUrl == params.navigation.subNavigation.currentPath) }}"
                         >
-                            <a class="ons-navigation__link" href="{{ params.navigation.subNavigation.overviewURL }}"
+                            <a class="ons-navigation__link" href="{{ params.navigation.subNavigation.overviewUrl }}"
                                 >{{ params.navigation.subNavigation.overviewText | default('Overview') }}</a
                             >
                         </li>
@@ -162,7 +162,7 @@
                                             <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"
+                                            class="ons-navigation__list ons-navigation__list--child ons-list--dashed ons-u-ml-s ons-u-mt-2xs"
                                         >
                                             {% for child in section.children %}
                                                 <li

package/components/navigation/_macro.spec.js

@@ -29,7 +29,7 @@ const PARAMS = {
     ],
     subNavigation: {
         id: 'sub-nav',
-        overviewURL: '#overview',
+        overviewUrl: '#overview',
         overviewText: 'Overview',
         ariaLabel: 'Section menu',
         itemsList: [
@@ -138,7 +138,7 @@ describe('macro: navigation', () => {
                     classes: 'ons-input-search ons-input-search--icon',
                     label: {
                         id: 'ons-site-search-label',
-                        classes: 'ons-u-pl-l ons-label--white',
+                        classes: 'ons-u-pl-xl ons-label--white',
                     },
                 },
             });

package/components/navigation/_navigation.scss

@@ -3,7 +3,6 @@
 
     &-wrapper {
         background: var(--ons-color-header);
-        margin-top: -0.03rem;
 
         &--neutral {
             background: var(--ons-color-header-neutral);
@@ -42,8 +41,7 @@
         }
 
         &-header {
-            font-size: 1rem;
-            margin: 0.75rem 0 0.6rem;
+            margin: 0.75rem 0 0.5rem;
             padding: 0 0 0 1rem;
         }
     }
@@ -51,7 +49,6 @@
     &__item {
         border-left: 4px solid transparent;
         display: block;
-        margin: 0 0 0.2rem;
         &--active,
         &:hover {
             border-color: var(--ons-color-white);
@@ -72,7 +69,7 @@
             border-left: 0;
             display: inline-block;
             margin: 0 0 0 1rem;
-            padding: 0 0 0.3rem;
+            padding: 0 0 0.25rem;
             position: relative;
             text-align: center;
 
@@ -123,7 +120,6 @@
 
         @include mq(l) {
             display: inline-block;
-            font-size: 1rem;
             margin: 0;
             padding: 0;
         }

package/components/navigation/navigation.dom.js

@@ -3,7 +3,7 @@ import domready from '../../js/domready';
 domready(async () => {
     const toggleNavigationBtn = document.querySelector('.ons-js-navigation-button');
     const navigationEl = document.querySelector('.ons-js-navigation');
-    const navigationHideClass = 'ons-u-d-no@xxs@l';
+    const navigationHideClass = 'ons-u-d-no@2xs@l';
     const toggleSubNavigationBtn = document.querySelector('.ons-js-sub-navigation-button');
     const subNavigationEl = document.querySelector('.ons-js-secondary-nav');
     const subNavigationHideClass = 'ons-u-d-no';

package/components/navigation/navigation.spec.js

@@ -49,7 +49,7 @@ const EXAMPLE_NAVIGATION_WITH_SUBNAVIGATION = {
         ],
         subNavigation: {
             id: 'sub-nav',
-            overviewURL: '#overview',
+            overviewUrl: '#overview',
             overviewText: 'Overview',
             ariaLabel: 'Section menu',
             currentPath: '#1',
@@ -108,7 +108,7 @@ const EXAMPLE_NAVIGATION_WITH_SUBNAVIGATION_REMOVED = {
         ],
         subNavigation: {
             id: 'sub-nav-hidden',
-            overviewURL: '#overview',
+            overviewUrl: '#overview',
             overviewText: 'Overview',
             ariaLabel: 'Section menu',
             currentPath: '#1',
@@ -212,7 +212,7 @@ describe('script: navigation', () => {
 
                 it('has the hide class removed from the navigation list', async () => {
                     const hasClass = await page.$eval(navEl, (node) =>
-                        node.classList.contains('ons-u-d-no@xxs@l' || 'ons-u-d-no' || 'ons-u-d-no@xs@l'),
+                        node.classList.contains('ons-u-d-no@2xs@l' || 'ons-u-d-no' || 'ons-u-d-no@xs@l'),
                     );
                     expect(hasClass).toBe(false);
                 });
@@ -284,7 +284,7 @@ describe('script: navigation', () => {
 
                 it('has the hide class removed from the navigation list', async () => {
                     const hasClass = await page.$eval(navEl, (node) =>
-                        node.classList.contains('ons-u-d-no@xxs@l' || 'ons-u-d-no' || 'ons-u-d-no@xs@l'),
+                        node.classList.contains('ons-u-d-no@2xs@l' || 'ons-u-d-no' || 'ons-u-d-no@xs@l'),
                     );
                     expect(hasClass).toBe(false);
                 });

package/components/pagination/_macro.njk

@@ -26,7 +26,7 @@
                         {{-
                             onsIcon({
                                 "iconType": 'arrow-previous',
-                                "classes": 'ons-u-mr-xs',
+                                "classes": 'ons-u-mr-2xs',
                                 "iconSize": 'm'
                             })
                         -}}
@@ -93,7 +93,7 @@
                         {{-
                             onsIcon({
                                 "iconType": 'arrow-next',
-                                "classes": 'ons-u-ml-xs',
+                                "classes": 'ons-u-ml-2xs',
                                 "iconSize": 'm'
                             })
                         -}}

package/components/pagination/_pagination.scss

@@ -3,7 +3,7 @@ $pagination-item-width: 2.5rem;
 
 .ons-pagination {
     &__position {
-        margin: 0 0 0.4rem;
+        margin: 0 0 0.5rem;
     }
 
     &__items {
@@ -27,12 +27,6 @@ $pagination-item-width: 2.5rem;
         }
     }
 
-    &__items > & {
-        &__item--current {
-            margin: 0 0 0 $pagination-item-padding;
-        }
-    }
-
     &__item,
     &__link {
         height: $pagination-item-width;

package/components/panel/_macro.njk

@@ -52,13 +52,14 @@
 
             {% if params.title %}
                 {% if params.variant == 'error' %}
-                    {% set defaultTitleTag = "h2" %}
+                    {% set defaultTitleTag = "h" ~ 2 %}
                 {% else %}
                     {% set defaultTitleTag = "div" %}
                 {% endif %}
-                {% set titleTag = params.titleTag | default(defaultTitleTag) %}
-                {% set openingTag = "<" + titleTag %}
-                {% set closingTag = "</" + titleTag + ">" %}
+                {% set headingLevel = "h" ~ params.headingLevel if params.headingLevel else undefined %}
+                {% set titleTag = headingLevel | default(defaultTitleTag) %}
+                {% set openingTag = "<" ~ titleTag %}
+                {% set closingTag = "</" ~ titleTag ~ ">" %}
                 <div class="ons-panel__header">
                     {{ openingTag | safe }} id="alert"{% if params.variant %}data-qa="{{ params.variant }}-header"{% endif %}
                     class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}{{ closingTag | safe }}

package/components/panel/_macro.spec.js

@@ -147,12 +147,12 @@ describe('macro: panel', () => {
             expect(titleTag).toBe('div');
         });
 
-        it('has the provided `titleTag`', () => {
+        it('has the provided `headingLevel`', () => {
             const $ = cheerio.load(
                 renderComponent('panel', {
                     ...EXAMPLE_PANEL_BASIC,
                     title: 'Panel title',
-                    titleTag: 'h3',
+                    headingLevel: 3,
                 }),
             );
 

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 %}