@ons/design-system 70.0.7 → 70.0.8

package/components/card/_macro.spec.js

@@ -6,232 +6,232 @@ 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',
+    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',
-  },
+    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,
+    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',
-  },
+    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 `headingLevel` (%i -> %s)', (headingLevel, expectedTitleTag) => {
-      const $ = cheerio.load(
-        renderComponent('card', {
-          ...EXAMPLE_CARD_WITHOUT_IMAGE,
-          headingLevel,
-        }),
-      );
-
-      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('list');
-
-      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' }],
-      });
+    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 `headingLevel` (%i -> %s)', (headingLevel, expectedTitleTag) => {
+            const $ = cheerio.load(
+                renderComponent('card', {
+                    ...EXAMPLE_CARD_WITHOUT_IMAGE,
+                    headingLevel,
+                }),
+            );
+
+            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('list');
+
+            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');
+        });
     });
 
-    it('outputs a hyperlink with the provided `url`', () => {
-      const $ = cheerio.load(
-        renderComponent('card', {
-          ...EXAMPLE_CARD_WITHOUT_IMAGE,
-          url: 'https://example.com',
-        }),
-      );
+    describe('mode: with image', () => {
+        it('passes jest-axe checks', async () => {
+            const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_IMAGE));
 
-      expect($('.ons-card__link').attr('href')).toBe('https://example.com');
-    });
-  });
+            const results = await axe($.html());
+            expect(results).toHaveNoViolations();
+        });
 
-  describe('mode: with image', () => {
-    it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_IMAGE));
+        it('has the provided `title` text', () => {
+            const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_IMAGE));
 
-      const results = await axe($.html());
-      expect(results).toHaveNoViolations();
-    });
+            expect($('.ons-card__title').text().trim()).toBe('Example card title');
+        });
 
-    it('has the provided `title` text', () => {
-      const $ = cheerio.load(renderComponent('card', EXAMPLE_CARD_WITH_IMAGE));
+        it.each([
+            [1, 'h1'],
+            [4, 'h4'],
+        ])('has the correct element type for the provided `headingLevel` (%i -> %s)', (headingLevel, expectedTitleTag) => {
+            const $ = cheerio.load(
+                renderComponent('card', {
+                    ...EXAMPLE_CARD_WITH_IMAGE,
+                    headingLevel,
+                }),
+            );
 
-      expect($('.ons-card__title').text().trim()).toBe('Example card title');
-    });
+            expect($(`${expectedTitleTag}.ons-card__title`).text().trim()).toBe('Example card title');
+        });
 
-    it.each([
-      [1, 'h1'],
-      [4, 'h4'],
-    ])('has the correct element type for the provided `headingLevel` (%i -> %s)', (headingLevel, expectedTitleTag) => {
-      const $ = cheerio.load(
-        renderComponent('card', {
-          ...EXAMPLE_CARD_WITH_IMAGE,
-          headingLevel,
-        }),
-      );
-
-      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,
+                }),
+            );
 
-    it('has the provided `text`', () => {
-      const $ = cheerio.load(
-        renderComponent('card', {
-          ...EXAMPLE_CARD_WITH_IMAGE,
-        }),
-      );
+            expect($('#example-text-id').text().trim()).toBe('Example card text.');
+        });
 
-      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',
+                }),
+            );
 
-    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');
+        });
 
-      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));
 
-    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');
+            });
 
-        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));
 
-      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');
+            });
 
-        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));
 
-      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');
+            });
 
-        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',
+                    }),
+                );
 
-      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');
+            });
+        });
 
-        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));
 
-    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');
+            });
 
-        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));
 
-      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');
+            });
 
-        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));
 
-      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');
+            });
 
-        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));
 
-      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('');
-      });
-    });
+                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));
+        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');
-      });
+                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));
+            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',
-        );
-      });
+                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));
+            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');
-      });
+                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));
+            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('');
-      });
+                expect($('.ons-card__image').attr('alt')).toBe('');
+            });
+        });
     });
-  });
 });

package/components/char-check-limit/_macro.spec.js

@@ -6,64 +6,64 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
 const EXAMPLE_CHAR_CHECK_LIMIT = {
-  id: 'example-char-check-limit',
-  charCountSingular: 'You have {x} character remaining',
-  charCountPlural: 'You have {x} characters remaining',
-  charCountOverLimitSingular: '{x} character too many',
-  charCountOverLimitPlural: '{x} characters too many',
+    id: 'example-char-check-limit',
+    charCountSingular: 'You have {x} character remaining',
+    charCountPlural: 'You have {x} characters remaining',
+    charCountOverLimitSingular: '{x} character too many',
+    charCountOverLimitPlural: '{x} characters too many',
 };
 
 describe('macro: char-check-limit', () => {
-  it('passes jest-axe checks without check', async () => {
-    const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));
+    it('passes jest-axe checks without check', async () => {
+        const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));
 
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-  it('passes jest-axe checks with check', async () => {
-    const $ = cheerio.load(
-      renderComponent(
-        'char-check-limit',
-        {
-          ...EXAMPLE_CHAR_CHECK_LIMIT,
-          variant: 'check',
-        },
-        ['<p>Test content.</p>'],
-      ),
-    );
+    it('passes jest-axe checks with check', async () => {
+        const $ = cheerio.load(
+            renderComponent(
+                'char-check-limit',
+                {
+                    ...EXAMPLE_CHAR_CHECK_LIMIT,
+                    variant: 'check',
+                },
+                ['<p>Test content.</p>'],
+            ),
+        );
 
-    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('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));
+    it('has the provided `id` attribute', () => {
+        const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));
 
-    expect($('.ons-input__limit').attr('id')).toBe('example-char-check-limit');
-  });
+        expect($('.ons-input__limit').attr('id')).toBe('example-char-check-limit');
+    });
 
-  it('has the provided data attributes', () => {
-    const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));
+    it('has the provided data attributes', () => {
+        const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));
 
-    expect($('.ons-input__limit').attr('data-charcount-singular')).toBe('You have {x} character remaining');
-    expect($('.ons-input__limit').attr('data-charcount-plural')).toBe('You have {x} characters remaining');
-    expect($('.ons-input__limit').attr('data-charcount-limit-singular')).toBe('{x} character too many');
-    expect($('.ons-input__limit').attr('data-charcount-limit-plural')).toBe('{x} characters too many');
-  });
+        expect($('.ons-input__limit').attr('data-charcount-singular')).toBe('You have {x} character remaining');
+        expect($('.ons-input__limit').attr('data-charcount-plural')).toBe('You have {x} characters remaining');
+        expect($('.ons-input__limit').attr('data-charcount-limit-singular')).toBe('{x} character too many');
+        expect($('.ons-input__limit').attr('data-charcount-limit-plural')).toBe('{x} characters too many');
+    });
 
-  it('has expected nested content', () => {
-    const $ = cheerio.load(
-      renderComponent(
-        'char-check-limit',
-        {
-          ...EXAMPLE_CHAR_CHECK_LIMIT,
-          variant: 'check',
-        },
-        ['<p>Test content.</p>'],
-      ),
-    );
+    it('has expected nested content', () => {
+        const $ = cheerio.load(
+            renderComponent(
+                'char-check-limit',
+                {
+                    ...EXAMPLE_CHAR_CHECK_LIMIT,
+                    variant: 'check',
+                },
+                ['<p>Test content.</p>'],
+            ),
+        );
 
-    expect($('.ons-js-char-check-input').html().trim()).toBe('<p>Test content.</p>');
-  });
+        expect($('.ons-js-char-check-input').html().trim()).toBe('<p>Test content.</p>');
+    });
 });