@ons/design-system 63.0.0 → 65.0.0

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

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