@ons/design-system 50.0.1 → 53.0.0

package/components/button/button.spec.js

@@ -0,0 +1,290 @@
+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();
+        });
+      });
+
+      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',
+          submitType: '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',
+          submitType: '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',
+          submitType: '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('disables button when clicked when in a form', async () => {
+      await setTestPage(
+        '/test',
+        `
+        <form onsubmit="return false;">
+          ${renderComponent('button', {
+            id: 'test-button',
+            text: 'Submit',
+            submitType: 'loader',
+          })}
+        </form>
+      `,
+      );
+
+      await page.click('#test-button');
+
+      const isButtonDisabled = (await page.$('#test-button[disabled]')) !== null;
+      expect(isButtonDisabled).toBe(true);
+    });
+
+    it('initialised without loading style applied when in a form', async () => {
+      await setTestPage(
+        '/test',
+        `
+        <form>
+          ${renderComponent('button', {
+            id: 'test-button',
+            text: 'Submit',
+            submitType: '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 when in a form', async () => {
+      await setTestPage(
+        '/test',
+        `
+        <form onsubmit="return false;">
+          ${renderComponent('button', {
+            id: 'test-button',
+            text: 'Submit',
+            submitType: '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);
+    });
+  });
+
+  describe('mode: timer', () => {
+    it('allow intentional repeated submissions', async () => {
+      await setTestPage(
+        '/test',
+        renderComponent('button', {
+          id: 'test-button',
+          submitType: '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);
+    });
+
+    it('prevents unintentional repeated submissions', async () => {
+      await setTestPage(
+        '/test',
+        renderComponent('button', {
+          id: 'test-button',
+          submitType: '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);
+    });
+
+    it('allow intentional repeated submissions when in a form', async () => {
+      await setTestPage(
+        '/test',
+        `
+        <form>
+          ${renderComponent('button', {
+            id: 'test-button',
+            submitType: '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);
+    });
+
+    it('prevents unintentional repeated submissions when in a form', async () => {
+      await setTestPage(
+        '/test',
+        `
+        <form>
+          ${renderComponent('button', {
+            id: 'test-button',
+            submitType: '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);
+    });
+  });
+
+  describe('style: print', () => {
+    it('displays the browsers print interface', async () => {
+      await setTestPage(
+        '/test',
+        renderComponent('button', {
+          id: 'test-button',
+          type: 'button',
+          text: 'Print this page',
+          buttonStyle: '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/_macro.njk

@@ -5,7 +5,9 @@
             <div class="ons-grid ons-grid--flex ons-grid--vertical-center ons-grid--no-wrap@s">
                 <div class="ons-grid__col ons-col-auto ons-u-flex-shrink@s">
                     <h2 class="ons-call-to-action__heading ons-u-fs-r--b ons-u-di">{{ params.headingText }}</h2>
-                    <p class="ons-call-to-action__text ons-u-di">{{ params.paragraphText }}</p>
+                    {% if params.paragraphText is defined and params.paragraphText %}
+                        <p class="ons-call-to-action__text ons-u-di">{{ params.paragraphText }}</p>
+                    {% endif %}
                 </div>
                 <div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-mt-xs@xxs@s">
                     {{ onsButton({

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

@@ -0,0 +1,52 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+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',
+  },
+};
+
+describe('macro: 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();
+  });
+
+  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.');
+  });
+
+  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');
+  });
+
+  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);
+
+    expect(buttonSpy.occurrences[0]).toHaveProperty('text', 'Start');
+    expect(buttonSpy.occurrences[0]).toHaveProperty('url', 'https://example.com/start');
+  });
+});

package/components/card/_macro.njk

@@ -4,28 +4,35 @@
 
   {% set titleSize = params.titleSize | default('2') %}
 
-  <div class="ons-card" aria-labelledBy="{{ params.id }}" aria-describedBy="{{ params.textId }}">
-    
-    {%- if params.image -%}
-    
-      <a href="{{ params.url }}" class="ons-card__link ons-u-db">
-
-        {% if params.image is defined and params.image and params.image.smallSrc is defined and params.image.smallSrc %}
-            <img class="ons-card__image ons-u-mb-s" height="200" width="303" srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x" src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}" loading="lazy">
-        {% else %}
-            <img class="ons-card__image ons-u-mb-s" height="100" width="303" srcset="{{ params.placeholderURL if params.placeholderURL is defined and params.placeholderURL }}/img/small/placeholder-card.png 1x, {{ params.placeholderURL if params.placeholderURL is defined and params.placeholderURL }}/img/large/placeholder-card.png 2x" src="{{ params.placeholderURL if params.placeholderURL is defined and params.placeholderURL }}/img/small/placeholder-card.png" alt="Image placeholder" loading="lazy">
-        {% endif %}
-
-        <h{{ titleSize }} class="ons-card__title {{ params.titleClasses | default('ons-u-fs-m')}}" id="{{ params.id }}">
-          {{ params.title }}
-        </h{{ titleSize }}>
-
-      </a>
+  <div class="ons-card" aria-describedBy="{{ params.textId }}">
+
+    {%- if params.image is defined and params.image -%}
+      {%- if params.url is defined and params.url -%}
+        <a href="{{ params.url }}" class="ons-card__link ons-u-db">
+      {%- endif -%}
+          {% if params.image.smallSrc is defined and params.image.smallSrc %}
+            <img class="ons-card__image ons-u-mb-s" height="200" width="303"{% if params.image.largeSrc is defined and params.image.largeSrc %} srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %} src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}" loading="lazy">
+          {% elif params.image == true or params.image.placeholderURL is defined %}
+            <img class="ons-card__image ons-u-mb-s" height="100" width="303" srcset="{{ params.image.placeholderURL if params.image.placeholderURL is defined and params.image.placeholderURL }}/img/small/placeholder-card.png 1x, {{ params.image.placeholderURL if params.image.placeholderURL is defined and params.image.placeholderURL }}/img/large/placeholder-card.png 2x" src="{{ params.image.placeholderURL if params.image.placeholderURL is defined and params.image.placeholderURL }}/img/small/placeholder-card.png" alt="" loading="lazy">
+          {% endif %}
+
+          <h{{ titleSize }} class="ons-card__title {{ params.titleClasses | default('ons-u-fs-m')}}" id="{{ params.id }}">
+            {{ params.title }}
+          </h{{ titleSize }}>
+      {%- if params.url is defined and params.url -%}
+        </a>
+      {%- endif -%}
 
     {%- else -%}
 
-      <h{{ titleSize }} class="{{ params.titleClasses | default('ons-u-fs-m') }}" id="{{ params.id }}">
-        <a href="{{ params.url }}">{{ params.title }}</a>
+      <h{{ titleSize }} class="ons-card__title {{ params.titleClasses | default('ons-u-fs-m') }}" id="{{ params.id }}">
+        {%- if params.url is defined and params.url -%}
+          <a class="ons-card__link" href="{{ params.url }}">
+        {%- endif -%}
+          {{ params.title }}
+        {%- if params.url is defined and params.url -%}
+          </a>
+        {%- endif -%}
       </h{{ titleSize }}>
 
     {%- endif -%}

package/components/card/_macro.spec.js

@@ -0,0 +1,261 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const EXAMPLE_CARD_WITHOUT_IMAGE = {
+  title: 'Example card title',
+  text: 'Example card text.',
+  textId: 'example-text-id',
+};
+
+const EXAMPLE_CARD_WITH_IMAGE = {
+  title: 'Example card title',
+  text: 'Example card text.',
+  textId: 'example-text-id',
+  image: {
+    smallSrc: 'example-small.png',
+    largeSrc: 'example-large.png',
+    alt: 'Example alt text',
+  },
+};
+
+const EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE = {
+  title: 'Example card title',
+  text: 'Example card text.',
+  textId: 'example-text-id',
+  image: true,
+};
+
+const EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE_WITH_PATH = {
+  title: 'Example card title',
+  text: 'Example card text.',
+  textId: 'example-text-id',
+  image: {
+    placeholderURL: '/placeholder-image-url',
+  },
+};
+
+describe('macro: card', () => {
+  describe('mode: without image', () => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITHOUT_IMAGE));
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has the provided `title` text', () => {
+      const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITHOUT_IMAGE));
+
+      expect(
+        $('.ons-card__title')
+          .text()
+          .trim(),
+      ).toBe('Example card title');
+    });
+
+    it.each([
+      [1, 'h1'],
+      [4, 'h4'],
+    ])('has the correct element type for the provided `titleSize` (%i -> %s)', (titleSize, expectedTitleTag) => {
+      const $ = cheerio.load(
+        renderComponent('card', {
+          ...EXAMPLE_CARD_WITHOUT_IMAGE,
+          titleSize,
+        }),
+      );
+
+      expect(
+        $(`${expectedTitleTag}.ons-card__title`)
+          .text()
+          .trim(),
+      ).toBe('Example card title');
+    });
+
+    it('has the provided `text` accessible via the `textId` identifier', () => {
+      const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITHOUT_IMAGE));
+
+      expect(
+        $('#example-text-id')
+          .text()
+          .trim(),
+      ).toBe('Example card text.');
+    });
+
+    it('renders the provided `itemsList` using the `list` component', () => {
+      const faker = templateFaker();
+      const listsSpy = faker.spy('lists');
+
+      faker.renderComponent('card', {
+        ...EXAMPLE_CARD_WITHOUT_IMAGE,
+        itemsList: [{ text: 'Test item 1' }, { text: 'Test item 2' }],
+      });
+
+      expect(listsSpy.occurrences[0]).toEqual({
+        variants: 'dashed',
+        itemsList: [{ text: 'Test item 1' }, { text: 'Test item 2' }],
+      });
+    });
+
+    it('outputs a hyperlink with the provided `url`', () => {
+      const $ = cheerio.load(
+        renderComponent('card', {
+          ...EXAMPLE_CARD_WITHOUT_IMAGE,
+          url: 'https://example.com',
+        }),
+      );
+
+      expect($('.ons-card__link').attr('href')).toBe('https://example.com');
+    });
+  });
+
+  describe('mode: with image', () => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_IMAGE));
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has the provided `title` text', () => {
+      const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_IMAGE));
+
+      expect(
+        $('.ons-card__title')
+          .text()
+          .trim(),
+      ).toBe('Example card title');
+    });
+
+    it.each([
+      [1, 'h1'],
+      [4, 'h4'],
+    ])('has the correct element type for the provided `titleSize` (%i -> %s)', (titleSize, expectedTitleTag) => {
+      const $ = cheerio.load(
+        renderComponent('card', {
+          ...EXAMPLE_CARD_WITH_IMAGE,
+          titleSize,
+        }),
+      );
+
+      expect(
+        $(`${expectedTitleTag}.ons-card__title`)
+          .text()
+          .trim(),
+      ).toBe('Example card title');
+    });
+
+    it('has the provided `text`', () => {
+      const $ = cheerio.load(
+        renderComponent('card', {
+          ...EXAMPLE_CARD_WITH_IMAGE,
+        }),
+      );
+
+      expect(
+        $('#example-text-id')
+          .text()
+          .trim(),
+      ).toBe('Example card text.');
+    });
+
+    it('outputs a hyperlink with the provided `url`', () => {
+      const $ = cheerio.load(
+        renderComponent('card', {
+          ...EXAMPLE_CARD_WITH_IMAGE,
+          url: 'https://example.com',
+        }),
+      );
+
+      expect($('.ons-card__link').attr('href')).toBe('https://example.com');
+    });
+
+    describe('with a custom image', () => {
+      it('outputs an `img` element', () => {
+        const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_IMAGE));
+
+        expect($('.ons-card__image')[0].tagName).toBe('img');
+      });
+
+      it('outputs an `img` element with the expected `srcset`', () => {
+        const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_IMAGE));
+
+        expect($('.ons-card__image').attr('srcset')).toBe('example-small.png 1x, example-large.png 2x');
+      });
+
+      it('outputs an `img` element with the expected `src`', () => {
+        const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_IMAGE));
+
+        expect($('.ons-card__image').attr('src')).toBe('example-small.png');
+      });
+
+      it('outputs an `img` element with the expected alt text', () => {
+        const $ = cheerio.load(
+          renderComponent('card', {
+            ...EXAMPLE_CARD_WITH_IMAGE,
+            alt: 'Example alt text',
+          }),
+        );
+
+        expect($('.ons-card__image').attr('alt')).toBe('Example alt text');
+      });
+    });
+
+    describe('with a default placeholder image', () => {
+      it('outputs an `img` element', () => {
+        const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE));
+
+        expect($('.ons-card__image')[0].tagName).toBe('img');
+      });
+
+      it('outputs an `img` element with the expected `srcset`', () => {
+        const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE));
+
+        expect($('.ons-card__image').attr('srcset')).toBe('/img/small/placeholder-card.png 1x, /img/large/placeholder-card.png 2x');
+      });
+
+      it('outputs an `img` element with the expected `src`', () => {
+        const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE));
+
+        expect($('.ons-card__image').attr('src')).toBe('/img/small/placeholder-card.png');
+      });
+
+      it('outputs an `img` element with the expected empty alt text', () => {
+        const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE));
+
+        expect($('.ons-card__image').attr('alt')).toBe('');
+      });
+    });
+
+    describe('with a default placeholder image with `placeholderURL`', () => {
+      it('outputs an `img` element', () => {
+        const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE_WITH_PATH));
+
+        expect($('.ons-card__image')[0].tagName).toBe('img');
+      });
+
+      it('outputs an `img` element with the expected `srcset`', () => {
+        const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE_WITH_PATH));
+
+        expect($('.ons-card__image').attr('srcset')).toBe(
+          '/placeholder-image-url/img/small/placeholder-card.png 1x, /placeholder-image-url/img/large/placeholder-card.png 2x',
+        );
+      });
+
+      it('outputs an `img` element with the expected `src`', () => {
+        const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE_WITH_PATH));
+
+        expect($('.ons-card__image').attr('src')).toBe('/placeholder-image-url/img/small/placeholder-card.png');
+      });
+
+      it('outputs an `img` element with the expected empty alt text', () => {
+        const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_PLACEHOLDER_IMAGE_WITH_PATH));
+
+        expect($('.ons-card__image').attr('alt')).toBe('');
+      });
+    });
+  });
+});