@ons/design-system 70.0.7 → 70.0.9

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/button/example-button-ghost.njk

@@ -1,6 +1,7 @@
 ---
 fullWidth: true
 ---
+
 {% from "components/button/_macro.njk" import onsButton %}
 <div style="padding: 1.5rem; background: #206095">
     {{

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.njk

@@ -10,11 +10,13 @@
                     {% endif %}
                 </div>
                 <div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-mt-xs@xxs@s">
-                    {{ onsButton({
-                        "text": params.button.text,
-                        "url": params.button.url,
-                        "variants": "small"
-                    }) }}
+                    {{
+                        onsButton({
+                            "text": params.button.text,
+                            "url": params.button.url,
+                            "variants": "small"
+                        })
+                    }}
                 </div>
             </div>
         </div>

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/call-to-action/example-call-to-action-default.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/call-to-action/_macro.njk" import onsCallToAction %}
 {{-
     onsCallToAction({
@@ -11,4 +12,4 @@
             "url": '#0'
         }
     })
-}}
+-}}