@ons/design-system 70.0.7 → 70.0.9

package/components/breadcrumbs/_macro.spec.js

@@ -7,123 +7,123 @@ import { mapAll } from '../../tests/helpers/cheerio';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_BREADCRUMBS_MINIMAL = {
-  itemsList: [
-    {
-      url: 'https://example.com/',
-      text: 'Home',
-    },
-    {
-      url: 'https://example.com/guide/',
-      text: 'Guide',
-    },
-  ],
+    itemsList: [
+        {
+            url: 'https://example.com/',
+            text: 'Home',
+        },
+        {
+            url: 'https://example.com/guide/',
+            text: 'Guide',
+        },
+    ],
 };
 
 const EXAMPLE_BREADCRUMBS = {
-  classes: 'extra-class another-extra-class',
-  ariaLabel: 'Breadcrumbs label',
-  id: 'example-breadcrumbs',
-  itemsList: [
-    {
-      itemClasses: 'item-extra-class item-another-extra-class',
-      linkClasses: 'link-extra-class link-another-extra-class',
-      url: 'https://example.com/',
-      text: 'Home',
-      attributes: {
-        'data-a': '123',
-        'data-b': '456',
-      },
-      id: 'first-breadcrumb',
-    },
-    {
-      url: 'https://example.com/guide/',
-      text: 'Guide',
-      id: 'second-breadcrumb',
-      attributes: {
-        'data-a': '789',
-        'data-b': 'ABC',
-      },
-    },
-  ],
+    classes: 'extra-class another-extra-class',
+    ariaLabel: 'Breadcrumbs label',
+    id: 'example-breadcrumbs',
+    itemsList: [
+        {
+            itemClasses: 'item-extra-class item-another-extra-class',
+            linkClasses: 'link-extra-class link-another-extra-class',
+            url: 'https://example.com/',
+            text: 'Home',
+            attributes: {
+                'data-a': '123',
+                'data-b': '456',
+            },
+            id: 'first-breadcrumb',
+        },
+        {
+            url: 'https://example.com/guide/',
+            text: 'Guide',
+            id: 'second-breadcrumb',
+            attributes: {
+                'data-a': '789',
+                'data-b': 'ABC',
+            },
+        },
+    ],
 };
 
 describe('macro: breadcrumbs', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-  it('has additionally provided style classes', () => {
-    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
+    it('has additionally provided style classes', () => {
+        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    expect($('.ons-breadcrumbs').hasClass('extra-class')).toBe(true);
-    expect($('.ons-breadcrumbs').hasClass('another-extra-class')).toBe(true);
-  });
+        expect($('.ons-breadcrumbs').hasClass('extra-class')).toBe(true);
+        expect($('.ons-breadcrumbs').hasClass('another-extra-class')).toBe(true);
+    });
 
-  it('has a default `aria-label` of "Breadcrumbs"', () => {
-    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_MINIMAL));
+    it('has a default `aria-label` of "Breadcrumbs"', () => {
+        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_MINIMAL));
 
-    expect($('.ons-breadcrumbs').attr('aria-label')).toBe('Breadcrumbs');
-  });
+        expect($('.ons-breadcrumbs').attr('aria-label')).toBe('Breadcrumbs');
+    });
 
-  it('has the provided `ariaLabel` for `aria-label`', () => {
-    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
+    it('has the provided `ariaLabel` for `aria-label`', () => {
+        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    expect($('.ons-breadcrumbs').attr('aria-label')).toBe('Breadcrumbs label');
-  });
+        expect($('.ons-breadcrumbs').attr('aria-label')).toBe('Breadcrumbs label');
+    });
 
-  it('has the provided `id`', () => {
-    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
+    it('has the provided `id`', () => {
+        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    expect($('.ons-breadcrumbs').attr('id')).toBe('example-breadcrumbs');
-  });
+        expect($('.ons-breadcrumbs').attr('id')).toBe('example-breadcrumbs');
+    });
 
-  it('has additionally provided style classes on `item` element', () => {
-    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
+    it('has additionally provided style classes on `item` element', () => {
+        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    expect($('.ons-breadcrumbs__item:first').hasClass('item-extra-class')).toBe(true);
-    expect($('.ons-breadcrumbs__item:first').hasClass('item-another-extra-class')).toBe(true);
-  });
+        expect($('.ons-breadcrumbs__item:first').hasClass('item-extra-class')).toBe(true);
+        expect($('.ons-breadcrumbs__item:first').hasClass('item-another-extra-class')).toBe(true);
+    });
 
-  it('has additionally provided style classes on `link` element', () => {
-    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
+    it('has additionally provided style classes on `link` element', () => {
+        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    expect($('.ons-breadcrumbs__link:first').hasClass('link-extra-class')).toBe(true);
-    expect($('.ons-breadcrumbs__link:first').hasClass('link-another-extra-class')).toBe(true);
-  });
+        expect($('.ons-breadcrumbs__link:first').hasClass('link-extra-class')).toBe(true);
+        expect($('.ons-breadcrumbs__link:first').hasClass('link-another-extra-class')).toBe(true);
+    });
 
-  it('has provided `url` on `link` elements', () => {
-    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
+    it('has provided `url` on `link` elements', () => {
+        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    const urls = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('href'));
-    expect(urls).toEqual(['https://example.com/', 'https://example.com/guide/']);
-  });
+        const urls = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('href'));
+        expect(urls).toEqual(['https://example.com/', 'https://example.com/guide/']);
+    });
 
-  it('has provided `text` on `link` elements', () => {
-    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
+    it('has provided `text` on `link` elements', () => {
+        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    const labels = mapAll($('.ons-breadcrumbs__link'), (node) => node.text().trim());
-    expect(labels).toEqual(['Home', 'Guide']);
-  });
+        const labels = mapAll($('.ons-breadcrumbs__link'), (node) => node.text().trim());
+        expect(labels).toEqual(['Home', 'Guide']);
+    });
 
-  it('has provided `attributes` on `link` elements', () => {
-    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
+    it('has provided `attributes` on `link` elements', () => {
+        const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
 
-    const testValuesA = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-a'));
-    expect(testValuesA).toEqual(['123', '789']);
-    const testValuesB = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-b'));
-    expect(testValuesB).toEqual(['456', 'ABC']);
-  });
+        const testValuesA = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-a'));
+        expect(testValuesA).toEqual(['123', '789']);
+        const testValuesB = mapAll($('.ons-breadcrumbs__link'), (node) => node.attr('data-b'));
+        expect(testValuesB).toEqual(['456', 'ABC']);
+    });
 
-  it('has a "chevron" icon for each breadcrumb item', () => {
-    const faker = templateFaker();
-    const iconsSpy = faker.spy('icon');
+    it('has a "chevron" icon for each breadcrumb item', () => {
+        const faker = templateFaker();
+        const iconsSpy = faker.spy('icon');
 
-    faker.renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_MINIMAL);
+        faker.renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_MINIMAL);
 
-    const iconTypes = iconsSpy.occurrences.map((occurrence) => occurrence.iconType);
-    expect(iconTypes).toEqual(['chevron', 'chevron']);
-  });
+        const iconTypes = iconsSpy.occurrences.map((occurrence) => occurrence.iconType);
+        expect(iconTypes).toEqual(['chevron', 'chevron']);
+    });
 });

package/components/browser-banner/_browser-banner.scss

@@ -1,39 +1,39 @@
 .ons-browser-banner {
-  background-color: var(--ons-color-banner-browser-bg);
-  display: none; // Hides unsupported browser banner unless targeted below
-  padding: 0.8rem 0;
+    background-color: var(--ons-color-banner-browser-bg);
+    display: none; // Hides unsupported browser banner unless targeted below
+    padding: 0.8rem 0;
 
-  &__content {
-    @extend .ons-u-fs-s;
+    &__content {
+        @extend .ons-u-fs-s;
 
-    color: var(--ons-color-text-inverse);
-    margin: 0;
-  }
+        color: var(--ons-color-text-inverse);
+        margin: 0;
+    }
 
-  &__lead {
-    @extend .ons-u-fw-b;
-  }
+    &__lead {
+        @extend .ons-u-fw-b;
+    }
 
-  &__link {
-    color: var(--ons-color-text-inverse-link);
+    &__link {
+        color: var(--ons-color-text-inverse-link);
 
-    &:hover {
-      color: var(--ons-color-text-inverse-link-hover);
-      text-decoration: underline solid var(--ons-color-text-inverse-link-hover) 2px;
+        &:hover {
+            color: var(--ons-color-text-inverse-link-hover);
+            text-decoration: underline solid var(--ons-color-text-inverse-link-hover) 2px;
+        }
     }
-  }
 }
 
 // Targets browsers IE10 & IE11 and displays unsupported browser banner
 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-  .ons-browser-banner {
-    display: block;
-  }
+    .ons-browser-banner {
+        display: block;
+    }
 }
 
 // Targets browsers IE8 & IE9 and displays unsupported browser banner
 @media screen\0 {
-  .ons-browser-banner {
-    display: block;
-  }
+    .ons-browser-banner {
+        display: block;
+    }
 }

package/components/browser-banner/_macro.njk

@@ -2,16 +2,19 @@
     {% if params.lang == "cy" %}
         {% set bannerLeadingText = 'Nid yw’r wefan hon yn cefnogi eich porwr mwyach.' %}
         {% set bannerLinkUrl = 'https://cy.ons.gov.uk/help/browsers' %}
-        {% set bannerCTA = 'Gallwch <a class="ons-browser-banner__link" href="' + bannerLinkUrl + '">ddiweddaru eich porwr i’r fersiwn ddiweddaraf</a>.' %}
+        {% set bannerCta = 'Gallwch <a class="ons-browser-banner__link" href="' + bannerLinkUrl + '">ddiweddaru eich porwr i’r fersiwn ddiweddaraf</a>.' %}
     {% else %}
         {% set bannerLeadingText = 'This website no longer supports your browser.' %}
         {% set bannerLinkUrl = 'https://www.ons.gov.uk/help/browsers' %}
-        {% set bannerCTA = 'You can <a class="ons-browser-banner__link" href="' + bannerLinkUrl + '">upgrade your browser to the latest version</a>.' %}
+        {% set bannerCta = 'You can <a class="ons-browser-banner__link" href="' + bannerLinkUrl + '">upgrade your browser to the latest version</a>.' %}
     {% endif %}
 
     <div class="ons-browser-banner">
         <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
-            <p class="ons-browser-banner__content"><span class="ons-browser-banner__lead">{{ bannerLeadingText }}</span><span class="ons-browser-banner__cta"> {{ bannerCTA | safe }}</span></p>
+            <p class="ons-browser-banner__content">
+                <span class="ons-browser-banner__lead">{{ bannerLeadingText }}</span
+                ><span class="ons-browser-banner__cta"> {{ bannerCta | safe }}</span>
+            </p>
         </div>
     </div>
 {% endmacro %}

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

@@ -8,99 +8,99 @@ import { renderComponent } from '../../tests/helpers/rendering';
 const EXAMPLE_BROWSER_BANNER_DEFAULT = {};
 
 describe('macro: browser-banner', () => {
-  it('passes jest-axe checks with', async () => {
-    const $ = cheerio.load(renderComponent('browser-banner', EXAMPLE_BROWSER_BANNER_DEFAULT));
-
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
-
-  it('has the default `bannerLeadingText`', () => {
-    const $ = cheerio.load(renderComponent('browser-banner', EXAMPLE_BROWSER_BANNER_DEFAULT));
-
-    const bannerLeadingText = $('.ons-browser-banner__lead').text().trim();
-    expect(bannerLeadingText).toBe('This website no longer supports your browser.');
-  });
-
-  it('has the default `bannerCTA`', () => {
-    const $ = cheerio.load(renderComponent('browser-banner', EXAMPLE_BROWSER_BANNER_DEFAULT));
-
-    const bannerCtaHtml = $('.ons-browser-banner__cta').text().trim();
-    expect(bannerCtaHtml).toBe('You can upgrade your browser to the latest version.');
-  });
-
-  it('has the default `bannerLinkUrl`', () => {
-    const $ = cheerio.load(renderComponent('browser-banner', EXAMPLE_BROWSER_BANNER_DEFAULT));
-
-    expect($('.ons-browser-banner__link').attr('href')).toBe('https://www.ons.gov.uk/help/browsers');
-  });
-
-  it('has `container--wide` class when `wide` is true', () => {
-    const $ = cheerio.load(
-      renderComponent('browser-banner', {
-        ...EXAMPLE_BROWSER_BANNER_DEFAULT,
-        wide: true,
-      }),
-    );
-
-    expect($('.ons-container').hasClass('ons-container--wide')).toBe(true);
-  });
-
-  it('does not have `container--wide` class when `wide` is not set', () => {
-    const $ = cheerio.load(
-      renderComponent('browser-banner', {
-        ...EXAMPLE_BROWSER_BANNER_DEFAULT,
-      }),
-    );
-
-    expect($('.ons-container').hasClass('ons-container--wide')).toBe(false);
-  });
-
-  it('has `container--full-width` class when `fullWidth` is true', () => {
-    const $ = cheerio.load(
-      renderComponent('browser-banner', {
-        ...EXAMPLE_BROWSER_BANNER_DEFAULT,
-        fullWidth: true,
-      }),
-    );
-
-    expect($('.ons-container').hasClass('ons-container--full-width')).toBe(true);
-  });
-
-  it('does not have `container--full-width` class when `fullWidth` is not set', () => {
-    const $ = cheerio.load(
-      renderComponent('browser-banner', {
-        ...EXAMPLE_BROWSER_BANNER_DEFAULT,
-      }),
-    );
-
-    expect($('.ons-container').hasClass('ons-container--full-width')).toBe(false);
-  });
+    it('passes jest-axe checks with', async () => {
+        const $ = cheerio.load(renderComponent('browser-banner', EXAMPLE_BROWSER_BANNER_DEFAULT));
+
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
+
+    it('has the default `bannerLeadingText`', () => {
+        const $ = cheerio.load(renderComponent('browser-banner', EXAMPLE_BROWSER_BANNER_DEFAULT));
+
+        const bannerLeadingText = $('.ons-browser-banner__lead').text().trim();
+        expect(bannerLeadingText).toBe('This website no longer supports your browser.');
+    });
+
+    it('has the default `bannerCTA`', () => {
+        const $ = cheerio.load(renderComponent('browser-banner', EXAMPLE_BROWSER_BANNER_DEFAULT));
+
+        const bannerCtaHtml = $('.ons-browser-banner__cta').text().trim();
+        expect(bannerCtaHtml).toBe('You can upgrade your browser to the latest version.');
+    });
+
+    it('has the default `bannerLinkUrl`', () => {
+        const $ = cheerio.load(renderComponent('browser-banner', EXAMPLE_BROWSER_BANNER_DEFAULT));
+
+        expect($('.ons-browser-banner__link').attr('href')).toBe('https://www.ons.gov.uk/help/browsers');
+    });
+
+    it('has `container--wide` class when `wide` is true', () => {
+        const $ = cheerio.load(
+            renderComponent('browser-banner', {
+                ...EXAMPLE_BROWSER_BANNER_DEFAULT,
+                wide: true,
+            }),
+        );
+
+        expect($('.ons-container').hasClass('ons-container--wide')).toBe(true);
+    });
+
+    it('does not have `container--wide` class when `wide` is not set', () => {
+        const $ = cheerio.load(
+            renderComponent('browser-banner', {
+                ...EXAMPLE_BROWSER_BANNER_DEFAULT,
+            }),
+        );
+
+        expect($('.ons-container').hasClass('ons-container--wide')).toBe(false);
+    });
+
+    it('has `container--full-width` class when `fullWidth` is true', () => {
+        const $ = cheerio.load(
+            renderComponent('browser-banner', {
+                ...EXAMPLE_BROWSER_BANNER_DEFAULT,
+                fullWidth: true,
+            }),
+        );
+
+        expect($('.ons-container').hasClass('ons-container--full-width')).toBe(true);
+    });
+
+    it('does not have `container--full-width` class when `fullWidth` is not set', () => {
+        const $ = cheerio.load(
+            renderComponent('browser-banner', {
+                ...EXAMPLE_BROWSER_BANNER_DEFAULT,
+            }),
+        );
+
+        expect($('.ons-container').hasClass('ons-container--full-width')).toBe(false);
+    });
 });
 
 describe('mode: Welsh language', () => {
-  it('has the welsh version of default `bannerLeadingText`', () => {
-    const $ = cheerio.load(
-      renderComponent('browser-banner', {
-        ...EXAMPLE_BROWSER_BANNER_DEFAULT,
-        lang: 'cy',
-      }),
-    );
-
-    const bannerLeadingText = $('.ons-browser-banner__lead').text().trim();
-    expect(bannerLeadingText).toBe('Nid yw’r wefan hon yn cefnogi eich porwr mwyach.');
-  });
-
-  it('has the welsh version of default `bannerCTA`', () => {
-    const $ = cheerio.load(renderComponent('browser-banner', { lang: 'cy' }));
-
-    const bannerCtaHtml = $('.ons-browser-banner__cta').text().trim();
-    expect(bannerCtaHtml).toBe('Gallwch ddiweddaru eich porwr i’r fersiwn ddiweddaraf.');
-  });
-
-  it('has the welsh version of default `bannerLinkUrl`', () => {
-    const $ = cheerio.load(renderComponent('browser-banner', { lang: 'cy' }));
-
-    expect($('.ons-browser-banner__link').attr('href')).toBe('https://cy.ons.gov.uk/help/browsers');
-  });
+    it('has the welsh version of default `bannerLeadingText`', () => {
+        const $ = cheerio.load(
+            renderComponent('browser-banner', {
+                ...EXAMPLE_BROWSER_BANNER_DEFAULT,
+                lang: 'cy',
+            }),
+        );
+
+        const bannerLeadingText = $('.ons-browser-banner__lead').text().trim();
+        expect(bannerLeadingText).toBe('Nid yw’r wefan hon yn cefnogi eich porwr mwyach.');
+    });
+
+    it('has the welsh version of default `bannerCTA`', () => {
+        const $ = cheerio.load(renderComponent('browser-banner', { lang: 'cy' }));
+
+        const bannerCtaHtml = $('.ons-browser-banner__cta').text().trim();
+        expect(bannerCtaHtml).toBe('Gallwch ddiweddaru eich porwr i’r fersiwn ddiweddaraf.');
+    });
+
+    it('has the welsh version of default `bannerLinkUrl`', () => {
+        const $ = cheerio.load(renderComponent('browser-banner', { lang: 'cy' }));
+
+        expect($('.ons-browser-banner__link').attr('href')).toBe('https://cy.ons.gov.uk/help/browsers');
+    });
 });