@ons/design-system 53.1.1 → 54.0.0

package/components/collapsible/collapsible.dom.js

@@ -2,20 +2,11 @@ import domready from '../../js/domready';
 
 async function initialiseCollapsibles() {
   const collapsibleComponents = [...document.querySelectorAll('.ons-js-collapsible')];
+  const accordionComponents = [...document.querySelectorAll('.ons-js-accordion')];
 
-  if (collapsibleComponents.length) {
-    const toggleAllButtons = [...document.querySelectorAll('.ons-js-collapsible-all')];
-
+  if (collapsibleComponents.length && !accordionComponents.length) {
     const Collapsible = (await import('./collapsible')).default;
-    const collapsibles = collapsibleComponents.map(element => new Collapsible(element));
-
-    if (toggleAllButtons.length) {
-      const CollapsibleGroup = (await import('./collapsible.group')).default;
-
-      toggleAllButtons.forEach(button => {
-        new CollapsibleGroup(button, collapsibles);
-      });
-    }
+    collapsibleComponents.map(element => new Collapsible(element));
   }
 }
 

package/components/collapsible/collapsible.js

@@ -2,79 +2,38 @@ export default class Collapsible {
   constructor(collapsibleElement) {
     this.saveState = collapsibleElement.getAttribute('data-save-state') === 'true';
     this.open = collapsibleElement.getAttribute('data-open') === 'true';
-
-    // State
     this.group = collapsibleElement.getAttribute('data-group');
-    this.isAccordion = collapsibleElement.classList.contains('ons-collapsible--accordion');
-    this.isSimpleAccordion = collapsibleElement.classList.contains('ons-collapsible--simple');
 
     // Elements
     this.collapsible = collapsibleElement;
     this.collapsibleHeader = this.collapsible.querySelector('.ons-js-collapsible-heading');
-    this.content = this.collapsible.querySelector('.ons-js-collapsible-content');
-    this.button = this.collapsible.querySelector('.ons-js-collapsible-button');
-    this.buttonInner = this.collapsible.querySelector('.ons-js-collapsible-button-inner');
 
     // Initialise
     const collapsibleId = collapsibleElement.getAttribute('id');
 
-    if (this.button) {
-      this.button.addEventListener('click', this.toggle.bind(this));
-      this.button.setAttribute('aria-controls', collapsibleId);
-      this.button.classList.remove('ons-u-d-no');
-      this.buttonOpen = this.buttonInner.innerHTML.trim();
-      this.closeButton = this.collapsible.getAttribute('data-btn-close') || this.buttonOpen;
-    }
-
-    this.collapsible.setAttribute('role', 'group');
-    this.collapsibleHeader.setAttribute('role', 'link');
-    this.collapsibleHeader.setAttribute('aria-controls', collapsibleId);
-
-    if (!this.isAccordion || this.isSimpleAccordion) {
-      this.collapsibleHeader.setAttribute('tabindex', 0);
-    }
     if (localStorage.getItem(collapsibleId) || this.open) {
       this.setOpen(true);
-    } else {
-      this.setOpen(false);
+      this.collapsible['setAttribute']('open', '');
     }
 
     this.collapsibleHeader.addEventListener('click', this.toggle.bind(this));
     this.collapsibleHeader.addEventListener('keydown', this.keyboardInteraction.bind(this));
-
-    this.collapsible.classList.add('ons-collapsible--initialised');
   }
 
   toggle(event) {
     event.preventDefault();
-
-    // Storing previous timestamp and checking against the current event's timestamp prevents event propagation
-    // to collapsibleHeader element when the button is in the collapsibleHeader, but does not prevent event propagation to the body for analytics
-    if (this.previousTimestamp !== event.timeStamp) {
-      this.previousTimestamp = event.timeStamp;
-      this.setOpen(!this.isOpen);
-    }
+    this.setOpen(!this.isOpen);
   }
 
   setOpen(open) {
     if (open !== this.isOpen) {
-      const openAttribute = open ? 'set' : 'remove';
-      const cls = open ? 'add' : 'remove';
       const action = open ? 'Open' : 'Close';
+      const openAttribute = open ? 'set' : 'remove';
 
       this.isOpen = open;
       this.collapsible[`${openAttribute}Attribute`]('open', '');
-      this.collapsible.classList[cls]('ons-collapsible--open');
-      this.collapsibleHeader.setAttribute('aria-expanded', open);
-      this.content.setAttribute('aria-hidden', !open);
-
       this.collapsibleHeader.setAttribute('data-ga-action', `${action} panel`);
 
-      if (this.button) {
-        this.button.setAttribute('data-ga-action', `${action} panel`);
-        this.buttonInner.innerHTML = open ? this.closeButton : this.buttonOpen;
-      }
-
       if (this.onOpen && this.onClose) {
         if (open) {
           this.onOpen();
@@ -100,7 +59,6 @@ export default class Collapsible {
         event.preventDefault();
         event.stopPropagation();
 
-        // Show answer content
         this.toggle(event);
         break;
     }

package/components/collapsible/collapsible.spec.js

@@ -7,53 +7,6 @@ const EXAMPLE_COLLAPSIBLE_BASIC = {
 };
 
 describe('script: collapsible', () => {
-  it('begins closed', async () => {
-    await setTestPage('/test', renderComponent('collapsible', EXAMPLE_COLLAPSIBLE_BASIC));
-
-    const openItemCount = await page.$$eval('.ons-collapsible--open', elements => elements.length);
-    expect(openItemCount).toBe(0);
-  });
-
-  it('sets the `role` attribute', async () => {
-    await setTestPage('/test', renderComponent('collapsible', EXAMPLE_COLLAPSIBLE_BASIC));
-
-    const role = await page.$eval('.ons-collapsible', element => element.getAttribute('role'));
-    expect(role).toBe('group');
-  });
-
-  it('adds the correct class', async () => {
-    await setTestPage('/test', renderComponent('collapsible', EXAMPLE_COLLAPSIBLE_BASIC));
-
-    const className = await page.$eval('.ons-collapsible', element => element.classList.contains('ons-collapsible--initialised'));
-    expect(className).toBe(true);
-  });
-
-  it('sets attributes on the heading element', async () => {
-    await setTestPage('/test', renderComponent('collapsible', EXAMPLE_COLLAPSIBLE_BASIC));
-
-    const role = await page.$eval('.ons-js-collapsible-heading', element => element.getAttribute('role'));
-    const ariaControls = await page.$eval('.ons-js-collapsible-heading', element => element.getAttribute('aria-controls'));
-    const tabIndex = await page.$eval('.ons-js-collapsible-heading', element => element.getAttribute('tabindex'));
-
-    expect(role).toBe('link');
-    expect(ariaControls).toBe('collapsible-id');
-    expect(tabIndex).toBe('0');
-  });
-
-  it('sets attributes on the button element', async () => {
-    await setTestPage('/test', renderComponent('collapsible', EXAMPLE_COLLAPSIBLE_BASIC));
-
-    const ariaControls = await page.$eval('.ons-js-collapsible-button', element => element.getAttribute('aria-controls'));
-    expect(ariaControls).toBe('collapsible-id');
-  });
-
-  it('sets the button element to be visible', async () => {
-    await setTestPage('/test', renderComponent('collapsible', EXAMPLE_COLLAPSIBLE_BASIC));
-
-    const openClass = await page.$eval('.ons-collapsible', element => element.classList.contains('ons-collapsible--open'));
-    expect(openClass).toBe(false);
-  });
-
   it('begins open when specified', async () => {
     await setTestPage(
       '/test',
@@ -63,8 +16,8 @@ describe('script: collapsible', () => {
       }),
     );
 
-    const openClass = await page.$eval('.ons-collapsible', element => element.classList.contains('ons-collapsible--open'));
-    expect(openClass).toBe(true);
+    const openAttribute = await page.$eval('.ons-js-collapsible', node => node.open !== null);
+    expect(openAttribute).toBe(true);
   });
 
   describe('when the collapsible heading is clicked to open the collapsible', () => {
@@ -78,59 +31,10 @@ describe('script: collapsible', () => {
       expect(openAttribute).toBe(true);
     });
 
-    it('sets the open class', async () => {
-      const openClass = await page.$eval('.ons-collapsible', element => element.classList.contains('ons-collapsible--open'));
-      expect(openClass).toBe(true);
-    });
-
-    it('sets the `aria` attributes', async () => {
-      const ariaExpanded = await page.$eval('.ons-js-collapsible-heading', element => element.getAttribute('aria-expanded'));
-      const ariaHidden = await page.$eval('.ons-js-collapsible-content', element => element.getAttribute('aria-hidden'));
-
-      expect(ariaExpanded).toBe('true');
-      expect(ariaHidden).toBe('false');
-    });
-
     it('sets the `ga` attributes', async () => {
       const gaHeadingAttribute = await page.$eval('.ons-js-collapsible-heading', element => element.getAttribute('data-ga-action'));
-      const gaButtonAttribute = await page.$eval('.ons-js-collapsible-button', element => element.getAttribute('data-ga-action'));
 
       expect(gaHeadingAttribute).toBe('Open panel');
-      expect(gaButtonAttribute).toBe('Open panel');
-    });
-  });
-
-  describe('when the collapsible button is clicked to close the collapsible', () => {
-    beforeEach(async () => {
-      await setTestPage('/test', renderComponent('collapsible', EXAMPLE_COLLAPSIBLE_BASIC));
-      await page.click('.ons-js-collapsible-heading');
-      await page.click('.ons-js-collapsible-button');
-    });
-
-    it('removes the `open` attribute', async () => {
-      const openAttribute = await page.$eval('.ons-js-collapsible', node => node.open === true);
-      expect(openAttribute).toBe(false);
-    });
-
-    it('removes the open class', async () => {
-      const openClass = await page.$eval('.ons-collapsible', element => element.classList.contains('ons-collapsible--open'));
-      expect(openClass).toBe(false);
-    });
-
-    it('sets the `aria` attributes', async () => {
-      const ariaExpanded = await page.$eval('.ons-js-collapsible-heading', element => element.getAttribute('aria-expanded'));
-      const ariaHidden = await page.$eval('.ons-js-collapsible-content', element => element.getAttribute('aria-hidden'));
-
-      expect(ariaExpanded).toBe('false');
-      expect(ariaHidden).toBe('true');
-    });
-
-    it('sets the `ga` attributes', async () => {
-      const gaHeadingAttribute = await page.$eval('.ons-js-collapsible-heading', element => element.getAttribute('data-ga-action'));
-      const gaButtonAttribute = await page.$eval('.ons-js-collapsible-button', element => element.getAttribute('data-ga-action'));
-
-      expect(gaHeadingAttribute).toBe('Close panel');
-      expect(gaButtonAttribute).toBe('Close panel');
     });
   });
 
@@ -146,8 +50,8 @@ describe('script: collapsible', () => {
       });
 
       it('opens the collapsible content', async () => {
-        const openClass = await page.$eval('.ons-collapsible', element => element.classList.contains('ons-collapsible--open'));
-        expect(openClass).toBe(true);
+        const openAttribute = await page.$eval('.ons-js-collapsible', node => node.open !== null);
+        expect(openAttribute).toBe(true);
       });
     });
 
@@ -157,8 +61,8 @@ describe('script: collapsible', () => {
       });
 
       it('opens the collapsible content', async () => {
-        const openClass = await page.$eval('.ons-collapsible', element => element.classList.contains('ons-collapsible--open'));
-        expect(openClass).toBe(true);
+        const openAttribute = await page.$eval('.ons-js-collapsible', node => node.open !== null);
+        expect(openAttribute).toBe(true);
       });
     });
   });
@@ -196,41 +100,4 @@ describe('script: collapsible', () => {
       });
     });
   });
-
-  describe('when the collapsible is an accordion', () => {
-    beforeEach(async () => {
-      await setTestPage(
-        '/test',
-        renderComponent('collapsible', {
-          ...EXAMPLE_COLLAPSIBLE_BASIC,
-          isAccordion: true,
-        }),
-      );
-    });
-
-    it('does not set `tabindex` on the heading element', async () => {
-      const tabIndex = await page.$eval('.ons-js-collapsible-heading', element => element.getAttribute('tabindex'));
-
-      expect(tabIndex).toBe(null);
-    });
-  });
-
-  describe('when the collapsible is an accordion and the simple variant', () => {
-    beforeEach(async () => {
-      await setTestPage(
-        '/test',
-        renderComponent('collapsible', {
-          ...EXAMPLE_COLLAPSIBLE_BASIC,
-          isAccordion: true,
-          variants: 'simple',
-        }),
-      );
-    });
-
-    it('does set `tabindex` on the heading element', async () => {
-      const tabIndex = await page.$eval('.ons-js-collapsible-heading', element => element.getAttribute('tabindex'));
-
-      expect(tabIndex).toBe('0');
-    });
-  });
 });

package/components/cookies-banner/_cookies-banner.scss

@@ -1,22 +1,30 @@
 .ons-cookies-banner {
   background: $color-banner-bg;
   display: none;
-  padding: 1rem 0;
+  padding: 1rem 0 1.5rem;
 
   &__title {
     color: $color-text;
   }
 
-  &__desc {
+  &__statement {
     color: $color-text;
-    margin-bottom: 1rem;
     word-break: break-word;
+    p {
+      margin: 0 0 0.5rem;
+
+      @include mq(xxs, s) {
+        font-size: 0.9rem;
+        line-height: 1.4;
+      }
+    }
+  }
+
+  &__link {
+    line-height: 2.1rem;
   }
 
   &__btn {
-    @include mq(xxs, 499px) {
-      display: block;
-      width: 100%;
-    }
+    margin: 0 0 0.8rem;
   }
 }

package/components/cookies-banner/_macro.njk

@@ -1,40 +1,84 @@
 {% macro onsCookiesBanner(params) %}
-    <div class="ons-cookies-banner" role="region" aria-label="{{ params.ariaLabel | default('Cookies banner')}}">
+    {% if params.lang == 'cy' %}
+        {% set ariaLabel = 'Cwcis' %}
+        {% set serviceName = 'ons.gov.uk' %}
+        {% set statementTitle = 'Cwcis ar' %}
+        {% set settingsLinkText = 'Gweld cwcis' %}
+        {% set settingsLinkURL = '/cwics' %}
+        {% set statementText = '<p>Ffeiliau bach a gaiff eu storio ar eich dyfais pan fyddwch yn mynd ar wefan yw cwcis. Rydym ni’n defnyddio rhai cwcis hanfodol i wneud i’r wefan hon weithio.</p><p>Hoffem osod <a href="' + settingsLinkURL + '">cwcis ychwanegol</a> er mwyn cofio eich gosodiadau a deall sut rydych chi’n defnyddio’r wefan. Mae hyn yn ein helpu ni i wella ein gwasanaethau.</p>' %}
+        {% set acceptButtonText = 'Derbyn cwcis ychwanegol' %}
+        {% set rejectButtonText = 'Gwrthod cwcis ychwanegol' %}
+        {% set acceptedText = 'Rydych chi wedi derbyn yr holl gwcis ychwanegol.' %}
+        {% set rejectedText =  'Rydych chi wedi gwrthod yr holl gwcis ychwanegol. ' %}
+        {% set preferencesText =  'Gallwch chi <a href="' + settingsLinkURL + '">newid eich dewisiadau o ran cwcis</a> ar unrhyw adeg.' %}
+        {% set confirmationButtonText = 'Cuddio' %}
+        {% set confirmationButtonTextAria = 'neges hon' %}
+    {% else %}
+        {% set ariaLabel = 'Cookies banner' %}
+        {% set serviceName = 'ons.gov.uk' %}
+        {% set statementTitle = 'Cookies on' %}
+        {% set settingsLinkText = 'View cookies' %}
+        {% set settingsLinkURL = '/cookies' %}
+        {% set statementText = '<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 <a href="' + settingsLinkURL + '">additional cookies</a> to remember your settings and understand how you use the site. This helps us to improve our services. </p>' %}
+        {% set acceptButtonText = 'Accept additional cookies' %}
+        {% set rejectButtonText = 'Reject additional cookies' %}
+        {% set acceptedText = 'You have accepted all additional cookies.' %}
+        {% set rejectedText =  'You have rejected all additional cookies.' %}
+        {% set preferencesText =  'You can <a href="' + settingsLinkURL + '">change your cookie preferences</a> at any time.' %}
+        {% set confirmationButtonText = 'Hide' %}
+        {% set confirmationButtonTextAria = 'this message' %}
+    {% endif %}
+
+    <div class="ons-cookies-banner" role="region" aria-label="{{ params.ariaLabel | default(ariaLabel)}}">
         <div class="ons-container ons-cookies-banner__primary">
             <div class="ons-grid">
                 <div class="ons-grid__col ons-col-8@m">
-                  <h2 class="ons-cookies-banner__title ons-u-mb-xs">{{ params.statementTitle }}</h2>
-                  <p class="ons-cookies-banner__desc">{{ params.statementText | safe }}</p>
-                  {% from "components/button/_macro.njk" import onsButton %}
-                  {{
-                      onsButton({
-                          "type": 'button',
-                          "text": params.primaryButtonText | default('Accept all cookies'),
-                          "classes": 'ons-btn--small ons-js-accept-cookies ons-u-mb-xs@xxs@s ons-cookies-banner__btn'
-                      })
-                  }}
-                  {{
-                      onsButton({
-                          "type": 'button',
-                          "url": params.secondaryButtonUrl,
-                          "text": params.secondaryButtonText | default('Set cookie preferences'),
-                          "classes": 'ons-btn--small ons-u-ml-no@xxs@s ons-cookies-banner__btn'
-                      })
-                  }}
+                    <h2 class="ons-cookies-banner__title ons-u-mb-xs">{{ params.statementTitle | default(statementTitle) }} {{ params.serviceName | default(serviceName) }}</h2>
+                    <div class="ons-cookies-banner__statement">{{ params.statementText | default(statementText) | safe }}</div>
+                </div>
+            </div>
+            <div class="ons-grid ons-grid--flex ons-u-mt-s">
+                <div class="ons-grid__col">
+                    {% from "components/button/_macro.njk" import onsButton %}
+                    {{
+                            onsButton({
+                                "type": 'button',
+                                "attributes": {
+                                    "data-button": 'accept'
+                                },
+                                "text": params.acceptButtonText | default(acceptButtonText),
+                                "classes": 'ons-btn--small ons-js-accept-cookies ons-cookies-banner__btn'
+                            })
+                    }}
+                </div>
+                <div class="ons-grid__col">
+                    {{
+                            onsButton({
+                                "type": 'button',
+                                "attributes": {
+                                    "data-button": 'reject'
+                                },
+                                "text": params.rejectButtonText | default(rejectButtonText),
+                                "classes": 'ons-btn--small ons-js-reject-cookies ons-cookies-banner__btn'
+                            })
+                    }}
+                </div>
+                <div class="ons-grid__col">
+                    <a class="ons-cookies-banner__link" href="{{ params.settingsLinkURL | default(settingsLinkURL) }}">{{ params.settingsLinkText | default(settingsLinkText) }}</a>
                 </div>
             </div>
         </div>
         <div class="ons-container ons-cookies-banner__confirmation ons-u-d-no">
             <div class="ons-grid ons-grid--flex ons-grid--between ons-grid--gutterless ons-grid--no-wrap@s ons-grid--vertical-center">
               <div class="ons-grid__col ons-grid__col--flex ons-col-auto ons-u-flex-shrink@s">
-                <p class="ons-cookies-banner__desc ons-u-mb-no@s ons-u-mr-s@s">{{ params.confirmationText | safe }}</p>
+                <p class="ons-cookies-banner__desc ons-u-mb-no@s ons-u-mr-s@s"><span class="ons-js-accepted-text ons-u-d-no">{{ params.acceptedText | default(acceptedText) | safe }} </span><span class="ons-js-rejected-text ons-u-d-no">{{ params.rejectedText | default(rejectedText) | safe }} </span><span class="ons-cookies-banner__preferences-text">{{ params.preferencesText | default(preferencesText) | safe }}</span></p>
               </div>
               <div class="ons-grid__col">
                 {{
                     onsButton({
                         "type": 'button',
-                        "text": params.confirmationButtonText | default('Hide'),
-                        "buttonContext": params.confirmationButtonTextAria | default('the cookie message'),
+                        "text": params.confirmationButtonText | default(confirmationButtonText),
+                        "buttonContext": params.confirmationButtonTextAria | default(confirmationButtonTextAria),
                         "classes": 'ons-btn--secondary ons-btn--small ons-js-hide-button'
                     })
                 }}