@ons/design-system 70.0.6 → 70.0.8

package/components/skip-to-content/_skip.scss

@@ -1,33 +1,33 @@
 .ons-skip-to-content {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  display: block;
-  font-size: 1.1rem;
-  font-weight: $font-weight-bold;
-  height: 1px;
-  margin: 0;
-  overflow: hidden;
-  position: absolute;
-  top: 0;
-  white-space: nowrap;
-  width: 1px;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    display: block;
+    font-size: 1.1rem;
+    font-weight: $font-weight-bold;
+    height: 1px;
+    margin: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    white-space: nowrap;
+    width: 1px;
 
-  &:focus {
-    background-color: var(--ons-color-focus);
-    box-shadow: 0;
-    clip: auto;
-    clip-path: none;
-    color: var(--ons-color-text-link-focus);
-    height: auto;
-    margin: inherit;
-    max-height: 20em;
-    outline: 3px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
-    outline-offset: -4px;
-    overflow: visible;
-    padding: 1rem;
-    position: static;
-    text-decoration: underline solid var(--ons-color-text-link-focus) 4px;
-    white-space: inherit;
-    width: auto;
-  }
+    &:focus {
+        background-color: var(--ons-color-focus);
+        box-shadow: 0;
+        clip: auto;
+        clip-path: none;
+        color: var(--ons-color-text-link-focus);
+        height: auto;
+        margin: inherit;
+        max-height: 20em;
+        outline: 3px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
+        outline-offset: -4px;
+        overflow: visible;
+        padding: 1rem;
+        position: static;
+        text-decoration: underline solid var(--ons-color-text-link-focus) 4px;
+        white-space: inherit;
+        width: auto;
+    }
 }

package/components/skip-to-content/skip-to-content.dom.js

@@ -2,12 +2,12 @@ import domready from '../../js/domready';
 import skipToMain from './skip-to-content';
 
 async function initaliseSkipToLink() {
-  const links = [...document.querySelectorAll('.ons-skip-to-content')];
-  if (links.length) {
-    links.forEach((link) => {
-      skipToMain(link);
-    });
-  }
+    const links = [...document.querySelectorAll('.ons-skip-to-content')];
+    if (links.length) {
+        links.forEach((link) => {
+            skipToMain(link);
+        });
+    }
 }
 
 domready(initaliseSkipToLink);

package/components/skip-to-content/skip-to-content.js

@@ -1,9 +1,9 @@
 export default function skipToMain(link) {
-  const id = link.getAttribute('href').replace('#', '');
-  link.addEventListener('click', (event) => {
-    event.preventDefault();
-    document.getElementById(id).tabIndex = -1;
-    document.getElementById(id).style.outline = 'none';
-    document.getElementById(id).focus();
-  });
+    const id = link.getAttribute('href').replace('#', '');
+    link.addEventListener('click', (event) => {
+        event.preventDefault();
+        document.getElementById(id).tabIndex = -1;
+        document.getElementById(id).style.outline = 'none';
+        document.getElementById(id).focus();
+    });
 }

package/components/skip-to-content/skip-to-content.spec.js

@@ -12,33 +12,33 @@ const EXAMPLE_SKIP_TO_LINK_TEMPLATE = `
 `;
 
 describe('script: skip-to-content', () => {
-  it('sets `tabIndex` of target element to -1', async () => {
-    await setTestPage('/test', EXAMPLE_SKIP_TO_LINK_TEMPLATE);
+    it('sets `tabIndex` of target element to -1', async () => {
+        await setTestPage('/test', EXAMPLE_SKIP_TO_LINK_TEMPLATE);
 
-    await page.focus('.ons-skip-to-content');
-    await page.keyboard.press('Enter');
+        await page.focus('.ons-skip-to-content');
+        await page.keyboard.press('Enter');
 
-    const targetTabIndex = await page.$eval('#target-element', (el) => el.tabIndex);
-    expect(targetTabIndex).toBe(-1);
-  });
+        const targetTabIndex = await page.$eval('#target-element', (el) => el.tabIndex);
+        expect(targetTabIndex).toBe(-1);
+    });
 
-  it('removes outline from target element on navigate', async () => {
-    await setTestPage('/test', EXAMPLE_SKIP_TO_LINK_TEMPLATE);
+    it('removes outline from target element on navigate', async () => {
+        await setTestPage('/test', EXAMPLE_SKIP_TO_LINK_TEMPLATE);
 
-    await page.focus('.ons-skip-to-content');
-    await page.keyboard.press('Enter');
+        await page.focus('.ons-skip-to-content');
+        await page.keyboard.press('Enter');
 
-    const targetOutline = await page.$eval('#target-element', (el) => el.style.outline);
-    expect(targetOutline).toBe('none');
-  });
+        const targetOutline = await page.$eval('#target-element', (el) => el.style.outline);
+        expect(targetOutline).toBe('none');
+    });
 
-  it('focuses target element on navigate', async () => {
-    await setTestPage('/test', EXAMPLE_SKIP_TO_LINK_TEMPLATE);
+    it('focuses target element on navigate', async () => {
+        await setTestPage('/test', EXAMPLE_SKIP_TO_LINK_TEMPLATE);
 
-    await page.focus('.ons-skip-to-content');
-    await page.keyboard.press('Enter');
+        await page.focus('.ons-skip-to-content');
+        await page.keyboard.press('Enter');
 
-    const focusedElementId = await page.evaluate(() => document.activeElement.id);
-    expect(focusedElementId).toBe('target-element');
-  });
+        const focusedElementId = await page.evaluate(() => document.activeElement.id);
+        expect(focusedElementId).toBe('target-element');
+    });
 });

package/components/status/_macro.spec.js

@@ -6,68 +6,68 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
 describe('macro: status', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(
-      renderComponent('status', {
-        variant: 'success',
-        label: 'Example status message',
-        size: 'small',
-      }),
-    );
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(
+            renderComponent('status', {
+                variant: 'success',
+                label: 'Example status message',
+                size: 'small',
+            }),
+        );
 
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-  it('has the default variant "info" when `variant` is not provided', () => {
-    const $ = cheerio.load(
-      renderComponent('status', {
-        label: 'Example status message',
-      }),
-    );
+    it('has the default variant "info" when `variant` is not provided', () => {
+        const $ = cheerio.load(
+            renderComponent('status', {
+                label: 'Example status message',
+            }),
+        );
 
-    expect($('.ons-status').hasClass('ons-status--info')).toBe(true);
-  });
+        expect($('.ons-status').hasClass('ons-status--info')).toBe(true);
+    });
 
-  it('has the provided `variant`', () => {
-    const $ = cheerio.load(
-      renderComponent('status', {
-        variant: 'success',
-        label: 'Example status message',
-      }),
-    );
+    it('has the provided `variant`', () => {
+        const $ = cheerio.load(
+            renderComponent('status', {
+                variant: 'success',
+                label: 'Example status message',
+            }),
+        );
 
-    expect($('.ons-status').hasClass('ons-status--success')).toBe(true);
-  });
+        expect($('.ons-status').hasClass('ons-status--success')).toBe(true);
+    });
 
-  it('does not have the `ons-status--small` modifier by default', () => {
-    const $ = cheerio.load(
-      renderComponent('status', {
-        label: 'Example status message',
-      }),
-    );
+    it('does not have the `ons-status--small` modifier by default', () => {
+        const $ = cheerio.load(
+            renderComponent('status', {
+                label: 'Example status message',
+            }),
+        );
 
-    expect($('.ons-status').hasClass('ons-status--small')).not.toBe(true);
-  });
+        expect($('.ons-status').hasClass('ons-status--small')).not.toBe(true);
+    });
 
-  it('has the `ons-status--small` when provided', () => {
-    const $ = cheerio.load(
-      renderComponent('status', {
-        label: 'Example status message',
-        size: 'small',
-      }),
-    );
+    it('has the `ons-status--small` when provided', () => {
+        const $ = cheerio.load(
+            renderComponent('status', {
+                label: 'Example status message',
+                size: 'small',
+            }),
+        );
 
-    expect($('.ons-status').hasClass('ons-status--small')).toBe(true);
-  });
+        expect($('.ons-status').hasClass('ons-status--small')).toBe(true);
+    });
 
-  it('has the provided `label`', () => {
-    const $ = cheerio.load(
-      renderComponent('status', {
-        label: 'Example status message',
-      }),
-    );
+    it('has the provided `label`', () => {
+        const $ = cheerio.load(
+            renderComponent('status', {
+                label: 'Example status message',
+            }),
+        );
 
-    expect($('.ons-status').text().trim()).toBe('Example status message');
-  });
+        expect($('.ons-status').text().trim()).toBe('Example status message');
+    });
 });

package/components/status/_status.scss

@@ -1,43 +1,43 @@
 @mixin status-dot($status-color) {
-  background-color: $status-color;
-  border: 3px solid $status-color;
+    background-color: $status-color;
+    border: 3px solid $status-color;
 }
 
 @mixin status-size($status-size: 1rem, $status-mb: -0.15rem) {
-  height: $status-size;
-  margin-bottom: $status-mb;
-  width: $status-size;
+    height: $status-size;
+    margin-bottom: $status-mb;
+    width: $status-size;
 }
 
 .ons-status {
-  &::before {
-    @include status-size;
+    &::before {
+        @include status-size;
 
-    border-radius: 100%;
-    box-sizing: border-box;
-    content: '';
-    display: inline-block;
-    margin-right: 0.391rem;
-  }
+        border-radius: 100%;
+        box-sizing: border-box;
+        content: '';
+        display: inline-block;
+        margin-right: 0.391rem;
+    }
 
-  /* Small status indicators for information dense situations */
-  &.ons-status--small::before {
-    @include status-size(0.555555rem, $status-mb: 0.055556rem);
-  }
+    /* Small status indicators for information dense situations */
+    &.ons-status--small::before {
+        @include status-size(0.5556rem, $status-mb: 0.0556rem);
+    }
 
-  &.ons-status--success::before {
-    @include status-dot(var(--ons-color-success-vibrant));
-  }
-  &.ons-status--pending::before {
-    @include status-dot(var(--ons-color-pending-vibrant));
-  }
-  &.ons-status--error::before {
-    @include status-dot(var(--ons-color-errors-vibrant));
-  }
-  &.ons-status--dead::before {
-    @include status-dot(var(--ons-color-dead));
-  }
-  &.ons-status--info::before {
-    @include status-dot(var(--ons-color-info-vibrant));
-  }
+    &.ons-status--success::before {
+        @include status-dot(var(--ons-color-success-vibrant));
+    }
+    &.ons-status--pending::before {
+        @include status-dot(var(--ons-color-pending-vibrant));
+    }
+    &.ons-status--error::before {
+        @include status-dot(var(--ons-color-errors-vibrant));
+    }
+    &.ons-status--dead::before {
+        @include status-dot(var(--ons-color-dead));
+    }
+    &.ons-status--info::before {
+        @include status-dot(var(--ons-color-info-vibrant));
+    }
 }