@ons/design-system 70.0.6 → 70.0.8

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.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;
+    }
 }