@ons/design-system 70.0.7 → 70.0.9

package/components/content-pagination/_macro.spec.js

@@ -6,194 +6,194 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_CONTENT_PAGINATION_NONE = {
-  contentPaginationItems: [],
+    contentPaginationItems: [],
 };
 
 const EXAMPLE_CONTENT_PAGINATION_PREV_ONLY = {
-  contentPaginationItems: [
-    {
-      rel: 'prev',
-      text: 'Previous',
-      url: '/guide/overview',
-      label: 'Overview',
-    },
-  ],
+    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',
-    },
-  ],
+    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',
-    },
-  ],
+    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));
+    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('icon');
-
-    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('icon');
-
-    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');
-      });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-      it('renders the expected default `bridgingText`', () => {
-        const $ = cheerio.load(renderComponent('content-pagination', params));
+    it('has a default `aria-label` of "Guide pagination"', () => {
+        const $ = cheerio.load(renderComponent('content-pagination', EXAMPLE_CONTENT_PAGINATION_NONE));
 
-        const bridgingText = $('.ons-content-pagination__link[rel="prev"] .ons-content-pagination__link-divider');
-        expect(bridgingText.text().trim()).toBe('page in this guide is:');
-      });
+        expect($('.ons-content-pagination').attr('aria-label')).toBe('Guide pagination');
+    });
 
-      it('renders the provided `bridgingText`', () => {
+    it('has the provided `aria-label`', () => {
         const $ = cheerio.load(
-          renderComponent('content-pagination', {
-            contentPaginationItems: params.contentPaginationItems.map((item) => ({
-              ...item,
-              bridgingText: 'custom bridging text:',
-            })),
-          }),
+            renderComponent('content-pagination', {
+                ...EXAMPLE_CONTENT_PAGINATION_NONE,
+                ariaLabel: 'Other pages',
+            }),
         );
 
-        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');
-      });
+        expect($('.ons-content-pagination').attr('aria-label')).toBe('Other pages');
     });
-  });
 
-  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));
+    it('outputs no list items when `contentPaginationItems` is empty', () => {
+        const $ = cheerio.load(renderComponent('content-pagination', EXAMPLE_CONTENT_PAGINATION_NONE));
 
-        const prevLink = $('.ons-content-pagination__link[rel="next"]');
-        expect(prevLink.attr('href')).toBe('/guide/who-and-why');
-      });
+        expect($('.ons-content-pagination__item').length).toBe(0);
+    });
 
-      it('renders the correct pagination item text', () => {
-        const $ = cheerio.load(renderComponent('content-pagination', params));
+    it('renders the `arrow-previous` icon for the previous link entry', () => {
+        const faker = templateFaker();
+        const iconsSpy = faker.spy('icon');
 
-        const linkText = $('.ons-content-pagination__link[rel="next"] .ons-content-pagination__link-text');
-        expect(linkText.text().trim()).toBe('Next');
-      });
+        faker.renderComponent('content-pagination', EXAMPLE_CONTENT_PAGINATION_PREV_ONLY);
 
-      it('renders the expected default `bridgingText`', () => {
-        const $ = cheerio.load(renderComponent('content-pagination', params));
+        expect(iconsSpy.occurrences[0]).toHaveProperty('iconType', 'arrow-previous');
+        expect(iconsSpy.occurrences[0]).toHaveProperty('iconSize', 'm');
+    });
 
-        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 `arrow-next` icon for the next link entry', () => {
+        const faker = templateFaker();
+        const iconsSpy = faker.spy('icon');
 
-      it('renders the provided `bridgingText`', () => {
-        const $ = cheerio.load(
-          renderComponent('content-pagination', {
-            contentPaginationItems: params.contentPaginationItems.map((item) => ({
-              ...item,
-              bridgingText: 'custom bridging text:',
-            })),
-          }),
-        );
+        faker.renderComponent('content-pagination', EXAMPLE_CONTENT_PAGINATION_NEXT_ONLY);
 
-        const bridgingText = $('.ons-content-pagination__link[rel="next"] .ons-content-pagination__link-divider');
-        expect(bridgingText.text().trim()).toBe('custom bridging text:');
-      });
+        expect(iconsSpy.occurrences[0]).toHaveProperty('iconType', 'arrow-next');
+        expect(iconsSpy.occurrences[0]).toHaveProperty('iconSize', 'm');
+    });
 
-      it('renders the provided `label`', () => {
-        const $ = cheerio.load(renderComponent('content-pagination', params));
+    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');
+            });
+        });
+    });
 
-        const labelText = $('.ons-content-pagination__link[rel="next"] .ons-content-pagination__link-label');
-        expect(labelText.text().trim()).toBe('Who should take part and why');
-      });
+    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/content-pagination/example-content-pagination.njk

@@ -1,20 +1,20 @@
 {% from "components/content-pagination/_macro.njk" import onsContentPagination %}
 
 {{-
-  onsContentPagination({
-    "contentPaginationItems": [
-      {
-        "rel": 'prev',
-        "text": 'Previous',
-        "url": '#0',
-        "label": 'Overview'
-      },
-      {
-        "rel": 'next',
-        "text": 'Next',
-        "url": '#0',
-        "label": 'Who should take part and why'
-      }
-    ]
-  })
-}}
+    onsContentPagination({
+      "contentPaginationItems": [
+        {
+          "rel": 'prev',
+          "text": 'Previous',
+          "url": '#0',
+          "label": 'Overview'
+        },
+        {
+          "rel": 'next',
+          "text": 'Next',
+          "url": '#0',
+          "label": 'Who should take part and why'
+        }
+      ]
+    })
+-}}

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

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

package/components/cookies-banner/_macro.njk

@@ -40,15 +40,18 @@
     {% else %}
         {% set settingsLinkURL = '#0' %}
     {% endif %}
-
     {% set statementText = beforeLinkStatementText + ' <a href="' + settingsLinkURL + '">' + afterLinkStatementText %}
     {% set preferencesText = beforeLinkPreferencesURL + ' <a href="' + settingsLinkURL + '">' + afterLinkPreferencesURL %}
 
     <div class="ons-cookies-banner" role="region" aria-label="{{ params.ariaLabel | default(ariaLabel) }}">
-        <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }} ons-cookies-banner__primary">
+        <div
+            class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }} 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 | default(statementTitle) }} {{ params.serviceName | default(serviceName) }}</h2>
+                    <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>
@@ -78,14 +81,24 @@
                     }}
                 </div>
                 <div class="ons-grid__col">
-                    <a class="ons-cookies-banner__link" href="{{ settingsLinkURL }}">{{ params.settingsLinkText | default(settingsLinkText) }}</a>
+                    <a class="ons-cookies-banner__link" href="{{ settingsLinkURL }}"
+                        >{{ params.settingsLinkText | default(settingsLinkText) }}</a
+                    >
                 </div>
             </div>
         </div>
-        <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }} ons-cookies-banner__confirmation ons-u-d-no">
+        <div
+            class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }} 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"><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>
+                    <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">
                     {{