@ons/design-system 70.0.6 → 70.0.8

package/components/select/_macro.spec.js

@@ -7,197 +7,197 @@ import { mapAll } from '../../tests/helpers/cheerio';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_SELECT_MINIMAL = {
-  id: 'example-select',
-  name: 'example-select-name',
-  label: {
-    text: 'Label text',
-    description: 'Description text',
-    classes: 'extra-label-class',
-  },
-  options: [
-    {
-      text: 'First option',
-      value: 1,
+    id: 'example-select',
+    name: 'example-select-name',
+    label: {
+        text: 'Label text',
+        description: 'Description text',
+        classes: 'extra-label-class',
     },
-    {
-      id: 'second-option',
-      text: 'Second option',
-      value: 2,
-      selected: true,
-    },
-    {
-      text: 'Disabled option',
-      value: 3,
-      disabled: true,
-    },
-  ],
+    options: [
+        {
+            text: 'First option',
+            value: 1,
+        },
+        {
+            id: 'second-option',
+            text: 'Second option',
+            value: 2,
+            selected: true,
+        },
+        {
+            text: 'Disabled option',
+            value: 3,
+            disabled: true,
+        },
+    ],
 };
 
 const EXAMPLE_SELECT = {
-  ...EXAMPLE_SELECT_MINIMAL,
-  fieldId: 'example-select-field',
-  fieldClasses: 'extra-field-class',
-  legendClasses: 'extra-legend-class',
-  dontWrap: true,
+    ...EXAMPLE_SELECT_MINIMAL,
+    fieldId: 'example-select-field',
+    fieldClasses: 'extra-field-class',
+    legendClasses: 'extra-legend-class',
+    dontWrap: true,
 };
 
 const EXAMPLE_SELECT_WITH_ERROR = {
-  ...EXAMPLE_SELECT,
-  error: {
-    id: 'example-error',
-    text: 'Error text...',
-  },
+    ...EXAMPLE_SELECT,
+    error: {
+        id: 'example-error',
+        text: 'Error text...',
+    },
 };
 
 describe('macro: select', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
-
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
-
-  it('passes jest-axe checks when error is shown', async () => {
-    const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT_WITH_ERROR));
-
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
-
-  it('provides expected parameters to the inner `field` component', () => {
-    const faker = templateFaker();
-    const fieldSpy = faker.spy('field');
-
-    cheerio.load(faker.renderComponent('select', EXAMPLE_SELECT));
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
 
-    expect(fieldSpy.occurrences[0]).toEqual({
-      id: 'example-select-field',
-      classes: 'extra-field-class',
-      legendClasses: 'extra-legend-class',
-      dontWrap: true,
-      error: undefined,
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
     });
-  });
 
-  it('provides expected parameters to the inner `field` component when there is an error', () => {
-    const faker = templateFaker();
-    const fieldSpy = faker.spy('field');
+    it('passes jest-axe checks when error is shown', async () => {
+        const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT_WITH_ERROR));
 
-    cheerio.load(faker.renderComponent('select', EXAMPLE_SELECT_WITH_ERROR));
-
-    expect(fieldSpy.occurrences[0]).toEqual({
-      id: 'example-select-field',
-      classes: 'extra-field-class',
-      legendClasses: 'extra-legend-class',
-      dontWrap: true,
-      error: {
-        id: 'example-error',
-        text: 'Error text...',
-      },
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
     });
-  });
 
-  it('provides expected parameters to the inner `label` component', () => {
-    const faker = templateFaker();
-    const labelSpy = faker.spy('label');
+    it('provides expected parameters to the inner `field` component', () => {
+        const faker = templateFaker();
+        const fieldSpy = faker.spy('field');
 
-    cheerio.load(faker.renderComponent('select', EXAMPLE_SELECT));
+        cheerio.load(faker.renderComponent('select', EXAMPLE_SELECT));
 
-    expect(labelSpy.occurrences[0]).toEqual({
-      for: 'example-select',
-      text: 'Label text',
-      description: 'Description text',
-      classes: 'extra-label-class',
+        expect(fieldSpy.occurrences[0]).toEqual({
+            id: 'example-select-field',
+            classes: 'extra-field-class',
+            legendClasses: 'extra-legend-class',
+            dontWrap: true,
+            error: undefined,
+        });
     });
-  });
-
-  describe('select element', () => {
-    it('has the provided `id` attribute', () => {
-      const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
 
-      expect($('select').attr('id')).toBe('example-select');
+    it('provides expected parameters to the inner `field` component when there is an error', () => {
+        const faker = templateFaker();
+        const fieldSpy = faker.spy('field');
+
+        cheerio.load(faker.renderComponent('select', EXAMPLE_SELECT_WITH_ERROR));
+
+        expect(fieldSpy.occurrences[0]).toEqual({
+            id: 'example-select-field',
+            classes: 'extra-field-class',
+            legendClasses: 'extra-legend-class',
+            dontWrap: true,
+            error: {
+                id: 'example-error',
+                text: 'Error text...',
+            },
+        });
     });
 
-    it('has the provided `name` attribute', () => {
-      const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
-
-      expect($('select').attr('name')).toBe('example-select-name');
-    });
+    it('provides expected parameters to the inner `label` component', () => {
+        const faker = templateFaker();
+        const labelSpy = faker.spy('label');
 
-    it('has additionally provided style classes', () => {
-      const $ = cheerio.load(
-        renderComponent('select', {
-          ...EXAMPLE_SELECT,
-          classes: 'extra-class another-extra-class',
-        }),
-      );
+        cheerio.load(faker.renderComponent('select', EXAMPLE_SELECT));
 
-      expect($('select').hasClass('extra-class')).toBe(true);
-      expect($('select').hasClass('another-extra-class')).toBe(true);
+        expect(labelSpy.occurrences[0]).toEqual({
+            for: 'example-select',
+            text: 'Label text',
+            description: 'Description text',
+            classes: 'extra-label-class',
+        });
     });
 
-    it('has additionally provided `attributes`', () => {
-      const $ = cheerio.load(
-        renderComponent('select', {
-          ...EXAMPLE_SELECT,
-          attributes: {
-            a: 123,
-            b: 456,
-          },
-        }),
-      );
-
-      expect($('select').attr('a')).toBe('123');
-      expect($('select').attr('b')).toBe('456');
-    });
-
-    describe('option element', () => {
-      it('has expected text', () => {
-        const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
-
-        const values = mapAll($('select > option'), (node) => node.text().trim());
-        expect(values).toEqual(['First option', 'Second option', 'Disabled option']);
-      });
-
-      it('has a provided `id` attribute', () => {
-        const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
-
-        const values = mapAll($('select > option'), (node) => node.attr('id'));
-        expect(values).toEqual([undefined, 'second-option', undefined]);
-      });
-
-      it('marks the correct option as selected', () => {
-        const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
-
-        const values = mapAll($('select > option'), (node) => node.attr('selected'));
-        expect(values).toEqual([undefined, 'selected', undefined]);
-      });
-
-      it('marks the correct option as disabled', () => {
-        const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
-
-        const values = mapAll($('select > option'), (node) => node.attr('disabled'));
-        expect(values).toEqual([undefined, undefined, 'disabled']);
-      });
-
-      it('has a provided `value` attribute', () => {
-        const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
-
-        const values = mapAll($('select > option'), (node) => node.attr('value'));
-        expect(values).toEqual(['1', '2', '3']);
-      });
-
-      it('uses option text as a default `value` attribute', () => {
-        const $ = cheerio.load(
-          renderComponent('select', {
-            ...EXAMPLE_SELECT,
-            options: [{ text: 'First option' }, { text: 'Second option' }],
-          }),
-        );
-
-        const values = mapAll($('select > option'), (node) => node.attr('value'));
-        expect(values).toEqual(['First option', 'Second option']);
-      });
+    describe('select element', () => {
+        it('has the provided `id` attribute', () => {
+            const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
+
+            expect($('select').attr('id')).toBe('example-select');
+        });
+
+        it('has the provided `name` attribute', () => {
+            const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
+
+            expect($('select').attr('name')).toBe('example-select-name');
+        });
+
+        it('has additionally provided style classes', () => {
+            const $ = cheerio.load(
+                renderComponent('select', {
+                    ...EXAMPLE_SELECT,
+                    classes: 'extra-class another-extra-class',
+                }),
+            );
+
+            expect($('select').hasClass('extra-class')).toBe(true);
+            expect($('select').hasClass('another-extra-class')).toBe(true);
+        });
+
+        it('has additionally provided `attributes`', () => {
+            const $ = cheerio.load(
+                renderComponent('select', {
+                    ...EXAMPLE_SELECT,
+                    attributes: {
+                        a: 123,
+                        b: 456,
+                    },
+                }),
+            );
+
+            expect($('select').attr('a')).toBe('123');
+            expect($('select').attr('b')).toBe('456');
+        });
+
+        describe('option element', () => {
+            it('has expected text', () => {
+                const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
+
+                const values = mapAll($('select > option'), (node) => node.text().trim());
+                expect(values).toEqual(['First option', 'Second option', 'Disabled option']);
+            });
+
+            it('has a provided `id` attribute', () => {
+                const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
+
+                const values = mapAll($('select > option'), (node) => node.attr('id'));
+                expect(values).toEqual([undefined, 'second-option', undefined]);
+            });
+
+            it('marks the correct option as selected', () => {
+                const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
+
+                const values = mapAll($('select > option'), (node) => node.attr('selected'));
+                expect(values).toEqual([undefined, 'selected', undefined]);
+            });
+
+            it('marks the correct option as disabled', () => {
+                const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
+
+                const values = mapAll($('select > option'), (node) => node.attr('disabled'));
+                expect(values).toEqual([undefined, undefined, 'disabled']);
+            });
+
+            it('has a provided `value` attribute', () => {
+                const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
+
+                const values = mapAll($('select > option'), (node) => node.attr('value'));
+                expect(values).toEqual(['1', '2', '3']);
+            });
+
+            it('uses option text as a default `value` attribute', () => {
+                const $ = cheerio.load(
+                    renderComponent('select', {
+                        ...EXAMPLE_SELECT,
+                        options: [{ text: 'First option' }, { text: 'Second option' }],
+                    }),
+                );
+
+                const values = mapAll($('select > option'), (node) => node.attr('value'));
+                expect(values).toEqual(['First option', 'Second option']);
+            });
+        });
     });
-  });
 });

package/components/share-page/_macro.spec.js

@@ -6,97 +6,97 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_SHARE_PAGE = {
-  title: 'Share page',
-  pageTitle: 'An example page',
-  pageURL: 'https://example.com/an-example-page',
-  facebook: true,
-  twitter: true,
+    title: 'Share page',
+    pageTitle: 'An example page',
+    pageURL: 'https://example.com/an-example-page',
+    facebook: true,
+    twitter: true,
 };
 
 describe('macro: share-page', () => {
-  it('passes jest-axe checks with', async () => {
-    const $ = cheerio.load(renderComponent('share-page', EXAMPLE_SHARE_PAGE));
+    it('passes jest-axe checks with', async () => {
+        const $ = cheerio.load(renderComponent('share-page', EXAMPLE_SHARE_PAGE));
 
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-  it('wraps title in <h2> element by default', () => {
-    const $ = cheerio.load(renderComponent('share-page', EXAMPLE_SHARE_PAGE));
+    it('wraps title in <h2> element by default', () => {
+        const $ = cheerio.load(renderComponent('share-page', EXAMPLE_SHARE_PAGE));
 
-    expect($('h2').text().trim()).toBe('Share page');
-  });
+        expect($('h2').text().trim()).toBe('Share page');
+    });
 
-  it('wraps title in custom element when `titleTag` is provided', () => {
-    const $ = cheerio.load(
-      renderComponent('share-page', {
-        ...EXAMPLE_SHARE_PAGE,
-        titleTag: 'h4',
-      }),
-    );
+    it('wraps title in custom element when `titleTag` is provided', () => {
+        const $ = cheerio.load(
+            renderComponent('share-page', {
+                ...EXAMPLE_SHARE_PAGE,
+                titleTag: 'h4',
+            }),
+        );
 
-    expect($('h4').text().trim()).toBe('Share page');
-  });
+        expect($('h4').text().trim()).toBe('Share page');
+    });
 
-  it('uses the provided icon size', () => {
-    const faker = templateFaker();
-    const listsSpy = faker.spy('list');
+    it('uses the provided icon size', () => {
+        const faker = templateFaker();
+        const listsSpy = faker.spy('list');
 
-    faker.renderComponent('share-page', {
-      ...EXAMPLE_SHARE_PAGE,
-      iconSize: 'xl',
-    });
+        faker.renderComponent('share-page', {
+            ...EXAMPLE_SHARE_PAGE,
+            iconSize: 'xl',
+        });
 
-    expect(listsSpy.occurrences[0].iconSize).toBe('xl');
-  });
+        expect(listsSpy.occurrences[0].iconSize).toBe('xl');
+    });
 
-  describe('Share on Twitter', () => {
-    it('has a link with the expected url', () => {
-      const faker = templateFaker();
-      const listsSpy = faker.spy('list');
+    describe('Share on Twitter', () => {
+        it('has a link with the expected url', () => {
+            const faker = templateFaker();
+            const listsSpy = faker.spy('list');
 
-      faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
+            faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
 
-      const twitterItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'Twitter');
-      expect(twitterItem.url).toBe(
-        'https://twitter.com/intent/tweet?original_referer&text=An%20example%20page&url=https%3A%2F%2Fexample.com%2Fan-example-page',
-      );
-    });
+            const twitterItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'Twitter');
+            expect(twitterItem.url).toBe(
+                'https://twitter.com/intent/tweet?original_referer&text=An%20example%20page&url=https%3A%2F%2Fexample.com%2Fan-example-page',
+            );
+        });
 
-    it('has a link which opens in a new tab', () => {
-      const faker = templateFaker();
-      const listsSpy = faker.spy('list');
+        it('has a link which opens in a new tab', () => {
+            const faker = templateFaker();
+            const listsSpy = faker.spy('list');
 
-      faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
+            faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
 
-      const twitterItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'Twitter');
-      expect(twitterItem.rel).toContain('noreferrer');
-      expect(twitterItem.rel).toContain('external');
-      expect(twitterItem.target).toBe('_blank');
+            const twitterItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'Twitter');
+            expect(twitterItem.rel).toContain('noreferrer');
+            expect(twitterItem.rel).toContain('external');
+            expect(twitterItem.target).toBe('_blank');
+        });
     });
-  });
 
-  describe('Share on Facebook', () => {
-    it('has a link with the expected url', () => {
-      const faker = templateFaker();
-      const listsSpy = faker.spy('list');
+    describe('Share on Facebook', () => {
+        it('has a link with the expected url', () => {
+            const faker = templateFaker();
+            const listsSpy = faker.spy('list');
 
-      faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
+            faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
 
-      const facebookItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'Facebook');
-      expect(facebookItem.url).toBe('https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fan-example-page');
-    });
+            const facebookItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'Facebook');
+            expect(facebookItem.url).toBe('https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fan-example-page');
+        });
 
-    it('has a link which opens in a new tab', () => {
-      const faker = templateFaker();
-      const listsSpy = faker.spy('list');
+        it('has a link which opens in a new tab', () => {
+            const faker = templateFaker();
+            const listsSpy = faker.spy('list');
 
-      faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
+            faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
 
-      const facebookItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'Facebook');
-      expect(facebookItem.rel).toContain('noreferrer');
-      expect(facebookItem.rel).toContain('external');
-      expect(facebookItem.target).toBe('_blank');
+            const facebookItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'Facebook');
+            expect(facebookItem.rel).toContain('noreferrer');
+            expect(facebookItem.rel).toContain('external');
+            expect(facebookItem.target).toBe('_blank');
+        });
     });
-  });
 });

package/components/skip-to-content/_macro.spec.js

@@ -6,58 +6,58 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
 describe('macro: skip-to-content', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(
-      renderComponent('skip-to-content', {
-        url: '#example-anchor',
-        text: 'Skip to the content',
-      }),
-    );
-
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
-
-  it('has a hyperlink element', async () => {
-    const $ = cheerio.load(
-      renderComponent('skip-to-content', {
-        url: '#example-anchor',
-        text: 'Skip to the content',
-      }),
-    );
-
-    expect($('.ons-skip-to-content')[0].tagName).toBe('a');
-  });
-
-  it('has skip link with the provided `url`', async () => {
-    const $ = cheerio.load(
-      renderComponent('skip-to-content', {
-        url: '#example-anchor',
-        text: 'Skip to the content',
-      }),
-    );
-
-    expect($('.ons-skip-to-content').attr('href')).toBe('#example-anchor');
-  });
-
-  it('has skip link with the provided `text`', async () => {
-    const $ = cheerio.load(
-      renderComponent('skip-to-content', {
-        url: '#example-anchor',
-        text: 'Skip to the content',
-      }),
-    );
-
-    expect($('.ons-skip-to-content').text().trim()).toBe('Skip to the content');
-  });
-
-  it('has skip link with the default text if no text provided`', async () => {
-    const $ = cheerio.load(
-      renderComponent('skip-to-content', {
-        url: '#example-anchor',
-      }),
-    );
-
-    expect($('.ons-skip-to-content').text().trim()).toBe('Skip to content');
-  });
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(
+            renderComponent('skip-to-content', {
+                url: '#example-anchor',
+                text: 'Skip to the content',
+            }),
+        );
+
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
+
+    it('has a hyperlink element', async () => {
+        const $ = cheerio.load(
+            renderComponent('skip-to-content', {
+                url: '#example-anchor',
+                text: 'Skip to the content',
+            }),
+        );
+
+        expect($('.ons-skip-to-content')[0].tagName).toBe('a');
+    });
+
+    it('has skip link with the provided `url`', async () => {
+        const $ = cheerio.load(
+            renderComponent('skip-to-content', {
+                url: '#example-anchor',
+                text: 'Skip to the content',
+            }),
+        );
+
+        expect($('.ons-skip-to-content').attr('href')).toBe('#example-anchor');
+    });
+
+    it('has skip link with the provided `text`', async () => {
+        const $ = cheerio.load(
+            renderComponent('skip-to-content', {
+                url: '#example-anchor',
+                text: 'Skip to the content',
+            }),
+        );
+
+        expect($('.ons-skip-to-content').text().trim()).toBe('Skip to the content');
+    });
+
+    it('has skip link with the default text if no text provided`', async () => {
+        const $ = cheerio.load(
+            renderComponent('skip-to-content', {
+                url: '#example-anchor',
+            }),
+        );
+
+        expect($('.ons-skip-to-content').text().trim()).toBe('Skip to content');
+    });
 });