@ons/design-system 72.11.0 → 73.0.1

package/components/announcement-banner/example-banner-red-wide.njk

@@ -0,0 +1,13 @@
+{% from "components/announcement-banner/_macro.njk" import onsAnnouncementBanner %}
+
+{{
+    onsAnnouncementBanner({
+        "variants": ['red', 'wide'],
+        "title": 'National emergency',
+        "description": 'This is a level 1 incident',
+        "link": {
+            "text": 'More information',
+            "url": '#0'
+        }
+    })
+}}

package/components/announcement-banner/example-banner-red.njk

@@ -2,7 +2,7 @@
 
 {{
     onsAnnouncementBanner({
-        "variants": ['red', 'wide'],
+        "variants": 'red',
         "title": 'National emergency',
         "description": 'This is a level 1 incident',
         "link": {

package/components/button/_button.scss

@@ -18,14 +18,6 @@ $button-shadow-size: 3px;
     vertical-align: top;
     white-space: nowrap;
 
-    // Transparent border for IE11 High Contrast mode support due to 'border: 0' on buttons
-    &::after {
-        border: ems($button-shadow-size) solid transparent;
-        inset: 0 0 - (ems($button-shadow-size)) 0; // Makes sure button shadow is selectable
-        content: '';
-        position: absolute;
-    }
-
     &--search {
         .ons-icon {
             margin: 0.125rem 0.5rem 0.125rem 0;
@@ -88,7 +80,7 @@ $button-shadow-size: 3px;
         color: var(--ons-color-text-inverse);
         display: flex;
         align-items: center;
-        padding: 0.75rem 1rem;
+        padding: 0.875rem 1rem;
         // Required for Google Tag Manager
         pointer-events: none;
         position: relative;

package/components/hero/_hero.scss

@@ -399,25 +399,6 @@
         }
     }
 
-    &--dark,
-    &--navy-blue {
-        .ons-breadcrumbs__link {
-            color: var(--ons-color-text-inverse);
-
-            &:hover {
-                color: var(--ons-color-text-inverse);
-                text-decoration: underline solid var(--ons-color-text-inverse) 2px;
-            }
-            &:focus {
-                color: var(--ons-color-text);
-            }
-            &:focus:hover {
-                color: var(--ons-color-text);
-                text-decoration: none;
-            }
-        }
-    }
-
     &__badge-link {
         display: block;
         width: fit-content;
@@ -471,9 +452,6 @@
         padding-top: 2rem;
         position: relative;
         z-index: 5;
-        #{$root}--with-breadcrumbs & {
-            padding-top: 1rem;
-        }
     }
 
     &__title-container {

package/components/hero/_macro.njk

@@ -6,7 +6,7 @@
     {% set detailsColumns = params.detailsColumns | default ('8') %}
 
     <section
-        class="ons-hero ons-grid--gutterless{% if params.breadcrumbs %}{{ ' ' }}ons-hero--with-breadcrumbs{% endif %}{% if params.variants and params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-hero--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-hero--{{ params.variants }}{% endif %}"
+        class="ons-hero ons-grid--gutterless{% if params.variants and params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-hero--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-hero--{{ params.variants }}{% endif %}"
     >
         {% if params.variants == 'navy-blue' %}
             <div class="ons-hero__circles" aria-hidden="true">
@@ -23,18 +23,6 @@
         {% endif %}
         <div class="ons-hero__container ons-container{{ ' ons-container--wide' if params.wide }}">
             <div class="ons-hero__details ons-grid__col ons-col-{{ detailsColumns }}@m col-10@s@m">
-                {% if params.breadcrumbs %}
-                    {% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
-                    {{
-                        onsBreadcrumbs({
-                            "itemsList": params.breadcrumbs.itemsList,
-                            "ariaLabel": params.breadcrumbs.ariaLabel,
-                            "id": params.breadcrumbs.id,
-                            "classes": 'ons-u-pt-no' ~ (' ' + params.breadcrumbs.classes if params.breadcrumbs.classes else '')
-                        })
-                    }}
-                {% endif %}
-
                 <div class="ons-hero__content">
                     <div class="ons-hero__title-container">
                         <header>

package/components/hero/_macro.spec.js

@@ -252,35 +252,6 @@ describe('macro: hero', () => {
         });
     });
 
-    it('outputs the correct breadcrumbs', () => {
-        const $ = cheerio.load(
-            renderComponent('hero', {
-                ...EXAMPLE_HERO,
-                variants: 'grey',
-                breadcrumbs: {
-                    ariaLabel: 'Breadcrumbs',
-                    itemsList: [
-                        {
-                            url: '/breadcrumb-1',
-                            text: 'Breadcrumbs 1',
-                        },
-                        {
-                            url: '/breadcrumb-2',
-                            text: 'Breadcrumbs 2',
-                        },
-                    ],
-                },
-            }),
-        );
-
-        const breadcrumbs = $('.ons-breadcrumbs__link');
-        expect($(breadcrumbs).length).toBe(2);
-        expect($(breadcrumbs[0]).attr('href')).toBe('/breadcrumb-1');
-        expect($(breadcrumbs[0]).text().trim()).toBe('Breadcrumbs 1');
-        expect($(breadcrumbs[1]).attr('href')).toBe('/breadcrumb-2');
-        expect($(breadcrumbs[1]).text().trim()).toBe('Breadcrumbs 2');
-    });
-
     it('outputs the correct description list value', () => {
         const $ = cheerio.load(
             renderComponent('hero', {

package/components/hero/example-hero-grey.njk

@@ -22,23 +22,6 @@
         "title": 'Retail sales rise amid summer discounts and sporting events, according to a first estimate',
         "text": 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id mattis ligula, nec sollicitudin arcu. Donec non tristique tellus. Donec eget malesuada lorem.',
         "censusLogo": true,
-        "breadcrumbs": {
-            "ariaLabel": 'Breadcrumbs',
-            "itemsList": [
-                {
-                    "url": '/',
-                    "text": 'Home'
-                },
-                {
-                    "url": '/',
-                    "text": 'Business, industry and trade'
-                },
-                {
-                    "url": '/',
-                    "text": 'Retail industry'
-                }
-            ]
-        },
         "descriptionList": {
             "termCol": "5",
             "descriptionCol": "7",

package/components/hero/example-hero-pale-blue.njk

@@ -10,15 +10,6 @@
         "text": 'Sales by retailers in Great Britain directly to end consumers, including spending on goods (in store and online)
                 (Retail Sales Index) and spending on services (Index of Services). The industry as a whole is used as an indicator
                 of how the wider economy is performing and the strength of consumer spending.',
-        "breadcrumbs": {
-            "ariaLabel": 'Breadcrumbs',
-            "itemsList": [
-                {
-                    "url": '/',
-                    "text": 'Home'
-                }
-            ]
-        },
         "variants": 'pale-blue'
     })
 }}

package/components/message-list/_macro.njk

@@ -6,7 +6,7 @@
                     <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") }}">
+                <dl class="ons-message-item__metadata" aria-label="{{ params.ariaLabelMetaData | default('Message metadata') }}">
                     <dt class="ons-message-item__metadata-term ons-message-item__metadata-term--from ons-u-vh">{{ params.fromLabel }}:</dt>
                     <dd class="ons-message-item__metadata-value ons-message-item__metadata-value--from ons-u-fs-r--b">
                         {{ message.fromText }}
@@ -16,11 +16,7 @@
                         {{ message.dateText }}
                     </dd>
                     <dt class="ons-message-item__metadata-term ons-message-item__metadata-term--body ons-u-vh">
-                        {% if params.ariaLabelMsg and not params.bodyLabel %}
-                            {{ params.ariaLabelMsg | default("Message text") }}:
-                        {% else %}
-                            {{ params.bodyLabel | default("Message text") }}:
-                        {% endif %}
+                        {{ params.bodyLabel | default("Message text") }}:
                     </dt>
                     <dd class="ons-message-item__metadata-value ons-message-item__metadata-value--body ons-u-fs-r ons-u-mt-s">
                         {{ message.body | safe }}

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

@@ -42,28 +42,7 @@ const EXAMPLE_MESSAGE_LIST = {
     ariaLabelMetaData: 'Message information',
 };
 
-const EXAMPLE_MESSAGE_LIST_WITH_DEPRECATED_ARIALABELMSG_PARAM = {
-    unreadText: 'New',
-    fromLabel: 'From',
-    dateLabel: 'Date',
-    hiddenReadLabel: 'Read the message',
-    ariaLabelMsg: 'Aria Label Msg Preview',
-    messages: [
-        {
-            id: 'message1',
-            unread: true,
-            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.',
-        },
-    ],
-};
-
-const EXAMPLE_MESSAGE_LIST_WIHTOUT_BODYLABEL_PARAM = {
+const EXAMPLE_MESSAGE_LIST_WITHOUT_BODYLABEL_PARAM = {
     unreadText: 'New',
     fromLabel: 'From',
     dateLabel: 'Date',
@@ -139,31 +118,14 @@ describe('macro: message-list', () => {
         expect($('.ons-message-item__link:first').text()).toContain('Read the message: ');
     });
 
-    it('has visually hidden label `bodyLabel` when only `bodyLabel` is provided`', () => {
+    it('has visually hidden label `bodyLabel` when `bodyLabel` is provided`', () => {
         const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_MINIMAL));
 
         expect($('.ons-message-item__metadata-term--body:first').text().trim()).toBe('Body:');
     });
 
-    it('has visually hidden label `bodyLabel` when both `bodyLabel` and `ariaLabelMsg` are provided`', () => {
-        const $ = cheerio.load(
-            renderComponent('message-list', {
-                ...EXAMPLE_MESSAGE_LIST_MINIMAL,
-                ariaLabelMsg: 'Aria Label Msg Preview',
-            }),
-        );
-
-        expect($('.ons-message-item__metadata-term--body:first').text().trim()).toBe('Body:');
-    });
-
-    it('has visually hidden deprecated label `ariaLabelMsg` when only `ariaLabelMsg` is provided', () => {
-        const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_WITH_DEPRECATED_ARIALABELMSG_PARAM));
-
-        expect($('.ons-message-item__metadata-term--body:first').text().trim()).toBe('Aria Label Msg Preview:');
-    });
-
-    it('has the defualt text for visually hidden label `bodyLabel` when both `bodyLabel` and `ariaLabelMsg` are not provided', () => {
-        const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_WIHTOUT_BODYLABEL_PARAM));
+    it('has the default text for visually hidden label `bodyLabel` when `bodyLabel` is not provided', () => {
+        const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_WITHOUT_BODYLABEL_PARAM));
 
         expect($('.ons-message-item__metadata-term--body:first').text().trim()).toBe('Message text:');
     });

package/components/table-of-contents/example-table-of-contents-sticky-full-page.njk

@@ -36,7 +36,7 @@ layout: ~
 
 {% block main %}
     <div class="ons-page__container ons-container">
-        <div class="ons-grid ons-js-toc-container">
+        <div class="ons-grid ons-js-table-of-contents-container">
             <div class="ons-grid__col ons-grid__col--sticky@m ons-col-4@m">
                 {{
                     onsTableOfContents({

package/components/table-of-contents/example-table-of-contents-sticky.njk

@@ -1,6 +1,6 @@
 {% from "components/table-of-contents/_macro.njk" import onsTableOfContents %}
 <div class="ons-page__container ons-container">
-    <div class="ons-grid ons-js-toc-container">
+    <div class="ons-grid ons-js-table-of-contents-container">
         <div class="ons-grid__col ons-grid__col--sticky@m ons-col-4@m">
             {{-
                 onsTableOfContents({

package/components/table-of-contents/table-of-contents.dom.js

@@ -1,7 +1,7 @@
 import domready from '../../js/domready';
 
 async function tableOfContents() {
-    const tableOfContents = [...document.querySelectorAll('.ons-js-toc-container')];
+    const tableOfContents = [...document.querySelectorAll('.ons-js-table-of-contents-container')];
 
     if (tableOfContents.length) {
         const TableOfContents = (await import('./table-of-contents')).default;

package/components/table-of-contents/table-of-contents.spec.js

@@ -9,7 +9,7 @@ describe('script: table-of-contents', () => {
             /* eslint-disable indent */
             `
       <div class="ons-page__container ons-container">
-        <div class="ons-grid ons-js-toc-container">
+        <div class="ons-grid ons-js-table-of-contents-container">
           <div class="ons-grid__col ons-grid__col--sticky@m ons-col-4@m">
             ${renderComponent('table-of-contents', {
                 title: 'Contents',
@@ -71,7 +71,7 @@ describe('script: table-of-contents-fixed-position', () => {
             /* eslint-disable indent */
             `
         <div class="ons-page__container ons-container">
-          <div class="ons-grid ons-js-toc-container">
+          <div class="ons-grid ons-js-table-of-contents-container">
             <div id="sticky-container" class="ons-grid__col ons-grid__col--sticky@m ons-col-4@m">
               ${renderComponent('table-of-contents', {
                   title: 'Contents',