@ons/design-system 63.0.0 → 65.0.0

package/components/summary/example-summary-grouped.njk

@@ -23,7 +23,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -42,7 +41,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -61,7 +59,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -85,7 +82,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -104,7 +100,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -128,7 +123,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -147,7 +141,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -171,12 +164,10 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             },
                                             {
                                                 "text": "Remove",
-                                                "ariaLabel": "Remove company",
                                                 "url": "#0"
                                             }
                                         ]
@@ -191,7 +182,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -206,7 +196,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -225,12 +214,10 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             },
                                             {
                                                 "text": "Remove",
-                                                "ariaLabel": "Remove company",
                                                 "url": "#0"
                                             }
                                         ]
@@ -245,7 +232,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -260,7 +246,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -292,7 +277,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -307,7 +291,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -322,7 +305,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -337,7 +319,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]

package/components/summary/example-summary-household.njk

@@ -15,7 +15,6 @@
                                     "actions": [
                                         {
                                             "text": "Change",
-                                            "ariaLabel": "Change details for Joe Bloggs",
                                             "url": "#0"
                                         }
                                     ]
@@ -30,12 +29,10 @@
                                     "actions": [
                                         {
                                             "text": "Change",
-                                            "ariaLabel": "Change details for Barry Scott",
                                             "url": "#0"
                                         },
                                         {
                                             "text": "Remove",
-                                            "ariaLabel": "Remove Barry Scott",
                                             "url": "#0"
                                         }
                                     ]
@@ -50,12 +47,10 @@
                                     "actions": [
                                         {
                                             "text": "Change",
-                                            "ariaLabel": "Change details for Susan Gill",
                                             "url": "#0"
                                         },
                                         {
                                             "text": "Remove",
-                                            "ariaLabel": "Remove Susan Gill",
                                             "url": "#0"
                                         }
                                     ]

package/components/summary/example-summary-hub.njk

@@ -20,7 +20,6 @@
                                     "actions": [
                                         {
                                             "text": "View answers",
-                                            "ariaLabel": "View answers for People who live here",
                                             "url": "#0"
                                         }
                                     ]
@@ -40,7 +39,6 @@
                                     "actions": [
                                         {
                                             "text": "View answers",
-                                            "ariaLabel": "View answers for Accommodation",
                                             "url": "#0"
                                         }
                                     ]
@@ -60,7 +58,6 @@
                                     "actions": [
                                         {
                                             "text": "View answers",
-                                            "ariaLabel": "View answers for Mary Smith",
                                             "url": "#0"
                                         }
                                     ]
@@ -79,7 +76,6 @@
                                     "actions": [
                                         {
                                             "text": "Continue with section",
-                                            "ariaLabel": "Continue with John Smith's section",
                                             "url": "#0"
                                         }
                                     ]
@@ -98,7 +94,6 @@
                                     "actions": [
                                         {
                                             "text": "Start section",
-                                            "ariaLabel": "Start Billy Smith's section",
                                             "url": "#0"
                                         }
                                     ]
@@ -117,7 +112,6 @@
                                     "actions": [
                                         {
                                             "text": "Start section",
-                                            "ariaLabel": "Start Sally Smith's section",
                                             "url": "#0"
                                         }
                                     ]
@@ -136,7 +130,6 @@
                                     "actions": [
                                         {
                                             "text": "Start section",
-                                            "ariaLabel": "Start Wilhelmina Susannah Clementine-Smith's section",
                                             "url": "#0"
                                         }
                                     ]
@@ -155,7 +148,6 @@
                                     "actions": [
                                         {
                                             "text": "Start section",
-                                            "ariaLabel": "Start Vera Jones's section",
                                             "url": "#0"
                                         }
                                     ]

package/components/summary/example-summary-multiple.njk

@@ -20,7 +20,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -35,7 +34,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -50,7 +48,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -65,7 +62,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]

package/components/summary/example-summary.njk

@@ -24,7 +24,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -45,7 +44,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -70,7 +68,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -91,7 +88,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]

package/components/table/_macro.njk

@@ -15,7 +15,7 @@
                 <thead class="ons-table__head">
                     <tr class="ons-table__row">
                         {% for th in params.ths %}
-                        <th scope="col" class="ons-table__header{{ ' ' + th.thClasses if th.thClasses }}{{ " ons-table__header--numeric" if th.numeric }}"{% if 'sortable' in variants %} aria-sort="{{- th.ariaSort | default('none') -}}"{% endif %}>
+                        <th scope="col" class="ons-table__header{{ ' ' + th.thClasses if th.thClasses }}{{ " ons-table__header--numeric" if th.numeric }}"{% if 'sortable' in variants %} aria-sort="{{- th.ariaSort | default('none') -}}"{% endif %}{% if th.widthPercentage %} width="{{ th.widthPercentage }}%"{% endif %}>
                             <span class="ons-table__header-text">{{- th.value -}}</span>
                             {% if 'sortable' in variants %}
                                 {{

package/components/table/_macro.spec.js

@@ -80,6 +80,22 @@ describe('macro: table', () => {
       expect($('.ons-table__header').hasClass('another-extra-column-class')).toBe(true);
     });
 
+    it('adds additional width attribute to column header', () => {
+      const $ = cheerio.load(
+        renderComponent('table', {
+          ...EXAMPLE_TABLE,
+          ths: [
+            {
+              value: 'Column 1',
+              widthPercentage: 50,
+            },
+          ],
+        }),
+      );
+
+      expect($('.ons-table__header').attr('width')).toBe('50%');
+    });
+
     it('does not add "numeric" modifier class to column header when `td.numeric` is not provided', () => {
       const $ = cheerio.load(renderComponent('table', EXAMPLE_TABLE));
 

package/components/table/_table.scss

@@ -155,7 +155,7 @@
 
   &--sortable {
     [aria-sort='descending'].ons-table__header {
-      .ons-svg-icon {
+      .ons-icon {
         .ons-topTriangle {
           fill: var(--ons-color-grey-15);
         }
@@ -164,7 +164,7 @@
         }
       }
       .ons-table__sort-button:focus {
-        .ons-svg-icon {
+        .ons-icon {
           .ons-topTriangle {
             fill: #e3ba02;
           }
@@ -173,7 +173,7 @@
     }
 
     [aria-sort='ascending'].ons-table__header {
-      .ons-svg-icon {
+      .ons-icon {
         .ons-topTriangle {
           fill: var(--ons-color-text);
         }
@@ -182,7 +182,7 @@
         }
       }
       .ons-table__sort-button:focus {
-        .ons-svg-icon {
+        .ons-icon {
           .ons-bottomTriangle {
             fill: #e3ba02;
           }
@@ -210,7 +210,7 @@
           text-underline-position: under;
         }
 
-        .ons-svg-icon {
+        .ons-icon {
           fill: var(--ons-color-grey-75);
           height: 16px;
           margin-left: 0.2rem;
@@ -220,7 +220,7 @@
 
         &:focus {
           @extend %a-focus;
-          .ons-svg-icon {
+          .ons-icon {
             fill: var(--ons-color-black);
           }
         }

package/components/table/example-table-numeric.njk

@@ -4,15 +4,18 @@
         "caption": "A basic table with numeric values",
         "ths": [
             {
-                "value": "Country"
+                "value": "Country",
+                "widthPercentage": 50
             },
             {
                 "value": "Population mid-2020",
-                "numeric": true
+                "numeric": true,
+                "widthPercentage": 25
             },
             {
                 "value": "% change 2019 to 2020",
-                "numeric": true
+                "numeric": true,
+                "widthPercentage": 25
             }
         ],
         "trs": [

package/components/table/sortable-table.js

@@ -29,7 +29,7 @@ export default class TableSort {
   createHeadingButtons(heading, i) {
     const text = heading.textContent.trim();
     heading.querySelector('.ons-table__header-text').remove();
-    heading.querySelector('.ons-svg-icon').classList.remove('ons-u-d-no');
+    heading.querySelector('.ons-icon').classList.remove('ons-u-d-no');
     const button = document.createElement('button');
     button.setAttribute('aria-label', this.table.getAttribute('data-aria-sort') + ' ' + text);
     button.setAttribute('type', 'button');

package/components/tabs/_macro.njk

@@ -12,17 +12,18 @@
     >
         {% set titleTag = params.titleTag | default("h2") %}
         <{{ titleTag }} class="ons-tabs__title ons-u-fs-r--b ons-u-mt-no">{{ params.title }}</{{ titleTag }}>
-
+        <div>
         <ul class="ons-tabs__list">
             {%- for tab in params.tabs -%}
                 <li class="ons-tab__list-item"><a href="#{{ tab.id if tab.id else tab.title|trim|replace(' ','-')|lower}}" class="ons-tab" data-ga="click" data-ga-category="tabs" data-ga-action="Show: {{ tab.title }}" data-ga-label="Show: {{ tab.title }}">{{ tab.title }}{% if tab.hiddenSpan %}<span class='ons-u-d-no'>{{tab.hiddenSpan}}</span>{% endif %}</a></li>
             {%- endfor -%}
         </ul>
-
+        </div>
         {% for tab in params.tabs %}
             <section id="{{ tab.id if tab.id else tab.title|trim|replace(' ','-')|lower }}" class="ons-tabs__panel">
+                {% if tab.showTitle %}<h2 id="{{ tab.title|trim|replace(' ','-')|lower + '-content-title' }}" class="ons-u-vh">{{ tab.title }}</h2>{% endif %}
                 {{ tab.content | safe }}
             </section>
-        {% endfor %}
+        {% endfor %}    
     </section>
 {% endmacro %}

package/components/tabs/_macro.spec.js

@@ -22,6 +22,23 @@ const EXAMPLE_TABS = {
   ],
 };
 
+const EXAMPLE_TABS_WITH_SHOWTITLE = {
+  title: 'Example tabs',
+  tabs: [
+    {
+      id: 'first-tab',
+      title: 'Tab 1',
+      showTitle: true,
+      content: 'Example content...',
+    },
+    {
+      id: 'second-tab',
+      title: 'Tab 2',
+      content: 'Some nested <strong>strong element</strong>...',
+    },
+  ],
+};
+
 const EXAMPLE_TABS_WITHOUT_TAB_IDS = {
   title: 'Example tabs',
   tabs: [
@@ -127,4 +144,10 @@ describe('macro: tabs', () => {
         .trim(),
     ).toBe('Some nested <strong>strong element</strong>...');
   });
+
+  it('displays a h2 when showTitle set to true', () => {
+    const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS_WITH_SHOWTITLE));
+
+    expect($('.ons-tabs__panel:first').find('h2').length).toBe(1);
+  });
 });

package/components/tabs/_tabs.scss

@@ -11,24 +11,19 @@
     margin: 0 0 1rem;
     overflow: visible;
     padding: 0;
-
+    width: max-content;
     // Tabs
     &--row {
       margin: 0;
       position: relative;
-
-      &::after {
-        background: var(--ons-color-borders);
-        bottom: 0;
-        box-shadow: 0 1px 0 0 var(--ons-color-page-light);
-        content: '';
-        height: 1px;
-        left: 0;
-        position: absolute;
-        width: 100%;
-      }
     }
   }
+  &__container {
+    border-bottom: 1px solid var(--ons-color-borders);
+    margin: 0;
+    padding: 0;
+    z-index: -2;
+  }
 }
 
 .ons-tab__list-item {
@@ -81,10 +76,12 @@
   // Tab when selected
   &[aria-selected='true'] {
     background-color: var(--ons-color-page-light);
-    border-bottom: none;
+    border-bottom: 2px white;
     border-color: var(--ons-color-borders);
     border-radius: 3px 3px 0 0;
+    position: relative;
     text-decoration: none;
+    top: 1px;
     z-index: 1;
 
     &:focus {
@@ -109,7 +106,7 @@
   }
 
   &:focus {
-    box-shadow: 0 0 0 3px var(--ons-color-page-light), 0 0 0 5px var(--ons-color-text-link-focus), 0 0 0 8px var(--ons-color-focus);
+    box-shadow: 0 0 0 0 var(--ons-color-page-light), 0 0 0 2px var(--ons-color-text-link-focus), 0 0 0 6px var(--ons-color-focus);
     outline: 3px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
     z-index: 1;
   }
@@ -137,7 +134,6 @@
   }
 
   .ons-tabs__list--row {
-    margin-bottom: -1px;
     padding: 0;
   }
 

package/components/tabs/example-tabs.njk

@@ -7,9 +7,9 @@
             {
                 "id": "ukis",
                 "title": 'UKIS',
+                "showTitle": true,
                 "hiddenSpan": 'for UKIS',
-                "content": '<h2 class="ons-u-d-no@m">UKIS</h2>
-                <h3>Aim of this survey</h3>
+                "content": '<h3>Aim of this survey</h3>
                 <p class="ons-u-fs-r">The aim of the UK Innovation Survey (UKIS) is to collect data from businesses about various aspects of their innovation related activities. Using this data we can measure the level, types and trends in innovation.</p>
                 <h3>How we’ll use this data</h3>
                 <p class="ons-u-fs-r">The UKIS data is a major source of evidence to inform government policy. It is used to promote innovation activities among businesses to boost economic growth. It is an important contribution to the European-wide Community Innovation Survey (CIS). The CIS is used for international benchmarking and comparison purposes.</p>
@@ -18,16 +18,16 @@
             {
                 "id": "vacancy-survey",
                 "title": 'Vacancy survey',
-                "content": '<h2 class="ons-u-d-no@m">Vacancy survey</h2>
-                <h3>Purpose</h3>
+                "showTitle": true,
+                "content": '<h3>Purpose</h3>
                 <p class="ons-u-fs-r">The Vacancy Survey is a regular survey of businesses, which provides an accurate and comprehensive measure of the total number of vacancies across the economy and fills a gap in the information available regarding the demand for labour. Before the Vacancy Survey was introduced, the only information available nationally about vacancies was from records of vacancies notified to Job Centres by employers. This provided only a partial picture, possibly less than half of all vacancies, because employers are under no obligation to notify vacancies to Job Centres. This business based survey has a more complete coverage and is included in the monthly ONS Labour Market Statistical Bulletin.</p>
                 <p>You can <a href="https://www.ons.gov.uk/surveys/informationforbusinesses/businesssurveys/vacancysurvey">find more information on the Vacancy Survey on the ONS website</a>.</p>'
             },
             {
                 "id": "monthly-business-survey",
                 "title": 'Monthly Business Survey',
-                "content": '<h2 class="ons-u-d-no@m">Monthly Business Survey</h2>
-                <h3>Aim of this survey</h3>
+                "showTitle": true,
+                "content": '<h3>Aim of this survey</h3>
                 <p class="ons-u-fs-r">The Monthly Business Survey (MBS) collects monthly information on employment of businesses in Great Britain. Your response contributes to Labour Market Statistics.</p>
                 <h4>What you need to know</h4>
                 <p class="ons-u-fs-r">To complete the survey, you will need the following information to answer the survey questions:</p>

package/components/tabs/tabs.js

@@ -10,7 +10,6 @@ const classTabTitle = 'ons-tabs__title';
 const classTabList = 'ons-tabs__list';
 const classTabListItems = 'ons-tab__list-item';
 const classTabsPanel = 'ons-tabs__panel';
-
 const matchMediaUtil = matchMedia;
 
 export default class Tabs {
@@ -22,6 +21,7 @@ export default class Tabs {
     this.tabsTitle = component.querySelector(`.${classTabTitle}`);
     this.tabs = [...component.getElementsByClassName(classTab)];
     this.tabList = component.getElementsByClassName(classTabList);
+    this.tabListContainer = this.tabList[0].parentElement;
     this.tabListItems = [...component.getElementsByClassName(classTabListItems)];
     this.tabPanels = [...component.getElementsByClassName(classTabsPanel)];
 
@@ -31,7 +31,6 @@ export default class Tabs {
     this.jsTabAsListClass = 'ons-tab--row';
 
     this.noInitialActiveTab = this.component.getAttribute('data-no-initial-active-tab');
-
     if (matchMediaUtil.hasMatchMedia()) {
       this.setupViewportChecks();
     } else {
@@ -40,11 +39,22 @@ export default class Tabs {
   }
 
   // Set up checks for responsive functionality
-  // The tabs will display as tabs for >40rem viewports
-  // Tabs will display as a TOC list and show full content for <740px viewports
-  // Aria tags are added only for >740px viewports
+  // 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
   setupViewportChecks() {
-    this.viewport = matchMediaUtil('(min-width: 740px)');
+    const breakpoint = () => {
+      let finalBreakpoint = 0;
+      this.tabListItems.forEach(tab => {
+        finalBreakpoint += tab.offsetWidth;
+      });
+      if (finalBreakpoint < 450) {
+        return (finalBreakpoint = 450);
+      } else {
+        return finalBreakpoint;
+      }
+    };
+    this.viewport = matchMediaUtil(`(min-width: ${breakpoint()}px)`);
     this.viewport.addListener(this.checkViewport.bind(this));
     this.checkViewport();
   }
@@ -62,9 +72,12 @@ export default class Tabs {
     this.tabList[0].classList.add(this.jsTabListAsRowClass);
 
     this.tabsTitle.classList.add('ons-u-vh');
-
+    this.tabListContainer.classList.add('ons-tabs__container');
     this.tabPanels.forEach(panel => {
       panel.setAttribute('tabindex', '0');
+      if (panel.querySelector('[id*="content-title"]')) {
+        panel.firstElementChild.classList.add('ons-u-vh');
+      }
     });
 
     this.tabListItems.forEach(item => {
@@ -96,11 +109,14 @@ export default class Tabs {
   makeList() {
     this.tabList[0].removeAttribute('role');
     this.tabList[0].classList.remove(this.jsTabListAsRowClass);
-
+    this.tabListContainer.classList.remove('ons-tabs__container');
     this.tabsTitle.classList.remove('ons-u-vh');
 
     this.tabPanels.forEach(panel => {
       panel.removeAttribute('tabindex', '0');
+      if (panel.firstElementChild.classList.contains('ons-u-vh')) {
+        panel.firstElementChild.classList.remove('ons-u-vh');
+      }
     });
 
     this.tabListItems.forEach(item => {