@ons/design-system 70.0.7 → 70.0.8

package/components/error/_macro.spec.js

@@ -8,86 +8,86 @@ import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 const FAKE_NESTED_CONTENT = '<span class="test--nested">Nested content...</span>';
 
 describe('macro: error', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(
-      renderComponent(
-        'error',
-        {
-          text: 'Example error text.',
-          id: 'example-error',
-        },
-        FAKE_NESTED_CONTENT,
-      ),
-    );
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(
+            renderComponent(
+                'error',
+                {
+                    text: 'Example error text.',
+                    id: 'example-error',
+                },
+                FAKE_NESTED_CONTENT,
+            ),
+        );
 
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-  it('has the provided `text` text', () => {
-    const $ = cheerio.load(
-      renderComponent(
-        'error',
-        {
-          text: 'Example error text.',
-          id: 'example-error',
-        },
-        FAKE_NESTED_CONTENT,
-      ),
-    );
+    it('has the provided `text` text', () => {
+        const $ = cheerio.load(
+            renderComponent(
+                'error',
+                {
+                    text: 'Example error text.',
+                    id: 'example-error',
+                },
+                FAKE_NESTED_CONTENT,
+            ),
+        );
 
-    expect($('.ons-panel__error').text().trim()).toBe('Example error text.');
-  });
+        expect($('.ons-panel__error').text().trim()).toBe('Example error text.');
+    });
 
-  it('applies the provided `attributes` to the error content paragraph', () => {
-    const $ = cheerio.load(
-      renderComponent(
-        'error',
-        {
-          text: 'Example error text.',
-          id: 'example-error',
-          attributes: {
-            'data-test-a': 'foo',
-            'data-test-b': 'bar',
-          },
-        },
-        FAKE_NESTED_CONTENT,
-      ),
-    );
+    it('applies the provided `attributes` to the error content paragraph', () => {
+        const $ = cheerio.load(
+            renderComponent(
+                'error',
+                {
+                    text: 'Example error text.',
+                    id: 'example-error',
+                    attributes: {
+                        'data-test-a': 'foo',
+                        'data-test-b': 'bar',
+                    },
+                },
+                FAKE_NESTED_CONTENT,
+            ),
+        );
 
-    expect($('.ons-panel__error').attr('data-test-a')).toBe('foo');
-    expect($('.ons-panel__error').attr('data-test-b')).toBe('bar');
-  });
+        expect($('.ons-panel__error').attr('data-test-a')).toBe('foo');
+        expect($('.ons-panel__error').attr('data-test-b')).toBe('bar');
+    });
 
-  it('renders output using a `panel` component', () => {
-    const faker = templateFaker();
-    const panelSpy = faker.spy('panel');
+    it('renders output using a `panel` component', () => {
+        const faker = templateFaker();
+        const panelSpy = faker.spy('panel');
 
-    faker.renderComponent(
-      'error',
-      {
-        text: 'Example error text.',
-        id: 'example-error',
-      },
-      FAKE_NESTED_CONTENT,
-    );
+        faker.renderComponent(
+            'error',
+            {
+                text: 'Example error text.',
+                id: 'example-error',
+            },
+            FAKE_NESTED_CONTENT,
+        );
 
-    expect(panelSpy.occurrences[0].variant).toBe('error');
-    expect(panelSpy.occurrences[0].id).toBe('example-error');
-  });
+        expect(panelSpy.occurrences[0].variant).toBe('error');
+        expect(panelSpy.occurrences[0].id).toBe('example-error');
+    });
 
-  it('renders output using a `panel` component with expected nested content', () => {
-    const $ = cheerio.load(
-      renderComponent(
-        'error',
-        {
-          text: 'Example error text.',
-          id: 'example-error',
-        },
-        FAKE_NESTED_CONTENT,
-      ),
-    );
+    it('renders output using a `panel` component with expected nested content', () => {
+        const $ = cheerio.load(
+            renderComponent(
+                'error',
+                {
+                    text: 'Example error text.',
+                    id: 'example-error',
+                },
+                FAKE_NESTED_CONTENT,
+            ),
+        );
 
-    expect($('.ons-panel .test--nested').text()).toBe('Nested content...');
-  });
+        expect($('.ons-panel .test--nested').text()).toBe('Nested content...');
+    });
 });

package/components/external-link/_external-link.scss

@@ -1,24 +1,24 @@
 .ons-external-link {
-  &__icon {
-    visibility: hidden;
-    white-space: nowrap;
-  }
-  .ons-icon {
-    fill: var(--ons-color-grey-100);
-    padding-bottom: 0.1rem;
-    visibility: visible;
-  }
-  &:focus {
-    .ons-icon {
-      fill: var(--ons-color-black);
+    &__icon {
+        visibility: hidden;
+        white-space: nowrap;
     }
-  }
-  &:hover {
     .ons-icon {
-      fill: var(--ons-color-text-link-hover);
-      .ons-footer & {
-        fill: var(--ons-color-black);
-      }
+        fill: var(--ons-color-grey-100);
+        padding-bottom: 0.1rem;
+        visibility: visible;
+    }
+    &:focus {
+        .ons-icon {
+            fill: var(--ons-color-black);
+        }
+    }
+    &:hover {
+        .ons-icon {
+            fill: var(--ons-color-text-link-hover);
+            .ons-footer & {
+                fill: var(--ons-color-black);
+            }
+        }
     }
-  }
 }

package/components/external-link/_macro.spec.js

@@ -6,77 +6,77 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_EXTERNAL_LINK = {
-  url: 'http://example.com',
-  linkText: 'Example link',
+    url: 'http://example.com',
+    linkText: 'Example link',
 };
 
 describe('macro: external-link', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
-
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
-
-  it('has additionally provided style classes', () => {
-    const $ = cheerio.load(
-      renderComponent('external-link', {
-        ...EXAMPLE_EXTERNAL_LINK,
-        classes: 'extra-class another-extra-class',
-      }),
-    );
-
-    expect($('.ons-external-link').hasClass('extra-class')).toBe(true);
-    expect($('.ons-external-link').hasClass('another-extra-class')).toBe(true);
-  });
-
-  it('has the expected hyperlink URL', async () => {
-    const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
-
-    const $hyperlink = $('a.ons-external-link');
-    expect($hyperlink.attr('href')).toBe('http://example.com');
-  });
-
-  it('opens in a new window when `newWindow` is `true`', () => {
-    const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
-
-    expect($('a').attr('target')).toBe('_blank');
-    expect($('a').attr('rel')).toBe('noopener');
-  });
-
-  it('has the expected link text', async () => {
-    const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
-
-    const $hyperlink = $('a.ons-external-link .ons-external-link__text');
-    expect($hyperlink.text().trim()).toBe('Example link');
-  });
-
-  it('has a default new window description', async () => {
-    const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
-
-    expect($('.ons-external-link__new-window-description').text()).toBe('(opens in a new tab)');
-  });
-
-  it('has a custom new window description when `newWindowDescription` is provided', () => {
-    const $ = cheerio.load(
-      renderComponent('external-link', {
-        ...EXAMPLE_EXTERNAL_LINK,
-        newWindowDescription: 'custom opens in a new tab text',
-      }),
-    );
-
-    expect($('.ons-external-link__new-window-description').text()).toBe('(custom opens in a new tab text)');
-  });
-
-  it('has an "external-link" icon', async () => {
-    const faker = templateFaker();
-    const iconsSpy = faker.spy('icon');
-
-    faker.renderComponent('external-link', {
-      ...EXAMPLE_EXTERNAL_LINK,
-      newWindowDescription: 'custom opens in a new tab text',
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
+
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
+
+    it('has additionally provided style classes', () => {
+        const $ = cheerio.load(
+            renderComponent('external-link', {
+                ...EXAMPLE_EXTERNAL_LINK,
+                classes: 'extra-class another-extra-class',
+            }),
+        );
+
+        expect($('.ons-external-link').hasClass('extra-class')).toBe(true);
+        expect($('.ons-external-link').hasClass('another-extra-class')).toBe(true);
+    });
+
+    it('has the expected hyperlink URL', async () => {
+        const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
+
+        const $hyperlink = $('a.ons-external-link');
+        expect($hyperlink.attr('href')).toBe('http://example.com');
+    });
+
+    it('opens in a new window when `newWindow` is `true`', () => {
+        const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
+
+        expect($('a').attr('target')).toBe('_blank');
+        expect($('a').attr('rel')).toBe('noopener');
+    });
+
+    it('has the expected link text', async () => {
+        const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
+
+        const $hyperlink = $('a.ons-external-link .ons-external-link__text');
+        expect($hyperlink.text().trim()).toBe('Example link');
+    });
+
+    it('has a default new window description', async () => {
+        const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
+
+        expect($('.ons-external-link__new-window-description').text()).toBe('(opens in a new tab)');
     });
 
-    expect(iconsSpy.occurrences[0].iconType).toBe('external-link');
-  });
+    it('has a custom new window description when `newWindowDescription` is provided', () => {
+        const $ = cheerio.load(
+            renderComponent('external-link', {
+                ...EXAMPLE_EXTERNAL_LINK,
+                newWindowDescription: 'custom opens in a new tab text',
+            }),
+        );
+
+        expect($('.ons-external-link__new-window-description').text()).toBe('(custom opens in a new tab text)');
+    });
+
+    it('has an "external-link" icon', async () => {
+        const faker = templateFaker();
+        const iconsSpy = faker.spy('icon');
+
+        faker.renderComponent('external-link', {
+            ...EXAMPLE_EXTERNAL_LINK,
+            newWindowDescription: 'custom opens in a new tab text',
+        });
+
+        expect(iconsSpy.occurrences[0].iconType).toBe('external-link');
+    });
 });

package/components/feedback/_feedback.scss

@@ -1,33 +1,33 @@
 .ons-feedback {
-  border: 3px solid var(--ons-color-branded);
-  margin-bottom: 2rem;
-  padding: 1rem;
-  position: relative;
-  &__link {
-    font-weight: $font-weight-bold;
-  }
-  &::before {
-    border-bottom: 15px solid transparent;
-    border-left: 15px solid var(--ons-color-branded);
-    border-right: 15px solid transparent;
-    border-top: 15px solid var(--ons-color-branded);
-    bottom: -30px;
-    content: '';
-    height: 0;
-    left: 17px;
-    position: absolute;
-    width: 0;
-  }
-  &::after {
-    border-bottom: 12px solid transparent;
-    border-left: 12px solid #fff;
-    border-right: 12px solid transparent;
-    border-top: 12px solid #fff;
-    bottom: -23px;
-    content: '';
-    height: 0;
-    left: 20px;
-    position: absolute;
-    width: 0;
-  }
+    border: 3px solid var(--ons-color-branded);
+    margin-bottom: 2rem;
+    padding: 1rem;
+    position: relative;
+    &__link {
+        font-weight: $font-weight-bold;
+    }
+    &::before {
+        border-bottom: 15px solid transparent;
+        border-left: 15px solid var(--ons-color-branded);
+        border-right: 15px solid transparent;
+        border-top: 15px solid var(--ons-color-branded);
+        bottom: -30px;
+        content: '';
+        height: 0;
+        left: 17px;
+        position: absolute;
+        width: 0;
+    }
+    &::after {
+        border-bottom: 12px solid transparent;
+        border-left: 12px solid #fff;
+        border-right: 12px solid transparent;
+        border-top: 12px solid #fff;
+        bottom: -23px;
+        content: '';
+        height: 0;
+        left: 20px;
+        position: absolute;
+        width: 0;
+    }
 }

package/components/feedback/_macro.spec.js

@@ -6,101 +6,101 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
 const EXAMPLE_FEEDBACK_MINIMAL = {
-  heading: 'Feedback heading',
-  content: 'Feedback content...',
-  url: 'http://example.com',
-  linkText: 'Feedback link text',
+    heading: 'Feedback heading',
+    content: 'Feedback content...',
+    url: 'http://example.com',
+    linkText: 'Feedback link text',
 };
 
 const EXAMPLE_FEEDBACK_FULL = {
-  id: 'example-feedback',
-  classes: 'extra-class',
-  heading: 'Feedback heading',
-  headingLevel: 5,
-  headingClasses: 'extra-heading-class another-extra-heading-class',
-  content: 'Feedback content...',
-  url: 'http://example.com',
-  linkText: 'Feedback link text',
+    id: 'example-feedback',
+    classes: 'extra-class',
+    heading: 'Feedback heading',
+    headingLevel: 5,
+    headingClasses: 'extra-heading-class another-extra-heading-class',
+    content: 'Feedback content...',
+    url: 'http://example.com',
+    linkText: 'Feedback link text',
 };
 
 describe('macro: feedback', () => {
-  it('passes jest-axe checks with minimum parameters', async () => {
-    const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
+    it('passes jest-axe checks with minimum parameters', async () => {
+        const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
 
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-  it('passes jest-axe checks with full parameters', async () => {
-    const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_FULL));
+    it('passes jest-axe checks with full parameters', async () => {
+        const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_FULL));
 
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-  it('has the provided `id` attribute', () => {
-    const $ = cheerio.load(
-      renderComponent('feedback', {
-        id: 'example-id',
-      }),
-    );
+    it('has the provided `id` attribute', () => {
+        const $ = cheerio.load(
+            renderComponent('feedback', {
+                id: 'example-id',
+            }),
+        );
 
-    expect($('#example-id').length).toBe(1);
-  });
+        expect($('#example-id').length).toBe(1);
+    });
 
-  it('has additionally provided style classes', () => {
-    const $ = cheerio.load(
-      renderComponent('feedback', {
-        classes: 'extra-class another-extra-class',
-      }),
-    );
+    it('has additionally provided style classes', () => {
+        const $ = cheerio.load(
+            renderComponent('feedback', {
+                classes: 'extra-class another-extra-class',
+            }),
+        );
 
-    expect($('.ons-feedback').hasClass('extra-class')).toBe(true);
-    expect($('.ons-feedback').hasClass('another-extra-class')).toBe(true);
-  });
+        expect($('.ons-feedback').hasClass('extra-class')).toBe(true);
+        expect($('.ons-feedback').hasClass('another-extra-class')).toBe(true);
+    });
 
-  it.each([
-    [1, 'h1'],
-    [4, 'h4'],
-  ])('has the correct element type for the provided `headingLevel` (%i -> %s)', (headingLevel, expectedTitleTag) => {
-    const $ = cheerio.load(
-      renderComponent('feedback', {
-        ...EXAMPLE_FEEDBACK_MINIMAL,
-        headingLevel,
-      }),
-    );
+    it.each([
+        [1, 'h1'],
+        [4, 'h4'],
+    ])('has the correct element type for the provided `headingLevel` (%i -> %s)', (headingLevel, expectedTitleTag) => {
+        const $ = cheerio.load(
+            renderComponent('feedback', {
+                ...EXAMPLE_FEEDBACK_MINIMAL,
+                headingLevel,
+            }),
+        );
 
-    expect($(`${expectedTitleTag}.ons-feedback__heading`).text().trim()).toBe('Feedback heading');
-  });
+        expect($(`${expectedTitleTag}.ons-feedback__heading`).text().trim()).toBe('Feedback heading');
+    });
 
-  it('has a default `headingLevel` of 2', () => {
-    const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
+    it('has a default `headingLevel` of 2', () => {
+        const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
 
-    expect($(`h2.ons-feedback__heading`).text().trim()).toBe('Feedback heading');
-  });
+        expect($(`h2.ons-feedback__heading`).text().trim()).toBe('Feedback heading');
+    });
 
-  it('has additional heading style classes', () => {
-    const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_FULL));
+    it('has additional heading style classes', () => {
+        const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_FULL));
 
-    expect($('.ons-feedback__heading').hasClass('extra-heading-class')).toBe(true);
-    expect($('.ons-feedback__heading').hasClass('another-extra-heading-class')).toBe(true);
-  });
+        expect($('.ons-feedback__heading').hasClass('extra-heading-class')).toBe(true);
+        expect($('.ons-feedback__heading').hasClass('another-extra-heading-class')).toBe(true);
+    });
 
-  it('has a paragraph with the provided `content`', () => {
-    const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
+    it('has a paragraph with the provided `content`', () => {
+        const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
 
-    expect($('p').text().trim()).toBe('Feedback content...');
-  });
+        expect($('p').text().trim()).toBe('Feedback content...');
+    });
 
-  it('has a link with the provided `url`', () => {
-    const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
+    it('has a link with the provided `url`', () => {
+        const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
 
-    expect($('.ons-feedback__link').attr('href')).toBe('http://example.com');
-  });
+        expect($('.ons-feedback__link').attr('href')).toBe('http://example.com');
+    });
 
-  it('has a link with the provided `linkText`', () => {
-    const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
+    it('has a link with the provided `linkText`', () => {
+        const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
 
-    expect($('.ons-feedback__link').text().trim()).toBe('Feedback link text');
-  });
+        expect($('.ons-feedback__link').text().trim()).toBe('Feedback link text');
+    });
 });

package/components/field/_field-group.scss

@@ -1,13 +1,13 @@
 .ons-field-group {
-  font-size: 0;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
+    font-size: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
 
-  .ons-field {
-    display: inline-block;
-    font-size: 1rem;
-    margin-top: 0;
-    vertical-align: top;
-  }
+    .ons-field {
+        display: inline-block;
+        font-size: 1rem;
+        margin-top: 0;
+        vertical-align: top;
+    }
 }

package/components/field/_field.scss

@@ -1,26 +1,26 @@
 .ons-field {
-  position: relative;
+    position: relative;
 
-  &__other {
-    background-color: var(--ons-color-grey-5);
-    clear: both;
-    display: none;
-    padding: 0 0.5rem 0.5rem;
+    &__other {
+        background-color: var(--ons-color-grey-5);
+        clear: both;
+        display: none;
+        padding: 0 0.5rem 0.5rem;
 
-    input:checked ~ & {
-      display: block;
+        input:checked ~ & {
+            display: block;
+        }
     }
-  }
 
-  &--inline {
-    align-items: center;
-    display: flex;
+    &--inline {
+        align-items: center;
+        display: flex;
 
-    .ons-label {
-      margin-bottom: 0;
-      margin-right: 0.5rem;
+        .ons-label {
+            margin-bottom: 0;
+            margin-right: 0.5rem;
+        }
     }
-  }
 }
 
 @include input-width('ons-field__item--w-{x}');