@ons/design-system 70.0.7 → 70.0.9

package/components/duration/example-duration-error-for-single-field.njk

@@ -1,31 +1,33 @@
 {% from "components/question/_macro.njk" import onsQuestion %}
 {% from "components/duration/_macro.njk" import onsDuration %}
 
-{{ onsDuration({
-    "id": "travel-time",
-    "legendOrLabel": 'How long do you spend travelling to and from work each day?',
-    "legendClasses": 'ons-u-vh',
-    "error": {
-        "text": "Enter a number of minutes that is less than 60",
-        "id": "duration-error"
-    },
-    "field1": {
-        "id": "travel-time-hours",
-        "name": "travel-time-hours",
-        "suffix": {
-            "text": "Hours",
-            "id": "address-time-hours-suffix"
+{{
+    onsDuration({
+        "id": "travel-time",
+        "legendOrLabel": 'How long do you spend travelling to and from work each day?',
+        "legendClasses": 'ons-u-vh',
+        "error": {
+            "text": "Enter a number of minutes that is less than 60",
+            "id": "duration-error"
         },
-        "value": "2"
-    },
-    "field2": {
-        "id": "travel-time-minutes",
-        "name": "travel-time-minutes",
-        "suffix": {
-            "text": "Minutes",
-            "id": "address-time-minutes-suffix"
+        "field1": {
+            "id": "travel-time-hours",
+            "name": "travel-time-hours",
+            "suffix": {
+                "text": "Hours",
+                "id": "address-time-hours-suffix"
+            },
+            "value": "2"
         },
-        "value": "60",
-        "error": true
-    }
-}) }}
+        "field2": {
+            "id": "travel-time-minutes",
+            "name": "travel-time-minutes",
+            "suffix": {
+                "text": "Minutes",
+                "id": "address-time-minutes-suffix"
+            },
+            "value": "60",
+            "error": true
+        }
+    })
+}}

package/components/duration/example-duration-single-field.njk

@@ -1,24 +1,28 @@
 {% from "components/question/_macro.njk" import onsQuestion %}
 {% from "components/duration/_macro.njk" import onsDuration %}
 
-{% call onsQuestion({
-    "title": "How many years have you lived at this address?",
-    "description": "<p>Enter “0” into the years field if you have lived at this address for less than a year</p>",
-    "legendIsQuestionTitle": true
-}) %}
-    {{ onsDuration({
-        "id": "address-duration-example-single",
-        "dontWrap": true,
-        "field1": {
-            "id": "address-duration-years-example",
-            "name": "address-duration-years",
-            "suffix": {
-                "text": "Years",
-                "id": "address-duration-years-suffix-example"
-            },
-            "attributes": {
-                "autocomplete": "off"
+{%
+    call onsQuestion({
+        "title": "How many years have you lived at this address?",
+        "description": "<p>Enter “0” into the years field if you have lived at this address for less than a year</p>",
+        "legendIsQuestionTitle": true
+    })
+%}
+    {{
+        onsDuration({
+            "id": "address-duration-example-single",
+            "dontWrap": true,
+            "field1": {
+                "id": "address-duration-years-example",
+                "name": "address-duration-years",
+                "suffix": {
+                    "text": "Years",
+                    "id": "address-duration-years-suffix-example"
+                },
+                "attributes": {
+                    "autocomplete": "off"
+                }
             }
-        }
-    }) }}
+        })
+    }}
 {% endcall %}

package/components/duration/example-duration.njk

@@ -1,35 +1,39 @@
 {% from "components/question/_macro.njk" import onsQuestion %}
 {% from "components/duration/_macro.njk" import onsDuration %}
 
-{% call onsQuestion({
-    "title": "How long have you lived at this address?",
-    "description": "<p>Enter “0” into the years field if you have lived at this address for less than a year</p>",
-    "legendIsQuestionTitle": true
-}) %}
-    {{ onsDuration({
-        "id": "address-duration-example",
-        "dontWrap": true,
-        "field1": {
-            "id": "address-duration-years-example",
-            "name": "address-duration-years",
-            "suffix": {
-                "text": "Years",
-                "id": "address-duration-years-suffix-example"
+{%
+    call onsQuestion({
+        "title": "How long have you lived at this address?",
+        "description": "<p>Enter “0” into the years field if you have lived at this address for less than a year</p>",
+        "legendIsQuestionTitle": true
+    })
+%}
+    {{
+        onsDuration({
+            "id": "address-duration-example",
+            "dontWrap": true,
+            "field1": {
+                "id": "address-duration-years-example",
+                "name": "address-duration-years",
+                "suffix": {
+                    "text": "Years",
+                    "id": "address-duration-years-suffix-example"
+                },
+                "attributes": {
+                    "autocomplete": "off"
+                }
             },
-            "attributes": {
-                "autocomplete": "off"
+            "field2": {
+                "id": "address-duration-months-example",
+                "name": "address-duration-months",
+                "suffix": {
+                    "text": "Months",
+                    "id": "address-duration-months-suffix-example"
+                },
+                "attributes": {
+                    "autocomplete": "off"
+                }
             }
-        },
-        "field2": {
-            "id": "address-duration-months-example",
-            "name": "address-duration-months",
-            "suffix": {
-                "text": "Months",
-                "id": "address-duration-months-suffix-example"
-            },
-            "attributes": {
-                "autocomplete": "off"
-            }
-        }
-    }) }}
+        })
+    }}
 {% endcall %}

package/components/error/_macro.njk

@@ -4,17 +4,19 @@
     {% set content %}
         <p
             class="ons-panel__error"
-            {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
+            {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
         >
             <strong>{{ params.text }}</strong>
         </p>
         {{ caller() }}
     {% endset %}
 
-    {% call onsPanel({
-        "variant": "error",
-        "id": params.id
-    }) %}
-       {{ content | safe }}
+    {%
+        call onsPanel({
+            "variant": "error",
+            "id": params.id
+        })
+    %}
+        {{ content | safe }}
     {% endcall %}
 {% endmacro %}

package/components/error/_macro.spec.js

@@ -8,86 +8,86 @@ import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 const FAKE_NESTED_CONTENT = '<span class="test--nested">Nested content...</span>';
 
 describe('macro: error', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(
-      renderComponent(
-        'error',
-        {
-          text: 'Example error text.',
-          id: 'example-error',
-        },
-        FAKE_NESTED_CONTENT,
-      ),
-    );
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(
+            renderComponent(
+                'error',
+                {
+                    text: 'Example error text.',
+                    id: 'example-error',
+                },
+                FAKE_NESTED_CONTENT,
+            ),
+        );
 
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-  it('has the provided `text` text', () => {
-    const $ = cheerio.load(
-      renderComponent(
-        'error',
-        {
-          text: 'Example error text.',
-          id: 'example-error',
-        },
-        FAKE_NESTED_CONTENT,
-      ),
-    );
+    it('has the provided `text` text', () => {
+        const $ = cheerio.load(
+            renderComponent(
+                'error',
+                {
+                    text: 'Example error text.',
+                    id: 'example-error',
+                },
+                FAKE_NESTED_CONTENT,
+            ),
+        );
 
-    expect($('.ons-panel__error').text().trim()).toBe('Example error text.');
-  });
+        expect($('.ons-panel__error').text().trim()).toBe('Example error text.');
+    });
 
-  it('applies the provided `attributes` to the error content paragraph', () => {
-    const $ = cheerio.load(
-      renderComponent(
-        'error',
-        {
-          text: 'Example error text.',
-          id: 'example-error',
-          attributes: {
-            'data-test-a': 'foo',
-            'data-test-b': 'bar',
-          },
-        },
-        FAKE_NESTED_CONTENT,
-      ),
-    );
+    it('applies the provided `attributes` to the error content paragraph', () => {
+        const $ = cheerio.load(
+            renderComponent(
+                'error',
+                {
+                    text: 'Example error text.',
+                    id: 'example-error',
+                    attributes: {
+                        'data-test-a': 'foo',
+                        'data-test-b': 'bar',
+                    },
+                },
+                FAKE_NESTED_CONTENT,
+            ),
+        );
 
-    expect($('.ons-panel__error').attr('data-test-a')).toBe('foo');
-    expect($('.ons-panel__error').attr('data-test-b')).toBe('bar');
-  });
+        expect($('.ons-panel__error').attr('data-test-a')).toBe('foo');
+        expect($('.ons-panel__error').attr('data-test-b')).toBe('bar');
+    });
 
-  it('renders output using a `panel` component', () => {
-    const faker = templateFaker();
-    const panelSpy = faker.spy('panel');
+    it('renders output using a `panel` component', () => {
+        const faker = templateFaker();
+        const panelSpy = faker.spy('panel');
 
-    faker.renderComponent(
-      'error',
-      {
-        text: 'Example error text.',
-        id: 'example-error',
-      },
-      FAKE_NESTED_CONTENT,
-    );
+        faker.renderComponent(
+            'error',
+            {
+                text: 'Example error text.',
+                id: 'example-error',
+            },
+            FAKE_NESTED_CONTENT,
+        );
 
-    expect(panelSpy.occurrences[0].variant).toBe('error');
-    expect(panelSpy.occurrences[0].id).toBe('example-error');
-  });
+        expect(panelSpy.occurrences[0].variant).toBe('error');
+        expect(panelSpy.occurrences[0].id).toBe('example-error');
+    });
 
-  it('renders output using a `panel` component with expected nested content', () => {
-    const $ = cheerio.load(
-      renderComponent(
-        'error',
-        {
-          text: 'Example error text.',
-          id: 'example-error',
-        },
-        FAKE_NESTED_CONTENT,
-      ),
-    );
+    it('renders output using a `panel` component with expected nested content', () => {
+        const $ = cheerio.load(
+            renderComponent(
+                'error',
+                {
+                    text: 'Example error text.',
+                    id: 'example-error',
+                },
+                FAKE_NESTED_CONTENT,
+            ),
+        );
 
-    expect($('.ons-panel .test--nested').text()).toBe('Nested content...');
-  });
+        expect($('.ons-panel .test--nested').text()).toBe('Nested content...');
+    });
 });

package/components/external-link/_external-link.scss

@@ -1,24 +1,24 @@
 .ons-external-link {
-  &__icon {
-    visibility: hidden;
-    white-space: nowrap;
-  }
-  .ons-icon {
-    fill: var(--ons-color-grey-100);
-    padding-bottom: 0.1rem;
-    visibility: visible;
-  }
-  &:focus {
-    .ons-icon {
-      fill: var(--ons-color-black);
+    &__icon {
+        visibility: hidden;
+        white-space: nowrap;
     }
-  }
-  &:hover {
     .ons-icon {
-      fill: var(--ons-color-text-link-hover);
-      .ons-footer & {
-        fill: var(--ons-color-black);
-      }
+        fill: var(--ons-color-grey-100);
+        padding-bottom: 0.1rem;
+        visibility: visible;
+    }
+    &:focus {
+        .ons-icon {
+            fill: var(--ons-color-black);
+        }
+    }
+    &:hover {
+        .ons-icon {
+            fill: var(--ons-color-text-link-hover);
+            .ons-footer & {
+                fill: var(--ons-color-black);
+            }
+        }
     }
-  }
 }

package/components/external-link/_macro.njk

@@ -1,9 +1,11 @@
 {% from "components/icon/_macro.njk" import onsIcon %}
 
 {% macro onsExternalLink(params) %}
-    <a href="{{ params.url }}" class="ons-external-link{% if params.classes %} {{ params.classes }}{% endif %}" target="_blank" rel="noopener">
-        <span class="ons-external-link__text">
-        {{- params.linkText | safe -}}
-        </span><span class="ons-external-link__icon">&nbsp;{{- onsIcon({"iconType": 'external-link'}) -}}
-        </span><span class="ons-external-link__new-window-description ons-u-vh">({{- params.newWindowDescription | default("opens in a new tab") -}})</span></a>
+    <a href="{{ params.url }}" class="ons-external-link{{ ' ' + params.classes if params.classes else '' }}" target="_blank" rel="noopener">
+        <span class="ons-external-link__text"> {{- params.linkText | safe -}} </span
+        ><span class="ons-external-link__icon">&nbsp;{{- onsIcon({"iconType": 'external-link'}) -}} </span
+        ><span class="ons-external-link__new-window-description ons-u-vh"
+            >({{- params.newWindowDescription | default("opens in a new tab") -}})</span
+        ></a
+    >
 {% endmacro %}

package/components/external-link/_macro.spec.js

@@ -6,77 +6,77 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_EXTERNAL_LINK = {
-  url: 'http://example.com',
-  linkText: 'Example link',
+    url: 'http://example.com',
+    linkText: 'Example link',
 };
 
 describe('macro: external-link', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
-
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
-
-  it('has additionally provided style classes', () => {
-    const $ = cheerio.load(
-      renderComponent('external-link', {
-        ...EXAMPLE_EXTERNAL_LINK,
-        classes: 'extra-class another-extra-class',
-      }),
-    );
-
-    expect($('.ons-external-link').hasClass('extra-class')).toBe(true);
-    expect($('.ons-external-link').hasClass('another-extra-class')).toBe(true);
-  });
-
-  it('has the expected hyperlink URL', async () => {
-    const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
-
-    const $hyperlink = $('a.ons-external-link');
-    expect($hyperlink.attr('href')).toBe('http://example.com');
-  });
-
-  it('opens in a new window when `newWindow` is `true`', () => {
-    const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
-
-    expect($('a').attr('target')).toBe('_blank');
-    expect($('a').attr('rel')).toBe('noopener');
-  });
-
-  it('has the expected link text', async () => {
-    const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
-
-    const $hyperlink = $('a.ons-external-link .ons-external-link__text');
-    expect($hyperlink.text().trim()).toBe('Example link');
-  });
-
-  it('has a default new window description', async () => {
-    const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
-
-    expect($('.ons-external-link__new-window-description').text()).toBe('(opens in a new tab)');
-  });
-
-  it('has a custom new window description when `newWindowDescription` is provided', () => {
-    const $ = cheerio.load(
-      renderComponent('external-link', {
-        ...EXAMPLE_EXTERNAL_LINK,
-        newWindowDescription: 'custom opens in a new tab text',
-      }),
-    );
-
-    expect($('.ons-external-link__new-window-description').text()).toBe('(custom opens in a new tab text)');
-  });
-
-  it('has an "external-link" icon', async () => {
-    const faker = templateFaker();
-    const iconsSpy = faker.spy('icon');
-
-    faker.renderComponent('external-link', {
-      ...EXAMPLE_EXTERNAL_LINK,
-      newWindowDescription: 'custom opens in a new tab text',
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
+
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
+
+    it('has additionally provided style classes', () => {
+        const $ = cheerio.load(
+            renderComponent('external-link', {
+                ...EXAMPLE_EXTERNAL_LINK,
+                classes: 'extra-class another-extra-class',
+            }),
+        );
+
+        expect($('.ons-external-link').hasClass('extra-class')).toBe(true);
+        expect($('.ons-external-link').hasClass('another-extra-class')).toBe(true);
+    });
+
+    it('has the expected hyperlink URL', async () => {
+        const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
+
+        const $hyperlink = $('a.ons-external-link');
+        expect($hyperlink.attr('href')).toBe('http://example.com');
+    });
+
+    it('opens in a new window when `newWindow` is `true`', () => {
+        const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
+
+        expect($('a').attr('target')).toBe('_blank');
+        expect($('a').attr('rel')).toBe('noopener');
+    });
+
+    it('has the expected link text', async () => {
+        const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
+
+        const $hyperlink = $('a.ons-external-link .ons-external-link__text');
+        expect($hyperlink.text().trim()).toBe('Example link');
+    });
+
+    it('has a default new window description', async () => {
+        const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
+
+        expect($('.ons-external-link__new-window-description').text()).toBe('(opens in a new tab)');
     });
 
-    expect(iconsSpy.occurrences[0].iconType).toBe('external-link');
-  });
+    it('has a custom new window description when `newWindowDescription` is provided', () => {
+        const $ = cheerio.load(
+            renderComponent('external-link', {
+                ...EXAMPLE_EXTERNAL_LINK,
+                newWindowDescription: 'custom opens in a new tab text',
+            }),
+        );
+
+        expect($('.ons-external-link__new-window-description').text()).toBe('(custom opens in a new tab text)');
+    });
+
+    it('has an "external-link" icon', async () => {
+        const faker = templateFaker();
+        const iconsSpy = faker.spy('icon');
+
+        faker.renderComponent('external-link', {
+            ...EXAMPLE_EXTERNAL_LINK,
+            newWindowDescription: 'custom opens in a new tab text',
+        });
+
+        expect(iconsSpy.occurrences[0].iconType).toBe('external-link');
+    });
 });

package/components/external-link/example-external-link.njk

@@ -1,8 +1,11 @@
 {% from "components/external-link/_macro.njk" import onsExternalLink %}
 
-<p>This is a paragraph of text with a {{
-    onsExternalLink({
-        "url": "#0",
-        "linkText": "link to an external website"
-    })
-}}</p>
+<p>
+    This is a paragraph of text with a
+    {{
+        onsExternalLink({
+            "url": "#0",
+            "linkText": "link to an external website"
+        })
+    }}
+</p>