@ons/design-system 72.1.0 → 72.1.2

package/components/hero/_hero.scss

@@ -10,6 +10,24 @@
         background-color: var(--ons-color-hero-bg-dark);
     }
 
+    &--navy-blue {
+        background-color: var(--ons-color-navy-blue);
+        &::before {
+            content: '';
+            background-color: var(--ons-color-navy-blue-light);
+            border-radius: 0 0 50% 50%;
+            inset: 0;
+            left: -40%;
+            position: absolute;
+            width: 150%;
+            @include mq(l) {
+                border-radius: 0 0 300% 150%;
+                left: 0;
+                width: 100%;
+            }
+        }
+    }
+
     &__container {
         align-items: center;
         display: flex;
@@ -25,8 +43,8 @@
         height: 100%;
     }
 
-    &__text {
-        padding-bottom: 1rem;
+    &__text:has(+ .ons-btn) {
+        margin-bottom: 2rem;
     }
 
     &__pre-title {
@@ -62,4 +80,223 @@
             }
         }
     }
+    &--navy-blue & {
+        &__details {
+            color: var(--ons-color-text-inverse);
+            padding: 2rem 0 6rem;
+            @include mq(l) {
+                padding: 4rem 0;
+            }
+        }
+
+        &__circle-1 {
+            @include mq(l) {
+                background-color: var(--ons-color-spring-green);
+                border-radius: 50%;
+                height: 59px;
+                position: absolute;
+                right: 289px;
+                top: -11px;
+                width: 59px;
+            }
+        }
+
+        &__circle-2 {
+            @include mq(l) {
+                background-color: var(--ons-color-white);
+                border-radius: 50%;
+                position: absolute;
+                height: 30px;
+                right: 193px;
+                top: 11px;
+                width: 30px;
+            }
+        }
+
+        &__circle-3 {
+            @include mq(l) {
+                height: 60px;
+                right: 112px;
+                top: 25px;
+                width: 60px;
+                background-color: var(--ons-color-white);
+                border-radius: 50%;
+                position: absolute;
+            }
+        }
+
+        &__circle-4 {
+            @include mq(l) {
+                background-color: var(--ons-color-white);
+                border-radius: 50%;
+                height: 60px;
+                position: absolute;
+                right: 208px;
+                top: 80px;
+                width: 60px;
+            }
+
+            &::before {
+                @include mq(l) {
+                    background-color: var(--ons-color-ocean-blue);
+                    border-radius: 50%;
+                    content: '';
+                    height: 100%;
+                    left: 0;
+                    opacity: 0.4;
+                    position: absolute;
+                    top: 0;
+                    width: 100%;
+                }
+            }
+        }
+
+        &__circle-5 {
+            @include mq(l) {
+                background-color: var(--ons-color-white);
+                border-radius: 50%;
+                height: 14px;
+                position: absolute;
+                right: 222px;
+                top: 187px;
+                width: 14px;
+            }
+
+            &::before {
+                @include mq(l) {
+                    background-color: var(--ons-color-sky-blue);
+                    border-radius: 50%;
+                    content: '';
+                    height: 100%;
+                    left: 0;
+                    opacity: 0.7;
+                    position: absolute;
+                    top: 0;
+                    width: 100%;
+                }
+            }
+        }
+
+        &__circle-6 {
+            @include mq(l) {
+                background-color: var(--ons-color-spring-green);
+                border-radius: 50%;
+                height: 15px;
+                position: absolute;
+                right: 135px;
+                top: 188px;
+                width: 15px;
+            }
+        }
+
+        &__circle-7 {
+            @include mq(l) {
+                background-color: var(--ons-color-white);
+                border-radius: 50%;
+                height: 60px;
+                position: absolute;
+                right: 24px;
+                bottom: 92px;
+                width: 60px;
+            }
+
+            &::before {
+                @include mq(l) {
+                    background-color: var(--ons-color-night-blue);
+                    border-radius: 50%;
+                    content: '';
+                    height: 100%;
+                    left: 0;
+                    opacity: 0.7;
+                    position: absolute;
+                    top: 0;
+                    width: 100%;
+                }
+            }
+        }
+
+        &__circle-8 {
+            @include mq(l) {
+                background-color: var(--ons-color-white);
+                border-radius: 50%;
+                bottom: 70px;
+                height: 15px;
+                position: absolute;
+                right: 275px;
+                width: 15px;
+            }
+        }
+
+        &__circle-9 {
+            background-color: var(--ons-color-spring-green);
+            border-radius: 50%;
+            bottom: 28px;
+            position: absolute;
+            right: 15px;
+            width: 40px;
+            height: 40px;
+            @include mq(l) {
+                bottom: 40px;
+                height: 30px;
+                position: absolute;
+                right: 215px;
+                width: 30px;
+            }
+        }
+
+        &__circle-10 {
+            @include mq(l) {
+                background-color: var(--ons-color-white);
+                border-radius: 50%;
+                bottom: 63px;
+                height: 15px;
+                position: absolute;
+                right: 120px;
+                width: 15px;
+            }
+
+            &::before {
+                @include mq(l) {
+                    background-color: var(--ons-color-aqua-teal);
+                    border-radius: 50%;
+                    content: '';
+                    height: 100%;
+                    left: 0;
+                    opacity: 0.4;
+                    position: absolute;
+                    top: 0;
+                    width: 100%;
+                }
+            }
+        }
+
+        &__circle-11 {
+            background-color: var(--ons-color-sky-blue);
+            border-radius: 50%;
+            height: 14px;
+            width: 14px;
+            position: absolute;
+            bottom: -7px;
+            right: 50px;
+            @include mq(l) {
+                bottom: 33px;
+                height: 30px;
+                position: absolute;
+                right: 75px;
+                width: 30px;
+            }
+        }
+
+        &__circle-12 {
+            @include mq(l) {
+                background-color: var(--ons-color-night-blue);
+                border-radius: 50%;
+                bottom: -35px;
+                height: 59px;
+                position: absolute;
+                right: 125px;
+                width: 59px;
+            }
+        }
+    }
 }

package/components/hero/_macro.njk

@@ -6,6 +6,13 @@
     <section
         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">
+                {% for i in range(1, 13) %}
+                    <div class="ons-hero__circle-{{ i }}"></div>
+                {% endfor %}
+            </div>
+        {% 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 ons-col-10@s@m">
                 <header>

package/components/hero/_macro.spec.js

@@ -87,4 +87,9 @@ describe('macro: hero', () => {
         const content = $('.ons-hero__additional-content').text().trim();
         expect(content).toEqual(expect.stringContaining('Example content...'));
     });
+
+    it('renders circles when variant is `navy blue`', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, variants: 'navy-blue' }));
+        expect($('.ons-hero--navy-blue .ons-hero__circles').length).toBe(1);
+    });
 });

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

@@ -0,0 +1,14 @@
+---
+'fullWidth': true
+---
+
+{% from "components/hero/_macro.njk" import onsHero %}
+{{
+    onsHero({
+        "title": 'Welcome to the ONS Beta',
+        "text": 'Thank you for participating in our beta test. This limited preview of the ONS website focuses on our
+                new design and navigation for the retail insutry section. Please be aware that greyed-out links indicate sections still under development.
+                The active links will take you through the journey to test the new design features.',
+        "variants": 'navy-blue'
+    })
+}}

package/components/section-navigation/_macro.njk

@@ -31,9 +31,12 @@
                                 class="ons-section-nav__item{{ ' ' + item.classes if item.classes else '' }}{{ ' ons-section-nav__item--active' if isCurrent == true }}"
                             >
                                 {% 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.text }}{{ closingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }}
+                                    <a
+                                        class="ons-section-nav__link ons-section-nav__item-header"
+                                        href="{{ item.url }}"
+                                        aria-current="location"
+                                        >{{ item.text }}</a
+                                    >
                                 {% else %}
                                     <a class="ons-section-nav__link" href="{{ item.url }}">{{ item.text }}</a>
                                 {% endif %}
@@ -71,9 +74,9 @@
                         class="ons-section-nav__item{{ ' ' + item.classes if item.classes else '' }}{% if isCurrent == true %}{{ ' ' }}ons-section-nav__item--active{% endif %}"
                     >
                         {% 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.text }}{{ closingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }}
+                            <a class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}" aria-current="location"
+                                >{{ item.text }}</a
+                            >
                         {% else %}
                             <a class="ons-section-nav__link" href="{{ item.url }}">{{ item.text }}</a>
                         {% endif %}

package/components/table-of-contents/_macro.njk

@@ -2,7 +2,7 @@
     {% from "components/list/_macro.njk" import onsList %}
     {% from "components/skip-to-content/_macro.njk" import onsSkipToContent %}
 
-    <aside class="ons-toc-container" role="complementary">
+    <aside class="ons-table-of-contents-container" role="complementary">
         {% if params.skipLink %}
             {{
                 onsSkipToContent({
@@ -12,8 +12,8 @@
             }}
         {% endif %}
 
-        <nav class="ons-toc" aria-label="{{ params.ariaLabel | default('Table of contents') }}">
-            <h2 class="ons-toc__title ons-u-fs-r--b ons-u-mb-s">{{ params.title }}</h2>
+        <nav class="ons-table-of-contents" aria-label="{{ params.ariaLabel | default('Table of contents') }}">
+            <h2 class="ons-table-of-contents__title ons-u-fs-r--b ons-u-mb-s">{{ params.title }}</h2>
             {% if params.lists %}
                 {% for list in params.lists %}
                     {% if list.listHeading %}

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

@@ -59,7 +59,7 @@ describe('macro: table-of-contents', () => {
     it('renders a default aria label', () => {
         const $ = cheerio.load(renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_SINGLE));
 
-        expect($('.ons-toc').attr('aria-label')).toBe('Table of contents');
+        expect($('.ons-table-of-contents').attr('aria-label')).toBe('Table of contents');
     });
 
     it('renders the provided `ariaLabel`', () => {
@@ -70,13 +70,13 @@ describe('macro: table-of-contents', () => {
             }),
         );
 
-        expect($('.ons-toc').attr('aria-label')).toBe('Contents');
+        expect($('.ons-table-of-contents').attr('aria-label')).toBe('Contents');
     });
 
     it('renders title as heading element', () => {
         const $ = cheerio.load(renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_SINGLE));
 
-        expect($('.ons-toc__title').text().trim()).toBe('Contents');
+        expect($('.ons-table-of-contents__title').text().trim()).toBe('Contents');
     });
 
     describe('skip to content when `skipLink` is provided', () => {

package/components/table-of-contents/{_toc.scss → _table-of-contents.scss}

@@ -1,4 +1,4 @@
-.ons-toc {
+.ons-table-of-contents {
     &-container {
         border-bottom: 1px solid var(--ons-color-grey-15);
         margin-bottom: 2rem;

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

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

package/components/table-of-contents/{toc.js → table-of-contents.js}

@@ -1,4 +1,4 @@
-export default class Toc {
+export default class TableOfContents {
     constructor(component) {
         this.component = component;
         this.sections = [...this.component.querySelectorAll('section[id]')];
@@ -28,11 +28,11 @@ export default class Toc {
         this.activeSection = activeSection;
 
         for (let section of this.sections) {
-            const tocItem = document.querySelector(`.ons-toc .ons-list__link[href="#${section.id}"]`);
+            const tocItem = document.querySelector(`.ons-table-of-contents .ons-list__link[href="#${section.id}"]`);
             if (section === activeSection) {
-                tocItem.classList.add('ons-toc__link-active');
+                tocItem.classList.add('ons-table-of-contents__link-active');
             } else {
-                tocItem.classList.remove('ons-toc__link-active');
+                tocItem.classList.remove('ons-table-of-contents__link-active');
             }
         }
     }

package/components/table-of-contents/{toc.spec.js → table-of-contents.spec.js}

@@ -59,7 +59,7 @@ describe('script: table-of-contents', () => {
         await page.$eval(`#${sectionId}`, (node) => node.scrollIntoView());
         await setTimeout(250);
 
-        const activeSection = await page.$eval('.ons-toc__link-active', (node) => node.innerText.trim());
+        const activeSection = await page.$eval('.ons-table-of-contents__link-active', (node) => node.innerText.trim());
         expect(activeSection).toBe(sectionTitle);
     });
 });
@@ -151,7 +151,7 @@ describe('script: table-of-contents-fixed-position', () => {
         );
     });
 
-    it('when the "ons-grid__col--sticky" class is used, then the ToC stays in a fixed position while scrolling', async () => {
+    it('when the "ons-grid__col--sticky" class is used, then the table of contents stays in a fixed position while scrolling', async () => {
         await page.evaluate(() => {
             window.scrollTo(0, 1000);
         });

package/components/tabs/_tabs.scss

@@ -43,11 +43,10 @@
     border-radius: 3px 3px 0 0;
     color: var(--ons-color-text);
     display: inline-block;
-    height: 2.55rem;
-    line-height: 2.25rem;
+    height: 2.5rem;
     margin: 0 0.5rem 0 0;
     overflow: visible;
-    padding: 0 1rem;
+    padding: 0.25rem 1rem;
     position: relative;
     text-decoration: underline;
 
@@ -62,10 +61,10 @@
         background-color: var(--ons-color-focus);
         border-bottom: 1px solid var(--ons-color-borders);
         box-shadow:
-            inset 0 0 0 9px var(--ons-color-button-secondary),
-            inset 17px 0 0 0 var(--ons-color-button-secondary),
-            inset -17px 0 0 0 var(--ons-color-button-secondary),
-            inset 0 -13px 0 0 var(--ons-color-text-link-focus);
+            inset 0 0 0 5px var(--ons-color-button-secondary),
+            inset 15px 0 0 0 var(--ons-color-button-secondary),
+            inset -14px 0 0 0 var(--ons-color-button-secondary),
+            inset 0 -9px 0 0 var(--ons-color-text-link-focus);
         color: var(--ons-color-text-link-focus);
 
         // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
@@ -88,10 +87,10 @@
         &:focus {
             background-color: var(--ons-color-focus);
             box-shadow:
-                inset 0 0 0 9px var(--ons-color-page-light),
-                inset 17px 0 0 0 var(--ons-color-page-light),
-                inset -17px 0 0 0 var(--ons-color-page-light),
-                inset 0 -13px 0 0 var(--ons-color-text-link-focus);
+                inset 0 0 0 5px var(--ons-color-page-light),
+                inset 15px 0 0 0 var(--ons-color-page-light),
+                inset -14px 0 0 0 var(--ons-color-page-light),
+                inset 0 -9px 0 0 var(--ons-color-text-link-focus);
             text-decoration: none;
         }
     }

package/components/tabs/tabs.js

@@ -40,8 +40,8 @@ export default class Tabs {
 
     // Set up checks for responsive functionality
     // The tabs will display as tabs up until this.breakpoint is reached
-    // Tabs will display as a TOC list and show full content for <this.breakpoint viewports
-    // Aria tags are added only in toc view
+    // Tabs will then display as a table of contents list and show full content for this.breakpoint viewports
+    // Aria tags are added only in table of contents view
     setupViewportChecks() {
         const breakpoint = () => {
             let finalBreakpoint = 0;
@@ -183,7 +183,7 @@ export default class Tabs {
         panel.classList.add(this.jsHiddenClass);
     }
 
-    // Remove aria tags for TOC view
+    // Remove aria tags for table of contents view
     unsetAttributes(tab) {
         tab.removeAttribute('id');
         tab.removeAttribute('role');

package/components/timeout-modal/timeout-modal.spec.js

@@ -216,7 +216,7 @@ describe('script: timeout modal', () => {
             it('closes the modal', async () => {
                 const modalIsVisible = await page.$eval('.ons-modal', (node) => node.classList.contains('ons-u-db'));
 
-                await setTimeout(50);
+                await setTimeout(100);
 
                 expect(modalIsVisible).toBe(false);
             });