@ons/design-system 66.0.2 → 67.0.1

package/README.md

@@ -130,11 +130,12 @@ Checkout the branch locally and run:
 
 `yarn test-visual:approve` - This will approve the failures/diff caught by the tests.
 
-`yarn test-visual:reference` - This will update the reference images locally on your machine.
 
 `git lfs push --all origin` - First commit the files in the normal way then run the command. This will push the new reference images to Git LFS.
 
-You can then commit and push your changes. The test images that would have been created when you ran `yest test-visual` are gitignored and the new references images will be pushed to Git LFS.
+You can then commit and push the updated references and your changes to your branch. The test images that would have been created when you ran `yarn test-visual` are gitignored and the new references images will be pushed to Git LFS.
+
+If your local tests are failing but you have approved them, run `yarn test-visual:reference`. This will update the reference images locally on your machine.
 
 ## Build
 

package/components/accordion/_macro.spec.js

@@ -57,10 +57,7 @@ describe('macro: accordion', () => {
     it('has provided title text', () => {
       const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
 
-      const titleText = $('.ons-details__title')
-        .first()
-        .text()
-        .trim();
+      const titleText = $('.ons-details__title').first().text().trim();
       expect(titleText).toBe('Title for item 1');
     });
 
@@ -84,10 +81,7 @@ describe('macro: accordion', () => {
     it('has provided content text', () => {
       const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
 
-      const titleText = $('.ons-details__content')
-        .first()
-        .text()
-        .trim();
+      const titleText = $('.ons-details__content').first().text().trim();
       expect(titleText).toBe('Content for item 1');
     });
 

package/components/accordion/accordion.dom.js

@@ -8,9 +8,9 @@ async function initialiseAccordions() {
 
     const Details = (await import('../details/details')).default;
     const Accordion = (await import('./accordion')).default;
-    const detailsEls = detailsComponents.map(element => new Details(element));
+    const detailsEls = detailsComponents.map((element) => new Details(element));
 
-    toggleAllButtons.forEach(button => {
+    toggleAllButtons.forEach((button) => {
       new Accordion(button, detailsEls);
     });
   }

package/components/accordion/accordion.spec.js

@@ -39,10 +39,11 @@ describe('script: accordion', () => {
       }),
     );
 
-    const openElements = await page.$$eval('.ons-js-details', nodes => nodes.filter(node => node.open));
-    expect(openElements[0]).not.toBe(undefined);
-    expect(openElements[1]).not.toBe(undefined);
-    expect(openElements[2]).not.toBe(undefined);
+    const detailsElementStates = await page.$$eval('.ons-js-details', (nodes) =>
+      nodes.map((node) => node.classList.contains('ons-details--open')),
+    );
+
+    expect(detailsElementStates).toEqual([true, true, true]);
   });
 
   it('sets toggle all button label to "Hide all" when open is specified', async () => {
@@ -54,7 +55,7 @@ describe('script: accordion', () => {
       }),
     );
 
-    const buttonText = await page.$eval('button[data-test-trigger]', element => element.innerText);
+    const buttonText = await page.$eval('button[data-test-trigger]', (element) => element.innerText);
     expect(buttonText.trim()).toBe('Close all');
   });
 
@@ -67,7 +68,7 @@ describe('script: accordion', () => {
       }),
     );
 
-    const ariaExpanded = await page.$eval('button[data-test-trigger]', element => element.getAttribute('aria-expanded'));
+    const ariaExpanded = await page.$eval('button[data-test-trigger]', (element) => element.getAttribute('aria-expanded'));
     expect(ariaExpanded).toBe('true');
   });
 
@@ -76,10 +77,11 @@ describe('script: accordion', () => {
 
     await page.click('button[data-test-trigger]');
 
-    const openElements = await page.$$eval('.ons-js-details', nodes => nodes.filter(node => node.open));
-    expect(openElements[0]).not.toBe(undefined);
-    expect(openElements[1]).not.toBe(undefined);
-    expect(openElements[2]).not.toBe(undefined);
+    const detailsElementStates = await page.$$eval('.ons-js-details', (nodes) =>
+      nodes.map((node) => node.classList.contains('ons-details--open')),
+    );
+
+    expect(detailsElementStates).toEqual([true, true, true]);
   });
 
   it('closes all items when accordion `allbutton` is clicked twice', async () => {
@@ -88,23 +90,24 @@ describe('script: accordion', () => {
     await page.click('button[data-test-trigger]');
     await page.click('button[data-test-trigger]');
 
-    const openElements = await page.$$eval('.ons-js-details', nodes => nodes.filter(node => node.open));
-    expect(openElements[0]).toBe(undefined);
-    expect(openElements[1]).toBe(undefined);
-    expect(openElements[2]).toBe(undefined);
+    const detailsElementStates = await page.$$eval('.ons-js-details', (nodes) =>
+      nodes.map((node) => node.classList.contains('ons-details--open')),
+    );
+
+    expect(detailsElementStates).toEqual([false, false, false]);
   });
 
   it('starts with the toggle all button labelled as "Open all"', async () => {
     await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
 
-    const buttonText = await page.$eval('button[data-test-trigger]', element => element.innerText);
+    const buttonText = await page.$eval('button[data-test-trigger]', (element) => element.innerText);
     expect(buttonText.trim()).toBe('Open all');
   });
 
   it('starts with the toggle all button aria-expanded set to false', async () => {
     await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
 
-    const ariaExpanded = await page.$eval('button[data-test-trigger]', element => element.getAttribute('aria-expanded'));
+    const ariaExpanded = await page.$eval('button[data-test-trigger]', (element) => element.getAttribute('aria-expanded'));
     expect(ariaExpanded).toBe('false');
   });
 
@@ -113,7 +116,7 @@ describe('script: accordion', () => {
 
     await page.click('button[data-test-trigger]');
 
-    const buttonText = await page.$eval('button[data-test-trigger]', element => element.innerText);
+    const buttonText = await page.$eval('button[data-test-trigger]', (element) => element.innerText);
     expect(buttonText.trim()).toBe('Close all');
   });
 
@@ -122,7 +125,7 @@ describe('script: accordion', () => {
 
     await page.click('button[data-test-trigger]');
 
-    const ariaExpanded = await page.$eval('button[data-test-trigger]', element => element.getAttribute('aria-expanded'));
+    const ariaExpanded = await page.$eval('button[data-test-trigger]', (element) => element.getAttribute('aria-expanded'));
     expect(ariaExpanded).toBe('true');
   });
 
@@ -133,7 +136,7 @@ describe('script: accordion', () => {
     await page.click('#example-accordion-2 .ons-details__heading');
     await page.click('#example-accordion-3 .ons-details__heading');
 
-    const buttonText = await page.$eval('button[data-test-trigger]', element => element.innerText);
+    const buttonText = await page.$eval('button[data-test-trigger]', (element) => element.innerText);
     expect(buttonText.trim()).toBe('Close all');
   });
 });

package/components/accordion/example-accordion-open.njk

@@ -62,7 +62,7 @@
                         "text": "Areas (0)"
                     },
                     "value": "areas"
-                }       
+                }
             ]
         })
     }}
@@ -98,14 +98,14 @@
                         "text": "Disability (67)"
                     },
                     "value": "disability"
-                }       
+                }
             ]
         })
     }}
 {% endset %}
 
 <div class="ons-grid">
-    <div class="ons-grid__col ons-col-3@xs">
+    <div class="ons-grid__col ons-col-4@m">
         {{
             onsAccordion({
                 "id": "accordion",

package/components/card/_card.scss

@@ -11,7 +11,7 @@
     & > .ons-card__title {
       margin-bottom: 0;
     }
-  } 
+  }
 
   &__link:hover {
     text-decoration-thickness: 3px;

package/components/checkboxes/_macro.njk

@@ -7,7 +7,7 @@
     {% set fields %}
     {% if params.checkboxesLabel is defined %}
         <p class="ons-checkboxes__label{{ " " + params.checkboxesLabelClasses if params.checkboxesLabelClasses }}">{{ params.checkboxesLabel }}</p>
-    {% endif %}    
+    {% endif %}
         {% set hasOther = false %}
         {% for checkbox in params.checkboxes %}
             {% if checkbox.other %}

package/components/checkboxes/example-checkboxes-with-revealed-checkboxes-expanded.njk

@@ -82,7 +82,7 @@
                         "text": "Areas (0)"
                     },
                     "value": "areas"
-                }       
+                }
             ]
         })
     }}

package/components/checkboxes/example-checkboxes-with-revealed-checkboxes.njk

@@ -80,7 +80,7 @@
                         "text": "Areas (0)"
                     },
                     "value": "areas"
-                }       
+                }
             ]
         })
     }}

package/components/cookies-banner/_macro.njk

@@ -28,7 +28,7 @@
         {% set acceptedText = 'You have accepted all additional cookies.' %}
         {% set rejectedText = 'You have rejected all additional cookies.' %}
         {% set confirmationButtonText = 'Hide' %}
-        {% set contextSuffix = 'this message' %}
+        {% set contextSuffix = 'cookie message' %}
         {% set beforeLinkPreferencesURL = 'You can' %}
         {% set afterLinkPreferencesURL = 'change your cookie preferences</a> at any time.' %}
         {% set beforeLinkStatementText = '<p>Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.</p><p>We would like to set' %}

package/components/cookies-banner/_macro.spec.js

@@ -215,7 +215,7 @@ describe('macro: cookies-banner', () => {
 
         faker.renderComponent('cookies-banner', {});
 
-        expect(buttonSpy.occurrences[2].buttonContext).toBe('this message');
+        expect(buttonSpy.occurrences[2].buttonContext).toBe('cookie message');
       });
 
       it('has `container--wide` class when `wide` is true', () => {

package/components/details/_details.scss

@@ -1,75 +1,81 @@
 $details-caret-width: 1.5rem;
 
 .ons-details {
-  &__heading {
-    color: var(--ons-color-text-link);
-    cursor: pointer;
-    display: inline-block;
-    outline: none;
-    padding: 0 0 0 $details-caret-width;
-    pointer-events: initial;
-    position: relative;
-
-    &::marker,
-    &::-webkit-details-marker {
-      display: none;
-    }
-
-    &:focus {
-      .ons-details__title {
-        @extend %a-focus;
-        // extend details focus background behind caret
-        margin-left: -$details-caret-width;
-        padding-left: $details-caret-width;
-      }
-      .ons-details__icon .ons-icon {
-        fill: var(--ons-color-text-link-focus);
+  &--initialised & {
+    &__heading {
+      color: var(--ons-color-text-link);
+      cursor: pointer;
+      display: inline-block;
+      outline: none;
+      padding: 0 0 0 $details-caret-width;
+      pointer-events: initial;
+      position: relative;
+
+      &::marker,
+      &::-webkit-details-marker {
+        display: none;
       }
-    }
 
-    &:hover:not(:focus) {
-      color: var(--ons-color-text-link-hover);
-      .ons-details__icon {
-        fill: var(--ons-color-text-link-hover);
+      &:focus {
+        .ons-details__title {
+          @extend %a-focus;
+          // extend details focus background behind caret
+          margin-left: -$details-caret-width;
+          padding-left: $details-caret-width;
+        }
+        .ons-details__icon .ons-icon {
+          fill: var(--ons-color-text-link-focus);
+        }
       }
-      .ons-details__title {
-        text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
+
+      &:hover:not(:focus) {
+        color: var(--ons-color-text-link-hover);
+        .ons-details__icon {
+          fill: var(--ons-color-text-link-hover);
+        }
+        .ons-details__title {
+          text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
+        }
       }
     }
-  }
 
-  &__icon {
-    display: inline-block;
-    fill: var(--ons-color-text-link);
-    height: $details-caret-width;
-    left: -0.15rem;
-    position: absolute;
-    top: -0.2rem;
-    width: $details-caret-width;
-  }
+    &__icon {
+      display: inline-block;
+      fill: var(--ons-color-text-link);
+      height: $details-caret-width;
+      left: -0.15rem;
+      position: absolute;
+      top: -0.2rem;
+      width: $details-caret-width;
+    }
 
-  &__title {
-    display: inline-block;
-    font-size: 1rem;
-    font-weight: $font-weight-bold;
-    margin-bottom: 0;
-    text-underline-position: under;
-    transform: translateY(-1px);
-  }
+    &__content {
+      display: none;
+    }
 
-  &__content {
-    border-left: 4px solid var(--ons-color-borders-indent);
-    display: block;
-    margin: 1rem 0 0;
-    padding: 0 0 0 1.3em;
+    &__title {
+      display: inline-block;
+      font-size: 1rem;
+      font-weight: $font-weight-bold;
+      margin-bottom: 0;
+      text-underline-position: under;
+      transform: translateY(-1px);
+    }
   }
 
-  &[open] & {
+  &--open & {
     &__icon {
       left: -0.1rem;
       top: 0.2rem;
       transform: rotate(90deg);
     }
+
+    &__content {
+      border-left: 4px solid var(--ons-color-borders-indent);
+      display: block;
+      margin: 1rem 0 0;
+      padding: 0 0 0 1.3em;
+    }
   }
 
   &--accordion & {
@@ -110,12 +116,15 @@ $details-caret-width: 1.5rem;
       padding: 0;
     }
   }
-}
 
-.ons-details--accordion {
-  &[open] {
+  &--accordion.ons-details--open {
     .ons-details__icon {
+      position: absolute;
       top: 1.2rem;
     }
   }
+
+  &__icon {
+    display: none;
+  }
 }

package/components/details/_macro.njk

@@ -1,5 +1,5 @@
 {% macro onsDetails(params) %}
-    <details
+    <div
         id="{{ params.id }}"
         class="ons-details ons-js-details{% if params.isAccordion %} ons-details--accordion{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}"
         {% if params.group %} data-group="{{ params.group }}"{% endif %}
@@ -7,8 +7,8 @@
         {% if params.saveState %} data-save-state="true"{% endif %}
         {% if params.open %} data-open="true"{% endif %}
     >
-        <summary
-            class="ons-details__heading ons-js-details-heading"
+        <div
+            class="ons-details__heading ons-js-details-heading" role="button"
             {% if params.headingAttributes %}{% for attribute, value in (params.headingAttributes.items() if params.headingAttributes is mapping and params.headingAttributes.items else params.headingAttributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
         >
                 {% set titleTag = params.titleTag | default("h2") %}
@@ -20,11 +20,11 @@
                             "iconType": "chevron"
                         })
                     }}</span>
-        </summary>
+        </div>
         <div id="{{ params.id }}-content" class="ons-details__content ons-js-details-content"
             {% if params.contentAttributes %}{% for attribute, value in (params.contentAttributes.items() if params.contentAttributes is mapping and params.contentAttributes.items else params.contentAttributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
         >
             {{ params.content | safe }}{{ caller() if caller }}
         </div>
-    </details>
+    </div>
 {% endmacro %}

package/components/details/_macro.spec.js

@@ -40,10 +40,7 @@ describe('macro: details', () => {
   it('has provided title text', () => {
     const $ = cheerio.load(renderComponent('details', EXAMPLE_DETAILS_BASIC));
 
-    const titleText = $('.ons-details__title')
-      .first()
-      .text()
-      .trim();
+    const titleText = $('.ons-details__title').first().text().trim();
     expect(titleText).toBe('Title for details');
   });
 
@@ -62,9 +59,7 @@ describe('macro: details', () => {
   it('has provided content text', () => {
     const $ = cheerio.load(renderComponent('details', EXAMPLE_DETAILS_BASIC));
 
-    const titleText = $('.ons-details__content')
-      .text()
-      .trim();
+    const titleText = $('.ons-details__content').text().trim();
     expect(titleText).toEqual(expect.stringContaining('Content for details'));
   });
 
@@ -143,9 +138,7 @@ describe('macro: details', () => {
   it('calls with content', () => {
     const $ = cheerio.load(renderComponent('details', { EXAMPLE_DETAILS_BASIC }, 'Example content...'));
 
-    const content = $('.ons-details__content')
-      .text()
-      .trim();
+    const content = $('.ons-details__content').text().trim();
     expect(content).toEqual(expect.stringContaining('Example content...'));
   });
 });

package/components/details/details.dom.js

@@ -6,7 +6,7 @@ async function initialiseDetailsEls() {
 
   if (detailsComponents.length && !accordionComponents.length) {
     const Details = (await import('./details')).default;
-    detailsComponents.map(element => new Details(element));
+    detailsComponents.map((element) => new Details(element));
   }
 }
 

package/components/details/details.js

@@ -7,17 +7,25 @@ export default class Details {
     // Elements
     this.details = detailsElement;
     this.detailsHeader = this.details.querySelector('.ons-js-details-heading');
+    this.content = this.details.querySelector('.ons-js-details-content');
 
     // Initialise
     const detailsId = detailsElement.getAttribute('id');
 
+    this.details.setAttribute('role', 'group');
+    this.detailsHeader.setAttribute('role', 'link');
+    this.detailsHeader.setAttribute('aria-controls', detailsId);
+    this.detailsHeader.setAttribute('tabindex', 0);
+
     if (localStorage.getItem(detailsId) || this.open) {
       this.setOpen(true);
-      this.details['setAttribute']('open', '');
+    } else {
+      this.setOpen(false);
     }
 
     this.detailsHeader.addEventListener('click', this.toggle.bind(this));
     this.detailsHeader.addEventListener('keydown', this.keyboardInteraction.bind(this));
+    this.details.classList.add('ons-details--initialised');
   }
 
   toggle(event) {
@@ -28,10 +36,14 @@ export default class Details {
   setOpen(open) {
     if (open !== this.isOpen) {
       const action = open ? 'Open' : 'Close';
+      const cls = open ? 'add' : 'remove';
       const openAttribute = open ? 'set' : 'remove';
 
       this.isOpen = open;
       this.details[`${openAttribute}Attribute`]('open', '');
+      this.details.classList[cls]('ons-details--open');
+      this.detailsHeader.setAttribute('aria-expanded', open);
+      this.content.setAttribute('aria-hidden', !open);
       this.detailsHeader.setAttribute('data-ga-action', `${action} panel`);
 
       if (this.onOpen && this.onClose) {

package/components/details/details.spec.js

@@ -1,4 +1,4 @@
-import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+import { renderComponent, renderTemplate, setTestPage } from '../../tests/helpers/rendering';
 
 const EXAMPLE_DETAILS_BASIC = {
   id: 'details-id',
@@ -6,6 +6,22 @@ const EXAMPLE_DETAILS_BASIC = {
   content: 'Content for details',
 };
 
+const EXAMPLE_PAGE = `
+      ${renderComponent('details', {
+        id: 'details-id',
+        title: 'Title for details',
+        content: 'Content for details',
+      })}
+
+      ${renderComponent('details', {
+        id: 'details-id-2',
+        title: 'Title for details',
+        content: 'Content for details',
+      })}
+  `;
+
+const RENDERED_EXAMPLE_PAGE = renderTemplate(EXAMPLE_PAGE);
+
 describe('script: details', () => {
   it('begins open when specified', async () => {
     await setTestPage(
@@ -16,8 +32,8 @@ describe('script: details', () => {
       }),
     );
 
-    const openAttribute = await page.$eval('.ons-js-details', node => node.open !== null);
-    expect(openAttribute).toBe(true);
+    const detailsOpenClass = await page.$eval('.ons-js-details', (node) => node.classList.contains('ons-details--open'));
+    expect(detailsOpenClass).toBe(true);
   });
 
   describe('when the details heading is clicked to open the details', () => {
@@ -26,18 +42,34 @@ describe('script: details', () => {
       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 `open` attribute and adds the correct class', async () => {
+      const detailsOpenClass = await page.$eval('.ons-js-details', (node) => node.classList.contains('ons-details--open'));
+
+      expect(detailsOpenClass).toBe(true);
     });
 
     it('sets the `ga` attributes', async () => {
-      const gaHeadingAttribute = await page.$eval('.ons-js-details-heading', element => element.getAttribute('data-ga-action'));
+      const gaHeadingAttribute = await page.$eval('.ons-js-details-heading', (element) => element.getAttribute('data-ga-action'));
 
       expect(gaHeadingAttribute).toBe('Open panel');
     });
   });
 
+  describe('when there is more than one details component and a details heading is clicked to open the details', () => {
+    beforeEach(async () => {
+      await setTestPage('/test', RENDERED_EXAMPLE_PAGE);
+      await page.click('#details-id > .ons-js-details-heading');
+    });
+
+    it('sets the `open` attribute and open class on the right component', async () => {
+      const detailsOpenClass = await page.$eval('#details-id', (node) => node.classList.contains('ons-details--open'));
+      const detailsOpenClass2 = await page.$eval('#details-id-2', (node) => node.classList.contains('ons-details--open'));
+
+      expect(detailsOpenClass).toBe(true);
+      expect(detailsOpenClass2).toBe(false);
+    });
+  });
+
   describe('when the details heading is focused', () => {
     beforeEach(async () => {
       await setTestPage('/test', renderComponent('details', EXAMPLE_DETAILS_BASIC));
@@ -50,8 +82,8 @@ describe('script: details', () => {
       });
 
       it('opens the details content', async () => {
-        const openAttribute = await page.$eval('.ons-js-details', node => node.open !== null);
-        expect(openAttribute).toBe(true);
+        const detailsOpenClass = await page.$eval('.ons-js-details', (node) => node.classList.contains('ons-details--open'));
+        expect(detailsOpenClass).toBe(true);
       });
     });
 
@@ -61,8 +93,8 @@ describe('script: details', () => {
       });
 
       it('opens the details content', async () => {
-        const openAttribute = await page.$eval('.ons-js-details', node => node.open !== null);
-        expect(openAttribute).toBe(true);
+        const detailsOpenClass = await page.$eval('.ons-js-details', (node) => node.classList.contains('ons-details--open'));
+        expect(detailsOpenClass).toBe(true);
       });
     });
   });

package/components/details/example-details-with-warning.njk

@@ -1,8 +1,7 @@
 {% from "components/details/_macro.njk" import onsDetails %}
 {% from "components/panel/_macro.njk" import onsPanel %}
 
-{%
-    call onsDetails({
+{% call onsDetails({
         "id": "details-example-with-warning",
         "title": "Need to answer separately from your household?"
     })

package/components/footer/_macro.njk

@@ -179,7 +179,7 @@
                 {% endif %}
                 {% if params.copyrightDeclaration %}
                     <!-- Copyright -->
-                    <div class="ons-grid ons-grid--flex ons-grid--vertical-bottom ons-grid--between">                                
+                    <div class="ons-grid ons-grid--flex ons-grid--vertical-bottom ons-grid--between">
                         <div class="ons-grid__col">
                             <p class="ons-u-fs-s ons-u-mb-no ons-footer__copyright">&copy; {{ params.copyrightDeclaration.copyright }} <br> {{ params.copyrightDeclaration.text }}</p>
                         </div>

package/components/header/_header.scss

@@ -229,4 +229,8 @@
       margin-top: -5px !important;
     }
   }
+
+  .ons-btn {
+    top: 0 !important;
+  }
 }