@ons/design-system 50.0.1 → 53.0.0

package/components/collapsible/_macro.spec.js

@@ -0,0 +1,204 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const EXAMPLE_COLLAPSIBLE_BASIC = {
+  id: 'collapsible-id',
+  title: 'Title for collapsible',
+  content: 'Content for collapsible',
+};
+
+describe('macro: collapsible', () => {
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(renderComponent('collapsible', EXAMPLE_COLLAPSIBLE_BASIC));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has the provided `id` attribute', () => {
+    const $ = cheerio.load(renderComponent('collapsible', EXAMPLE_COLLAPSIBLE_BASIC));
+
+    expect($('.ons-collapsible').attr('id')).toBe('collapsible-id');
+  });
+
+  it('has additionally provided style classes', () => {
+    const $ = cheerio.load(
+      renderComponent('collapsible', {
+        ...EXAMPLE_COLLAPSIBLE_BASIC,
+        classes: 'extra-class another-extra-class',
+      }),
+    );
+
+    expect($('.ons-collapsible').hasClass('extra-class')).toBe(true);
+    expect($('.ons-collapsible').hasClass('another-extra-class')).toBe(true);
+  });
+
+  it('has provided variant style classes', () => {
+    const $ = cheerio.load(
+      renderComponent('collapsible', {
+        ...EXAMPLE_COLLAPSIBLE_BASIC,
+        variants: ['variant-a', 'variant-b'],
+      }),
+    );
+
+    expect($('.ons-collapsible--variant-a').length).toBe(1);
+    expect($('.ons-collapsible--variant-b').length).toBe(1);
+  });
+
+  it('has provided title text', () => {
+    const $ = cheerio.load(renderComponent('collapsible', EXAMPLE_COLLAPSIBLE_BASIC));
+
+    const titleText = $('.ons-collapsible__title')
+      .first()
+      .text()
+      .trim();
+    expect(titleText).toBe('Title for collapsible');
+  });
+
+  it('has title with provided tag override', () => {
+    const $ = cheerio.load(
+      renderComponent('collapsible', {
+        ...EXAMPLE_COLLAPSIBLE_BASIC,
+        titleTag: 'h4',
+      }),
+    );
+
+    const titleTag = $('.ons-collapsible__title')[0].tagName;
+    expect(titleTag).toBe('h4');
+  });
+
+  it('has provided content text', () => {
+    const $ = cheerio.load(renderComponent('collapsible', EXAMPLE_COLLAPSIBLE_BASIC));
+
+    const titleText = $('.ons-collapsible__content')
+      .text()
+      .trim();
+    expect(titleText).toEqual(expect.stringContaining('Content for collapsible'));
+  });
+
+  it('has additionally provided `attributes`', () => {
+    const $ = cheerio.load(
+      renderComponent('collapsible', {
+        ...EXAMPLE_COLLAPSIBLE_BASIC,
+        attributes: {
+          a: 123,
+          b: 456,
+        },
+      }),
+    );
+    expect($('.ons-collapsible').attr('a')).toBe('123');
+    expect($('.ons-collapsible').attr('b')).toBe('456');
+  });
+
+  it('has the correct data attribute when `saveState` is provided', () => {
+    const $ = cheerio.load(
+      renderComponent('collapsible', {
+        ...EXAMPLE_COLLAPSIBLE_BASIC,
+        saveState: true,
+      }),
+    );
+    expect($('.ons-collapsible').attr('data-save-state')).toBe('true');
+  });
+
+  it('has the correct data attribute when `open` is provided', () => {
+    const $ = cheerio.load(
+      renderComponent('collapsible', {
+        ...EXAMPLE_COLLAPSIBLE_BASIC,
+        open: true,
+      }),
+    );
+    expect($('.ons-collapsible').attr('data-open')).toBe('true');
+  });
+
+  it('has additionally provided `headingAttributes`', () => {
+    const $ = cheerio.load(
+      renderComponent('collapsible', {
+        ...EXAMPLE_COLLAPSIBLE_BASIC,
+        headingAttributes: {
+          a: 123,
+          b: 456,
+        },
+      }),
+    );
+
+    expect($('.ons-collapsible__heading').attr('a')).toBe('123');
+    expect($('.ons-collapsible__heading').attr('b')).toBe('456');
+  });
+
+  it('has additionally provided `contentAttributes`', () => {
+    const $ = cheerio.load(
+      renderComponent('collapsible', {
+        ...EXAMPLE_COLLAPSIBLE_BASIC,
+        contentAttributes: {
+          a: 123,
+          b: 456,
+        },
+      }),
+    );
+
+    expect($('.ons-collapsible__content').attr('a')).toBe('123');
+    expect($('.ons-collapsible__content').attr('b')).toBe('456');
+  });
+
+  it('has `chevron` icon', () => {
+    const faker = templateFaker();
+    const iconsSpy = faker.spy('icons');
+    faker.renderComponent('collapsible', EXAMPLE_COLLAPSIBLE_BASIC);
+
+    expect(iconsSpy.occurrences[0].iconType).toBe('chevron');
+  });
+
+  it('has the expected button output', () => {
+    const faker = templateFaker();
+    const buttonSpy = faker.spy('button');
+
+    faker.renderComponent('collapsible', {
+      ...EXAMPLE_COLLAPSIBLE_BASIC,
+      button: {
+        close: 'Close this',
+        attributes: {
+          a: 123,
+          b: 456,
+        },
+      },
+    });
+
+    expect(buttonSpy.occurrences[0]).toEqual({
+      text: 'Close this',
+      type: 'button',
+      buttonContext: 'Title for collapsible content',
+      classes: 'ons-js-collapsible-button ons-u-d-no ons-btn--secondary',
+      innerClasses: 'ons-js-collapsible-button-inner',
+      variants: 'small',
+      attributes: {
+        a: 123,
+        b: 456,
+      },
+    });
+  });
+
+  it('has the expected data attribute when `button` is provided', () => {
+    const $ = cheerio.load(
+      renderComponent('collapsible', {
+        ...EXAMPLE_COLLAPSIBLE_BASIC,
+        button: {
+          close: 'Close this',
+        },
+      }),
+    );
+    expect($('.ons-collapsible').attr('data-btn-close')).toBe('Close this');
+  });
+
+  it('calls with content', () => {
+    const $ = cheerio.load(renderComponent('collapsible', { EXAMPLE_COLLAPSIBLE_BASIC }, 'Example content...'));
+
+    const content = $('.ons-collapsible__content')
+      .text()
+      .trim();
+    expect(content).toEqual(expect.stringContaining('Example content...'));
+  });
+});

package/components/collapsible/collapsible.js

@@ -6,6 +6,7 @@ export default class Collapsible {
     // 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;
@@ -29,7 +30,7 @@ export default class Collapsible {
     this.collapsibleHeader.setAttribute('role', 'link');
     this.collapsibleHeader.setAttribute('aria-controls', collapsibleId);
 
-    if (!this.isAccordion) {
+    if (!this.isAccordion || this.isSimpleAccordion) {
       this.collapsibleHeader.setAttribute('tabindex', 0);
     }
     if (localStorage.getItem(collapsibleId) || this.open) {

package/components/collapsible/collapsible.spec.js

@@ -0,0 +1,236 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+const EXAMPLE_COLLAPSIBLE_BASIC = {
+  id: 'collapsible-id',
+  title: 'Title for collapsible',
+  content: 'Content for collapsible',
+};
+
+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',
+      renderComponent('collapsible', {
+        ...EXAMPLE_COLLAPSIBLE_BASIC,
+        open: true,
+      }),
+    );
+
+    const openClass = await page.$eval('.ons-collapsible', element => element.classList.contains('ons-collapsible--open'));
+    expect(openClass).toBe(true);
+  });
+
+  describe('when the collapsible heading is clicked to open the collapsible', () => {
+    beforeEach(async () => {
+      await setTestPage('/test', renderComponent('collapsible', EXAMPLE_COLLAPSIBLE_BASIC));
+      await page.click('.ons-js-collapsible-heading');
+    });
+
+    it('sets the `open` attribute', async () => {
+      const openAttribute = await page.$eval('.ons-js-collapsible', node => node.open !== null);
+      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');
+    });
+  });
+
+  describe('when the collapsible heading is focused', () => {
+    beforeEach(async () => {
+      await setTestPage('/test', renderComponent('collapsible', EXAMPLE_COLLAPSIBLE_BASIC));
+      await page.focus('.ons-js-collapsible-heading');
+    });
+
+    describe('when the space bar is pressed', () => {
+      beforeEach(async () => {
+        await page.keyboard.press('Space');
+      });
+
+      it('opens the collapsible content', async () => {
+        const openClass = await page.$eval('.ons-collapsible', element => element.classList.contains('ons-collapsible--open'));
+        expect(openClass).toBe(true);
+      });
+    });
+
+    describe('when the Enter key is pressed', () => {
+      beforeEach(async () => {
+        await page.keyboard.press('Enter');
+      });
+
+      it('opens the collapsible content', async () => {
+        const openClass = await page.$eval('.ons-collapsible', element => element.classList.contains('ons-collapsible--open'));
+        expect(openClass).toBe(true);
+      });
+    });
+  });
+
+  describe('when the state is set to save', () => {
+    beforeEach(async () => {
+      await setTestPage(
+        '/test',
+        renderComponent('collapsible', {
+          ...EXAMPLE_COLLAPSIBLE_BASIC,
+          saveState: true,
+        }),
+      );
+    });
+
+    describe('when the collapsible is opened', () => {
+      beforeEach(async () => {
+        await page.click('.ons-js-collapsible-heading');
+      });
+
+      it('sets state in localStorage', async () => {
+        const localStorage = await page.evaluate(() => localStorage.getItem('collapsible-id'));
+        expect(localStorage).toBe('true');
+      });
+    });
+
+    describe('when the collapsible is closed', () => {
+      beforeEach(async () => {
+        await page.click('.ons-js-collapsible-heading');
+      });
+
+      it('removes state in localStorage', async () => {
+        const localStorage = await page.evaluate(() => localStorage.getItem('collapsible-id'));
+        expect(localStorage).toBe(null);
+      });
+    });
+  });
+
+  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/content-pagination/_macro.spec.js

@@ -0,0 +1,199 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const EXAMPLE_CONTENT_PAGINATION_NONE = {
+  contentPaginationItems: [],
+};
+
+const EXAMPLE_CONTENT_PAGINATION_PREV_ONLY = {
+  contentPaginationItems: [
+    {
+      rel: 'prev',
+      text: 'Previous',
+      url: '/guide/overview',
+      label: 'Overview',
+    },
+  ],
+};
+
+const EXAMPLE_CONTENT_PAGINATION_NEXT_ONLY = {
+  contentPaginationItems: [
+    {
+      rel: 'next',
+      text: 'Next',
+      url: '/guide/who-and-why',
+      label: 'Who should take part and why',
+    },
+  ],
+};
+
+const EXAMPLE_CONTENT_PAGINATION_BOTH = {
+  contentPaginationItems: [
+    {
+      rel: 'prev',
+      text: 'Previous',
+      url: '/guide/overview',
+      label: 'Overview',
+    },
+    {
+      rel: 'next',
+      text: 'Next',
+      url: '/guide/who-and-why',
+      label: 'Who should take part and why',
+    },
+  ],
+};
+
+describe('macro: content-pagination', () => {
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(renderComponent('content-pagination', EXAMPLE_CONTENT_PAGINATION_NONE));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has a default `aria-label` of "Guide pagination"', () => {
+    const $ = cheerio.load(renderComponent('content-pagination', EXAMPLE_CONTENT_PAGINATION_NONE));
+
+    expect($('.ons-content-pagination').attr('aria-label')).toBe('Guide pagination');
+  });
+
+  it('has the provided `aria-label`', () => {
+    const $ = cheerio.load(
+      renderComponent('content-pagination', {
+        ...EXAMPLE_CONTENT_PAGINATION_NONE,
+        ariaLabel: 'Other pages',
+      }),
+    );
+
+    expect($('.ons-content-pagination').attr('aria-label')).toBe('Other pages');
+  });
+
+  it('outputs no list items when `contentPaginationItems` is empty', () => {
+    const $ = cheerio.load(renderComponent('content-pagination', EXAMPLE_CONTENT_PAGINATION_NONE));
+
+    expect($('.ons-content-pagination__item').length).toBe(0);
+  });
+
+  it('renders the `arrow-previous` icon for the previous link entry', () => {
+    const faker = templateFaker();
+    const iconsSpy = faker.spy('icons');
+
+    faker.renderComponent('content-pagination', EXAMPLE_CONTENT_PAGINATION_PREV_ONLY);
+
+    expect(iconsSpy.occurrences[0]).toHaveProperty('iconType', 'arrow-previous');
+    expect(iconsSpy.occurrences[0]).toHaveProperty('iconSize', 'm');
+  });
+
+  it('renders the `arrow-next` icon for the next link entry', () => {
+    const faker = templateFaker();
+    const iconsSpy = faker.spy('icons');
+
+    faker.renderComponent('content-pagination', EXAMPLE_CONTENT_PAGINATION_NEXT_ONLY);
+
+    expect(iconsSpy.occurrences[0]).toHaveProperty('iconType', 'arrow-next');
+    expect(iconsSpy.occurrences[0]).toHaveProperty('iconSize', 'm');
+  });
+
+  describe('previous link', () => {
+    describe.each([
+      ['with only the previous link', EXAMPLE_CONTENT_PAGINATION_PREV_ONLY],
+      ['with both the previous and next links', EXAMPLE_CONTENT_PAGINATION_BOTH],
+    ])('%s', (_, params) => {
+      it('renders a link with the correct URL', () => {
+        const $ = cheerio.load(renderComponent('content-pagination', params));
+
+        const prevLink = $('.ons-content-pagination__link[rel="prev"]');
+        expect(prevLink.attr('href')).toBe('/guide/overview');
+      });
+
+      it('renders the correct pagination item text', () => {
+        const $ = cheerio.load(renderComponent('content-pagination', params));
+
+        const linkText = $('.ons-content-pagination__link[rel="prev"] .ons-content-pagination__link-text');
+        expect(linkText.text().trim()).toBe('Previous');
+      });
+
+      it('renders the expected default `bridgingText`', () => {
+        const $ = cheerio.load(renderComponent('content-pagination', params));
+
+        const bridgingText = $('.ons-content-pagination__link[rel="prev"] .ons-content-pagination__link-divider');
+        expect(bridgingText.text().trim()).toBe('page in this guide is:');
+      });
+
+      it('renders the provided `bridgingText`', () => {
+        const $ = cheerio.load(
+          renderComponent('content-pagination', {
+            contentPaginationItems: params.contentPaginationItems.map(item => ({
+              ...item,
+              bridgingText: 'custom bridging text:',
+            })),
+          }),
+        );
+
+        const bridgingText = $('.ons-content-pagination__link[rel="prev"] .ons-content-pagination__link-divider');
+        expect(bridgingText.text().trim()).toBe('custom bridging text:');
+      });
+
+      it('renders the provided `label`', () => {
+        const $ = cheerio.load(renderComponent('content-pagination', params));
+
+        const labelText = $('.ons-content-pagination__link[rel="prev"] .ons-content-pagination__link-label');
+        expect(labelText.text().trim()).toBe('Overview');
+      });
+    });
+  });
+
+  describe('next link', () => {
+    describe.each([
+      ['with only the next link', EXAMPLE_CONTENT_PAGINATION_NEXT_ONLY],
+      ['with both the previous and next links', EXAMPLE_CONTENT_PAGINATION_BOTH],
+    ])('%s', (_, params) => {
+      it('renders a link with the correct URL', () => {
+        const $ = cheerio.load(renderComponent('content-pagination', params));
+
+        const prevLink = $('.ons-content-pagination__link[rel="next"]');
+        expect(prevLink.attr('href')).toBe('/guide/who-and-why');
+      });
+
+      it('renders the correct pagination item text', () => {
+        const $ = cheerio.load(renderComponent('content-pagination', params));
+
+        const linkText = $('.ons-content-pagination__link[rel="next"] .ons-content-pagination__link-text');
+        expect(linkText.text().trim()).toBe('Next');
+      });
+
+      it('renders the expected default `bridgingText`', () => {
+        const $ = cheerio.load(renderComponent('content-pagination', params));
+
+        const bridgingText = $('.ons-content-pagination__link[rel="next"] .ons-content-pagination__link-divider');
+        expect(bridgingText.text().trim()).toBe('page in this guide is:');
+      });
+
+      it('renders the provided `bridgingText`', () => {
+        const $ = cheerio.load(
+          renderComponent('content-pagination', {
+            contentPaginationItems: params.contentPaginationItems.map(item => ({
+              ...item,
+              bridgingText: 'custom bridging text:',
+            })),
+          }),
+        );
+
+        const bridgingText = $('.ons-content-pagination__link[rel="next"] .ons-content-pagination__link-divider');
+        expect(bridgingText.text().trim()).toBe('custom bridging text:');
+      });
+
+      it('renders the provided `label`', () => {
+        const $ = cheerio.load(renderComponent('content-pagination', params));
+
+        const labelText = $('.ons-content-pagination__link[rel="next"] .ons-content-pagination__link-label');
+        expect(labelText.text().trim()).toBe('Who should take part and why');
+      });
+    });
+  });
+});

package/components/cookies-banner/_macro.njk

@@ -1,5 +1,5 @@
 {% macro onsCookiesBanner(params) %}
-    <div class="ons-cookies-banner" role="region" aria-label="{{ params.ariaLabel | default('cookie banner')}}">
+    <div class="ons-cookies-banner" role="region" aria-label="{{ params.ariaLabel | default('Cookies banner')}}">
         <div class="ons-container ons-cookies-banner__primary">
             <div class="ons-grid">
                 <div class="ons-grid__col ons-col-8@m">