@ons/design-system 70.0.6 → 70.0.8

package/components/helpers/_grid.scss

@@ -1,6 +1,6 @@
 .ons-pl-grid-col {
-  background: var(--ons-color-grey-5);
-  font-size: 0.8rem;
-  margin: 0 0 1rem;
-  padding: 1rem;
+    background: var(--ons-color-grey-5);
+    font-size: 0.8rem;
+    margin: 0 0 1rem;
+    padding: 1rem;
 }

package/components/hero/_hero.scss

@@ -1,67 +1,67 @@
 // Default
 .ons-hero {
-  background-color: var(--ons-color-hero-bg);
-  display: flex;
-  overflow: hidden;
-  padding: 0;
-  position: relative;
-
-  &--dark {
-    background-color: var(--ons-color-hero-bg-dark);
-  }
-
-  &__container {
-    align-items: center;
+    background-color: var(--ons-color-hero-bg);
     display: flex;
-    min-height: 300px;
+    overflow: hidden;
+    padding: 0;
     position: relative;
 
-    &--has-details {
-      align-items: flex-start; // Prevents undesired shift if not enough content
+    &--dark {
+        background-color: var(--ons-color-hero-bg-dark);
     }
-  }
 
-  &__content {
-    height: 100%;
-  }
+    &__container {
+        align-items: center;
+        display: flex;
+        min-height: 300px;
+        position: relative;
 
-  &__pre-title {
-    margin-bottom: 0.5rem;
+        &--has-details {
+            align-items: flex-start; // Prevents undesired shift if not enough content
+        }
+    }
 
-    @include mq(xxs, m) {
-      max-width: 145px;
+    &__content {
+        height: 100%;
     }
-  }
 
-  &__title {
-    font-size: 2.3rem;
-    line-height: 1.2;
-  }
+    &__pre-title {
+        margin-bottom: 0.5rem;
 
-  &__details {
-    padding-bottom: 3rem;
-    padding-top: 2rem;
-    position: relative;
-    z-index: 5;
-  }
+        @include mq(xxs, m) {
+            max-width: 145px;
+        }
+    }
+
+    &__title {
+        font-size: 2.3rem;
+        line-height: 1.2;
+    }
 
-  &--dark & {
     &__details {
-      color: var(--ons-color-text-inverse) !important;
+        padding-bottom: 3rem;
+        padding-top: 2rem;
+        position: relative;
+        z-index: 5;
+    }
+
+    &--dark & {
+        &__details {
+            color: var(--ons-color-text-inverse) !important;
 
-      a {
-        color: inherit;
-        text-decoration: underline solid var(--ons-color-text-inverse-link) 1px;
-      }
+            a {
+                color: inherit;
+                text-decoration: underline solid var(--ons-color-text-inverse-link) 1px;
+            }
 
-      a:hover {
-        color: var(--ons-color-text-inverse-link-hover);
-        text-decoration-thickness: 2px;
-      }
+            a:hover {
+                color: var(--ons-color-text-inverse-link-hover);
+                text-decoration-thickness: 2px;
+            }
 
-      .ons-details__heading {
-        color: inherit;
-      }
+            .ons-details__heading {
+                color: inherit;
+            }
+        }
     }
-  }
 }

package/components/hero/_macro.spec.js

@@ -6,85 +6,85 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_HERO = {
-  title: 'Hero title',
-  subtitle: 'Hero subtitle',
-  text: 'Hero text',
-  button: {
-    url: '#0',
-    text: 'Get started',
-  },
+    title: 'Hero title',
+    subtitle: 'Hero subtitle',
+    text: 'Hero text',
+    button: {
+        url: '#0',
+        text: 'Get started',
+    },
 };
 
 describe('macro: hero', () => {
-  it('passes jest-axe checks with', async () => {
-    const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO));
+    it('passes jest-axe checks with', async () => {
+        const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO));
 
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-  it('has provided variant style classes', () => {
-    const $ = cheerio.load(
-      renderComponent('hero', {
-        variants: ['variant-a', 'variant-b'],
-      }),
-    );
+    it('has provided variant style classes', () => {
+        const $ = cheerio.load(
+            renderComponent('hero', {
+                variants: ['variant-a', 'variant-b'],
+            }),
+        );
 
-    expect($('.ons-hero--variant-a').length).toBe(1);
-    expect($('.ons-hero--variant-b').length).toBe(1);
-  });
+        expect($('.ons-hero--variant-a').length).toBe(1);
+        expect($('.ons-hero--variant-b').length).toBe(1);
+    });
 
-  it('has expected `title`', () => {
-    const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO));
+    it('has expected `title`', () => {
+        const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO));
 
-    const title = $('.ons-hero__title').html().trim();
-    expect(title).toBe('Hero title');
-  });
+        const title = $('.ons-hero__title').html().trim();
+        expect(title).toBe('Hero title');
+    });
 
-  it('has expected `subtitle`', () => {
-    const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO));
+    it('has expected `subtitle`', () => {
+        const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO));
 
-    const title = $('.ons-hero__subtitle').html().trim();
-    expect(title).toBe('Hero subtitle');
-  });
+        const title = $('.ons-hero__subtitle').html().trim();
+        expect(title).toBe('Hero subtitle');
+    });
 
-  it('has expected `text`', () => {
-    const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO));
+    it('has expected `text`', () => {
+        const $ = cheerio.load(renderComponent('hero', EXAMPLE_HERO));
 
-    const title = $('.ons-hero__text').html().trim();
-    expect(title).toBe('Hero text');
-  });
+        const title = $('.ons-hero__text').html().trim();
+        expect(title).toBe('Hero text');
+    });
 
-  it('has expected `html`', () => {
-    const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, html: '<span class="some-html">some html</span>' }));
+    it('has expected `html`', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, html: '<span class="some-html">some html</span>' }));
 
-    const htmlOutput = $('.ons-hero__additional-html').html();
-    expect(htmlOutput).toBe('<span class="some-html">some html</span>');
-  });
+        const htmlOutput = $('.ons-hero__additional-html').html();
+        expect(htmlOutput).toBe('<span class="some-html">some html</span>');
+    });
 
-  it('outputs the expected button', () => {
-    const faker = templateFaker();
-    const buttonSpy = faker.spy('button');
+    it('outputs the expected button', () => {
+        const faker = templateFaker();
+        const buttonSpy = faker.spy('button');
 
-    faker.renderComponent('hero', EXAMPLE_HERO);
+        faker.renderComponent('hero', EXAMPLE_HERO);
 
-    expect(buttonSpy.occurrences[0]).toHaveProperty('text', 'Get started');
-    expect(buttonSpy.occurrences[0]).toHaveProperty('url', '#0');
-  });
+        expect(buttonSpy.occurrences[0]).toHaveProperty('text', 'Get started');
+        expect(buttonSpy.occurrences[0]).toHaveProperty('url', '#0');
+    });
 
-  it('outputs the correct button class with `dark` variant', () => {
-    const faker = templateFaker();
-    const buttonSpy = faker.spy('button');
+    it('outputs the correct button class with `dark` variant', () => {
+        const faker = templateFaker();
+        const buttonSpy = faker.spy('button');
 
-    faker.renderComponent('hero', { ...EXAMPLE_HERO, variants: 'dark' });
+        faker.renderComponent('hero', { ...EXAMPLE_HERO, variants: 'dark' });
 
-    expect(buttonSpy.occurrences[0]).toHaveProperty('classes', ' ons-btn--ghost');
-  });
+        expect(buttonSpy.occurrences[0]).toHaveProperty('classes', ' ons-btn--ghost');
+    });
 
-  it('calls with content', () => {
-    const $ = cheerio.load(renderComponent('hero', { EXAMPLE_HERO }, 'Example content...'));
+    it('calls with content', () => {
+        const $ = cheerio.load(renderComponent('hero', { EXAMPLE_HERO }, 'Example content...'));
 
-    const content = $('.ons-hero__additional-content').text().trim();
-    expect(content).toEqual(expect.stringContaining('Example content...'));
-  });
+        const content = $('.ons-hero__additional-content').text().trim();
+        expect(content).toEqual(expect.stringContaining('Example content...'));
+    });
 });

package/components/icon/_icon.scss

@@ -1,60 +1,60 @@
 .ons-icon {
-  height: 1rem;
-  vertical-align: middle;
-  width: 1rem;
-
-  &--xxxl {
-    height: 1.7rem;
-    width: 1.7rem;
-
-    @include mq(m) {
-      height: 2.6rem;
-      width: 2.6rem;
+    height: 1rem;
+    vertical-align: middle;
+    width: 1rem;
+
+    &--xxxl {
+        height: 1.7rem;
+        width: 1.7rem;
+
+        @include mq(m) {
+            height: 2.6rem;
+            width: 2.6rem;
+        }
     }
-  }
 
-  &--xxl {
-    height: 1.5rem;
-    width: 1.5rem;
+    &--xxl {
+        height: 1.5rem;
+        width: 1.5rem;
 
-    @include mq(m) {
-      height: 2rem;
-      width: 2rem;
+        @include mq(m) {
+            height: 2rem;
+            width: 2rem;
+        }
     }
-  }
 
-  &--xl {
-    height: 1.4rem;
-    width: 1.4rem;
+    &--xl {
+        height: 1.4rem;
+        width: 1.4rem;
 
-    @include mq(m) {
-      height: 1.6rem;
-      width: 1.6rem;
+        @include mq(m) {
+            height: 1.6rem;
+            width: 1.6rem;
+        }
     }
-  }
 
-  &--l {
-    height: 1.3rem;
-    width: 1.3rem;
+    &--l {
+        height: 1.3rem;
+        width: 1.3rem;
 
-    @include mq(m) {
-      height: 1.4rem;
-      width: 1.4rem;
+        @include mq(m) {
+            height: 1.4rem;
+            width: 1.4rem;
+        }
     }
-  }
 
-  &--m {
-    height: 1.1rem;
-    width: 1.1rem;
+    &--m {
+        height: 1.1rem;
+        width: 1.1rem;
 
-    @include mq(m) {
-      height: 1.2rem;
-      width: 1.2rem;
+        @include mq(m) {
+            height: 1.2rem;
+            width: 1.2rem;
+        }
     }
-  }
 
-  &--s {
-    height: 0.7rem;
-    width: 0.7rem;
-  }
+    &--s {
+        height: 0.7rem;
+        width: 0.7rem;
+    }
 }

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;
+    }
 }