@ons/design-system 70.0.7 → 70.0.9

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.njk

@@ -1,10 +1,10 @@
 {% macro onsRelatedContentSection(params) %}
-  <div class="ons-related-content__section">
-    {% if params.title %}
-      <h2 class="ons-related-content__title ons-u-fs-r--b ons-u-mb-xs" {% if params.id %}id="{{ params.id }}"{% endif %}>{{ params.title }}</h2>
-    {% endif %}
-    <div class="ons-related-content__content">
-      {{ caller() if caller }}
+    <div class="ons-related-content__section">
+        {% if params.title %}
+            <h2 class="ons-related-content__title ons-u-fs-r--b ons-u-mb-xs" {% if params.id %}id="{{ params.id }}"{% endif %}>
+                {{ params.title }}
+            </h2>
+        {% endif %}
+        <div class="ons-related-content__content">{{ caller() if caller }}</div>
     </div>
-  </div>
 {% endmacro %}

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/related-content/example-related-content-general.njk

@@ -2,9 +2,11 @@
 {% from "components/related-content/_section-macro.njk" import onsRelatedContentSection %}
 {% from "components/list/_macro.njk" import onsList %}
 
-{% call onsRelatedContent({
-    "ariaLabel": 'Related content'
-}) %}
+{%
+    call onsRelatedContent({
+        "ariaLabel": 'Related content'
+    })
+%}
     {% call onsRelatedContentSection() %}
         <p class="ons-u-mb-xs">Telephone: 0800 587 2021</p>
 

package/components/related-content/example-related-content-multiple-rows-of-links.njk

@@ -1,51 +1,53 @@
 {% from "components/related-content/_macro.njk" import onsRelatedContent %}
 
-{{ onsRelatedContent({
-    "ariaLabel": 'Related content',
-    "rows": [
-        {
-            "id": 'related-help-with-the-census',
-            "title": 'Help with the census',
-            "itemsList": [
-                {
-                    "text": 'I’m moving house',
-                    "url": '#0'
-                },
-                {
-                    "text": 'What if I’m away or abroad on Census Day?',
-                    "url": '#0'
-                },
-                {
-                    "text": 'Get an access code or paper census',
-                    "url": '#0'
-                },
-                {
-                    "text": 'Find a census support centre',
-                    "url": '#0'
-                },
-                {
-                    "text": 'Languages',
-                    "url": '#0'
-                },
-                {
-                    "text": 'Accessibility',
-                    "url": '#0'
-                }
-            ]
-        },
-        {
-            "id": 'related-content',
-            "title": 'Related content',
-            "itemsList": [
-                {
-                    "text": 'How we will contact or visit you',
-                    "url": '#0'
-                },
-                {
-                    "text": 'Media enquiries',
-                    "url": '#0'
-                }
-            ]
-        }
-    ]
-}) }}
+{{
+    onsRelatedContent({
+        "ariaLabel": 'Related content',
+        "rows": [
+            {
+                "id": 'related-help-with-the-census',
+                "title": 'Help with the census',
+                "itemsList": [
+                    {
+                        "text": 'I’m moving house',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'What if I’m away or abroad on Census Day?',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Get an access code or paper census',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Find a census support centre',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Languages',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Accessibility',
+                        "url": '#0'
+                    }
+                ]
+            },
+            {
+                "id": 'related-content',
+                "title": 'Related content',
+                "itemsList": [
+                    {
+                        "text": 'How we will contact or visit you',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Media enquiries',
+                        "url": '#0'
+                    }
+                ]
+            }
+        ]
+    })
+}}

package/components/related-content/example-related-content-social-media.njk

@@ -1,40 +1,42 @@
 {% from "components/related-content/_macro.njk" import onsRelatedContent %}
 
-{{ onsRelatedContent({
-    "ariaLabel": 'Social media links',
-    "rows": [
-        {
-            "id": 'follow-us',
-            "title": 'Follow us',
-            "variants": 'social',
-            "iconPosition": 'before',
-            "iconSize": 'xxl',
-            "itemsList": [
-                {
-                    "url": '#0',
-                    "text": 'Twitter',
-                    "iconType": 'twitter',
-                    "rel": 'noreferrer external'
-                },
-                {
-                    "url": '#0',
-                    "text": 'Facebook',
-                    "iconType": 'facebook',
-                    "rel": 'noreferrer external'
-                },
-                {
-                    "url": '#0',
-                    "text": 'Instagram',
-                    "iconType": 'instagram',
-                    "rel": 'noreferrer external'
-                },
-                {
-                    "url": '#0',
-                    "text": 'LinkedIn',
-                    "iconType": 'linkedin',
-                    "rel": 'noreferrer external'
-                }
-            ]
-        }
-    ]
-}) }}
+{{
+    onsRelatedContent({
+        "ariaLabel": 'Social media links',
+        "rows": [
+            {
+                "id": 'follow-us',
+                "title": 'Follow us',
+                "variants": 'social',
+                "iconPosition": 'before',
+                "iconSize": 'xxl',
+                "itemsList": [
+                    {
+                        "url": '#0',
+                        "text": 'Twitter',
+                        "iconType": 'twitter',
+                        "rel": 'noreferrer external'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'Facebook',
+                        "iconType": 'facebook',
+                        "rel": 'noreferrer external'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'Instagram',
+                        "iconType": 'instagram',
+                        "rel": 'noreferrer external'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'LinkedIn',
+                        "iconType": 'linkedin',
+                        "rel": 'noreferrer external'
+                    }
+                ]
+            }
+        ]
+    })
+}}

package/components/relationships/_macro.njk

@@ -3,15 +3,17 @@
 {% macro onsRelationships(params) %}
     <div
         {% if params.id %}id="{{ params.id }}"{% endif %}
-        class="ons-relationships ons-js-relationships{% if params.classes %} {{ params.classes }}{% endif %}"
+        class="ons-relationships ons-js-relationships{{ ' ' + params.classes if params.classes else '' }}"
     >
-        {{ onsRadios({
-            "name": params.name,
-            "dontWrap": params.dontWrap,
-            "legendIsQuestionTitle": params.legendIsQuestionTitle,
-            "radios": params.radios,
-            "error": params.error
-        }) }}
+        {{
+            onsRadios({
+                "name": params.name,
+                "dontWrap": params.dontWrap,
+                "legendIsQuestionTitle": params.legendIsQuestionTitle,
+                "radios": params.radios,
+                "error": params.error
+            })
+        }}
         <p class="ons-relationships__playback ons-js-relationships-playback ons-u-d-no" aria-live="polite">{{ params.playback | safe }}</p>
     </div>
 {% endmacro %}