@ons/design-system 62.0.0 → 62.0.2

package/components/button/_button.scss

@@ -99,7 +99,7 @@ $button-shadow-size: 3px;
     }
   }
 
-  &:active:not(&--disabled):not(&--loader.ons-is-loading) {
+  &:active {
     top: ems($button-shadow-size);
   }
 
@@ -280,10 +280,12 @@ $button-shadow-size: 3px;
   &--ghost,
   &--ghost-dark,
   &--dropdown,
-  &--text-link {
+  &--text-link,
+  &--disabled,
+  &--loader.ons-is-loading {
     &:active,
     .active {
-      top: 0;
+      top: 0 !important; // Override 'pressed' state for flat and non-selectable buttons
     }
   }
 

package/components/cookies-banner/_macro.njk

@@ -30,7 +30,7 @@
     {% endif %}
 
     <div class="ons-cookies-banner" role="region" aria-label="{{ params.ariaLabel | default(ariaLabel)}}">
-        <div class="ons-container ons-cookies-banner__primary">
+        <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }} ons-cookies-banner__primary">
             <div class="ons-grid">
                 <div class="ons-grid__col ons-col-8@m">
                     <h2 class="ons-cookies-banner__title ons-u-mb-xs">{{ params.statementTitle | default(statementTitle) }} {{ params.serviceName | default(serviceName) }}</h2>
@@ -68,7 +68,7 @@
                 </div>
             </div>
         </div>
-        <div class="ons-container ons-cookies-banner__confirmation ons-u-d-no">
+        <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }} ons-cookies-banner__confirmation ons-u-d-no">
             <div class="ons-grid ons-grid--flex ons-grid--between ons-grid--gutterless ons-grid--no-wrap@s ons-grid--vertical-center">
               <div class="ons-grid__col ons-grid__col--flex ons-col-auto ons-u-flex-shrink@s">
                 <p class="ons-cookies-banner__desc ons-u-mb-no@s ons-u-mr-s@s"><span class="ons-js-accepted-text ons-u-d-no">{{ params.acceptedText | default(acceptedText) | safe }} </span><span class="ons-js-rejected-text ons-u-d-no">{{ params.rejectedText | default(rejectedText) | safe }} </span><span class="ons-cookies-banner__preferences-text">{{ params.preferencesText | default(preferencesText) | safe }}</span></p>

package/components/cookies-banner/_macro.spec.js

@@ -184,6 +184,26 @@ describe('macro: cookies-banner', () => {
         const linkText = $('.ons-cookies-banner__link').attr('href');
         expect(linkText).toBe('/cookies');
       });
+
+      it('has `container--wide` class when `wide` is true', () => {
+        const $ = cheerio.load(
+          renderComponent('cookies-banner', {
+            wide: true,
+          }),
+        );
+
+        expect($('.ons-container.ons-cookies-banner__primary').hasClass('ons-container--wide')).toBe(true);
+      });
+
+      it('has `container--full-width` class when `fullWidth` is true', () => {
+        const $ = cheerio.load(
+          renderComponent('cookies-banner', {
+            fullWidth: true,
+          }),
+        );
+
+        expect($('.ons-container.ons-cookies-banner__primary').hasClass('ons-container--full-width')).toBe(true);
+      });
     });
 
     describe('confirmation banner', () => {
@@ -213,6 +233,26 @@ describe('macro: cookies-banner', () => {
 
         expect(buttonSpy.occurrences[2].buttonContext).toBe('this message');
       });
+
+      it('has `container--wide` class when `wide` is true', () => {
+        const $ = cheerio.load(
+          renderComponent('cookies-banner', {
+            wide: true,
+          }),
+        );
+
+        expect($('.ons-container.ons-cookies-banner__confirmation').hasClass('ons-container--wide')).toBe(true);
+      });
+
+      it('has `container--full-width` class when `fullWidth` is true', () => {
+        const $ = cheerio.load(
+          renderComponent('cookies-banner', {
+            fullWidth: true,
+          }),
+        );
+
+        expect($('.ons-container.ons-cookies-banner__confirmation').hasClass('ons-container--full-width')).toBe(true);
+      });
     });
   });
 

package/components/header/_macro.spec.js

@@ -117,6 +117,50 @@ const EXAMPLE_HEADER_NAVIGATION_CONFIG = {
   },
 };
 
+const EXAMPLE_HEADER_NAVIGATION_WITH_SUBNAVIGATION_CONFIG = {
+  navigation: {
+    id: 'main-nav',
+    ariaLabel: 'Main menu',
+    currentPath: '#1',
+    currentPageTitle: 'Guidance',
+    itemsList: [
+      {
+        title: 'Home',
+        url: '#0',
+      },
+      {
+        title: 'Guidance',
+        url: '#1',
+      },
+    ],
+    toggleNavigationButton: {
+      text: 'Menu',
+      ariaLabel: 'Toggle main menu',
+    },
+    subNavigation: {
+      id: 'sub-nav',
+      overviewURL: '#overview',
+      overviewText: 'Overview',
+      ariaLabel: 'Section menu',
+      currentPath: '#1',
+      itemsList: [
+        {
+          title: 'Sub nav item 1',
+          url: '#0',
+          classes: 'custom-class-sub-item-1',
+          id: 'sub-item-1',
+        },
+        {
+          title: 'Sub nav item 2',
+          url: '#1',
+          classes: 'custom-class-sub-item-2',
+          id: 'sub-item-2',
+        },
+      ],
+    },
+  },
+};
+
 describe('macro: header', () => {
   describe('mode: basic', () => {
     it('passes jest-axe checks', async () => {
@@ -644,5 +688,58 @@ describe('macro: header', () => {
         },
       });
     });
+
+    it('renders the navigation in the correct container if `wide`', () => {
+      const $ = cheerio.load(
+        renderComponent('header', {
+          ...EXAMPLE_HEADER_BASIC,
+          wide: true,
+          ...EXAMPLE_HEADER_NAVIGATION_CONFIG,
+        }),
+      );
+
+      const navContainer = $('.ons-navigation-wrapper .ons-container');
+      expect($(navContainer).hasClass('ons-container--wide')).toBe(true);
+    });
+
+    it('renders the navigation in the correct container if `fullWidth`', () => {
+      const $ = cheerio.load(
+        renderComponent('header', {
+          ...EXAMPLE_HEADER_BASIC,
+          fullWidth: true,
+          ...EXAMPLE_HEADER_NAVIGATION_CONFIG,
+        }),
+      );
+
+      const navContainer = $('.ons-navigation-wrapper .ons-container');
+      expect($(navContainer).hasClass('ons-container--full-width')).toBe(true);
+    });
+
+    it('renders the sub-navigation in the correct container if `wide`', () => {
+      const $ = cheerio.load(
+        renderComponent('header', {
+          ...EXAMPLE_HEADER_BASIC,
+          wide: true,
+          ...EXAMPLE_HEADER_NAVIGATION_WITH_SUBNAVIGATION_CONFIG,
+        }),
+      );
+
+      const subNavContainer = $('.ons-navigation--sub .ons-container');
+      expect($(subNavContainer).hasClass('ons-container--wide')).toBe(true);
+    });
+
+    it('renders the sub-navigation in the correct container if `fullWidth`', () => {
+      const $ = cheerio.load(
+        renderComponent('header', {
+          ...EXAMPLE_HEADER_BASIC,
+          fullWidth: true,
+          ...EXAMPLE_HEADER_NAVIGATION_WITH_SUBNAVIGATION_CONFIG,
+        }),
+      );
+      console.log($.html());
+
+      const subNavContainer = $('.ons-navigation--sub .ons-container');
+      expect($(subNavContainer).hasClass('ons-container--full-width')).toBe(true);
+    });
   });
 });

package/components/navigation/_macro.njk

@@ -51,7 +51,7 @@
     </div>
     {% if params.navigation.subNavigation %}
         <nav class="ons-navigation ons-navigation--sub ons-u-d-no@xxs@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes }}" 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.navigation.fullWidth }}{{ ' ons-container--wide' if params.wide or params.navigation.wide }}">
+            <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 }}">
                 <ul class="ons-navigation__list ons-navigation__list">
                     {% for item in (params.navigation.subNavigation.itemsList if params.navigation.subNavigation.itemsList is iterable else params.navigation.subNavigation.itemsList.items()) %}
                         <li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}">

package/components/table/_macro.njk

@@ -21,7 +21,7 @@
                                 {{
                                     onsIcon({
                                         "iconType": "sort-sprite",
-                                        "id": th.value,
+                                        "id": th.value | replace(' ', '-'),
                                         "classes": 'ons-u-d-no'
                                     })
                                 }}

package/components/table/_table.scss

@@ -157,7 +157,7 @@
     [aria-sort='descending'].ons-table__header {
       .ons-svg-icon {
         .ons-topTriangle {
-          fill: var(--ons-color-grey-35);
+          fill: var(--ons-color-grey-15);
         }
         .ons-bottomTriangle {
           fill: var(--ons-color-text);
@@ -166,7 +166,7 @@
       .ons-table__sort-button:focus {
         .ons-svg-icon {
           .ons-topTriangle {
-            fill: #b69502;
+            fill: #e3ba02;
           }
         }
       }
@@ -178,13 +178,13 @@
           fill: var(--ons-color-text);
         }
         .ons-bottomTriangle {
-          fill: var(--ons-color-grey-35);
+          fill: var(--ons-color-grey-15);
         }
       }
       .ons-table__sort-button:focus {
         .ons-svg-icon {
           .ons-bottomTriangle {
-            fill: #b69502;
+            fill: #e3ba02;
           }
         }
       }
@@ -196,26 +196,26 @@
         border: 0;
         box-shadow: none;
         color: var(--ons-color-text-link);
+        cursor: pointer;
         display: inline-block;
         font-family: $font-sans;
         font-weight: $font-weight-bold;
         line-height: 1rem;
         padding: 0 0 0.2rem;
-        text-decoration: underline;
-        text-underline-position: under;
         white-space: nowrap;
 
-        &:hover {
+        &:hover:not(:focus) {
           color: var(--ons-color-text-link-hover);
-          cursor: pointer;
           text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
+          text-underline-position: under;
         }
 
         .ons-svg-icon {
           fill: var(--ons-color-grey-75);
-          height: 0.8rem;
+          height: 16px;
+          margin-left: 0.2rem;
           padding-bottom: 0.1rem;
-          width: 0.8rem;
+          width: 16px;
         }
 
         &:focus {

package/components/table/sortable-table.dom.js

@@ -8,7 +8,7 @@ async function tableSorter() {
   if (tables.length) {
     const TableSort = (await import('./sortable-table')).default;
 
-    tables.forEach(table => new TableSort(table));
+    tables.forEach((table, index) => new TableSort(table, index));
   }
 }
 

package/components/table/sortable-table.js

@@ -3,12 +3,13 @@ export const classTableBody = 'ons-table__body';
 export let status;
 
 export default class TableSort {
-  constructor(table) {
+  constructor(table, index) {
     this.table = table;
     this.options = {};
     this.options.statusMessage = table.getAttribute('data-aria-sort');
     this.options.ascendingText = table.getAttribute('data-aria-asc');
     this.options.descendingText = table.getAttribute('data-aria-desc');
+    this.index = index;
     this.init();
   }
 
@@ -35,16 +36,18 @@ export default class TableSort {
     button.setAttribute('data-index', i);
     button.setAttribute('class', 'ons-table__sort-button');
     button.textContent = text;
-    button.addEventListener('click', this.sortButtonClicked.bind(this));
-    let sortSprite = document.getElementById('sort-sprite-' + text.toLowerCase());
+    const sortSpriteIdText = text.replace(/\s+/g, '-').toLowerCase();
+    const sortSprite = document.getElementById('sort-sprite-' + sortSpriteIdText);
+    sortSprite.id = 'sort-sprite-' + sortSpriteIdText + '-' + this.index;
     const sortSpriteParent = sortSprite.parentNode;
     sortSpriteParent.replaceChild(button, sortSprite);
     button.appendChild(sortSprite);
+    button.addEventListener('click', this.sortButtonClicked.bind(this));
   }
 
   sortButtonClicked(event) {
-    const columnNumber = event.target.getAttribute('data-index');
-    const sortDirection = event.target.parentElement.getAttribute('aria-sort');
+    const columnNumber = event.target.closest('[data-index]').getAttribute('data-index');
+    const sortDirection = event.target.closest('[aria-sort]').getAttribute('aria-sort');
     let newSortDirection;
 
     if (sortDirection === 'none' || sortDirection === 'ascending') {
@@ -63,7 +66,7 @@ export default class TableSort {
     });
 
     this.removeButtonStates();
-    this.updateButtonState(event.target, newSortDirection);
+    this.updateButtonState(event.target.closest('[aria-sort]'), newSortDirection);
   }
 
   getTableRowsArray(tbody) {
@@ -109,6 +112,10 @@ export default class TableSort {
   }
 
   getCellValue(cell) {
+    if (!cell) {
+      return undefined;
+    }
+
     let cellValue = cell.getAttribute('data-sort-value') || cell.textContent;
     cellValue = parseFloat(cellValue) || cellValue;
 
@@ -130,7 +137,7 @@ export default class TableSort {
   }
 
   updateButtonState(button, direction) {
-    button.parentElement.setAttribute('aria-sort', direction);
+    button.setAttribute('aria-sort', direction);
     let message = this.options.statusMessage;
     message = message + ' ' + button.textContent.replace(/^\s+|\s+$/g, '');
     message = message + ' (' + direction + ')';