@ons/design-system 62.2.4 → 64.0.0

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

@@ -1,5 +1,5 @@
 {% macro onsTableOfContents(params) %}
-{% from "components/lists/_macro.njk" import onsList %}
+{% from "components/list/_macro.njk" import onsList %}
 {% from "components/skip-to-content/_macro.njk" import onsSkipToContent %}
 
 <aside class="ons-toc-container" role="complementary">

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

@@ -114,7 +114,7 @@ describe('macro: table-of-contents', () => {
 
     it('outputs `lists` component', () => {
       const faker = templateFaker();
-      const listsSpy = faker.spy('lists');
+      const listsSpy = faker.spy('list');
 
       faker.renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_SINGLE);
 
@@ -157,7 +157,7 @@ describe('macro: table-of-contents', () => {
 
     it('outputs `lists` component for each list', () => {
       const faker = templateFaker();
-      const listsSpy = faker.spy('lists');
+      const listsSpy = faker.spy('list');
 
       faker.renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_MULTIPLE);
 

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 'tabId' ~ loop.index }}" 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>
+                <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 'tabId' ~ loop.index }}" class="ons-tabs__panel">
+            <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: [
@@ -88,8 +105,8 @@ describe('macro: tabs', () => {
   it('has default tab id attribute values when identifiers are not provided', () => {
     const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS_WITHOUT_TAB_IDS));
 
-    expect($('.ons-tabs__panel:first').attr('id')).toBe('tabId1');
-    expect($('.ons-tabs__panel:last').attr('id')).toBe('tabId2');
+    expect($('.ons-tabs__panel:first').attr('id')).toBe('tab-1');
+    expect($('.ons-tabs__panel:last').attr('id')).toBe('tab-2');
   });
 
   it('has expected label text in tab links and visually hidden span in tab 1', () => {
@@ -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 => {

package/components/tabs/tabs.spec.js

@@ -9,6 +9,7 @@ const EXAMPLE_TABS = {
     {
       id: 'tab.id.1',
       title: 'Tab 1',
+      showTitle: true,
       content: 'First content...',
     },
     {
@@ -24,6 +25,38 @@ const EXAMPLE_TABS = {
   ],
 };
 
+const EXAMPLE_TABS_LONGER = {
+  title: 'Example tabs',
+  tabs: [
+    {
+      id: 'tab.id.1',
+      title: 'Tab 1',
+      showTitle: true,
+      content: 'First content...',
+    },
+    {
+      id: 'tab.id.2',
+      title: 'Tab 2',
+      content: 'Second content...',
+    },
+    {
+      id: 'tab.id.3',
+      title: 'Tab 3',
+      content: 'Third content...',
+    },
+    {
+      id: 'tab.id.4',
+      title: 'Tab 4',
+      content: 'Fourth content...',
+    },
+    {
+      id: 'tab.id.5',
+      title: 'Tab 5',
+      content: 'Fifth content...',
+    },
+  ],
+};
+
 const EXAMPLE_TABS_WITH_NO_INITIAL_ACTIVE_TAB = {
   ...EXAMPLE_TABS,
   noInitialActiveTab: true,
@@ -175,7 +208,7 @@ describe('script: tabs', () => {
     beforeEach(async () => {
       await page.emulate(puppeteer.devices['iPhone X']);
 
-      await setTestPage('/test', renderComponent('tabs', EXAMPLE_TABS));
+      await setTestPage('/test', renderComponent('tabs', EXAMPLE_TABS_LONGER));
     });
 
     it('has no aria attributes on tabs', async () => {
@@ -194,11 +227,16 @@ describe('script: tabs', () => {
 
     it('has no hidden tab panels', async () => {
       const panelCount = await page.$$eval('.ons-tabs__panel', nodes => nodes.length);
-      expect(panelCount).toBe(3);
+      expect(panelCount).toBe(5);
 
       const hiddenPanelCount = await page.$$eval('.ons-tabs__panel--hidden', nodes => nodes.length);
       expect(hiddenPanelCount).toBe(0);
     });
+
+    it('displays a h2 element with a unique id', async () => {
+      const panelCount = await page.$$eval('#tab-1-content-title', nodes => nodes.length);
+      expect(panelCount).toBe(1);
+    });
   });
 
   describe('when `data-no-initial-active-tab` is present', () => {

package/components/textarea/_macro.njk

@@ -26,8 +26,8 @@
             rows="{{ params.rows | default(8) }}"
             {% if params.charCheckLimit and params.charCheckLimit.limit %}
                 maxlength="{{ params.charCheckLimit.limit }}"
-                data-char-limit-ref="{{ params.id }}-lim-remaining"
-                aria-describedby="{{ params.id }}-lim-remaining"
+                data-char-limit-ref="{{ params.id }}-lim"
+                aria-describedby="{{ params.id }}-lim"
             {% endif %}
             {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
         >{{ params.value if params.value }}</textarea>

package/components/textarea/_macro.spec.js

@@ -216,13 +216,13 @@ describe('macro: textarea', () => {
     it('has data attribute which references the character limit component', () => {
       const $ = cheerio.load(renderComponent('textarea', EXAMPLE_TEXTAREA_WITH_CHARACTER_LIMIT));
 
-      expect($('.ons-input--textarea').attr('data-char-limit-ref')).toBe('example-id-lim-remaining');
+      expect($('.ons-input--textarea').attr('data-char-limit-ref')).toBe('example-id-lim');
     });
 
     it('has `aria-describedby` attribute which references the character limit component', () => {
       const $ = cheerio.load(renderComponent('textarea', EXAMPLE_TEXTAREA_WITH_CHARACTER_LIMIT));
 
-      expect($('.ons-input--textarea').attr('aria-describedby')).toBe('example-id-lim-remaining');
+      expect($('.ons-input--textarea').attr('aria-describedby')).toBe('example-id-lim');
     });
 
     it('renders character limit component', () => {

package/components/textarea/textarea.spec.js

@@ -24,7 +24,7 @@ describe('script: textarea', () => {
 
     describe('Given that the char limit helper has initialised correctly', () => {
       it('the char limit readout should be visible', async () => {
-        const hasClass = await page.$eval('#example-textarea-lim-remaining', node => node.classList.contains('ons-u-d-no'));
+        const hasClass = await page.$eval('#example-textarea-lim', node => node.classList.contains('ons-u-d-no'));
         expect(hasClass).toBe(false);
       });
     });
@@ -36,7 +36,7 @@ describe('script: textarea', () => {
         });
 
         it('then the characters remaining readout reflect the number of characters remaining', async () => {
-          const readout = await page.$eval('#example-textarea-lim-remaining', node => node.textContent);
+          const readout = await page.$eval('#example-textarea-lim', node => node.textContent);
           expect(readout).toBe('You have 12 characters remaining');
         });
       });
@@ -47,7 +47,7 @@ describe('script: textarea', () => {
         });
 
         it('then the characters remaining readout reflect the number of characters remaining', async () => {
-          const readout = await page.$eval('#example-textarea-lim-remaining', node => node.textContent);
+          const readout = await page.$eval('#example-textarea-lim', node => node.textContent);
           expect(readout).toBe('You have 0 characters remaining');
         });
 
@@ -57,9 +57,7 @@ describe('script: textarea', () => {
         });
 
         it('then the readout should be given limit reached classes', async () => {
-          const hasClass = await page.$eval('#example-textarea-lim-remaining', node =>
-            node.classList.contains('ons-input__limit--reached'),
-          );
+          const hasClass = await page.$eval('#example-textarea-lim', node => node.classList.contains('ons-input__limit--reached'));
           expect(hasClass).toBe(true);
         });
       });
@@ -77,7 +75,7 @@ describe('script: textarea', () => {
         });
 
         it('then the characters remaining readout reflect the number of characters remaining', async () => {
-          const readout = await page.$eval('#example-textarea-lim-remaining', node => node.textContent);
+          const readout = await page.$eval('#example-textarea-lim', node => node.textContent);
           expect(readout).toBe('You have 1 character remaining');
         });
 
@@ -87,9 +85,7 @@ describe('script: textarea', () => {
         });
 
         it('then the readout should not be given limit reached classes', async () => {
-          const hasClass = await page.$eval('#example-textarea-lim-remaining', node =>
-            node.classList.contains('ons-input__limit--reached'),
-          );
+          const hasClass = await page.$eval('#example-textarea-lim', node => node.classList.contains('ons-input__limit--reached'));
           expect(hasClass).toBe(false);
         });
       });

package/components/timeline/_macro.njk

@@ -1,6 +1,6 @@
 {% macro onsTimeline(params) %}
 
-    {% from "components/lists/_macro.njk" import onsList %}
+    {% from "components/list/_macro.njk" import onsList %}
 
     <div class="ons-timeline{{ ' ' + params.classes if params.classes else '' }}">
 

package/components/timeline/_macro.spec.js

@@ -65,7 +65,7 @@ describe('macro: timeline', () => {
 
   it('has the provided inner item list', () => {
     const faker = templateFaker();
-    const listSpy = faker.spy('lists');
+    const listSpy = faker.spy('list');
 
     faker.renderComponent('timeline', EXAMPLE_TIMELINE);