@ons/design-system 70.0.6 → 70.0.8

package/components/related-content/_macro.spec.js

@@ -7,125 +7,125 @@ import { mapAll } from '../../tests/helpers/cheerio';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_RELATED_CONTENT_GENERAL = {
-  title: 'Related information',
-  id: 'related-general-content',
+    title: 'Related information',
+    id: 'related-general-content',
 };
 
 const EXAMPLE_RELATED_CONTENT_LINKS = {
-  rows: [
-    {
-      id: 'related-articles',
-      title: 'Related articles',
-      iconPosition: 'before',
-      iconSize: 'xl',
-      itemsList: [
-        { text: 'First', url: '/article/first' },
-        { text: 'Second', url: '/article/second' },
-      ],
-    },
-    {
-      id: 'related-links',
-      title: 'Related links',
-      iconPosition: 'after',
-      iconSize: 'xxl',
-      itemsList: [
-        { text: 'A', url: '/article/a' },
-        { text: 'B', url: '/article/b' },
-      ],
-    },
-  ],
+    rows: [
+        {
+            id: 'related-articles',
+            title: 'Related articles',
+            iconPosition: 'before',
+            iconSize: 'xl',
+            itemsList: [
+                { text: 'First', url: '/article/first' },
+                { text: 'Second', url: '/article/second' },
+            ],
+        },
+        {
+            id: 'related-links',
+            title: 'Related links',
+            iconPosition: 'after',
+            iconSize: 'xxl',
+            itemsList: [
+                { text: 'A', url: '/article/a' },
+                { text: 'B', url: '/article/b' },
+            ],
+        },
+    ],
 };
 
 describe('macro: related-content', () => {
-  describe.each([
-    ['general content', EXAMPLE_RELATED_CONTENT_GENERAL],
-    ['list of links', EXAMPLE_RELATED_CONTENT_LINKS],
-  ])('mode: %s', (_, params) => {
-    it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('related-content', params));
-
-      const results = await axe($.html());
-      expect(results).toHaveNoViolations();
+    describe.each([
+        ['general content', EXAMPLE_RELATED_CONTENT_GENERAL],
+        ['list of links', EXAMPLE_RELATED_CONTENT_LINKS],
+    ])('mode: %s', (_, params) => {
+        it('passes jest-axe checks', async () => {
+            const $ = cheerio.load(renderComponent('related-content', params));
+
+            const results = await axe($.html());
+            expect(results).toHaveNoViolations();
+        });
+
+        it('has a default `aria-label` of "Related content"', () => {
+            const $ = cheerio.load(renderComponent('related-content', params));
+
+            expect($('.ons-related-content').attr('aria-label')).toBe('Related content');
+        });
+
+        it('has the provided `aria-label`', () => {
+            const $ = cheerio.load(
+                renderComponent('related-content', {
+                    ...params,
+                    ariaLabel: 'Related articles',
+                }),
+            );
+
+            expect($('.ons-related-content').attr('aria-label')).toBe('Related articles');
+        });
+
+        it('has additionally provided style classes', () => {
+            const $ = cheerio.load(
+                renderComponent('related-content', {
+                    ...params,
+                    classes: 'extra-class another-extra-class',
+                }),
+            );
+
+            expect($('.ons-related-content').hasClass('extra-class')).toBe(true);
+            expect($('.ons-related-content').hasClass('another-extra-class')).toBe(true);
+        });
     });
 
-    it('has a default `aria-label` of "Related content"', () => {
-      const $ = cheerio.load(renderComponent('related-content', params));
+    describe('mode: general content', () => {
+        it('calls with content', () => {
+            const $ = cheerio.load(renderComponent('related-content', { EXAMPLE_RELATED_CONTENT_GENERAL }, 'Example content...'));
 
-      expect($('.ons-related-content').attr('aria-label')).toBe('Related content');
+            const content = $('.ons-related-content').text().trim();
+            expect(content).toEqual(expect.stringContaining('Example content...'));
+        });
     });
 
-    it('has the provided `aria-label`', () => {
-      const $ = cheerio.load(
-        renderComponent('related-content', {
-          ...params,
-          ariaLabel: 'Related articles',
-        }),
-      );
-
-      expect($('.ons-related-content').attr('aria-label')).toBe('Related articles');
-    });
-
-    it('has additionally provided style classes', () => {
-      const $ = cheerio.load(
-        renderComponent('related-content', {
-          ...params,
-          classes: 'extra-class another-extra-class',
-        }),
-      );
-
-      expect($('.ons-related-content').hasClass('extra-class')).toBe(true);
-      expect($('.ons-related-content').hasClass('another-extra-class')).toBe(true);
-    });
-  });
-
-  describe('mode: general content', () => {
-    it('calls with content', () => {
-      const $ = cheerio.load(renderComponent('related-content', { EXAMPLE_RELATED_CONTENT_GENERAL }, 'Example content...'));
-
-      const content = $('.ons-related-content').text().trim();
-      expect(content).toEqual(expect.stringContaining('Example content...'));
-    });
-  });
-
-  describe('mode: list of links', () => {
-    it('renders the expected output using the related-content/section macro', () => {
-      const faker = templateFaker();
-      const sectionSpy = faker.spy('related-content/section');
-
-      faker.renderComponent('related-content', EXAMPLE_RELATED_CONTENT_LINKS);
-
-      expect(sectionSpy.occurrences[0]).toHaveProperty('title', 'Related articles');
-      expect(sectionSpy.occurrences[0]).toHaveProperty('id', 'related-articles');
-      expect(sectionSpy.occurrences[1]).toHaveProperty('title', 'Related links');
-      expect(sectionSpy.occurrences[1]).toHaveProperty('id', 'related-links');
-    });
-
-    it('has the `aria-labelledby` attribute for each section of links', () => {
-      const $ = cheerio.load(renderComponent('related-content', EXAMPLE_RELATED_CONTENT_LINKS));
-
-      const values = mapAll($('.ons-related-content__navigation'), (node) => node.attr('aria-labelledby'));
-      expect(values).toEqual(['related-articles', 'related-links']);
-    });
-
-    it('renders the expected list items using the list macro', () => {
-      const faker = templateFaker();
-      const listsSpy = faker.spy('list');
-
-      faker.renderComponent('related-content', EXAMPLE_RELATED_CONTENT_LINKS);
-
-      expect(listsSpy.occurrences[0]).toHaveProperty('iconPosition', 'before');
-      expect(listsSpy.occurrences[0]).toHaveProperty('iconSize', 'xl');
-      expect(listsSpy.occurrences[0]).toHaveProperty('itemsList', [
-        { text: 'First', url: '/article/first' },
-        { text: 'Second', url: '/article/second' },
-      ]);
-
-      expect(listsSpy.occurrences[1]).toHaveProperty('iconPosition', 'after');
-      expect(listsSpy.occurrences[1]).toHaveProperty('iconSize', 'xxl');
-      expect(listsSpy.occurrences[1]).toHaveProperty('itemsList', [
-        { text: 'A', url: '/article/a' },
-        { text: 'B', url: '/article/b' },
-      ]);
+    describe('mode: list of links', () => {
+        it('renders the expected output using the related-content/section macro', () => {
+            const faker = templateFaker();
+            const sectionSpy = faker.spy('related-content/section');
+
+            faker.renderComponent('related-content', EXAMPLE_RELATED_CONTENT_LINKS);
+
+            expect(sectionSpy.occurrences[0]).toHaveProperty('title', 'Related articles');
+            expect(sectionSpy.occurrences[0]).toHaveProperty('id', 'related-articles');
+            expect(sectionSpy.occurrences[1]).toHaveProperty('title', 'Related links');
+            expect(sectionSpy.occurrences[1]).toHaveProperty('id', 'related-links');
+        });
+
+        it('has the `aria-labelledby` attribute for each section of links', () => {
+            const $ = cheerio.load(renderComponent('related-content', EXAMPLE_RELATED_CONTENT_LINKS));
+
+            const values = mapAll($('.ons-related-content__navigation'), (node) => node.attr('aria-labelledby'));
+            expect(values).toEqual(['related-articles', 'related-links']);
+        });
+
+        it('renders the expected list items using the list macro', () => {
+            const faker = templateFaker();
+            const listsSpy = faker.spy('list');
+
+            faker.renderComponent('related-content', EXAMPLE_RELATED_CONTENT_LINKS);
+
+            expect(listsSpy.occurrences[0]).toHaveProperty('iconPosition', 'before');
+            expect(listsSpy.occurrences[0]).toHaveProperty('iconSize', 'xl');
+            expect(listsSpy.occurrences[0]).toHaveProperty('itemsList', [
+                { text: 'First', url: '/article/first' },
+                { text: 'Second', url: '/article/second' },
+            ]);
+
+            expect(listsSpy.occurrences[1]).toHaveProperty('iconPosition', 'after');
+            expect(listsSpy.occurrences[1]).toHaveProperty('iconSize', 'xxl');
+            expect(listsSpy.occurrences[1]).toHaveProperty('itemsList', [
+                { text: 'A', url: '/article/a' },
+                { text: 'B', url: '/article/b' },
+            ]);
+        });
     });
-  });
 });

package/components/related-content/_related-content.scss

@@ -1,18 +1,18 @@
 .ons-related-content {
-  @extend .ons-u-mt-m;
+    @extend .ons-u-mt-m;
 
-  border-top: 5px solid var(--ons-color-branded);
-  padding-top: 1rem;
+    border-top: 5px solid var(--ons-color-branded);
+    padding-top: 1rem;
 
-  &__section {
-    & + & {
-      border-top: 1px solid var(--ons-color-grey-75);
-      margin: 2rem 0 0;
-      padding: 2em 0 0;
-    }
+    &__section {
+        & + & {
+            border-top: 1px solid var(--ons-color-grey-75);
+            margin: 2rem 0 0;
+            padding: 2em 0 0;
+        }
 
-    > :last-child {
-      margin-bottom: 0;
+        > :last-child {
+            margin-bottom: 0;
+        }
     }
-  }
 }

package/components/related-content/_section-macro.spec.js

@@ -6,32 +6,32 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
 const EXAMPLE_RELATED_SECTION_CONTENT = {
-  title: 'Related information',
-  id: 'related-general-content',
+    title: 'Related information',
+    id: 'related-general-content',
 };
 
 describe('macro: related-content/section', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(renderComponent('related-content/section', EXAMPLE_RELATED_SECTION_CONTENT));
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(renderComponent('related-content/section', EXAMPLE_RELATED_SECTION_CONTENT));
 
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-  it('has the provided `title` text', () => {
-    const $ = cheerio.load(renderComponent('related-content/section', EXAMPLE_RELATED_SECTION_CONTENT));
-    expect($('.ons-related-content__title').text().trim()).toEqual('Related information');
-  });
+    it('has the provided `title` text', () => {
+        const $ = cheerio.load(renderComponent('related-content/section', EXAMPLE_RELATED_SECTION_CONTENT));
+        expect($('.ons-related-content__title').text().trim()).toEqual('Related information');
+    });
 
-  it('has the `id` attribute for the title', () => {
-    const $ = cheerio.load(renderComponent('related-content/section', EXAMPLE_RELATED_SECTION_CONTENT));
-    expect($('#related-general-content').length).toBe(1);
-  });
+    it('has the `id` attribute for the title', () => {
+        const $ = cheerio.load(renderComponent('related-content/section', EXAMPLE_RELATED_SECTION_CONTENT));
+        expect($('#related-general-content').length).toBe(1);
+    });
 
-  it('has the provided content', () => {
-    const $ = cheerio.load(renderComponent('related-content/section', { EXAMPLE_RELATED_SECTION_CONTENT }, 'Example content...'));
+    it('has the provided content', () => {
+        const $ = cheerio.load(renderComponent('related-content/section', { EXAMPLE_RELATED_SECTION_CONTENT }, 'Example content...'));
 
-    const content = $('.ons-related-content__content').text().trim();
-    expect(content).toEqual(expect.stringContaining('Example content...'));
-  });
+        const content = $('.ons-related-content__content').text().trim();
+        expect(content).toEqual(expect.stringContaining('Example content...'));
+    });
 });

package/components/relationships/_macro.spec.js

@@ -6,101 +6,101 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_RELATIONSHIPS = {
-  playback: "Amanda Bloggs is Joe Bloggs' <strong>…</strong>",
-  name: 'relationship',
-  dontWrap: true,
-  legendIsQuestionTitle: true,
-  radios: [
-    {
-      id: 'grandparent',
-      value: 'grandparent',
-      label: {
-        text: 'Grandparent',
-      },
-      attributes: {
-        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <strong>grandparents</strong>',
-        'data-playback': "Amanda Bloggs is Joe Bloggs' <strong>grandparents</strong>",
-      },
-    },
-    {
-      id: 'other-relation',
-      value: 'other-relation',
-      label: {
-        text: 'Other relation',
-      },
-      attributes: {
-        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <strong>other relation</strong>',
-        'data-playback': "Amanda Bloggs is Joe Bloggs' <strong>other relation</strong>",
-      },
-    },
-    {
-      id: 'unrelated',
-      value: 'unrelated',
-      label: {
-        text: 'Unrelated',
-        description: 'Including foster child',
-      },
-      attributes: {
-        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs',
-        'data-playback': 'Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs',
-      },
-    },
-  ],
+    playback: "Amanda Bloggs is Joe Bloggs' <strong>…</strong>",
+    name: 'relationship',
+    dontWrap: true,
+    legendIsQuestionTitle: true,
+    radios: [
+        {
+            id: 'grandparent',
+            value: 'grandparent',
+            label: {
+                text: 'Grandparent',
+            },
+            attributes: {
+                'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <strong>grandparents</strong>',
+                'data-playback': "Amanda Bloggs is Joe Bloggs' <strong>grandparents</strong>",
+            },
+        },
+        {
+            id: 'other-relation',
+            value: 'other-relation',
+            label: {
+                text: 'Other relation',
+            },
+            attributes: {
+                'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <strong>other relation</strong>',
+                'data-playback': "Amanda Bloggs is Joe Bloggs' <strong>other relation</strong>",
+            },
+        },
+        {
+            id: 'unrelated',
+            value: 'unrelated',
+            label: {
+                text: 'Unrelated',
+                description: 'Including foster child',
+            },
+            attributes: {
+                'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs',
+                'data-playback': 'Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs',
+            },
+        },
+    ],
 };
 
 describe('macro: relationships', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(renderComponent('relationships', EXAMPLE_RELATIONSHIPS));
-
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
-
-  it('has the expected `id` attribute', () => {
-    const $ = cheerio.load(
-      renderComponent('relationships', {
-        ...EXAMPLE_RELATIONSHIPS,
-        id: 'example-relationships',
-      }),
-    );
-
-    expect($('.ons-relationships').attr('id')).toBe('example-relationships');
-  });
-
-  it('has additionally provided style classes', () => {
-    const $ = cheerio.load(
-      renderComponent('relationships', {
-        ...EXAMPLE_RELATIONSHIPS,
-        classes: 'extra-class another-extra-class',
-      }),
-    );
-
-    expect($('.ons-relationships').hasClass('extra-class')).toBe(true);
-    expect($('.ons-relationships').hasClass('another-extra-class')).toBe(true);
-  });
-
-  it('has the provided `playback` text', () => {
-    const $ = cheerio.load(renderComponent('relationships', EXAMPLE_RELATIONSHIPS));
-
-    const playbackContent = $('.ons-relationships__playback').html().trim();
-    expect(playbackContent).toBe("Amanda Bloggs is Joe Bloggs' <strong>…</strong>");
-  });
-
-  it('has playback paragraph hidden initially', async () => {
-    const $ = cheerio.load(renderComponent('relationships', EXAMPLE_RELATIONSHIPS));
-
-    expect($('.ons-relationships__playback').hasClass('ons-u-d-no')).toBe(true);
-  });
-
-  it('renders the expected radio items the radios macro', () => {
-    const faker = templateFaker();
-    const radiosSpy = faker.spy('radios');
-
-    faker.renderComponent('relationships', EXAMPLE_RELATIONSHIPS);
-
-    expect(radiosSpy.occurrences[0]).toHaveProperty('name', 'relationship');
-    expect(radiosSpy.occurrences[0]).toHaveProperty('dontWrap', true);
-    expect(radiosSpy.occurrences[0]).toHaveProperty('legendIsQuestionTitle', true);
-    expect(radiosSpy.occurrences[0]).toHaveProperty('radios', EXAMPLE_RELATIONSHIPS.radios);
-  });
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(renderComponent('relationships', EXAMPLE_RELATIONSHIPS));
+
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
+
+    it('has the expected `id` attribute', () => {
+        const $ = cheerio.load(
+            renderComponent('relationships', {
+                ...EXAMPLE_RELATIONSHIPS,
+                id: 'example-relationships',
+            }),
+        );
+
+        expect($('.ons-relationships').attr('id')).toBe('example-relationships');
+    });
+
+    it('has additionally provided style classes', () => {
+        const $ = cheerio.load(
+            renderComponent('relationships', {
+                ...EXAMPLE_RELATIONSHIPS,
+                classes: 'extra-class another-extra-class',
+            }),
+        );
+
+        expect($('.ons-relationships').hasClass('extra-class')).toBe(true);
+        expect($('.ons-relationships').hasClass('another-extra-class')).toBe(true);
+    });
+
+    it('has the provided `playback` text', () => {
+        const $ = cheerio.load(renderComponent('relationships', EXAMPLE_RELATIONSHIPS));
+
+        const playbackContent = $('.ons-relationships__playback').html().trim();
+        expect(playbackContent).toBe("Amanda Bloggs is Joe Bloggs' <strong>…</strong>");
+    });
+
+    it('has playback paragraph hidden initially', async () => {
+        const $ = cheerio.load(renderComponent('relationships', EXAMPLE_RELATIONSHIPS));
+
+        expect($('.ons-relationships__playback').hasClass('ons-u-d-no')).toBe(true);
+    });
+
+    it('renders the expected radio items the radios macro', () => {
+        const faker = templateFaker();
+        const radiosSpy = faker.spy('radios');
+
+        faker.renderComponent('relationships', EXAMPLE_RELATIONSHIPS);
+
+        expect(radiosSpy.occurrences[0]).toHaveProperty('name', 'relationship');
+        expect(radiosSpy.occurrences[0]).toHaveProperty('dontWrap', true);
+        expect(radiosSpy.occurrences[0]).toHaveProperty('legendIsQuestionTitle', true);
+        expect(radiosSpy.occurrences[0]).toHaveProperty('radios', EXAMPLE_RELATIONSHIPS.radios);
+    });
 });

package/components/relationships/_relationships.scss

@@ -1,13 +1,13 @@
 .ons-relationships {
-  &__playback {
-    border-bottom: 1px solid var(--ons-color-input-border);
-    border-top: 1px solid var(--ons-color-input-border);
-    margin: 2rem 0 0;
-    padding: 1rem 0;
+    &__playback {
+        border-bottom: 1px solid var(--ons-color-input-border);
+        border-top: 1px solid var(--ons-color-input-border);
+        margin: 2rem 0 0;
+        padding: 1rem 0;
 
-    @include mq('m') {
-      display: inline-block;
-      min-width: 20rem;
+        @include mq('m') {
+            display: inline-block;
+            min-width: 20rem;
+        }
     }
-  }
 }

package/components/relationships/relationships.dom.js

@@ -1,11 +1,11 @@
 import domready from '../../js/domready';
 
 domready(async () => {
-  const relationships = [...document.querySelectorAll('.ons-js-relationships')];
+    const relationships = [...document.querySelectorAll('.ons-js-relationships')];
 
-  if (relationships.length) {
-    const Relationships = (await import('./relationships')).default;
+    if (relationships.length) {
+        const Relationships = (await import('./relationships')).default;
 
-    relationships.forEach((element) => new Relationships(element));
-  }
+        relationships.forEach((element) => new Relationships(element));
+    }
 });

package/components/relationships/relationships.js

@@ -1,28 +1,28 @@
 export default class Relationships {
-  constructor(context) {
-    this.context = context;
-    this.legend = document.getElementById('question-title')
-      ? document.getElementById('question-title')
-      : document.getElementById('fieldset-legend-title');
-    this.radios = [...context.querySelectorAll('input[type=radio]')];
-    this.playback = context.querySelector('.ons-js-relationships-playback');
+    constructor(context) {
+        this.context = context;
+        this.legend = document.getElementById('question-title')
+            ? document.getElementById('question-title')
+            : document.getElementById('fieldset-legend-title');
+        this.radios = [...context.querySelectorAll('input[type=radio]')];
+        this.playback = context.querySelector('.ons-js-relationships-playback');
 
-    this.radios.forEach((radio) => radio.addEventListener('change', this.setPlayback.bind(this)));
+        this.radios.forEach((radio) => radio.addEventListener('change', this.setPlayback.bind(this)));
 
-    this.setPlayback();
+        this.setPlayback();
 
-    this.playback.classList.remove('ons-u-d-no');
-  }
+        this.playback.classList.remove('ons-u-d-no');
+    }
 
-  setPlayback() {
-    const radio = this.radios.find((radio) => radio.checked);
+    setPlayback() {
+        const radio = this.radios.find((radio) => radio.checked);
 
-    if (radio) {
-      const title = radio.getAttribute('data-title');
+        if (radio) {
+            const title = radio.getAttribute('data-title');
 
-      this.legend.innerHTML = title;
+            this.legend.innerHTML = title;
 
-      this.playback.innerHTML = radio.getAttribute('data-playback');
+            this.playback.innerHTML = radio.getAttribute('data-playback');
+        }
     }
-  }
 }