@ons/design-system 70.0.7 → 70.0.9

package/components/password/_macro.spec.js

@@ -6,132 +6,132 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_PASSWORD_MINIMAL = {
-  id: 'example-password',
-  name: 'example-password-name',
-  label: {
-    text: 'Label text',
-    description: 'Description text',
-    classes: 'extra-label-class',
-  },
-  showPasswordText: 'Show password',
+    id: 'example-password',
+    name: 'example-password-name',
+    label: {
+        text: 'Label text',
+        description: 'Description text',
+        classes: 'extra-label-class',
+    },
+    showPasswordText: 'Show password',
 };
 
 const EXAMPLE_PASSWORD = {
-  ...EXAMPLE_PASSWORD_MINIMAL,
-  fieldId: 'example-password-field',
-  fieldClasses: 'extra-field-class',
+    ...EXAMPLE_PASSWORD_MINIMAL,
+    fieldId: 'example-password-field',
+    fieldClasses: 'extra-field-class',
 };
 
 const EXAMPLE_PASSWORD_WITH_ERROR = {
-  ...EXAMPLE_PASSWORD,
-  error: {
-    id: 'example-error',
-    text: 'Error text...',
-  },
+    ...EXAMPLE_PASSWORD,
+    error: {
+        id: 'example-error',
+        text: 'Error text...',
+    },
 };
 
 describe('macro: password', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(renderComponent('password', EXAMPLE_PASSWORD));
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(renderComponent('password', EXAMPLE_PASSWORD));
 
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-  it('passes jest-axe checks when error is shown', async () => {
-    const $ = cheerio.load(renderComponent('password', EXAMPLE_PASSWORD_WITH_ERROR));
+    it('passes jest-axe checks when error is shown', async () => {
+        const $ = cheerio.load(renderComponent('password', EXAMPLE_PASSWORD_WITH_ERROR));
 
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-  it('provides expected parameters to the inner `field` component', () => {
-    const faker = templateFaker();
-    const fieldSpy = faker.spy('field');
+    it('provides expected parameters to the inner `field` component', () => {
+        const faker = templateFaker();
+        const fieldSpy = faker.spy('field');
 
-    cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD));
+        cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD));
 
-    expect(fieldSpy.occurrences[0]).toEqual({
-      id: 'example-password-field',
-      classes: 'ons-js-password extra-field-class',
-      error: undefined,
+        expect(fieldSpy.occurrences[0]).toEqual({
+            id: 'example-password-field',
+            classes: 'ons-js-password extra-field-class',
+            error: undefined,
+        });
     });
-  });
 
-  it('provides expected parameters to the inner `field` component when there is an error', () => {
-    const faker = templateFaker();
-    const fieldSpy = faker.spy('field');
+    it('provides expected parameters to the inner `field` component when there is an error', () => {
+        const faker = templateFaker();
+        const fieldSpy = faker.spy('field');
 
-    cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD_WITH_ERROR));
+        cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD_WITH_ERROR));
 
-    expect(fieldSpy.occurrences[0]).toEqual({
-      id: 'example-password-field',
-      classes: 'ons-js-password extra-field-class',
-      error: {
-        id: 'example-error',
-        text: 'Error text...',
-      },
+        expect(fieldSpy.occurrences[0]).toEqual({
+            id: 'example-password-field',
+            classes: 'ons-js-password extra-field-class',
+            error: {
+                id: 'example-error',
+                text: 'Error text...',
+            },
+        });
     });
-  });
 
-  it('provides expected parameters to the inner `label` component', () => {
-    const faker = templateFaker();
-    const labelSpy = faker.spy('label');
+    it('provides expected parameters to the inner `label` component', () => {
+        const faker = templateFaker();
+        const labelSpy = faker.spy('label');
 
-    cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD));
+        cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD));
 
-    expect(labelSpy.occurrences[0]).toEqual({
-      for: 'example-password',
-      text: 'Label text',
-      description: 'Description text',
-      classes: 'extra-label-class',
+        expect(labelSpy.occurrences[0]).toEqual({
+            for: 'example-password',
+            text: 'Label text',
+            description: 'Description text',
+            classes: 'extra-label-class',
+        });
     });
-  });
-
-  it('provides expected parameters to the inner `checkbox` component', () => {
-    const faker = templateFaker();
-    const checkboxSpy = faker.spy('checkboxes/checkbox');
-
-    cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD));
-
-    expect(checkboxSpy.occurrences[0]).toEqual({
-      id: 'example-password-toggle',
-      classes: 'ons-js-password-toggle-wrap ons-checkbox--toggle ons-u-d-no',
-      inputClasses: 'ons-js-password-toggle',
-      name: 'show-password',
-      label: {
-        text: 'Show password',
-      },
+
+    it('provides expected parameters to the inner `checkbox` component', () => {
+        const faker = templateFaker();
+        const checkboxSpy = faker.spy('checkboxes/checkbox');
+
+        cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD));
+
+        expect(checkboxSpy.occurrences[0]).toEqual({
+            id: 'example-password-toggle',
+            classes: 'ons-js-password-toggle-wrap ons-checkbox--toggle ons-u-d-no',
+            inputClasses: 'ons-js-password-toggle',
+            name: 'show-password',
+            label: {
+                text: 'Show password',
+            },
+        });
     });
-  });
 
-  it('provides expected parameters to the inner `input` component', () => {
-    const faker = templateFaker();
-    const inputSpy = faker.spy('input');
+    it('provides expected parameters to the inner `input` component', () => {
+        const faker = templateFaker();
+        const inputSpy = faker.spy('input');
 
-    cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD));
+        cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD));
 
-    expect(inputSpy.occurrences[0]).toEqual({
-      id: 'example-password',
-      name: 'example-password-name',
-      type: 'password',
-      classes: 'ons-u-mt-xs ons-js-password-input',
-      dontWrap: true,
+        expect(inputSpy.occurrences[0]).toEqual({
+            id: 'example-password',
+            name: 'example-password-name',
+            type: 'password',
+            classes: 'ons-u-mt-xs ons-js-password-input',
+            dontWrap: true,
+        });
     });
-  });
 
-  it('provides expected parameters to the inner `input` component when error is shown', () => {
-    const faker = templateFaker();
-    const inputSpy = faker.spy('input');
+    it('provides expected parameters to the inner `input` component when error is shown', () => {
+        const faker = templateFaker();
+        const inputSpy = faker.spy('input');
 
-    cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD_WITH_ERROR));
+        cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD_WITH_ERROR));
 
-    expect(inputSpy.occurrences[0]).toEqual({
-      id: 'example-password',
-      name: 'example-password-name',
-      type: 'password',
-      classes: 'ons-u-mt-xs ons-js-password-input ons-input--error',
-      dontWrap: true,
+        expect(inputSpy.occurrences[0]).toEqual({
+            id: 'example-password',
+            name: 'example-password-name',
+            type: 'password',
+            classes: 'ons-u-mt-xs ons-js-password-input ons-input--error',
+            dontWrap: true,
+        });
     });
-  });
 });

package/components/password/password.dom.js

@@ -1,13 +1,13 @@
 import domready from '../../js/domready';
 
 async function initialisePasswords() {
-  const passwordFields = [...document.querySelectorAll('.ons-js-password')];
+    const passwordFields = [...document.querySelectorAll('.ons-js-password')];
 
-  if (passwordFields.length) {
-    const Password = (await import('./password')).default;
+    if (passwordFields.length) {
+        const Password = (await import('./password')).default;
 
-    passwordFields.forEach((field) => new Password(field));
-  }
+        passwordFields.forEach((field) => new Password(field));
+    }
 }
 
 domready(initialisePasswords);

package/components/password/password.js

@@ -3,16 +3,16 @@ const classToggle = 'ons-js-password-toggle';
 const classInput = 'ons-js-password-input';
 
 export default class Password {
-  constructor(context) {
-    this.toggleWrap = context.querySelector(`.${classToggleWrap}`);
-    this.toggle = this.toggleWrap.querySelector(`.${classToggle}`);
-    this.input = context.querySelector(`.${classInput}`);
+    constructor(context) {
+        this.toggleWrap = context.querySelector(`.${classToggleWrap}`);
+        this.toggle = this.toggleWrap.querySelector(`.${classToggle}`);
+        this.input = context.querySelector(`.${classInput}`);
 
-    this.toggle.addEventListener('change', this.handleToggleChange.bind(this));
-    this.toggleWrap.classList.remove('ons-u-d-no');
-  }
+        this.toggle.addEventListener('change', this.handleToggleChange.bind(this));
+        this.toggleWrap.classList.remove('ons-u-d-no');
+    }
 
-  handleToggleChange() {
-    this.input.type = this.toggle.checked ? 'text' : 'password';
-  }
+    handleToggleChange() {
+        this.input.type = this.toggle.checked ? 'text' : 'password';
+    }
 }

package/components/password/password.spec.js

@@ -1,40 +1,40 @@
 import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
 const EXAMPLE_PASSWORD_MINIMAL = {
-  id: 'example-password',
-  name: 'example-password-name',
-  label: {
-    text: 'Label text',
-    description: 'Description text',
-    classes: 'extra-label-class',
-  },
-  showPasswordText: 'Show password',
+    id: 'example-password',
+    name: 'example-password-name',
+    label: {
+        text: 'Label text',
+        description: 'Description text',
+        classes: 'extra-label-class',
+    },
+    showPasswordText: 'Show password',
 };
 
 describe('script: password', () => {
-  it('has input of type `password` initially', async () => {
-    await setTestPage('/test', renderComponent('password', EXAMPLE_PASSWORD_MINIMAL));
+    it('has input of type `password` initially', async () => {
+        await setTestPage('/test', renderComponent('password', EXAMPLE_PASSWORD_MINIMAL));
 
-    const inputType = await page.evaluate(() => document.querySelector('#example-password').type);
-    expect(inputType).toBe('password');
-  });
+        const inputType = await page.evaluate(() => document.querySelector('#example-password').type);
+        expect(inputType).toBe('password');
+    });
 
-  it('has input of type `text` when "Show password" toggle is clicked', async () => {
-    await setTestPage('/test', renderComponent('password', EXAMPLE_PASSWORD_MINIMAL));
+    it('has input of type `text` when "Show password" toggle is clicked', async () => {
+        await setTestPage('/test', renderComponent('password', EXAMPLE_PASSWORD_MINIMAL));
 
-    await page.click('#example-password-toggle');
+        await page.click('#example-password-toggle');
 
-    const inputType = await page.evaluate(() => document.querySelector('#example-password').type);
-    expect(inputType).toBe('text');
-  });
+        const inputType = await page.evaluate(() => document.querySelector('#example-password').type);
+        expect(inputType).toBe('text');
+    });
 
-  it('has input of type `password` when "Show password" toggle is clicked twice', async () => {
-    await setTestPage('/test', renderComponent('password', EXAMPLE_PASSWORD_MINIMAL));
+    it('has input of type `password` when "Show password" toggle is clicked twice', async () => {
+        await setTestPage('/test', renderComponent('password', EXAMPLE_PASSWORD_MINIMAL));
 
-    await page.click('#example-password-toggle');
-    await page.click('#example-password-toggle');
+        await page.click('#example-password-toggle');
+        await page.click('#example-password-toggle');
 
-    const inputType = await page.evaluate(() => document.querySelector('#example-password').type);
-    expect(inputType).toBe('password');
-  });
+        const inputType = await page.evaluate(() => document.querySelector('#example-password').type);
+        expect(inputType).toBe('password');
+    });
 });

package/components/phase-banner/_macro.njk

@@ -3,9 +3,9 @@
         <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
             <div class="ons-grid ons-grid--flex ons-grid--gutterless ons-grid--vertical-top ons-grid--no-wrap">
                 {% if not params.hideBadge %}
-                <div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-flex-no-shrink">
-                    <strong class="ons-phase-banner__badge">{{ params.badge | default("Beta") }}</strong>
-                </div>
+                    <div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-flex-no-shrink">
+                        <strong class="ons-phase-banner__badge">{{ params.badge | default("Beta") }}</strong>
+                    </div>
                 {% endif %}
                 <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
                     <p class="ons-phase-banner__desc ons-u-fs-s ons-u-mb-no">{{ params.html | safe }}</p>

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

@@ -6,93 +6,93 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
 const EXAMPLE_PHASE_BANNER_MINIMAL = {
-  html: 'Example content with a <a href="#">link</a>',
+    html: 'Example content with a <a href="#">link</a>',
 };
 
 describe('macro: phase-banner', () => {
-  it('passes jest-axe checks with', async () => {
-    const $ = cheerio.load(renderComponent('phase-banner', EXAMPLE_PHASE_BANNER_MINIMAL));
-
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
-
-  it('has expected html content', () => {
-    const $ = cheerio.load(renderComponent('phase-banner', EXAMPLE_PHASE_BANNER_MINIMAL));
-
-    const htmlContent = $('.ons-phase-banner__desc').html().trim();
-    expect(htmlContent).toBe('Example content with a <a href="#">link</a>');
-  });
-
-  it('has the "Beta" badge by default', () => {
-    const $ = cheerio.load(renderComponent('phase-banner', EXAMPLE_PHASE_BANNER_MINIMAL));
-
-    const badgeText = $('.ons-phase-banner__badge').text().trim();
-    expect(badgeText).toBe('Beta');
-  });
-
-  it('has the provided `badge` text', () => {
-    const $ = cheerio.load(
-      renderComponent('phase-banner', {
-        ...EXAMPLE_PHASE_BANNER_MINIMAL,
-        badge: 'Alpha',
-      }),
-    );
-
-    const badgeText = $('.ons-phase-banner__badge').text().trim();
-    expect(badgeText).toBe('Alpha');
-  });
-
-  it('has no badge when `hideBadge` is true', () => {
-    const $ = cheerio.load(
-      renderComponent('phase-banner', {
-        ...EXAMPLE_PHASE_BANNER_MINIMAL,
-        hideBadge: true,
-      }),
-    );
-
-    expect($('.ons-phase-banner__badge').length).toBe(0);
-  });
-
-  it('has `container--wide` class when `wide` is true', () => {
-    const $ = cheerio.load(
-      renderComponent('phase-banner', {
-        ...EXAMPLE_PHASE_BANNER_MINIMAL,
-        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('phase-banner', {
-        ...EXAMPLE_PHASE_BANNER_MINIMAL,
-      }),
-    );
-
-    expect($('.ons-container').hasClass('ons-container--wide')).toBe(false);
-  });
-
-  it('has `container--full-width` class when `fullWidth` is true', () => {
-    const $ = cheerio.load(
-      renderComponent('phase-banner', {
-        ...EXAMPLE_PHASE_BANNER_MINIMAL,
-        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('phase-banner', {
-        ...EXAMPLE_PHASE_BANNER_MINIMAL,
-      }),
-    );
-
-    expect($('.ons-container').hasClass('ons-container--full-width')).toBe(false);
-  });
+    it('passes jest-axe checks with', async () => {
+        const $ = cheerio.load(renderComponent('phase-banner', EXAMPLE_PHASE_BANNER_MINIMAL));
+
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
+
+    it('has expected html content', () => {
+        const $ = cheerio.load(renderComponent('phase-banner', EXAMPLE_PHASE_BANNER_MINIMAL));
+
+        const htmlContent = $('.ons-phase-banner__desc').html().trim();
+        expect(htmlContent).toBe('Example content with a <a href="#">link</a>');
+    });
+
+    it('has the "Beta" badge by default', () => {
+        const $ = cheerio.load(renderComponent('phase-banner', EXAMPLE_PHASE_BANNER_MINIMAL));
+
+        const badgeText = $('.ons-phase-banner__badge').text().trim();
+        expect(badgeText).toBe('Beta');
+    });
+
+    it('has the provided `badge` text', () => {
+        const $ = cheerio.load(
+            renderComponent('phase-banner', {
+                ...EXAMPLE_PHASE_BANNER_MINIMAL,
+                badge: 'Alpha',
+            }),
+        );
+
+        const badgeText = $('.ons-phase-banner__badge').text().trim();
+        expect(badgeText).toBe('Alpha');
+    });
+
+    it('has no badge when `hideBadge` is true', () => {
+        const $ = cheerio.load(
+            renderComponent('phase-banner', {
+                ...EXAMPLE_PHASE_BANNER_MINIMAL,
+                hideBadge: true,
+            }),
+        );
+
+        expect($('.ons-phase-banner__badge').length).toBe(0);
+    });
+
+    it('has `container--wide` class when `wide` is true', () => {
+        const $ = cheerio.load(
+            renderComponent('phase-banner', {
+                ...EXAMPLE_PHASE_BANNER_MINIMAL,
+                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('phase-banner', {
+                ...EXAMPLE_PHASE_BANNER_MINIMAL,
+            }),
+        );
+
+        expect($('.ons-container').hasClass('ons-container--wide')).toBe(false);
+    });
+
+    it('has `container--full-width` class when `fullWidth` is true', () => {
+        const $ = cheerio.load(
+            renderComponent('phase-banner', {
+                ...EXAMPLE_PHASE_BANNER_MINIMAL,
+                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('phase-banner', {
+                ...EXAMPLE_PHASE_BANNER_MINIMAL,
+            }),
+        );
+
+        expect($('.ons-container').hasClass('ons-container--full-width')).toBe(false);
+    });
 });

package/components/phase-banner/_phase-banner.scss

@@ -1,20 +1,20 @@
 .ons-phase-banner {
-  background: var(--ons-color-white);
-  border-bottom: 1px solid var(--ons-color-borders);
-  padding: 0.5rem 0;
+    background: var(--ons-color-white);
+    border-bottom: 1px solid var(--ons-color-borders);
+    padding: 0.5rem 0;
 
-  &__badge {
-    background: var(--ons-color-black);
-    color: var(--ons-color-white);
-    font-size: 0.85rem;
-    line-height: 1em;
-    margin: 0 0.5rem 0 0;
-    outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
-    padding: 0.4rem;
-    text-transform: uppercase;
-  }
+    &__badge {
+        background: var(--ons-color-black);
+        color: var(--ons-color-white);
+        font-size: 0.85rem;
+        line-height: 1em;
+        margin: 0 0.5rem 0 0;
+        outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
+        padding: 0.4rem;
+        text-transform: uppercase;
+    }
 
-  &__desc {
-    margin-top: 0.3rem;
-  }
+    &__desc {
+        margin-top: 0.3rem;
+    }
 }

package/components/phase-banner/example-phase-banner-alpha.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
 {% from "components/external-link/_macro.njk" import onsExternalLink %}
 

package/components/phase-banner/example-phase-banner-beta.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
 {% from "components/external-link/_macro.njk" import onsExternalLink %}
 
@@ -15,6 +16,6 @@
 
 {{
     onsPhaseBanner({
-        "html": "This is a new service. To help us improve it, " + feedbackLink
-  })
+          "html": "This is a new service. To help us improve it, " + feedbackLink
+    })
 }}