@ons/design-system 70.0.6 → 70.0.8

package/components/button/button.spec.js

@@ -1,268 +1,276 @@
 import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
 describe('script: button', () => {
-  describe('mode: link', () => {
-    it('navigates to url when button is clicked with the spacebar', async () => {
-      await setTestPage(
-        '/test',
-        renderComponent('button', {
-          id: 'test-button',
-          url: '/test/path#abc',
-        }),
-      );
-
-      await page.focus('#test-button');
-
-      await Promise.all([page.waitForNavigation(), page.keyboard.press('Space')]);
-
-      const url = await page.url();
-      expect(url).toBe(`http://localhost:${process.env.TEST_PORT}/test/path#abc`);
-    });
-  });
-
-  describe('mode: standard', () => {
-    it('allow rapidly repeated submissions when in a form', async () => {
-      await setTestPage(
-        '/test',
-        `
-        <form>
-          ${renderComponent('button', { id: 'test-button' })}
-        </form>
-        `,
-      );
-
-      await page.evaluate(() => {
-        window.__COUNTER = 0;
-        document.querySelector('form').addEventListener('submit', (event) => {
-          window.__COUNTER++;
-          event.preventDefault();
+    describe('mode: link', () => {
+        it('navigates to url when button is clicked with the spacebar', async () => {
+            await setTestPage(
+                '/test',
+                renderComponent('button', {
+                    id: 'test-button',
+                    url: '/test/path#abc',
+                }),
+            );
+
+            await page.focus('#test-button');
+
+            await Promise.all([page.waitForNavigation(), page.keyboard.press('Space')]);
+
+            const url = await page.url();
+            expect(url).toBe(`http://localhost:${process.env.TEST_PORT}/test/path#abc`);
         });
-      });
-
-      await page.click('#test-button');
-      await page.click('#test-button');
-
-      const counter = await page.evaluate(() => window.__COUNTER);
-      expect(counter).toBe(2);
-    });
-  });
-
-  describe('mode: loader', () => {
-    it('disables button when clicked', async () => {
-      await setTestPage(
-        '/test',
-        renderComponent('button', {
-          id: 'test-button',
-          text: 'Submit',
-          variants: 'loader',
-        }),
-      );
-
-      await page.click('#test-button');
-
-      const isButtonDisabled = await page.evaluate(() => document.querySelector('#test-button').getAttribute('disabled'));
-      expect(isButtonDisabled).toBe('true');
     });
 
-    it('initialised without loading style applied', async () => {
-      await setTestPage(
-        '/test',
-        renderComponent('button', {
-          id: 'test-button',
-          text: 'Submit',
-          variants: 'loader',
-        }),
-      );
-
-      const hasIsLoadingClass = await page.evaluate(() => document.querySelector('#test-button').classList.contains('ons-is-loading'));
-      expect(hasIsLoadingClass).toBe(false);
-    });
-
-    it('applies loading style when clicked', async () => {
-      await setTestPage(
-        '/test',
-        renderComponent('button', {
-          id: 'test-button',
-          text: 'Submit',
-          variants: 'loader',
-        }),
-      );
-
-      await page.click('#test-button');
-
-      const hasIsLoadingClass = await page.evaluate(() => document.querySelector('#test-button').classList.contains('ons-is-loading'));
-      expect(hasIsLoadingClass).toBe(true);
+    describe('mode: standard', () => {
+        it('allow rapidly repeated submissions when in a form', async () => {
+            await setTestPage(
+                '/test',
+                `
+                    <form>
+                        ${renderComponent('button', { id: 'test-button' })}
+                    </form>
+                `,
+            );
+
+            await page.evaluate(() => {
+                window.__COUNTER = 0;
+                document.querySelector('form').addEventListener('submit', (event) => {
+                    window.__COUNTER++;
+                    event.preventDefault();
+                });
+            });
+
+            await page.click('#test-button');
+            await page.click('#test-button');
+
+            const counter = await page.evaluate(() => window.__COUNTER);
+            expect(counter).toBe(2);
+        });
     });
 
-    it('disables button when clicked when in a form', async () => {
-      await setTestPage(
-        '/test',
-        `
-        <form onsubmit="return false;">
-          ${renderComponent('button', { id: 'test-button', text: 'Submit', variants: 'loader' })}
-        </form>
-        `,
-      );
-
-      await page.click('#test-button');
+    describe('mode: loader', () => {
+        it('disables button when clicked', async () => {
+            await setTestPage(
+                '/test',
+                renderComponent('button', {
+                    id: 'test-button',
+                    text: 'Submit',
+                    variants: 'loader',
+                }),
+            );
+
+            await page.click('#test-button');
+
+            const isButtonDisabled = await page.evaluate(() => document.querySelector('#test-button').getAttribute('disabled'));
+            expect(isButtonDisabled).toBe('true');
+        });
 
-      const isButtonDisabled = (await page.$('#test-button[disabled]')) !== null;
-      expect(isButtonDisabled).toBe(true);
-    });
+        it('initialised without loading style applied', async () => {
+            await setTestPage(
+                '/test',
+                renderComponent('button', {
+                    id: 'test-button',
+                    text: 'Submit',
+                    variants: 'loader',
+                }),
+            );
+
+            const hasIsLoadingClass = await page.evaluate(() =>
+                document.querySelector('#test-button').classList.contains('ons-is-loading'),
+            );
+            expect(hasIsLoadingClass).toBe(false);
+        });
 
-    it('initialised without loading style applied when in a form', async () => {
-      await setTestPage(
-        '/test',
-        `
-        <form>
-          ${renderComponent('button', { id: 'test-button', text: 'Submit', variants: 'loader' })}
-        </form>
-        `,
-      );
-
-      const hasIsLoadingClass = await page.evaluate(() => document.querySelector('#test-button').classList.contains('ons-is-loading'));
-      expect(hasIsLoadingClass).toBe(false);
-    });
+        it('applies loading style when clicked', async () => {
+            await setTestPage(
+                '/test',
+                renderComponent('button', {
+                    id: 'test-button',
+                    text: 'Submit',
+                    variants: 'loader',
+                }),
+            );
+
+            await page.click('#test-button');
+
+            const hasIsLoadingClass = await page.evaluate(() =>
+                document.querySelector('#test-button').classList.contains('ons-is-loading'),
+            );
+            expect(hasIsLoadingClass).toBe(true);
+        });
 
-    it('applies loading style when clicked when in a form', async () => {
-      await setTestPage(
-        '/test',
-        `
-        <form onsubmit="return false;">
-          ${renderComponent('button', { id: 'test-button', text: 'Submit', variants: 'loader' })}
-        </form>
-        `,
-      );
+        it('disables button when clicked when in a form', async () => {
+            await setTestPage(
+                '/test',
+                `
+                    <form onsubmit="return false;">
+                        ${renderComponent('button', { id: 'test-button', text: 'Submit', variants: 'loader' })}
+                    </form>
+                `,
+            );
 
-      await page.click('#test-button');
+            await page.click('#test-button');
 
-      const hasIsLoadingClass = await page.evaluate(() => document.querySelector('#test-button').classList.contains('ons-is-loading'));
-      expect(hasIsLoadingClass).toBe(true);
-    });
-  });
-
-  describe('mode: timer', () => {
-    it('allow intentional repeated submissions', async () => {
-      await setTestPage(
-        '/test',
-        renderComponent('button', {
-          id: 'test-button',
-          variants: 'timer',
-          text: 'Submit',
-        }),
-      );
-
-      await page.evaluate(() => {
-        window.__COUNTER = 0;
-        document.querySelector('#test-button').addEventListener('click', (event) => {
-          window.__COUNTER++;
-          event.preventDefault();
+            const isButtonDisabled = (await page.$('#test-button[disabled]')) !== null;
+            expect(isButtonDisabled).toBe(true);
         });
-      });
 
-      await page.click('#test-button');
-      await page.click('#test-button', { delay: 1000 });
+        it('initialised without loading style applied when in a form', async () => {
+            await setTestPage(
+                '/test',
+                `
+                    <form>
+                        ${renderComponent('button', { id: 'test-button', text: 'Submit', variants: 'loader' })}
+                    </form>
+                `,
+            );
+
+            const hasIsLoadingClass = await page.evaluate(() =>
+                document.querySelector('#test-button').classList.contains('ons-is-loading'),
+            );
+            expect(hasIsLoadingClass).toBe(false);
+        });
 
-      const counter = await page.evaluate(() => window.__COUNTER);
-      expect(counter).toBe(2);
+        it('applies loading style when clicked when in a form', async () => {
+            await setTestPage(
+                '/test',
+                `
+                    <form onsubmit="return false;">
+                        ${renderComponent('button', { id: 'test-button', text: 'Submit', variants: 'loader' })}
+                    </form>
+                `,
+            );
+
+            await page.click('#test-button');
+
+            const hasIsLoadingClass = await page.evaluate(() =>
+                document.querySelector('#test-button').classList.contains('ons-is-loading'),
+            );
+            expect(hasIsLoadingClass).toBe(true);
+        });
     });
 
-    it('prevents unintentional repeated submissions', async () => {
-      await setTestPage(
-        '/test',
-        renderComponent('button', {
-          id: 'test-button',
-          variants: 'timer',
-          text: 'Submit',
-        }),
-      );
-
-      await page.evaluate(() => {
-        window.__COUNTER = 0;
-        document.querySelector('#test-button').addEventListener('click', (event) => {
-          window.__COUNTER++;
-          event.preventDefault();
+    describe('mode: timer', () => {
+        it('allow intentional repeated submissions', async () => {
+            await setTestPage(
+                '/test',
+                renderComponent('button', {
+                    id: 'test-button',
+                    variants: 'timer',
+                    text: 'Submit',
+                }),
+            );
+
+            await page.evaluate(() => {
+                window.__COUNTER = 0;
+                document.querySelector('#test-button').addEventListener('click', (event) => {
+                    window.__COUNTER++;
+                    event.preventDefault();
+                });
+            });
+
+            await page.click('#test-button');
+            await page.click('#test-button', { delay: 1000 });
+
+            const counter = await page.evaluate(() => window.__COUNTER);
+            expect(counter).toBe(2);
         });
-      });
-
-      await page.click('#test-button');
-      await page.click('#test-button');
 
-      const counter = await page.evaluate(() => window.__COUNTER);
-      expect(counter).toBe(1);
-    });
-
-    it('allow intentional repeated submissions when in a form', async () => {
-      await setTestPage(
-        '/test',
-        `
-        <form>
-          ${renderComponent('button', { id: 'test-button', variants: 'timer', text: 'Submit' })}
-        </form>
-        `,
-      );
-
-      await page.evaluate(() => {
-        window.__COUNTER = 0;
-        document.querySelector('form').addEventListener('submit', (event) => {
-          window.__COUNTER++;
-          event.preventDefault();
+        it('prevents unintentional repeated submissions', async () => {
+            await setTestPage(
+                '/test',
+                renderComponent('button', {
+                    id: 'test-button',
+                    variants: 'timer',
+                    text: 'Submit',
+                }),
+            );
+
+            await page.evaluate(() => {
+                window.__COUNTER = 0;
+                document.querySelector('#test-button').addEventListener('click', (event) => {
+                    window.__COUNTER++;
+                    event.preventDefault();
+                });
+            });
+
+            await page.click('#test-button');
+            await page.click('#test-button');
+
+            const counter = await page.evaluate(() => window.__COUNTER);
+            expect(counter).toBe(1);
         });
-      });
 
-      await page.click('#test-button');
-      await page.click('#test-button', { delay: 1000 });
+        it('allow intentional repeated submissions when in a form', async () => {
+            await setTestPage(
+                '/test',
+                `
+                    <form>
+                        ${renderComponent('button', { id: 'test-button', variants: 'timer', text: 'Submit' })}
+                    </form>
+                `,
+            );
+
+            await page.evaluate(() => {
+                window.__COUNTER = 0;
+                document.querySelector('form').addEventListener('submit', (event) => {
+                    window.__COUNTER++;
+                    event.preventDefault();
+                });
+            });
+
+            await page.click('#test-button');
+            await page.click('#test-button', { delay: 1000 });
+
+            const counter = await page.evaluate(() => window.__COUNTER);
+            expect(counter).toBe(2);
+        });
 
-      const counter = await page.evaluate(() => window.__COUNTER);
-      expect(counter).toBe(2);
+        it('prevents unintentional repeated submissions when in a form', async () => {
+            await setTestPage(
+                '/test',
+                `
+                    <form>
+                        ${renderComponent('button', { id: 'test-button', variants: 'timer', text: 'Submit' })}
+                    </form>
+                `,
+            );
+
+            await page.evaluate(() => {
+                window.__COUNTER = 0;
+                document.querySelector('form').addEventListener('submit', (event) => {
+                    window.__COUNTER++;
+                    event.preventDefault();
+                });
+            });
+
+            await page.click('#test-button');
+            await page.click('#test-button');
+
+            const counter = await page.evaluate(() => window.__COUNTER);
+            expect(counter).toBe(1);
+        });
     });
 
-    it('prevents unintentional repeated submissions when in a form', async () => {
-      await setTestPage(
-        '/test',
-        `
-        <form>
-          ${renderComponent('button', { id: 'test-button', variants: 'timer', text: 'Submit' })}
-        </form>
-        `,
-      );
-
-      await page.evaluate(() => {
-        window.__COUNTER = 0;
-        document.querySelector('form').addEventListener('submit', (event) => {
-          window.__COUNTER++;
-          event.preventDefault();
+    describe('style: print', () => {
+        it('displays the browsers print interface', async () => {
+            await setTestPage(
+                '/test',
+                renderComponent('button', {
+                    id: 'test-button',
+                    type: 'button',
+                    text: 'Print this page',
+                    variants: 'print',
+                }),
+            );
+
+            await page.evaluate(() => {
+                window.print = () => (window.wasPrinted = 'yes');
+            });
+
+            await page.click('#test-button');
+
+            const wasPrinted = await page.evaluate(() => window.wasPrinted);
+            expect(wasPrinted).toBe('yes');
         });
-      });
-
-      await page.click('#test-button');
-      await page.click('#test-button');
-
-      const counter = await page.evaluate(() => window.__COUNTER);
-      expect(counter).toBe(1);
-    });
-  });
-
-  describe('style: print', () => {
-    it('displays the browsers print interface', async () => {
-      await setTestPage(
-        '/test',
-        renderComponent('button', {
-          id: 'test-button',
-          type: 'button',
-          text: 'Print this page',
-          variants: 'print',
-        }),
-      );
-
-      await page.evaluate(() => {
-        window.print = () => (window.wasPrinted = 'yes');
-      });
-
-      await page.click('#test-button');
-
-      const wasPrinted = await page.evaluate(() => window.wasPrinted);
-      expect(wasPrinted).toBe('yes');
     });
-  });
 });

package/components/call-to-action/_call-to-action.scss

@@ -1,8 +1,8 @@
 .ons-call-to-action {
-  background: var(--ons-color-cta-bg);
-  padding: 0.85rem 0;
+    background: var(--ons-color-cta-bg);
+    padding: 0.85rem 0;
 
-  &__heading {
-    padding-right: 0.2rem;
-  }
+    &__heading {
+        padding-right: 0.2rem;
+    }
 }

package/components/call-to-action/_macro.spec.js

@@ -6,43 +6,43 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_CALL_TO_ACTION = {
-  headingText: 'Call to action heading.',
-  paragraphText: 'Descriptive text about call to action',
-  button: {
-    text: 'Start',
-    url: 'https://example.com/start',
-  },
+    headingText: 'Call to action heading.',
+    paragraphText: 'Descriptive text about call to action',
+    button: {
+        text: 'Start',
+        url: 'https://example.com/start',
+    },
 };
 
 describe('macro: call-to-action', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(renderComponent('call-to-action', EXAMPLE_CALL_TO_ACTION));
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(renderComponent('call-to-action', EXAMPLE_CALL_TO_ACTION));
 
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-  it('has the provided `headingText`', () => {
-    const $ = cheerio.load(renderComponent('call-to-action', EXAMPLE_CALL_TO_ACTION));
+    it('has the provided `headingText`', () => {
+        const $ = cheerio.load(renderComponent('call-to-action', EXAMPLE_CALL_TO_ACTION));
 
-    const headingText = $('.ons-call-to-action__heading').text().trim();
-    expect(headingText).toBe('Call to action heading.');
-  });
+        const headingText = $('.ons-call-to-action__heading').text().trim();
+        expect(headingText).toBe('Call to action heading.');
+    });
 
-  it('has the provided `paragraphText`', () => {
-    const $ = cheerio.load(renderComponent('call-to-action', EXAMPLE_CALL_TO_ACTION));
+    it('has the provided `paragraphText`', () => {
+        const $ = cheerio.load(renderComponent('call-to-action', EXAMPLE_CALL_TO_ACTION));
 
-    const paragraphText = $('.ons-call-to-action__text').text().trim();
-    expect(paragraphText).toBe('Descriptive text about call to action');
-  });
+        const paragraphText = $('.ons-call-to-action__text').text().trim();
+        expect(paragraphText).toBe('Descriptive text about call to action');
+    });
 
-  it('outputs the expected call-to-action button', () => {
-    const faker = templateFaker();
-    const buttonSpy = faker.spy('button');
+    it('outputs the expected call-to-action button', () => {
+        const faker = templateFaker();
+        const buttonSpy = faker.spy('button');
 
-    faker.renderComponent('call-to-action', EXAMPLE_CALL_TO_ACTION);
+        faker.renderComponent('call-to-action', EXAMPLE_CALL_TO_ACTION);
 
-    expect(buttonSpy.occurrences[0]).toHaveProperty('text', 'Start');
-    expect(buttonSpy.occurrences[0]).toHaveProperty('url', 'https://example.com/start');
-  });
+        expect(buttonSpy.occurrences[0]).toHaveProperty('text', 'Start');
+        expect(buttonSpy.occurrences[0]).toHaveProperty('url', 'https://example.com/start');
+    });
 });

package/components/card/_card.scss

@@ -1,32 +1,32 @@
 .ons-card {
-  margin: 0 0 2rem;
-  width: 100%;
+    margin: 0 0 2rem;
+    width: 100%;
 
-  &__link {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 1rem;
-    width: fit-content;
+    &__link {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 1rem;
+        width: fit-content;
 
-    & > .ons-card__title {
-      margin-bottom: 0;
+        > .ons-card__title {
+            margin-bottom: 0;
+        }
     }
-  }
 
-  &__link:hover {
-    text-decoration-thickness: 3px;
-  }
+    &__link:hover {
+        text-decoration-thickness: 3px;
+    }
 
-  &__title {
-    // This is to allow the focus state for multi lined title links to render the focus style correctly.
-    // This should be corrected when the typography scale is improved.
-    line-height: 1.65 !important;
-  }
+    &__title {
+        // This is to allow the focus state for multi lined title links to render the focus style correctly.
+        // This should be corrected when the typography scale is improved.
+        line-height: 1.65 !important;
+    }
 
-  @include mq(m) {
-    margin: 0;
-    .ons-grid__col & {
-      padding-right: 1rem;
+    @include mq(m) {
+        margin: 0;
+        .ons-grid__col & {
+            padding-right: 1rem;
+        }
     }
-  }
 }