@ons/design-system 60.0.3 → 61.0.1

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/modal/modal.js

@@ -1,4 +1,5 @@
 import dialogPolyfill from 'dialog-polyfill';
+import initAnalytics from '../../js/analytics';
 
 const overLayClass = 'ons-modal-overlay';
 const ie11Class = 'ons-modal-ie11';
@@ -8,7 +9,7 @@ export default class Modal {
     this.component = component;
     this.launcher = document.querySelector(`[data-modal-id=${component.id}]`);
     this.closeButton = component.querySelector('.ons-js-modal-btn');
-    this.setGaAttributes = component.getAttribute('data-enable-ga');
+    this.setGAAttributes = component.getAttribute('data-enable-ga');
     this.lastFocusedEl = null;
     this.dialogCSSSupported = true;
     this.modalType = this.component.classList.contains('ons-js-timeout-modal') ? 'Timeout' : 'Generic';
@@ -33,9 +34,10 @@ export default class Modal {
     if (this.modalType !== 'Timeout') {
       window.addEventListener('keydown', this.escToClose.bind(this));
     }
-    this.component.setAttribute('data-ga-action', `Modal initialised`);
-    this.component.setAttribute('data-ga-label', `${this.modalType} modal initialised`);
-    this.component.setAttribute('data-ga-category', `${this.modalType} modal`);
+
+    if (this.setGAAttributes) {
+      this.component.setAttribute('data-ga', `visible`);
+    }
   }
 
   dialogSupported() {
@@ -71,13 +73,15 @@ export default class Modal {
         this.component.showModal();
       }
 
-      if (this.setGaAttributes) {
+      if (this.setGAAttributes) {
         if (event) {
           this.component.setAttribute('data-ga-action', `Modal opened by ${event.type} event`);
         } else {
           this.component.setAttribute('data-ga-action', 'Modal opened by timed event');
         }
         this.component.setAttribute('data-ga-label', `${this.modalType} modal opened`);
+        this.component.setAttribute('data-ga-category', `${this.modalType} modal`);
+        initAnalytics();
       }
     }
   }
@@ -116,13 +120,15 @@ export default class Modal {
       this.component.close();
       this.setFocusOnLastFocusedEl(this.lastFocusedEl);
 
-      if (this.setGaAttributes) {
+      if (this.setGAAttributes) {
         if (event) {
           this.component.setAttribute('data-ga-action', `Modal closed by ${event.type} event`);
         } else {
           this.component.setAttribute('data-ga-action', 'Modal closed by timed event');
         }
         this.component.setAttribute('data-ga-label', `${this.modalType} modal closed`);
+        this.component.setAttribute('data-ga-category', `${this.modalType} modal`);
+        initAnalytics();
       }
     }
   }

package/components/modal/modal.spec.js

@@ -82,17 +82,6 @@ describe('script: modal', () => {
       await setTestPage('/test', template);
     });
 
-    describe('when the page has been loaded but the modal has not been opened yet', () => {
-      it('has the correct attributes set on the modal', async () => {
-        const gaLabel = await page.$eval('.ons-modal', node => node.getAttribute('data-ga-label'));
-        const gaAction = await page.$eval('.ons-modal', node => node.getAttribute('data-ga-action'));
-        const gaCategory = await page.$eval('.ons-modal', node => node.getAttribute('data-ga-category'));
-        expect(gaLabel).toBe('Generic modal initialised');
-        expect(gaAction).toBe('Modal initialised');
-        expect(gaCategory).toBe('Generic modal');
-      });
-    });
-
     describe('when the modal is launched by a click event', () => {
       beforeEach(async () => {
         await page.focus('#launcher');

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/timeout-modal/_macro.njk

@@ -1,26 +1,25 @@
 {% from "components/modal/_macro.njk" import onsModal %}
 {% macro onsTimeoutModal(params) %}
     {% call onsModal({
-            "title": params.title,
-            "btnText": params.btnText,
-            "classes": "ons-js-timeout-modal",
-            "enableGA": params.enableGA,
-            "attributes": {
-                "data-redirect-url": params.redirectUrl,
-                "data-server-session-expires-at": params.sessionExpiresAt,
-                "data-show-modal-time": params.showModalTimeInSeconds,
-                "data-server-session-expiry-endpoint": params.serverSessionExpiryEndpoint,
-                "data-countdown-text": params.countdownText,
-                "data-countdown-expired-text": params.countdownExpiredText,
-                "data-minutes-text-singular": params.minutesTextSingular,
-                "data-minutes-text-plural": params.minutesTextPlural,
-                "data-seconds-text-singular": params.secondsTextSingular,
-                "data-seconds-text-plural": params.secondsTextPlural,
-                "data-full-stop": params.endWithFullStop,
-                "aria-describedby": "timeout-time-remaining"
-            }
-        })
-    %}
+        "title": params.title,
+        "btnText": params.btnText,
+        "classes": "ons-js-timeout-modal",
+        "enableGA": params.enableGA,
+        "attributes": {
+            "data-redirect-url": params.redirectUrl,
+            "data-server-session-expires-at": params.sessionExpiresAt,
+            "data-show-modal-time": params.showModalTimeInSeconds,
+            "data-server-session-expiry-endpoint": params.serverSessionExpiryEndpoint,
+            "data-countdown-text": params.countdownText,
+            "data-countdown-expired-text": params.countdownExpiredText,
+            "data-minutes-text-singular": params.minutesTextSingular,
+            "data-minutes-text-plural": params.minutesTextPlural,
+            "data-seconds-text-singular": params.secondsTextSingular,
+            "data-seconds-text-plural": params.secondsTextPlural,
+            "data-full-stop": params.endWithFullStop,
+            "aria-describedby": "timeout-time-remaining"
+        }
+    }) %}
         <p>{{ params.textFirstLine }}</p>
         <p class="ons-js-timeout-timer" aria-hidden="true" aria-relevant="additions"></p>
         <p class="ons-js-timeout-timer-acc ons-u-vh" role="status" id="timeout-time-remaining"></p>