@ons/design-system 60.0.3 → 61.0.0

package/components/details/details.js

@@ -0,0 +1,66 @@
+export default class Details {
+  constructor(detailsElement) {
+    this.saveState = detailsElement.getAttribute('data-save-state') === 'true';
+    this.open = detailsElement.getAttribute('data-open') === 'true';
+    this.group = detailsElement.getAttribute('data-group');
+
+    // Elements
+    this.details = detailsElement;
+    this.detailsHeader = this.details.querySelector('.ons-js-details-heading');
+
+    // Initialise
+    const detailsId = detailsElement.getAttribute('id');
+
+    if (localStorage.getItem(detailsId) || this.open) {
+      this.setOpen(true);
+      this.details['setAttribute']('open', '');
+    }
+
+    this.detailsHeader.addEventListener('click', this.toggle.bind(this));
+    this.detailsHeader.addEventListener('keydown', this.keyboardInteraction.bind(this));
+  }
+
+  toggle(event) {
+    event.preventDefault();
+    this.setOpen(!this.isOpen);
+  }
+
+  setOpen(open) {
+    if (open !== this.isOpen) {
+      const action = open ? 'Open' : 'Close';
+      const openAttribute = open ? 'set' : 'remove';
+
+      this.isOpen = open;
+      this.details[`${openAttribute}Attribute`]('open', '');
+      this.detailsHeader.setAttribute('data-ga-action', `${action} panel`);
+
+      if (this.onOpen && this.onClose) {
+        if (open) {
+          this.onOpen();
+        } else {
+          this.onClose();
+        }
+      }
+    }
+
+    if (this.saveState === true && open === true) {
+      localStorage.setItem(this.details.getAttribute('id'), true);
+    } else {
+      localStorage.removeItem(this.details.getAttribute('id'));
+    }
+  }
+
+  keyboardInteraction(event) {
+    const keyCode = event.which;
+    switch (keyCode) {
+      // Enter/Space
+      case 13:
+      case 32:
+        event.preventDefault();
+        event.stopPropagation();
+
+        this.toggle(event);
+        break;
+    }
+  }
+}

package/components/details/details.spec.js

@@ -0,0 +1,103 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+const EXAMPLE_DETAILS_BASIC = {
+  id: 'details-id',
+  title: 'Title for details',
+  content: 'Content for details',
+};
+
+describe('script: details', () => {
+  it('begins open when specified', async () => {
+    await setTestPage(
+      '/test',
+      renderComponent('details', {
+        ...EXAMPLE_DETAILS_BASIC,
+        open: true,
+      }),
+    );
+
+    const openAttribute = await page.$eval('.ons-js-details', node => node.open !== null);
+    expect(openAttribute).toBe(true);
+  });
+
+  describe('when the details heading is clicked to open the details', () => {
+    beforeEach(async () => {
+      await setTestPage('/test', renderComponent('details', EXAMPLE_DETAILS_BASIC));
+      await page.click('.ons-js-details-heading');
+    });
+
+    it('sets the `open` attribute', async () => {
+      const openAttribute = await page.$eval('.ons-js-details', node => node.open !== null);
+      expect(openAttribute).toBe(true);
+    });
+
+    it('sets the `ga` attributes', async () => {
+      const gaHeadingAttribute = await page.$eval('.ons-js-details-heading', element => element.getAttribute('data-ga-action'));
+
+      expect(gaHeadingAttribute).toBe('Open panel');
+    });
+  });
+
+  describe('when the details heading is focused', () => {
+    beforeEach(async () => {
+      await setTestPage('/test', renderComponent('details', EXAMPLE_DETAILS_BASIC));
+      await page.focus('.ons-js-details-heading');
+    });
+
+    describe('when the space bar is pressed', () => {
+      beforeEach(async () => {
+        await page.keyboard.press('Space');
+      });
+
+      it('opens the details content', async () => {
+        const openAttribute = await page.$eval('.ons-js-details', node => node.open !== null);
+        expect(openAttribute).toBe(true);
+      });
+    });
+
+    describe('when the Enter key is pressed', () => {
+      beforeEach(async () => {
+        await page.keyboard.press('Enter');
+      });
+
+      it('opens the details content', async () => {
+        const openAttribute = await page.$eval('.ons-js-details', node => node.open !== null);
+        expect(openAttribute).toBe(true);
+      });
+    });
+  });
+
+  describe('when the state is set to save', () => {
+    beforeEach(async () => {
+      await setTestPage(
+        '/test',
+        renderComponent('details', {
+          ...EXAMPLE_DETAILS_BASIC,
+          saveState: true,
+        }),
+      );
+    });
+
+    describe('when the details is opened', () => {
+      beforeEach(async () => {
+        await page.click('.ons-js-details-heading');
+      });
+
+      it('sets state in localStorage', async () => {
+        const localStorage = await page.evaluate(() => localStorage.getItem('details-id'));
+        expect(localStorage).toBe('true');
+      });
+    });
+
+    describe('when the details is closed', () => {
+      beforeEach(async () => {
+        await page.click('.ons-js-details-heading');
+      });
+
+      it('removes state in localStorage', async () => {
+        const localStorage = await page.evaluate(() => localStorage.getItem('details-id'));
+        expect(localStorage).toBe(null);
+      });
+    });
+  });
+});

package/components/hero/_hero.scss

@@ -16,7 +16,7 @@
     min-height: 300px;
     position: relative;
 
-    &--has-collapsible {
+    &--has-details {
       align-items: flex-start; // Prevents undesired shift if not enough content
     }
   }
@@ -59,7 +59,7 @@
         text-decoration-thickness: 2px;
       }
 
-      .ons-collapsible__heading {
+      .ons-details__heading {
         color: inherit;
       }
     }

package/components/question/_macro.njk

@@ -18,8 +18,8 @@
 
     {% if params.definition %}
         {% set questionDefinition %}
-            {% from "components/collapsible/_macro.njk" import onsCollapsible %}
-            {% call onsCollapsible({
+            {% from "components/details/_macro.njk" import onsDetails %}
+            {% call onsDetails({
                 "id": params.definition.id,
                 "classes": 'ons-u-mb-m',
                 "title": params.definition.title
@@ -109,8 +109,8 @@
         {% endif %}
 
         {% if params.justification %}
-            {% from "components/collapsible/_macro.njk" import onsCollapsible %}
-            {% call onsCollapsible({
+            {% from "components/details/_macro.njk" import onsDetails %}
+            {% call onsDetails({
                 "id": params.justification.id,
                 "classes": 'ons-u-mb-m',
                 "title": params.justification.title | default('Why we ask this question')

package/components/question/_macro.spec.js

@@ -163,21 +163,21 @@ describe('macro: question', () => {
   });
 
   describe('mode: with definition', () => {
-    it('outputs the expected collapsible', () => {
+    it('outputs the expected details', () => {
       const faker = templateFaker();
-      const collapsibleSpy = faker.spy('collapsible');
+      const detailsSpy = faker.spy('details');
 
       faker.renderComponent('question', EXAMPLE_QUESTION_DEFINITION);
 
-      expect(collapsibleSpy.occurrences[0]).toHaveProperty('classes', 'ons-u-mb-m');
-      expect(collapsibleSpy.occurrences[0]).toHaveProperty('id', 'definition-id');
-      expect(collapsibleSpy.occurrences[0]).toHaveProperty('title', 'Definition title');
+      expect(detailsSpy.occurrences[0]).toHaveProperty('classes', 'ons-u-mb-m');
+      expect(detailsSpy.occurrences[0]).toHaveProperty('id', 'definition-id');
+      expect(detailsSpy.occurrences[0]).toHaveProperty('title', 'Definition title');
     });
 
-    it('outputs the expected collapsible call content', () => {
+    it('outputs the expected details call content', () => {
       const $ = cheerio.load(renderComponent('question', EXAMPLE_QUESTION_DEFINITION));
 
-      expect($('.ons-collapsible__content > p').text()).toBe('Definition content');
+      expect($('.ons-details__content > p').text()).toBe('Definition content');
     });
   });
 
@@ -227,21 +227,21 @@ describe('macro: question', () => {
   });
 
   describe('mode: with justification', () => {
-    it('outputs the expected collapsible', () => {
+    it('outputs the expected details', () => {
       const faker = templateFaker();
-      const collapsibleSpy = faker.spy('collapsible');
+      const detailsSpy = faker.spy('details');
 
       faker.renderComponent('question', EXAMPLE_QUESTION_JUSTIFICATION);
 
-      expect(collapsibleSpy.occurrences[0]).toHaveProperty('classes', 'ons-u-mb-m');
-      expect(collapsibleSpy.occurrences[0]).toHaveProperty('id', 'justification-id');
-      expect(collapsibleSpy.occurrences[0]).toHaveProperty('title', 'Justification title');
+      expect(detailsSpy.occurrences[0]).toHaveProperty('classes', 'ons-u-mb-m');
+      expect(detailsSpy.occurrences[0]).toHaveProperty('id', 'justification-id');
+      expect(detailsSpy.occurrences[0]).toHaveProperty('title', 'Justification title');
     });
 
-    it('outputs the expected collapsible call content', () => {
+    it('outputs the expected details call content', () => {
       const $ = cheerio.load(renderComponent('question', EXAMPLE_QUESTION_JUSTIFICATION));
 
-      expect($('.ons-collapsible__content > p').text()).toBe('Justification content');
+      expect($('.ons-details__content > p').text()).toBe('Justification content');
     });
   });
 

package/components/summary/_macro.njk

@@ -112,7 +112,7 @@
                     {% endif %}
 
                     {% if group.summaryLink %}
-                        <div class="ons-summary__link{% if group.placeholderText or group.rows %} ons-u-pt-s{% endif %}{% if group.placeholderText is not defined and group.rows | length > 1 %} ons-u-bt{% endif %}">
+                        <div class="ons-summary__link{% if group.placeholderText or group.rows %} ons-u-pt-s{% endif %}{% if group.placeholderText is not defined and group.rows | length > 1 %} ons-u-bt{% endif %}{% if not group.last %} ons-u-mb-xl{% endif %}">
                             <a {% if group.summaryLink.attributes %}{% for attribute, value in (group.summaryLink.attributes.items() if group.summaryLink.attributes is mapping and group.summaryLink.attributes.items else group.summaryLink.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %} href="{{ group.summaryLink.url }}">{{ group.summaryLink.text }}</a>
                         </div>
                     {% endif %}

package/components/summary/_macro.spec.js

@@ -115,7 +115,6 @@ const EXAMPLE_SUMMARY_GROUPS = {
     {
       id: 'group-id-1',
       groupTitle: 'group title',
-      headers: ['Header 1', 'Header 2', 'Header 3'],
       ...EXAMPLE_SUMMARY_ROWS,
     },
   ],
@@ -136,6 +135,123 @@ const EXAMPLE_SUMMARY_GROUPS_NO_ROWS = {
   ],
 };
 
+const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
+  rows: [
+    {
+      rowItems: [
+        {
+          rowTitle: 'row item 1',
+          valueList: [
+            {
+              text: 'list item 1',
+            },
+          ],
+          actions: [
+            {
+              text: 'Change',
+              ariaLabel: 'Change list item',
+              url: '#0',
+            },
+            {
+              text: 'Remove',
+              ariaLabel: 'Remove list item',
+              url: '#0',
+            },
+          ],
+        },
+        {
+          rowTitle: 'row item 2',
+          valueList: [
+            {
+              text: 'list item 2',
+            },
+          ],
+          actions: [
+            {
+              text: 'Change',
+              ariaLabel: 'Remove list item',
+              url: '#0',
+            },
+          ],
+        },
+        {
+          rowTitle: 'row item 3',
+          valueList: [
+            {
+              text: 'list item 3',
+            },
+          ],
+          actions: [
+            {
+              text: 'Change',
+              ariaLabel: 'Change list item',
+              url: '#0',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      rowItems: [
+        {
+          rowTitle: 'row item 4',
+          valueList: [
+            {
+              text: 'list item 4',
+            },
+          ],
+          actions: [
+            {
+              text: 'Change',
+              ariaLabel: 'Change answer',
+              url: '#0',
+            },
+            {
+              text: 'Remove',
+              ariaLabel: 'Change list item',
+              url: '#0',
+            },
+          ],
+        },
+        {
+          rowTitle: 'row item 5',
+          valueList: [
+            {
+              text: 'list item 5',
+            },
+          ],
+          actions: [
+            {
+              text: 'Change',
+              ariaLabel: 'Change list item',
+              url: '#0',
+            },
+          ],
+        },
+        {
+          rowTitle: 'row item 6',
+          valueList: [
+            {
+              text: 'list item 6',
+            },
+          ],
+          actions: [
+            {
+              text: 'Change',
+              ariaLabel: 'Change list item',
+              url: '#0',
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  summaryLink: {
+    text: 'Summary link',
+    url: '#0',
+  },
+};
+
 const EXAMPLE_SUMMARY_BASIC = {
   summaries: [
     {
@@ -162,6 +278,31 @@ const EXAMPLE_SUMMARY_WITH_NO_ROWS = {
   ],
 };
 
+const EXAMPLE_SUMMARY_MULTIPLE_GROUPS = {
+  summaries: [
+    {
+      summaryTitle: 'summary title',
+      groups: [
+        {
+          id: 'group-id-1',
+          groupTitle: 'group title',
+          ...EXAMPLE_SUMMARY_ROWS,
+        },
+        {
+          id: 'group-id-2',
+          groupTitle: 'group title',
+          ...EXAMPLE_SUMMARY_HOUSEHOLD_GROUP,
+        },
+        {
+          id: 'group-id-3',
+          groupTitle: 'group title',
+          ...EXAMPLE_SUMMARY_ROWS,
+        },
+      ],
+    },
+  ],
+};
+
 describe('macro: summary', () => {
   describe('mode: general', () => {
     it('passes jest-axe checks', async () => {
@@ -200,6 +341,12 @@ describe('macro: summary', () => {
 
         expect($('.ons-summary__group-title').text()).toBe('group title');
       });
+
+      it('has larger margin between groups if the top one is a household style summary', () => {
+        const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_MULTIPLE_GROUPS));
+
+        expect($('.ons-summary__group:nth-last-of-type(2) .ons-summary__link').hasClass('ons-u-mb-xl')).toBe(true);
+      });
     });
 
     describe('part: row', () => {

package/components/summary/_summary.scss

@@ -178,7 +178,7 @@ $hub-row-spacing: 1.3rem;
     &__item-title,
     &__values,
     &__actions {
-      flex: 2;
+      flex: 4;
       padding-top: $summary-row-spacing;
       vertical-align: top;
 
@@ -192,9 +192,13 @@ $hub-row-spacing: 1.3rem;
       justify-content: right;
     }
 
+    &__button {
+      align-self: flex-start;
+    }
+
     &__item-title,
     &__values {
-      flex: 6.19;
+      flex: 7.3;
     }
 
     &__item-title--2 {

package/components/table/_macro.spec.js

@@ -356,14 +356,16 @@ describe('macro: table', () => {
 
         faker.renderComponent('table', params);
 
-        expect(buttonSpy.occurrences).toEqual([{
-          text: 'Submit form',
-          id: 'submit-form-button',
-          classes: 'custom-button-class',
-          url: 'https://example.com/link',
-          value: '42', // `| safe` filter is used in macro which makes a string
-          name: 'submit-form-button-name',
-        }]);
+        expect(buttonSpy.occurrences).toEqual([
+          {
+            text: 'Submit form',
+            id: 'submit-form-button',
+            classes: 'custom-button-class',
+            url: 'https://example.com/link',
+            value: '42', // `| safe` filter is used in macro which makes a string
+            name: 'submit-form-button-name',
+          },
+        ]);
       });
     });
   });

package/components/video/_macro.njk

@@ -1,7 +1,21 @@
+{% from "components/external-link/_macro.njk" import onsExternalLink %}
 {%- macro onsVideo(params) -%}
-    <div class="ons-video">
-        {% if params.videoEmbedUrl %}
-            <iframe title="{{ params.title }}" class="ons-video__iframe" src="{{ params.videoEmbedUrl }}" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-        {% endif %}
+
+    {% set linkContents %}
+      {% if params.image.smallSrc %}
+        <img class="ons-video__img ons-u-mb-xs" {% if params.image.largeSrc %} srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %} src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}" loading="lazy">
+      {% endif %}            
+      <span class="ons-video__link-text ons-u-mt-xs">{{ params.linkText }}</span>
+    {% endset %}
+
+    <div class="ons-video ons-js-video">
+      {{
+          onsExternalLink({
+              "url": params.videoLinkURL,
+              "classes": "ons-video__link ons-js-video-placeholder ons-u-db",
+              "linkText": linkContents
+          })
+      }}
+        <iframe data-src="{{ params.videoEmbedUrl }}" title="{{ params.title }}" class="ons-video__iframe ons-js-video-iframe ons-u-d-no" src="about:blank" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
     </div>
 {%- endmacro -%}

package/components/video/_macro.spec.js

@@ -7,54 +7,67 @@ import { renderComponent } from '../../tests/helpers/rendering';
 
 const EXAMPLE_VIDEO_YOUTUBE = {
   videoEmbedUrl: 'https://www.youtube.com/embed/_EGJlvkgbPo',
+  videoLinkURL: 'https://www.youtube.com/watch?v=_EGJlvkgbPo',
   title: 'Census 2021 promotional TV advert',
-};
-
-const EXAMPLE_VIDEO_VIMEO = {
-  videoEmbedUrl: 'https://player.vimeo.com/video/508878572',
-  title: 'A message from National Statistician Ian Diamond for National Apprenticeship Week 2021',
+  linkText: 'Example link text',
+  image: {
+    smallSrc: 'example-small.png',
+    largeSrc: 'example-large.png',
+    alt: 'Example alt text',
+  },
 };
 
 describe('macro: video', () => {
-  describe('mode: YouTube', () => {
-    it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('outputs an `img` element with the expected `srcset`', () => {
+    const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
+
+    expect($('.ons-video__img').attr('srcset')).toBe('example-small.png 1x, example-large.png 2x');
+  });
+
+  it('outputs an `img` element with the expected `src`', () => {
+    const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
 
-      const results = await axe($.html());
-      expect(results).toHaveNoViolations();
-    });
+    expect($('.ons-video__img').attr('src')).toBe('example-small.png');
+  });
 
-    it('outputs an <iframe> element with the provided `title`', () => {
-      const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
+  it('outputs an `img` element with the expected alt text', () => {
+    const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
 
-      expect($('iframe').attr('title')).toBe('Census 2021 promotional TV advert');
-    });
+    expect($('.ons-video__img').attr('alt')).toBe('Example alt text');
+  });
 
-    it('outputs an <iframe> element with the provided `videoEmbedUrl`', () => {
-      const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
+  it('outputs the provided link text', () => {
+    const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
 
-      expect($('iframe').attr('src')).toBe('https://www.youtube.com/embed/_EGJlvkgbPo');
-    });
+    expect(
+      $('.ons-video__link-text')
+        .text()
+        .trim(),
+    ).toBe('Example link text');
   });
 
-  describe('mode: Vimeo', () => {
-    it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_VIMEO));
+  it('outputs a hyperlink with the provided `url`', () => {
+    const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
 
-      const results = await axe($.html());
-      expect(results).toHaveNoViolations();
-    });
+    expect($('.ons-video__link').attr('href')).toBe('https://www.youtube.com/watch?v=_EGJlvkgbPo');
+  });
 
-    it('outputs an <iframe> element with the provided `title`', () => {
-      const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_VIMEO));
+  it('outputs an <iframe> element with the provided `title`', () => {
+    const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
 
-      expect($('iframe').attr('title')).toBe('A message from National Statistician Ian Diamond for National Apprenticeship Week 2021');
-    });
+    expect($('iframe').attr('title')).toBe('Census 2021 promotional TV advert');
+  });
 
-    it('outputs an <iframe> element with the provided `videoEmbedUrl`', () => {
-      const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_VIMEO));
+  it('outputs an <iframe> element with the provided `videoEmbedUrl` data attribute', () => {
+    const $ = cheerio.load(renderComponent('video', EXAMPLE_VIDEO_YOUTUBE));
 
-      expect($('iframe').attr('src')).toBe('https://player.vimeo.com/video/508878572');
-    });
+    expect($('iframe').attr('data-src')).toBe('https://www.youtube.com/embed/_EGJlvkgbPo');
   });
 });

package/components/video/_video.scss

@@ -12,4 +12,8 @@
     top: 0;
     width: 100%;
   }
+
+  &__img {
+    width: 100%;
+  }
 }

package/components/video/video.dom.js

@@ -0,0 +1,13 @@
+import domready from '../../js/domready';
+
+async function video() {
+  const videos = [...document.querySelectorAll('.ons-js-video')];
+
+  if (videos.length) {
+    const Video = (await import('./video')).default;
+
+    videos.forEach(component => new Video(component));
+  }
+}
+
+domready(video);