@ons/design-system 72.0.1 → 72.1.1

package/components/summary/_macro.njk

@@ -35,96 +35,91 @@
                                 {% if row.total %}{% set itemClass = itemClass + " ons-summary__item--total" %}{% endif %}
                                 <div {% if row.id %}id="{{ row.id }}"{% endif %}class="ons-summary__item{{ itemClass }}">
                                     {% if row.errorMessage %}
-                                        <div class="ons-summary__row-title--error ons-u-fs-r">{{ row.errorMessage }}</div>
+                                        <dt class="ons-summary__row-title--error ons-u-fs-r">{{ row.errorMessage }}</dt>
                                     {% endif %}
                                     {% if row.itemsList | length > 1 and row.title %}
-                                        <div class="ons-summary__row-title ons-summary__row-title--no-group-title ons-u-fs-r">
+                                        <dt class="ons-summary__row-title ons-summary__row-title--no-group-title ons-u-fs-r">
                                             {{- row.title -}}
-                                        </div>
+                                        </dt>
                                     {% endif %}
 
                                     {% for item in row.itemsList %}
-                                        <div
-                                            class="ons-summary__row{{ ' ons-summary__row--has-values' if item.valueList else "" }}"
-                                            {% if item.id %}id="{{ item.id }}"{% endif %}
+                                        <dt
+                                            class="ons-summary__item-title"
+                                            {% if item.titleAttributes %}{% for attribute, value in (item.titleAttributes.items() if item.titleAttributes is mapping and item.titleAttributes.items else item.titleAttributes) %}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
                                         >
-                                            <dt
-                                                class="ons-summary__item-title"
-                                                {% if item.titleAttributes %}{% for attribute, value in (item.titleAttributes.items() if item.titleAttributes is mapping and item.titleAttributes.items else item.titleAttributes) %}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
-                                            >
-                                                {% if item.iconType %}
-                                                    {% from "components/icon/_macro.njk" import onsIcon %}
-                                                    <span
-                                                        class="ons-summary__item-title-icon{{ ' ons-summary__item-title-icon--check' if item.iconType == 'check' else "" }}"
-                                                    >
-                                                        {{-
-                                                            onsIcon({
-                                                                "iconType": item.iconType
-                                                            })
-                                                        -}}
-                                                        {% if item.iconVisuallyHiddenText %}
-                                                            <span class="ons-u-vh">{{ item.iconVisuallyHiddenText }}</span>
-                                                        {% endif %}
-                                                    </span>
-                                                {% endif %}
-
-                                                <div
-                                                    class="ons-summary__item--text{{ ' ons-summary__item-title--text' if item.iconType else "" }}"
+                                            {% if item.iconType %}
+                                                {% from "components/icon/_macro.njk" import onsIcon %}
+                                                <span
+                                                    class="ons-summary__item-title-icon{{ ' ons-summary__item-title-icon--check' if item.iconType == 'check' else "" }}"
                                                 >
-                                                    {{- item.title | default(row.title) | safe -}}
-                                                </div>
+                                                    {{-
+                                                        onsIcon({
+                                                            "iconType": item.iconType
+                                                        })
+                                                    -}}
+                                                    {% if item.iconVisuallyHiddenText %}
+                                                        <span class="ons-u-vh">{{ item.iconVisuallyHiddenText }}</span>
+                                                    {% endif %}
+                                                </span>
+                                            {% endif %}
 
-                                                {# Render section status for mobile if is hub #}
-                                                {% if variantHub and item.valueList %}
-                                                    <span class="ons-u-d-no@m ons-u-fs-r"> — {{ item.valueList[0].text | safe }}</span>
-                                                {% endif %}
-                                            </dt>
-                                            {% if item.valueList %}
-                                                <dd
-                                                    class="ons-summary__values{{ ' ons-summary__values--2' if not item.actions }}"
-                                                    {% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
-                                                >
-                                                    {% if item.valueList | length == 1 %}
-                                                        <span class="ons-summary__text">{{ item.valueList[0].text | safe }}</span>
-                                                        {% if item.valueList[0].other or item.valueList[0].other == 0 %}
-                                                            <ul class="ons-u-mb-no">
-                                                                <li>{{ item.valueList[0].other | safe }}</li>
-                                                            </ul>
-                                                        {% endif %}
-                                                    {% else %}
+                                            <div
+                                                class="ons-summary__item--text{{ ' ons-summary__item-title--text' if item.iconType else "" }}"
+                                            >
+                                                {{- item.title | default(row.title) | safe -}}
+                                            </div>
+
+                                            {# Render section status for mobile if is hub #}
+                                            {% if variantHub and item.valueList %}
+                                                <span class="ons-u-d-no@m ons-u-fs-r"> — {{ item.valueList[0].text | safe }}</span>
+                                            {% endif %}
+                                        </dt>
+                                        {% if item.valueList %}
+                                            <dd
+                                                class="ons-summary__values{{ ' ons-summary__values--2' if not item.actions }}"
+                                                {% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+                                            >
+                                                {% if item.valueList | length == 1 %}
+                                                    <span class="ons-summary__text">{{ item.valueList[0].text | safe }}</span>
+                                                    {% if item.valueList[0].other or item.valueList[0].other == 0 %}
                                                         <ul class="ons-u-mb-no">
-                                                            {% for value in item.valueList %}
-                                                                <li>
-                                                                    <span class="ons-summary__text">{{ value.text | safe }}</span>
-                                                                    {% if value.other or value.other == 0 %}
-                                                                        <ul class="ons-u-mb-no">
-                                                                            <li>{{ value.other | safe }}</li>
-                                                                        </ul>
-                                                                    {% endif %}
-                                                                </li>
-                                                            {% endfor %}
+                                                            <li>{{ item.valueList[0].other | safe }}</li>
                                                         </ul>
                                                     {% endif %}
-                                                </dd>
-                                            {% endif %}
-                                            {% if item.actions %}
-                                                <dd class="ons-summary__actions">
-                                                    {% for action in item.actions %}
-                                                        {% if loop.index > 1 %}<span class="ons-summary__spacer"></span>{% endif %}
-                                                        <a
-                                                            href="{{ action.url }}"
-                                                            class="ons-summary__button"
-                                                            {% if action.attributes %}{% for attribute, value in (action.attributes.items() if action.attributes is mapping and action.attributes.items else action.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+                                                {% else %}
+                                                    <ul class="ons-u-mb-no">
+                                                        {% for value in item.valueList %}
+                                                            <li>
+                                                                <span class="ons-summary__text">{{ value.text | safe }}</span>
+                                                                {% if value.other or value.other == 0 %}
+                                                                    <ul class="ons-u-mb-no">
+                                                                        <li>{{ value.other | safe }}</li>
+                                                                    </ul>
+                                                                {% endif %}
+                                                            </li>
+                                                        {% endfor %}
+                                                    </ul>
+                                                {% endif %}
+                                            </dd>
+                                        {% endif %}
+                                        {% if item.actions %}
+                                            <dd class="ons-summary__actions">
+                                                {% for action in item.actions %}
+                                                    {% if loop.index > 1 %}<span class="ons-summary__spacer"></span>{% endif %}
+                                                    <a
+                                                        href="{{ action.url }}"
+                                                        class="ons-summary__button"
+                                                        {% if action.attributes %}{% for attribute, value in (action.attributes.items() if action.attributes is mapping and action.attributes.items else action.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+                                                    >
+                                                        <span class="ons-summary__button-text" aria-hidden="true">{{- action.text -}}</span>
+                                                        <span class="ons-u-vh"
+                                                            >{{ action.visuallyHiddenText | default (action.text) }}</span
                                                         >
-                                                            <span class="ons-summary__button-text" aria-hidden="true">
-                                                                {{- action.text -}}
-                                                            </span>
-                                                            <span class="ons-u-vh">{{ action.visuallyHiddenText }}</span>
-                                                        </a>
-                                                    {% endfor %}
-                                                </dd>
-                                            {% endif %}
-                                        </div>
+                                                    </a>
+                                                {% endfor %}
+                                            </dd>
+                                        {% endif %}
                                     {% endfor %}
                                 </div>
                             {% endfor %}
@@ -146,7 +141,7 @@
                                 </a>
                             {% endset %}
                             {% if params.variant == 'card' %}
-                                <div>{{ link | safe }}</div>
+                                <div class="ons-summary__link-container">{{ link | safe }}</div>
                             {% else %}
                                 {{ link | safe }}
                             {% endif %}

package/components/summary/_macro.spec.js

@@ -399,12 +399,6 @@ describe('macro: summary', () => {
                 expect($('#row-id-3').length).toBe(1);
             });
 
-            it('has the correct class for each row when there is a `valueList`', () => {
-                const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
-
-                expect($('.ons-summary__row--has-values').length).toBe(5);
-            });
-
             it('has custom row `titleAttributes`', () => {
                 const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
@@ -462,18 +456,16 @@ describe('macro: summary', () => {
                 const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
                 expect(
-                    $('.ons-summary__items .ons-summary__item:nth-of-type(1) .ons-summary__row .ons-summary__values .ons-summary__text')
-                        .text()
-                        .trim(),
+                    $('.ons-summary__items .ons-summary__item:nth-of-type(1) .ons-summary__values .ons-summary__text').text().trim(),
                 ).toBe('row value 1');
             });
 
             it('displays the `other` text', () => {
                 const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
-                expect(
-                    $('.ons-summary__items .ons-summary__item:nth-of-type(1) .ons-summary__row .ons-summary__values ul li').text().trim(),
-                ).toBe('other value');
+                expect($('.ons-summary__items .ons-summary__item:nth-of-type(1) .ons-summary__values ul li').text().trim()).toBe(
+                    'other value',
+                );
             });
 
             it('wraps the `valueList` in a ul if multiple values provided', () => {
@@ -601,9 +593,7 @@ describe('macro: summary', () => {
                 }),
             );
 
-            expect($('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__row .ons-summary__item-title span').text()).toBe(
-                ' — row value 2',
-            );
+            expect($('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__item-title span').text()).toBe(' — row value 2');
         });
     });
 

package/components/summary/_summary.scss

@@ -18,12 +18,10 @@ $hub-row-spacing: 1.3rem;
         }
     }
 
-    &__row {
+    &__item {
         display: flex;
         margin: 0;
-    }
-
-    &__item {
+        flex-wrap: wrap;
         &:not(:last-child),
         &:not(.ons-summary__group--card .ons-summary__item):nth-of-type(1) {
             border-bottom: 1px solid var(--ons-color-borders);
@@ -51,6 +49,7 @@ $hub-row-spacing: 1.3rem;
     &__row-title {
         padding: $summary-row-spacing 0;
         text-align: left;
+        flex: 0 0 100%;
     }
     // reduces the gap between row title and summary title when there is no group title
     &__title + &__group &__row-title--no-group-title {
@@ -95,12 +94,13 @@ $hub-row-spacing: 1.3rem;
         width: 1px;
     }
 
-    // Item Modifiers
+    // Row Modifiers
     &__item--error & {
         &__row-title--error {
             color: var(--ons-color-errors);
             font-weight: $font-weight-bold;
             padding: $summary-row-spacing $summary-col-spacing;
+            flex: 0 0 100%;
         }
 
         &__row-title,
@@ -159,7 +159,7 @@ $hub-row-spacing: 1.3rem;
             }
         }
 
-        &__row {
+        &__item {
             flex-direction: column;
         }
     }
@@ -172,14 +172,19 @@ $hub-row-spacing: 1.3rem;
             flex: 5 1 33%;
             padding-top: $summary-row-spacing;
             vertical-align: top;
-            &:not(:last-child) {
-                padding-right: $summary-col-spacing;
-            }
+        }
+
+        &__item-title,
+        &__values {
+            padding-right: $summary-col-spacing;
         }
 
         &__actions {
             display: flex;
             justify-content: right;
+            & :not(.ons-summary__item-title--error) {
+                padding-right: 0;
+            }
         }
 
         &__button {
@@ -215,7 +220,7 @@ $hub-row-spacing: 1.3rem;
             }
             .ons-summary__link {
                 padding: 0 1.25rem;
-                div {
+                &-container {
                     padding: 1rem 0;
                     border-top: 1px solid var(--ons-color-borders-light);
                 }
@@ -225,7 +230,7 @@ $hub-row-spacing: 1.3rem;
                 padding: 0.5rem 1.25rem 0;
             }
             .ons-summary__placeholder + .ons-summary__link {
-                div {
+                &-container {
                     border-top: 0;
                 }
             }

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 0.25rem;
     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);
             });