@ons/design-system 64.0.0 → 65.0.0

package/components/panel/_panel.scss

@@ -69,42 +69,42 @@
       margin-bottom: 0;
     }
 
-    &.ons-svg-icon-margin--xxxl {
+    &.ons-icon-margin--xxxl {
       padding-left: 2.7rem !important;
 
       @include mq(m) {
         padding-left: 3.5rem !important;
       }
     }
-    &.ons-svg-icon-margin--xxl {
+    &.ons-icon-margin--xxl {
       padding-left: 2.45rem !important;
 
       @include mq(m) {
         padding-left: 2.9rem !important;
       }
     }
-    &.ons-svg-icon-margin--xl {
+    &.ons-icon-margin--xl {
       padding-left: 2.35rem !important;
 
       @include mq(m) {
         padding-left: 2.55rem !important;
       }
     }
-    &.ons-svg-icon-margin--l {
+    &.ons-icon-margin--l {
       padding-left: 2.25rem !important;
 
       @include mq(m) {
         padding-left: 2.35rem !important;
       }
     }
-    &.ons-svg-icon-margin--m {
+    &.ons-icon-margin--m {
       padding-left: 2.05rem !important;
 
       @include mq(m) {
         padding-left: 2.2rem !important;
       }
     }
-    &.ons-svg-icon-margin--s {
+    &.ons-icon-margin--s {
       padding-left: 1.7rem !important;
     }
   }
@@ -216,7 +216,7 @@
     &__icon {
       left: 0;
       padding-left: 1rem;
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-success) !important;
         margin-top: -15% !important;
       }

package/components/password/_macro.njk

@@ -24,7 +24,7 @@
                 "inputClasses": "ons-js-password-toggle",
                 "name": "show-password",
                 "label": {
-                    "text": params.showPasswordText
+                    "text": params.showPasswordText | default("Show password")
                 }
             })
         }}

package/components/password/example-password.njk

@@ -5,7 +5,6 @@
         "id": "password",
         "label": {
             "text": "Password"
-        },
-        "showPasswordText": "Show password"
+        }
     })
 }}

package/components/quote/_quote.scss

@@ -17,7 +17,7 @@
     position: relative;
   }
 
-  .ons-svg-icon {
+  .ons-icon {
     fill: var(--ons-color-grey-75) !important;
     height: 1.85rem;
     left: 0;

package/components/radios/_macro.njk

@@ -2,7 +2,7 @@
     {% from "components/fieldset/_macro.njk" import onsFieldset %}
     {% from "components/button/_macro.njk" import onsButton %}
     {% from "components/label/_macro.njk" import onsLabel %}
-
+    
     {% call onsFieldset({
         "id": params.id,
         "classes": params.classes,

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/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);
   });
 });