@ons/design-system 70.0.7 → 70.0.9

package/components/select/_macro.njk

@@ -2,14 +2,16 @@
     {% from "components/field/_macro.njk" import onsField %}
     {% from "components/label/_macro.njk" import onsLabel %}
 
-    {% call onsField({
-        "id": params.fieldId,
-        "classes": params.fieldClasses,
-        "legendClasses": params.legendClasses,
-        "dontWrap": params.dontWrap,
-        "error": params.error,
-        "inline": params.label.inline if params.label else ''
-    }) %}
+    {%
+        call onsField({
+            "id": params.fieldId,
+            "classes": params.fieldClasses,
+            "legendClasses": params.legendClasses,
+            "dontWrap": params.dontWrap,
+            "error": params.error,
+            "inline": params.label.inline if params.label
+        })
+    %}
         {{
             onsLabel({
                 "for": params.id,
@@ -21,18 +23,19 @@
         <select
             id="{{ params.id }}"
             name="{{ params.name }}"
-            class="ons-input ons-input--select{% if params.classes %} {{ params.classes }}{% endif %}{% if params.error %} ons-input--error{% 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 %}
+            class="ons-input ons-input--select{{ ' ' + params.classes if params.classes else '' }}{{ ' ons-input--error' if params.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 %}
         >
             {% for option in params.options %}
-            <option value="{{ option.value | default(option.text) }}"
-                {% if option.id %}id="{{ option.id }}" {% endif %}
-                {% if option.selected %}selected {% endif %}
-                {% if option.disabled %}disabled {% endif %}
-                {% if option.attributes %}{% for attribute, value in option.attributes %}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
-            >
-                {{- option.text -}}
-            </option>
+                <option
+                    value="{{ option.value | default(option.text) }}"
+                    {% if option.id %}{{ ' ' }}id="{{ option.id }}"{% endif %}
+                    {% if option.selected %}{{ ' ' }}selected{% endif %}
+                    {% if option.disabled %}{{ ' ' }}disabled{% endif %}
+                    {% if option.attributes %}{% for attribute, value in option.attributes %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+                >
+                    {{- option.text -}}
+                </option>
             {% endfor %}
         </select>
     {% endcall %}

package/components/select/_macro.spec.js

@@ -7,197 +7,197 @@ import { mapAll } from '../../tests/helpers/cheerio';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_SELECT_MINIMAL = {
-  id: 'example-select',
-  name: 'example-select-name',
-  label: {
-    text: 'Label text',
-    description: 'Description text',
-    classes: 'extra-label-class',
-  },
-  options: [
-    {
-      text: 'First option',
-      value: 1,
+    id: 'example-select',
+    name: 'example-select-name',
+    label: {
+        text: 'Label text',
+        description: 'Description text',
+        classes: 'extra-label-class',
     },
-    {
-      id: 'second-option',
-      text: 'Second option',
-      value: 2,
-      selected: true,
-    },
-    {
-      text: 'Disabled option',
-      value: 3,
-      disabled: true,
-    },
-  ],
+    options: [
+        {
+            text: 'First option',
+            value: 1,
+        },
+        {
+            id: 'second-option',
+            text: 'Second option',
+            value: 2,
+            selected: true,
+        },
+        {
+            text: 'Disabled option',
+            value: 3,
+            disabled: true,
+        },
+    ],
 };
 
 const EXAMPLE_SELECT = {
-  ...EXAMPLE_SELECT_MINIMAL,
-  fieldId: 'example-select-field',
-  fieldClasses: 'extra-field-class',
-  legendClasses: 'extra-legend-class',
-  dontWrap: true,
+    ...EXAMPLE_SELECT_MINIMAL,
+    fieldId: 'example-select-field',
+    fieldClasses: 'extra-field-class',
+    legendClasses: 'extra-legend-class',
+    dontWrap: true,
 };
 
 const EXAMPLE_SELECT_WITH_ERROR = {
-  ...EXAMPLE_SELECT,
-  error: {
-    id: 'example-error',
-    text: 'Error text...',
-  },
+    ...EXAMPLE_SELECT,
+    error: {
+        id: 'example-error',
+        text: 'Error text...',
+    },
 };
 
 describe('macro: select', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
-
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
-
-  it('passes jest-axe checks when error is shown', async () => {
-    const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT_WITH_ERROR));
-
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
-
-  it('provides expected parameters to the inner `field` component', () => {
-    const faker = templateFaker();
-    const fieldSpy = faker.spy('field');
-
-    cheerio.load(faker.renderComponent('select', EXAMPLE_SELECT));
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
 
-    expect(fieldSpy.occurrences[0]).toEqual({
-      id: 'example-select-field',
-      classes: 'extra-field-class',
-      legendClasses: 'extra-legend-class',
-      dontWrap: true,
-      error: undefined,
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
     });
-  });
 
-  it('provides expected parameters to the inner `field` component when there is an error', () => {
-    const faker = templateFaker();
-    const fieldSpy = faker.spy('field');
+    it('passes jest-axe checks when error is shown', async () => {
+        const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT_WITH_ERROR));
 
-    cheerio.load(faker.renderComponent('select', EXAMPLE_SELECT_WITH_ERROR));
-
-    expect(fieldSpy.occurrences[0]).toEqual({
-      id: 'example-select-field',
-      classes: 'extra-field-class',
-      legendClasses: 'extra-legend-class',
-      dontWrap: true,
-      error: {
-        id: 'example-error',
-        text: 'Error text...',
-      },
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
     });
-  });
 
-  it('provides expected parameters to the inner `label` component', () => {
-    const faker = templateFaker();
-    const labelSpy = faker.spy('label');
+    it('provides expected parameters to the inner `field` component', () => {
+        const faker = templateFaker();
+        const fieldSpy = faker.spy('field');
 
-    cheerio.load(faker.renderComponent('select', EXAMPLE_SELECT));
+        cheerio.load(faker.renderComponent('select', EXAMPLE_SELECT));
 
-    expect(labelSpy.occurrences[0]).toEqual({
-      for: 'example-select',
-      text: 'Label text',
-      description: 'Description text',
-      classes: 'extra-label-class',
+        expect(fieldSpy.occurrences[0]).toEqual({
+            id: 'example-select-field',
+            classes: 'extra-field-class',
+            legendClasses: 'extra-legend-class',
+            dontWrap: true,
+            error: undefined,
+        });
     });
-  });
-
-  describe('select element', () => {
-    it('has the provided `id` attribute', () => {
-      const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
 
-      expect($('select').attr('id')).toBe('example-select');
+    it('provides expected parameters to the inner `field` component when there is an error', () => {
+        const faker = templateFaker();
+        const fieldSpy = faker.spy('field');
+
+        cheerio.load(faker.renderComponent('select', EXAMPLE_SELECT_WITH_ERROR));
+
+        expect(fieldSpy.occurrences[0]).toEqual({
+            id: 'example-select-field',
+            classes: 'extra-field-class',
+            legendClasses: 'extra-legend-class',
+            dontWrap: true,
+            error: {
+                id: 'example-error',
+                text: 'Error text...',
+            },
+        });
     });
 
-    it('has the provided `name` attribute', () => {
-      const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
-
-      expect($('select').attr('name')).toBe('example-select-name');
-    });
+    it('provides expected parameters to the inner `label` component', () => {
+        const faker = templateFaker();
+        const labelSpy = faker.spy('label');
 
-    it('has additionally provided style classes', () => {
-      const $ = cheerio.load(
-        renderComponent('select', {
-          ...EXAMPLE_SELECT,
-          classes: 'extra-class another-extra-class',
-        }),
-      );
+        cheerio.load(faker.renderComponent('select', EXAMPLE_SELECT));
 
-      expect($('select').hasClass('extra-class')).toBe(true);
-      expect($('select').hasClass('another-extra-class')).toBe(true);
+        expect(labelSpy.occurrences[0]).toEqual({
+            for: 'example-select',
+            text: 'Label text',
+            description: 'Description text',
+            classes: 'extra-label-class',
+        });
     });
 
-    it('has additionally provided `attributes`', () => {
-      const $ = cheerio.load(
-        renderComponent('select', {
-          ...EXAMPLE_SELECT,
-          attributes: {
-            a: 123,
-            b: 456,
-          },
-        }),
-      );
-
-      expect($('select').attr('a')).toBe('123');
-      expect($('select').attr('b')).toBe('456');
-    });
-
-    describe('option element', () => {
-      it('has expected text', () => {
-        const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
-
-        const values = mapAll($('select > option'), (node) => node.text().trim());
-        expect(values).toEqual(['First option', 'Second option', 'Disabled option']);
-      });
-
-      it('has a provided `id` attribute', () => {
-        const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
-
-        const values = mapAll($('select > option'), (node) => node.attr('id'));
-        expect(values).toEqual([undefined, 'second-option', undefined]);
-      });
-
-      it('marks the correct option as selected', () => {
-        const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
-
-        const values = mapAll($('select > option'), (node) => node.attr('selected'));
-        expect(values).toEqual([undefined, 'selected', undefined]);
-      });
-
-      it('marks the correct option as disabled', () => {
-        const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
-
-        const values = mapAll($('select > option'), (node) => node.attr('disabled'));
-        expect(values).toEqual([undefined, undefined, 'disabled']);
-      });
-
-      it('has a provided `value` attribute', () => {
-        const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
-
-        const values = mapAll($('select > option'), (node) => node.attr('value'));
-        expect(values).toEqual(['1', '2', '3']);
-      });
-
-      it('uses option text as a default `value` attribute', () => {
-        const $ = cheerio.load(
-          renderComponent('select', {
-            ...EXAMPLE_SELECT,
-            options: [{ text: 'First option' }, { text: 'Second option' }],
-          }),
-        );
-
-        const values = mapAll($('select > option'), (node) => node.attr('value'));
-        expect(values).toEqual(['First option', 'Second option']);
-      });
+    describe('select element', () => {
+        it('has the provided `id` attribute', () => {
+            const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
+
+            expect($('select').attr('id')).toBe('example-select');
+        });
+
+        it('has the provided `name` attribute', () => {
+            const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
+
+            expect($('select').attr('name')).toBe('example-select-name');
+        });
+
+        it('has additionally provided style classes', () => {
+            const $ = cheerio.load(
+                renderComponent('select', {
+                    ...EXAMPLE_SELECT,
+                    classes: 'extra-class another-extra-class',
+                }),
+            );
+
+            expect($('select').hasClass('extra-class')).toBe(true);
+            expect($('select').hasClass('another-extra-class')).toBe(true);
+        });
+
+        it('has additionally provided `attributes`', () => {
+            const $ = cheerio.load(
+                renderComponent('select', {
+                    ...EXAMPLE_SELECT,
+                    attributes: {
+                        a: 123,
+                        b: 456,
+                    },
+                }),
+            );
+
+            expect($('select').attr('a')).toBe('123');
+            expect($('select').attr('b')).toBe('456');
+        });
+
+        describe('option element', () => {
+            it('has expected text', () => {
+                const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
+
+                const values = mapAll($('select > option'), (node) => node.text().trim());
+                expect(values).toEqual(['First option', 'Second option', 'Disabled option']);
+            });
+
+            it('has a provided `id` attribute', () => {
+                const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
+
+                const values = mapAll($('select > option'), (node) => node.attr('id'));
+                expect(values).toEqual([undefined, 'second-option', undefined]);
+            });
+
+            it('marks the correct option as selected', () => {
+                const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
+
+                const values = mapAll($('select > option'), (node) => node.attr('selected'));
+                expect(values).toEqual([undefined, 'selected', undefined]);
+            });
+
+            it('marks the correct option as disabled', () => {
+                const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
+
+                const values = mapAll($('select > option'), (node) => node.attr('disabled'));
+                expect(values).toEqual([undefined, undefined, 'disabled']);
+            });
+
+            it('has a provided `value` attribute', () => {
+                const $ = cheerio.load(renderComponent('select', EXAMPLE_SELECT));
+
+                const values = mapAll($('select > option'), (node) => node.attr('value'));
+                expect(values).toEqual(['1', '2', '3']);
+            });
+
+            it('uses option text as a default `value` attribute', () => {
+                const $ = cheerio.load(
+                    renderComponent('select', {
+                        ...EXAMPLE_SELECT,
+                        options: [{ text: 'First option' }, { text: 'Second option' }],
+                    }),
+                );
+
+                const values = mapAll($('select > option'), (node) => node.attr('value'));
+                expect(values).toEqual(['First option', 'Second option']);
+            });
+        });
     });
-  });
 });

package/components/share-page/_macro.njk

@@ -3,11 +3,15 @@
 
     {% if params.title %}
         {% set titleTag = params.titleTag | default("h2") %}
-        <{{ titleTag }} class="ons-u-fs-r--b ons-u-mb-xs">{{ params.title }}</{{ titleTag }}>
+        {% set openingTag = "<" + titleTag %}
+        {% set closingTag = "</" + titleTag + ">" %}
+        {{ openingTag | safe }}
+        class="ons-u-fs-r--b ons-u-mb-xs">{{ params.title }}{{ closingTag | safe }}
     {% endif %}
 
     {% if params.facebook and params.facebook == true %}
-        {% set facebook =
+        {%
+            set facebook =
             {
                 "url": 'https://www.facebook.com/sharer/sharer.php?u=' ~ params.pageURL|urlencode,
                 "text": 'Facebook',
@@ -15,10 +19,11 @@
                 "rel": 'noreferrer external',
                 "target": '_blank'
             }
-         %}
+        %}
     {% endif %}
     {% if params.twitter and params.twitter == true %}
-        {% set twitter =
+        {%
+            set twitter =
             {
                 "url": 'https://twitter.com/intent/tweet?original_referer&text=' ~ params.pageTitle|urlencode ~ '&url=' ~ params.pageURL|urlencode,
                 "text": 'Twitter',
@@ -26,7 +31,7 @@
                 "rel": 'noreferrer external',
                 "target": '_blank'
             }
-         %}
+        %}
     {% endif %}
     {{
         onsList({

package/components/share-page/_macro.spec.js

@@ -6,97 +6,97 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_SHARE_PAGE = {
-  title: 'Share page',
-  pageTitle: 'An example page',
-  pageURL: 'https://example.com/an-example-page',
-  facebook: true,
-  twitter: true,
+    title: 'Share page',
+    pageTitle: 'An example page',
+    pageURL: 'https://example.com/an-example-page',
+    facebook: true,
+    twitter: true,
 };
 
 describe('macro: share-page', () => {
-  it('passes jest-axe checks with', async () => {
-    const $ = cheerio.load(renderComponent('share-page', EXAMPLE_SHARE_PAGE));
+    it('passes jest-axe checks with', async () => {
+        const $ = cheerio.load(renderComponent('share-page', EXAMPLE_SHARE_PAGE));
 
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-  it('wraps title in <h2> element by default', () => {
-    const $ = cheerio.load(renderComponent('share-page', EXAMPLE_SHARE_PAGE));
+    it('wraps title in <h2> element by default', () => {
+        const $ = cheerio.load(renderComponent('share-page', EXAMPLE_SHARE_PAGE));
 
-    expect($('h2').text().trim()).toBe('Share page');
-  });
+        expect($('h2').text().trim()).toBe('Share page');
+    });
 
-  it('wraps title in custom element when `titleTag` is provided', () => {
-    const $ = cheerio.load(
-      renderComponent('share-page', {
-        ...EXAMPLE_SHARE_PAGE,
-        titleTag: 'h4',
-      }),
-    );
+    it('wraps title in custom element when `titleTag` is provided', () => {
+        const $ = cheerio.load(
+            renderComponent('share-page', {
+                ...EXAMPLE_SHARE_PAGE,
+                titleTag: 'h4',
+            }),
+        );
 
-    expect($('h4').text().trim()).toBe('Share page');
-  });
+        expect($('h4').text().trim()).toBe('Share page');
+    });
 
-  it('uses the provided icon size', () => {
-    const faker = templateFaker();
-    const listsSpy = faker.spy('list');
+    it('uses the provided icon size', () => {
+        const faker = templateFaker();
+        const listsSpy = faker.spy('list');
 
-    faker.renderComponent('share-page', {
-      ...EXAMPLE_SHARE_PAGE,
-      iconSize: 'xl',
-    });
+        faker.renderComponent('share-page', {
+            ...EXAMPLE_SHARE_PAGE,
+            iconSize: 'xl',
+        });
 
-    expect(listsSpy.occurrences[0].iconSize).toBe('xl');
-  });
+        expect(listsSpy.occurrences[0].iconSize).toBe('xl');
+    });
 
-  describe('Share on Twitter', () => {
-    it('has a link with the expected url', () => {
-      const faker = templateFaker();
-      const listsSpy = faker.spy('list');
+    describe('Share on Twitter', () => {
+        it('has a link with the expected url', () => {
+            const faker = templateFaker();
+            const listsSpy = faker.spy('list');
 
-      faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
+            faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
 
-      const twitterItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'Twitter');
-      expect(twitterItem.url).toBe(
-        'https://twitter.com/intent/tweet?original_referer&text=An%20example%20page&url=https%3A%2F%2Fexample.com%2Fan-example-page',
-      );
-    });
+            const twitterItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'Twitter');
+            expect(twitterItem.url).toBe(
+                'https://twitter.com/intent/tweet?original_referer&text=An%20example%20page&url=https%3A%2F%2Fexample.com%2Fan-example-page',
+            );
+        });
 
-    it('has a link which opens in a new tab', () => {
-      const faker = templateFaker();
-      const listsSpy = faker.spy('list');
+        it('has a link which opens in a new tab', () => {
+            const faker = templateFaker();
+            const listsSpy = faker.spy('list');
 
-      faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
+            faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
 
-      const twitterItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'Twitter');
-      expect(twitterItem.rel).toContain('noreferrer');
-      expect(twitterItem.rel).toContain('external');
-      expect(twitterItem.target).toBe('_blank');
+            const twitterItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'Twitter');
+            expect(twitterItem.rel).toContain('noreferrer');
+            expect(twitterItem.rel).toContain('external');
+            expect(twitterItem.target).toBe('_blank');
+        });
     });
-  });
 
-  describe('Share on Facebook', () => {
-    it('has a link with the expected url', () => {
-      const faker = templateFaker();
-      const listsSpy = faker.spy('list');
+    describe('Share on Facebook', () => {
+        it('has a link with the expected url', () => {
+            const faker = templateFaker();
+            const listsSpy = faker.spy('list');
 
-      faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
+            faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
 
-      const facebookItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'Facebook');
-      expect(facebookItem.url).toBe('https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fan-example-page');
-    });
+            const facebookItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'Facebook');
+            expect(facebookItem.url).toBe('https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fan-example-page');
+        });
 
-    it('has a link which opens in a new tab', () => {
-      const faker = templateFaker();
-      const listsSpy = faker.spy('list');
+        it('has a link which opens in a new tab', () => {
+            const faker = templateFaker();
+            const listsSpy = faker.spy('list');
 
-      faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
+            faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
 
-      const facebookItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'Facebook');
-      expect(facebookItem.rel).toContain('noreferrer');
-      expect(facebookItem.rel).toContain('external');
-      expect(facebookItem.target).toBe('_blank');
+            const facebookItem = listsSpy.occurrences[0].itemsList.find((item) => item.text === 'Facebook');
+            expect(facebookItem.rel).toContain('noreferrer');
+            expect(facebookItem.rel).toContain('external');
+            expect(facebookItem.target).toBe('_blank');
+        });
     });
-  });
 });

package/components/skip-to-content/_macro.njk

@@ -1,4 +1,4 @@
 {% macro onsSkipToContent(params) %}
- {% set text = params.text | default('Skip to content') %}
+    {% set text = params.text | default('Skip to content') %}
     <a class="ons-skip-to-content" href="{{ params.url }}">{{ text }}</a>
 {% endmacro %}