@ons/design-system 70.0.7 → 70.0.9

package/components/icon/_macro.spec.js

@@ -6,119 +6,119 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
 describe('macro: icon', () => {
-  describe.each([
-    'arrow-forward',
-    'arrow-next',
-    'arrow-previous',
-    'check',
-    'chevron',
-    'download',
-    'exit',
-    'external-link',
-    'lock',
-    'person',
-    'print',
-    'quote',
-    'search',
-    'sort-sprite',
-    'facebook',
-    'twitter',
-    'instagram',
-    'linkedin',
-    'loader',
-    'ons-logo-en',
-    'ons-logo-cy',
-    'ons-logo-stacked-en',
-    'ons-logo-stacked-cy',
-    'crest',
-    'ogl',
-    'circle-lined',
-  ])('icon type: %s', (iconType) => {
-    it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('icon', { iconType }));
-
-      const results = await axe($.html());
-      expect(results).toHaveNoViolations();
+    describe.each([
+        'arrow-forward',
+        'arrow-next',
+        'arrow-previous',
+        'check',
+        'chevron',
+        'download',
+        'exit',
+        'external-link',
+        'lock',
+        'person',
+        'print',
+        'quote',
+        'search',
+        'sort-sprite',
+        'facebook',
+        'twitter',
+        'instagram',
+        'linkedin',
+        'loader',
+        'ons-logo-en',
+        'ons-logo-cy',
+        'ons-logo-stacked-en',
+        'ons-logo-stacked-cy',
+        'crest',
+        'ogl',
+        'circle-lined',
+    ])('icon type: %s', (iconType) => {
+        it('passes jest-axe checks', async () => {
+            const $ = cheerio.load(renderComponent('icon', { iconType }));
+
+            const results = await axe($.html());
+            expect(results).toHaveNoViolations();
+        });
+
+        it('has an svg element', () => {
+            const $ = cheerio.load(renderComponent('icon', { iconType }));
+
+            expect($('svg').length).toBe(1);
+        });
+
+        it('has a role of image', () => {
+            const $ = cheerio.load(renderComponent('icon', { iconType }));
+
+            expect($('svg').attr('role')).toBe('img');
+        });
+
+        it('has additionally provided style classes', () => {
+            const $ = cheerio.load(
+                renderComponent('icon', {
+                    iconType,
+                    classes: 'extra-class another-extra-class',
+                }),
+            );
+
+            expect($('svg').hasClass('extra-class')).toBe(true);
+            expect($('svg').hasClass('another-extra-class')).toBe(true);
+        });
     });
 
-    it('has an svg element', () => {
-      const $ = cheerio.load(renderComponent('icon', { iconType }));
-
-      expect($('svg').length).toBe(1);
-    });
-
-    it('has a role of image', () => {
-      const $ = cheerio.load(renderComponent('icon', { iconType }));
-
-      expect($('svg').attr('role')).toBe('img');
-    });
-
-    it('has additionally provided style classes', () => {
-      const $ = cheerio.load(
-        renderComponent('icon', {
-          iconType,
-          classes: 'extra-class another-extra-class',
-        }),
-      );
-
-      expect($('svg').hasClass('extra-class')).toBe(true);
-      expect($('svg').hasClass('another-extra-class')).toBe(true);
-    });
-  });
-
-  describe.each([
-    'arrow-next',
-    'arrow-previous',
-    'check',
-    'chevron',
-    'download',
-    'exit',
-    'external-link',
-    'lock',
-    'person',
-    'print',
-    'quote',
-    'search',
-    'facebook',
-    'twitter',
-    'instagram',
-    'linkedin',
-  ])('icon type: %s', (iconType) => {
-    it('has style variation class for provided icon size', () => {
-      const $ = cheerio.load(
-        renderComponent('icon', {
-          iconType,
-          iconSize: 'xxl',
-        }),
-      );
-
-      expect($('svg').hasClass('ons-icon--xxl')).toBe(true);
+    describe.each([
+        'arrow-next',
+        'arrow-previous',
+        'check',
+        'chevron',
+        'download',
+        'exit',
+        'external-link',
+        'lock',
+        'person',
+        'print',
+        'quote',
+        'search',
+        'facebook',
+        'twitter',
+        'instagram',
+        'linkedin',
+    ])('icon type: %s', (iconType) => {
+        it('has style variation class for provided icon size', () => {
+            const $ = cheerio.load(
+                renderComponent('icon', {
+                    iconType,
+                    iconSize: 'xxl',
+                }),
+            );
+
+            expect($('svg').hasClass('ons-icon--xxl')).toBe(true);
+        });
     });
-  });
-
-  describe.each([
-    ['ons-logo-en', 'Office for National Statistics homepage'],
-    ['ons-logo-cy', 'Hafan Swyddfa Ystadegau Gwladol'],
-    ['ons-logo-stacked-en', 'Office for National Statistics homepage'],
-    ['ons-logo-stacked-cy', 'Hafan Swyddfa Ystadegau Gwladol'],
-    ['crest', 'Royal coat of arms of the United Kingdom'],
-    ['ogl', 'Open Government License logo'],
-  ])('icon type: %s', (iconType, expectedAltText) => {
-    it(`has default alt text '${expectedAltText}'`, () => {
-      const $ = cheerio.load(renderComponent('icon', { iconType }));
-
-      expect($('title').text().trim()).toBe(expectedAltText);
-    });
-
-    it('has provided alt text', () => {
-      const $ = cheerio.load(
-        renderComponent('icon', {
-          iconType,
-          altText: 'Example alt text',
-        }),
-      );
 
-      expect($('title').text().trim()).toBe('Example alt text');
+    describe.each([
+        ['ons-logo-en', 'Office for National Statistics homepage'],
+        ['ons-logo-cy', 'Hafan Swyddfa Ystadegau Gwladol'],
+        ['ons-logo-stacked-en', 'Office for National Statistics homepage'],
+        ['ons-logo-stacked-cy', 'Hafan Swyddfa Ystadegau Gwladol'],
+        ['crest', 'Royal coat of arms of the United Kingdom'],
+        ['ogl', 'Open Government License logo'],
+    ])('icon type: %s', (iconType, expectedAltText) => {
+        it(`has default alt text '${expectedAltText}'`, () => {
+            const $ = cheerio.load(renderComponent('icon', { iconType }));
+
+            expect($('title').text().trim()).toBe(expectedAltText);
+        });
+
+        it('has provided alt text', () => {
+            const $ = cheerio.load(
+                renderComponent('icon', {
+                    iconType,
+                    altText: 'Example alt text',
+                }),
+            );
+
+            expect($('title').text().trim()).toBe('Example alt text');
+        });
     });
-  });
 });

package/components/image/_image.scss

@@ -1,16 +1,16 @@
 .ons-image {
-  margin: 0;
+    margin: 0;
 
-  @extend .ons-u-mb-m;
+    @extend .ons-u-mb-m;
 
-  &__img {
-    display: block;
-    max-width: 100%;
-  }
+    &__img {
+        display: block;
+        max-width: 100%;
+    }
 
-  &__caption {
-    display: block;
-    font-size: 0.8rem;
-    padding: 0.5rem 0 0;
-  }
+    &__caption {
+        display: block;
+        font-size: 0.8rem;
+        padding: 0.5rem 0 0;
+    }
 }

package/components/image/_macro.njk

@@ -1,15 +1,17 @@
 {%- macro onsImage(params) -%}
     <figure class="ons-image">
         {% if params.image %}
-            <img class="ons-image__img" {% if params.image.largeSrc %}srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %}src="{{ params.image.smallSrc }}" alt="{{ params.alt if params.alt else '' }}">
+            <img
+                class="ons-image__img"
+                {% if params.image.largeSrc %}srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %}src="{{ params.image.smallSrc }}"
+                alt="{{ params.alt if params.alt }}"
+            />
         {% else %}
-            <img class="ons-image__img" src="{{ params.url }}" alt="{{ params.alt }}">
+            <img class="ons-image__img" src="{{ params.url }}" alt="{{ params.alt }}" />
         {% endif %}
 
         {% if params.caption %}
-            <figcaption class="ons-image__caption">
-                {{ params.caption }}
-            </figcaption>
+            <figcaption class="ons-image__caption">{{ params.caption }}</figcaption>
         {% endif %}
     </figure>
 {%- endmacro -%}

package/components/image/_macro.spec.js

@@ -6,112 +6,112 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
 const EXAMPLE_IMAGE_URL_MINIMAL = {
-  url: 'example.png',
+    url: 'example.png',
 };
 
 const EXAMPLE_IMAGE_IMAGE_MINIMAL = {
-  image: {
-    smallSrc: 'example-small.png',
-    largeSrc: 'example-large.png',
-  },
+    image: {
+        smallSrc: 'example-small.png',
+        largeSrc: 'example-large.png',
+    },
 };
 
 describe('macro: image', () => {
-  it('outputs a `figure` element', () => {
-    const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
-
-    expect($('.ons-image')[0].tagName).toBe('figure');
-  });
-
-  it('outputs a `figurecaption` element when `caption` is provided', () => {
-    const $ = cheerio.load(
-      renderComponent('image', {
-        ...EXAMPLE_IMAGE_URL_MINIMAL,
-        caption: 'Example image caption',
-      }),
-    );
-
-    expect($('.ons-image__caption')[0].tagName).toBe('figcaption');
-  });
-
-  it('outputs a `figurecaption` element with provided `caption` text', () => {
-    const $ = cheerio.load(
-      renderComponent('image', {
-        ...EXAMPLE_IMAGE_URL_MINIMAL,
-        caption: 'Example image caption',
-      }),
-    );
-
-    expect($('.ons-image__caption').text().trim()).toBe('Example image caption');
-  });
-
-  describe('mode: url', () => {
-    it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
-
-      const results = await axe($.html());
-      expect(results).toHaveNoViolations();
+    it('outputs a `figure` element', () => {
+        const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
+
+        expect($('.ons-image')[0].tagName).toBe('figure');
     });
 
-    it('outputs an `img` element', () => {
-      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
+    it('outputs a `figurecaption` element when `caption` is provided', () => {
+        const $ = cheerio.load(
+            renderComponent('image', {
+                ...EXAMPLE_IMAGE_URL_MINIMAL,
+                caption: 'Example image caption',
+            }),
+        );
 
-      expect($('.ons-image__img')[0].tagName).toBe('img');
+        expect($('.ons-image__caption')[0].tagName).toBe('figcaption');
     });
 
-    it('outputs an `img` element with the expected `src`', () => {
-      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
+    it('outputs a `figurecaption` element with provided `caption` text', () => {
+        const $ = cheerio.load(
+            renderComponent('image', {
+                ...EXAMPLE_IMAGE_URL_MINIMAL,
+                caption: 'Example image caption',
+            }),
+        );
 
-      expect($('.ons-image__img').attr('src')).toBe('example.png');
+        expect($('.ons-image__caption').text().trim()).toBe('Example image caption');
     });
 
-    it('outputs an `img` element with the expected alt text', () => {
-      const $ = cheerio.load(
-        renderComponent('image', {
-          ...EXAMPLE_IMAGE_URL_MINIMAL,
-          alt: 'Example alt text',
-        }),
-      );
+    describe('mode: url', () => {
+        it('passes jest-axe checks', async () => {
+            const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
 
-      expect($('.ons-image__img').attr('alt')).toBe('Example alt text');
-    });
-  });
+            const results = await axe($.html());
+            expect(results).toHaveNoViolations();
+        });
 
-  describe('mode: image', () => {
-    it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+        it('outputs an `img` element', () => {
+            const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
 
-      const results = await axe($.html());
-      expect(results).toHaveNoViolations();
-    });
+            expect($('.ons-image__img')[0].tagName).toBe('img');
+        });
 
-    it('outputs an `img` element', () => {
-      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+        it('outputs an `img` element with the expected `src`', () => {
+            const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
 
-      expect($('.ons-image__img')[0].tagName).toBe('img');
-    });
+            expect($('.ons-image__img').attr('src')).toBe('example.png');
+        });
 
-    it('outputs an `img` element with the expected `srcset`', () => {
-      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+        it('outputs an `img` element with the expected alt text', () => {
+            const $ = cheerio.load(
+                renderComponent('image', {
+                    ...EXAMPLE_IMAGE_URL_MINIMAL,
+                    alt: 'Example alt text',
+                }),
+            );
 
-      expect($('.ons-image__img').attr('srcset')).toBe('example-small.png 1x, example-large.png 2x');
+            expect($('.ons-image__img').attr('alt')).toBe('Example alt text');
+        });
     });
 
-    it('outputs an `img` element with the expected `src`', () => {
-      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+    describe('mode: image', () => {
+        it('passes jest-axe checks', async () => {
+            const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
 
-      expect($('.ons-image__img').attr('src')).toBe('example-small.png');
-    });
+            const results = await axe($.html());
+            expect(results).toHaveNoViolations();
+        });
+
+        it('outputs an `img` element', () => {
+            const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+
+            expect($('.ons-image__img')[0].tagName).toBe('img');
+        });
+
+        it('outputs an `img` element with the expected `srcset`', () => {
+            const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+
+            expect($('.ons-image__img').attr('srcset')).toBe('example-small.png 1x, example-large.png 2x');
+        });
+
+        it('outputs an `img` element with the expected `src`', () => {
+            const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+
+            expect($('.ons-image__img').attr('src')).toBe('example-small.png');
+        });
 
-    it('outputs an `img` element with the expected alt text', () => {
-      const $ = cheerio.load(
-        renderComponent('image', {
-          ...EXAMPLE_IMAGE_IMAGE_MINIMAL,
-          alt: 'Example alt text',
-        }),
-      );
+        it('outputs an `img` element with the expected alt text', () => {
+            const $ = cheerio.load(
+                renderComponent('image', {
+                    ...EXAMPLE_IMAGE_IMAGE_MINIMAL,
+                    alt: 'Example alt text',
+                }),
+            );
 
-      expect($('.ons-image__img').attr('alt')).toBe('Example alt text');
+            expect($('.ons-image__img').attr('alt')).toBe('Example alt text');
+        });
     });
-  });
 });