@ons/design-system 64.0.0 → 65.1.0

package/components/relationships/relationships.spec.js

@@ -2,7 +2,7 @@ import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
 const EXAMPLE_RELATIONSHIPS = {
   dontWrap: true,
-  playback: "Amanda Bloggs is Joe Bloggs' <em>…</em>",
+  playback: "Amanda Bloggs is Joe Bloggs' <strong>…</strong>",
   name: 'relationship',
   radios: [
     {
@@ -12,8 +12,8 @@ const EXAMPLE_RELATIONSHIPS = {
         text: 'Grandparent',
       },
       attributes: {
-        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <em>grandparents</em>',
-        'data-playback': "Amanda Bloggs is Joe Bloggs' <em>grandparents</em>",
+        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <strong>grandparents</strong>',
+        'data-playback': "Amanda Bloggs is Joe Bloggs' <strong>grandparents</strong>",
       },
     },
     {
@@ -23,8 +23,8 @@ const EXAMPLE_RELATIONSHIPS = {
         text: 'Other relation',
       },
       attributes: {
-        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <em>other relation</em>',
-        'data-playback': "Amanda Bloggs is Joe Bloggs' <em>other relation</em>",
+        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <strong>other relation</strong>',
+        'data-playback': "Amanda Bloggs is Joe Bloggs' <strong>other relation</strong>",
       },
     },
     {
@@ -35,8 +35,8 @@ const EXAMPLE_RELATIONSHIPS = {
         description: 'Including foster child',
       },
       attributes: {
-        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is <em>unrelated</em> to Joe Bloggs',
-        'data-playback': 'Amanda Bloggs is <em>unrelated</em> to Joe Bloggs',
+        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs',
+        'data-playback': 'Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs',
       },
     },
   ],
@@ -49,7 +49,7 @@ describe('script: relationships', () => {
       renderComponent(
         'question',
         {
-          title: 'Thinking of Joe Bloggs, Amanda Bloggs is their <em>…</em>',
+          title: 'Thinking of Joe Bloggs, Amanda Bloggs is their <strong>…</strong>',
           readDescriptionFirst: true,
           legendIsQuestionTitle: true,
           legendTitleClasses: 'ons-js-relationships-legend',
@@ -61,7 +61,7 @@ describe('script: relationships', () => {
 
   describe('when the component initialises', () => {
     it('then the playback paragraph should become visible', async () => {
-      const hasHideClass = await page.$eval('.ons-relationships__playback', node => node.classList.contains('ons-u-d-no'));
+      const hasHideClass = await page.$eval('.ons-relationships__playback', (node) => node.classList.contains('ons-u-d-no'));
       expect(hasHideClass).toBe(false);
     });
   });
@@ -72,13 +72,13 @@ describe('script: relationships', () => {
     });
 
     it('the question title should be changed to reflect the relationship', async () => {
-      const headingText = await page.$eval('h1', element => element.innerHTML);
-      expect(headingText.trim()).toBe('Thinking of Joe Bloggs, Amanda Bloggs is their <em>other relation</em>');
+      const headingText = await page.$eval('h1', (element) => element.innerHTML);
+      expect(headingText.trim()).toBe('Thinking of Joe Bloggs, Amanda Bloggs is their <strong>other relation</strong>');
     });
 
     it('the playback should be changed to reflect the relationship', async () => {
-      const playbackText = await page.$eval('.ons-relationships__playback', element => element.innerHTML);
-      expect(playbackText.trim()).toBe("Amanda Bloggs is Joe Bloggs' <em>other relation</em>");
+      const playbackText = await page.$eval('.ons-relationships__playback', (element) => element.innerHTML);
+      expect(playbackText.trim()).toBe("Amanda Bloggs is Joe Bloggs' <strong>other relation</strong>");
     });
   });
 });

package/components/reply/_macro.njk

@@ -7,8 +7,11 @@
                 "id": params.textarea.id,
                 "name": params.textarea.name,
                 "label": {
-                    "text": params.textarea.label.text
-                }
+                    "text": params.textarea.label.text,
+                    "description": params.textarea.label.description
+                },
+                "charCheckLimit": params.textarea.charCheckLimit,
+                "rows": params.textarea.rows
             })
         }}
         <div class="ons-grid ons-grid--flex ons-grid--gutterless ons-grid--vertical-center ons-grid--no-wrap@s ons-u-mt-m ons-u-mb-m">

package/components/reply/_macro.spec.js

@@ -10,7 +10,14 @@ const EXAMPLE_TEXTAREA = {
   name: 'reply',
   label: {
     text: 'Reply',
+    description: 'Reply description',
   },
+  charCheckLimit: {
+      limit: 300,
+      charCountSingular: '{x} more character needed',
+      charCountPlural: '{x} more characters needed',
+  },
+  rows: 5,
 };
 
 const EXAMPLE_BUTTON = {
@@ -40,7 +47,6 @@ describe('macro: reply', () => {
     const textareaSpy = faker.spy('textarea');
 
     cheerio.load(faker.renderComponent('reply', EXAMPLE_REPLY));
-
     expect(textareaSpy.occurrences[0]).toEqual(EXAMPLE_TEXTAREA);
   });
 

package/components/section-navigation/_macro.njk

@@ -1,5 +1,6 @@
 {% macro onsSectionNavigation(params) %}
-  <nav class="ons-section-nav{% if params.variants == 'vertical' %} ons-section-nav--vertical{% endif %} {% if params.classes %} {{ params.classes }} {% endif %}"{% if params.id %} id="{{ params.id }}"{% endif %} aria-label="{{ params.ariaLabel | default("Section menu") }}">
+  <nav class="ons-section-nav{% if params.variants == 'vertical' %} ons-section-nav--vertical{% endif %} {% if params.classes %} {{ params.classes }} {% endif %}"{% if params.id %} id="{{ params.id }}"{% endif %} aria-labelledby="{{ params.hiddenTitleId | default("section-menu-nav-title")}}">
+  <h2 class="ons-u-vh" id="{{ params.hiddenTitleId | default("section-menu-nav-title") }}">{{ params.hiddenTitle | default("Pages in this section") }}</h2>
     {% if params.sections %}
       {% for section in params.sections %}
         <div class="ons-section-nav__sub">

package/components/section-navigation/_macro.spec.js

@@ -135,21 +135,10 @@ describe('macro: section-navigation', () => {
     expect($('.ons-section-nav').hasClass('custom-class')).toBe(true);
   });
 
-  it('has the provided `ariaLabel` parameter', () => {
-    const $ = cheerio.load(
-      renderComponent('section-navigation', {
-        ...EXAMPLE_SECTION_NAVIGATION,
-        ariaLabel: 'Section navigation menu',
-      }),
-    );
-
-    expect($('.ons-section-nav').attr('aria-label')).toBe('Section navigation menu');
-  });
-
-  it('assumes a default `ariaLabel` of "Section menu"', () => {
+  it('assumes a default `hiddenTitleId` of "Section menu"', () => {
     const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
 
-    expect($('.ons-section-nav').attr('aria-label')).toBe('Section menu');
+    expect($('.ons-section-nav').attr('aria-labelledby')).toBe('section-menu-nav-title');
   });
 
   describe('navigation items', () => {

package/components/skip-to-content/_macro.njk

@@ -1,3 +1,4 @@
 {% macro onsSkipToContent(params) %}
-    <a class="ons-skip-link" href="{{ params.url }}">{{ params.text }}</a>
+ {% set text = params.text | default('Skip to content') %}
+    <a class="ons-skip-to-content" href="{{ params.url }}">{{ text }}</a>
 {% endmacro %}

package/components/skip-to-content/_macro.spec.js

@@ -26,7 +26,7 @@ describe('macro: skip-to-content', () => {
       }),
     );
 
-    expect($('.ons-skip-link')[0].tagName).toBe('a');
+    expect($('.ons-skip-to-content')[0].tagName).toBe('a');
   });
 
   it('has skip link with the provided `url`', async () => {
@@ -37,7 +37,7 @@ describe('macro: skip-to-content', () => {
       }),
     );
 
-    expect($('.ons-skip-link').attr('href')).toBe('#example-anchor');
+    expect($('.ons-skip-to-content').attr('href')).toBe('#example-anchor');
   });
 
   it('has skip link with the provided `text`', async () => {
@@ -49,9 +49,23 @@ describe('macro: skip-to-content', () => {
     );
 
     expect(
-      $('.ons-skip-link')
+      $('.ons-skip-to-content')
         .text()
         .trim(),
     ).toBe('Skip to the content');
   });
+
+  it('has skip link with the default text if no text provided`', async () => {
+    const $ = cheerio.load(
+      renderComponent('skip-to-content', {
+        url: '#example-anchor',
+      }),
+    );
+
+    expect(
+      $('.ons-skip-to-content')
+        .text()
+        .trim(),
+    ).toBe('Skip to content');
+  });
 });

package/components/skip-to-content/_skip.scss

@@ -1,4 +1,4 @@
-.ons-skip-link {
+.ons-skip-to-content {
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   display: block;

package/components/skip-to-content/skip-to-content.dom.js

@@ -2,7 +2,7 @@ import domready from '../../js/domready';
 import skipToMain from './skip-to-content';
 
 async function initaliseSkipToLink() {
-  const links = [...document.querySelectorAll('.ons-skip-link')];
+  const links = [...document.querySelectorAll('.ons-skip-to-content')];
   if (links.length) {
     links.forEach(link => {
       skipToMain(link);

package/components/skip-to-content/skip-to-content.spec.js

@@ -15,7 +15,7 @@ describe('script: skip-to-content', () => {
   it('sets `tabIndex` of target element to -1', async () => {
     await setTestPage('/test', EXAMPLE_SKIP_TO_LINK_TEMPLATE);
 
-    await page.focus('.ons-skip-link');
+    await page.focus('.ons-skip-to-content');
     await page.keyboard.press('Enter');
 
     const targetTabIndex = await page.$eval('#target-element', el => el.tabIndex);
@@ -25,7 +25,7 @@ describe('script: skip-to-content', () => {
   it('removes outline from target element on navigate', async () => {
     await setTestPage('/test', EXAMPLE_SKIP_TO_LINK_TEMPLATE);
 
-    await page.focus('.ons-skip-link');
+    await page.focus('.ons-skip-to-content');
     await page.keyboard.press('Enter');
 
     const targetOutline = await page.$eval('#target-element', el => el.style.outline);
@@ -35,7 +35,7 @@ describe('script: skip-to-content', () => {
   it('focuses target element on navigate', async () => {
     await setTestPage('/test', EXAMPLE_SKIP_TO_LINK_TEMPLATE);
 
-    await page.focus('.ons-skip-link');
+    await page.focus('.ons-skip-to-content');
     await page.keyboard.press('Enter');
 
     const focusedElementId = await page.evaluate(() => document.activeElement.id);

package/components/summary/_summary.scss

@@ -80,7 +80,7 @@ $hub-row-spacing: 1.3rem;
       left: 0;
       position: absolute;
       text-align: center;
-      &--check .ons-svg-icon {
+      &--check .ons-icon {
         fill: var(--ons-color-leaf-green) !important;
       }
     }

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/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

@@ -13,11 +13,11 @@
         {% 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>
+            <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-vh'>{{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">

package/components/tabs/_macro.spec.js

@@ -112,7 +112,7 @@ describe('macro: tabs', () => {
   it('has expected label text in tab links and visually hidden span in tab 1', () => {
     const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
 
-    expect($('.ons-tab:first').html()).toBe('Tab 1<span class="ons-u-d-no">for Example</span>');
+    expect($('.ons-tab:first').html()).toBe('Tab 1<span class="ons-u-vh">for Example</span>');
     expect(
       $('.ons-tab:last')
         .text()

package/components/tabs/example-tabs-details.njk

@@ -30,6 +30,7 @@
                 {
                     "id": "video-description",
                     "title": 'Description',
+                    "hiddenSpan": 'for Census 2021 promotional TV advert video',
                     "content": '<div class="example-video-block__details">
                         <h3 class="ons-u-d-no@s">Description</h3>
                         <p>The census provides a snapshot of everyone in England & Wales. We help local councils get the funding they need.</p>
@@ -39,6 +40,7 @@
                 {
                     "id": "video-transcript",
                     "title": 'Transcript',
+                    "hiddenSpan": 'for Census 2021 promotional TV advert video',
                     "content": '<div class="example-video-block__details">
                         <h3 class="ons-u-d-no@s">Transcript</h3>
                         <p>I count.</p>
@@ -50,6 +52,7 @@
                 {
                     "id": "video-embed",
                     "title": 'Embed',
+                    "hiddenSpan": 'code for Census 2021 promotional TV advert video',
                     "content": '<h3 class="ons-u-d-no@s">Embed</h3>
                         <pre class="language-html"><code>' ~ '<iframe width="560" height="315" src="https://www.youtube.com/embed/_EGJlvkgbPo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>' | e ~ '</code></pre>'
                 }

package/components/tabs/example-tabs.njk

@@ -8,7 +8,6 @@
                 "id": "ukis",
                 "title": 'UKIS',
                 "showTitle": true,
-                "hiddenSpan": 'for UKIS',
                 "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>

package/components/textarea/example-textarea-error.njk

@@ -8,9 +8,9 @@
             "text": "Please provide some feedback",
             "description": "For example, describe any difficulties you experienced in the use of this service"
         },
-            "error": {
-                "id": "feedback-error",
-                "text": "Enter your feedback"
-            }
+        "error": {
+            "id": "feedback-error",
+            "text": "Enter your feedback"
+        }
     })
 }}

package/components/timeline/_macro.njk

@@ -3,30 +3,26 @@
     {% from "components/list/_macro.njk" import onsList %}
 
     <div class="ons-timeline{{ ' ' + params.classes if params.classes else '' }}">
-
+        {% set titleTag = params.titleTag | default("h2") %}
         {% for item in params.items %}
-        <div class="ons-timeline__item">
-
-            <h2 class="ons-timeline__heading">{{ item.heading }}</h2>
-
-            {% if item.itemsList %}
-
-                {{
-                    onsList({
-                        "variants": 'bare',
-                        "itemsList": item.itemsList
-                    })
-                }}
-
-            {% else %}
-
-                {{ item.content | safe }}
-
-            {% endif %}
-
-        </div>
+            <div class="ons-timeline__item">
+                <{{ titleTag }} class="ons-timeline__heading">{{ item.heading }}</{{ titleTag }}>
+                {% if item.itemsList %}
+                    <div class="ons-timeline__content">
+                        {{
+                            onsList({
+                                "variants": 'bare',
+                                "itemsList": item.itemsList
+                            })
+                        }}
+                    </div>
+                {% elif item.content %}
+                    <div class="ons-timeline__content">
+                        {{ item.content | safe }}
+                    </div>
+                {% endif %}
+            </div>
         {% endfor %}
-
     </div>
 
 {% endmacro %}

package/components/timeline/_macro.spec.js

@@ -63,6 +63,24 @@ describe('macro: timeline', () => {
     expect($secondItem.text()).toContain('Timeline entry 2');
   });
 
+  it('renders a heading based upon titleTag parameter', () => {
+    const EXAMPLE_TIMELINE_WITH_TITLE_TAG = {
+      ...EXAMPLE_TIMELINE,
+      titleTag: 'h3',
+    };
+    const $ = cheerio.load(renderComponent('timeline', EXAMPLE_TIMELINE_WITH_TITLE_TAG));
+    const $firstItem = $('.ons-timeline__item:nth-child(1)');
+    expect($firstItem.html().includes('h3')).toBe(true);
+  });
+
+  it('has a provided ons-timeline__content class, wrapping the content', () => {
+    const $ = cheerio.load(renderComponent('timeline', EXAMPLE_TIMELINE));
+
+    const $content = $('.ons-timeline__content');
+
+    expect($content.length).toBe(3);
+  });
+
   it('has the provided inner item list', () => {
     const faker = templateFaker();
     const listSpy = faker.spy('list');

package/components/video/example-video.njk

@@ -11,4 +11,4 @@
         "title": 'Census 2021 promotional TV advert',
         "linkText": 'Watch “Census 2021 promotional TV advert“ on Youtube'
     })
-}}
+}}

package/components/video/video.js

@@ -22,10 +22,19 @@ export default class Video {
   }
 
   showIframe() {
-    const src = this.iframe.getAttribute('data-src');
+    const src = this.addDNTtoVimeoVideos();
     this.iframe.src = src;
     this.iframe.classList.remove('ons-u-d-no');
     this.component.classList.add('ons-video--hasIframe');
     this.placeholder.classList.add('ons-u-d-no');
   }
+  addDNTtoVimeoVideos() {
+    let src = this.iframe.getAttribute('data-src');
+    if (src.includes('player.vimeo.com/video') && src.includes('?dnt=1') === false) {
+      src += '?dnt=1';
+      return src;
+    } else {
+      return src;
+    }
+  }
 }

package/components/video/video.spec.js

@@ -5,6 +5,11 @@ const EXAMPLE_VIDEO_YOUTUBE = {
   title: 'Census 2021 promotional TV advert',
   linkText: 'Example link text',
 };
+const EXAMPLE_VIDEO_VIMEO = {
+  videoEmbedUrl: 'https://player.vimeo.com/video/838454524?h=24551a3754',
+  title: 'Vimeo Video',
+  linkText: 'Example link text',
+};
 
 const EXAMPLE_APPROVED_COOKIE = JSON.stringify({ campaigns: true }).replace(/"/g, "'");
 
@@ -52,6 +57,18 @@ describe('script: video', () => {
       const hasClass = await page.$eval('.ons-js-video', node => node.classList.contains('ons-video--hasIframe'));
       expect(hasClass).toBe(true);
     }, 10000);
+
+    it('should not add dnt to YouTube videos', async () => {
+      const src = await page.$eval('.ons-js-video-iframe', node => node.getAttribute('src'));
+      expect(src.includes('?dnt=1')).toBe(false);
+    }, 10000);
+
+    it('should add dnt to Vimeo videos', async () => {
+      await setTestPage('/test', renderComponent('video', EXAMPLE_VIDEO_VIMEO));
+
+      const src = await page.$eval('.ons-js-video-iframe', node => node.getAttribute('src'));
+      expect(src.includes('?dnt=1')).toBe(true);
+    }, 10000);
   });
 
   describe('when cookies are accepted via banner', () => {
@@ -78,5 +95,21 @@ describe('script: video', () => {
       const hasClass = await page.$eval('.ons-js-video', node => node.classList.contains('ons-video--hasIframe'));
       expect(hasClass).toBe(true);
     }, 10000);
+    it('should not add dnt to YouTube videos', async () => {
+      const src = await page.$eval('.ons-js-video-iframe', node => node.getAttribute('src'));
+      expect(src.includes('?dnt=1')).toBe(false);
+    }, 10000);
+
+    it('should add dnt to Vimeo videos', async () => {
+      await setTestPage(
+        '/test',
+        `${renderComponent('video', EXAMPLE_VIDEO_VIMEO)}
+        <div class="ons-cookies-banner ons-u-db"><button class="ons-js-accept-cookies">Accept</button></div>`,
+      );
+      await page.click('.ons-js-accept-cookies');
+
+      const src = await page.$eval('.ons-js-video-iframe', node => node.getAttribute('src'));
+      expect(src.includes('?dnt=1')).toBe(true);
+    }, 10000);
   });
 });