@ons/design-system 70.0.7 → 70.0.9

package/components/input/character-check.dom.js

@@ -1,13 +1,13 @@
 import domready from '../../js/domready';
 
 async function initialise() {
-  const checkedInputs = [...document.querySelectorAll('.ons-js-char-check-input')];
+    const checkedInputs = [...document.querySelectorAll('.ons-js-char-check-input')];
 
-  if (checkedInputs.length) {
-    const CharCheck = (await import('../char-check-limit/character-check')).default;
+    if (checkedInputs.length) {
+        const CharCheck = (await import('../char-check-limit/character-check')).default;
 
-    checkedInputs.forEach((input) => new CharCheck(input));
-  }
+        checkedInputs.forEach((input) => new CharCheck(input));
+    }
 }
 
 domready(initialise);

package/components/input/example-input-search-with-character-check.njk

@@ -19,4 +19,4 @@
             "charCountOverLimitPlural": "{x} characters too many"
         }
     })
-}}
+}}

package/components/input/example-input-search-with-placeholder.njk

@@ -12,4 +12,4 @@
             "iconType": 'search'
         }
     })
-}}
+}}

package/components/input/example-input-search.njk

@@ -12,4 +12,4 @@
             "iconType": 'search'
         }
     })
-}}
+}}

package/components/input/input.dom.js

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

package/components/input/input.js

@@ -1,14 +1,14 @@
 export default class AbbrInput {
-  constructor(context) {
-    this.abbrInput = context;
-    this.bindEventListeners();
-  }
+    constructor(context) {
+        this.abbrInput = context;
+        this.bindEventListeners();
+    }
 
-  bindEventListeners() {
-    this.abbrInput.querySelector('.ons-js-input-abbr').addEventListener('click', this.handleClick.bind(this));
-  }
+    bindEventListeners() {
+        this.abbrInput.querySelector('.ons-js-input-abbr').addEventListener('click', this.handleClick.bind(this));
+    }
 
-  handleClick() {
-    this.abbrInput.querySelector('.ons-input').focus();
-  }
+    handleClick() {
+        this.abbrInput.querySelector('.ons-input').focus();
+    }
 }

package/components/input/input.spec.js

@@ -1,25 +1,25 @@
 import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
 const EXAMPLE_INPUT_MINIMAL = {
-  id: 'example-id',
-  name: 'example-name',
+    id: 'example-id',
+    name: 'example-name',
 };
 
 describe('script: input', () => {
-  it('focuses input when abbreviation is clicked', async () => {
-    await setTestPage(
-      '/test',
-      renderComponent('input', {
-        ...EXAMPLE_INPUT_MINIMAL,
-        prefix: {
-          id: 'example-prefix-id',
-          title: 'Example prefix title',
-          text: 'Example prefix text',
-        },
-      }),
-    );
-    await page.click('.ons-js-input-abbr');
-    const focusedElementId = await page.evaluate(() => document.activeElement.id);
-    expect(focusedElementId).toEqual('example-id');
-  });
+    it('focuses input when abbreviation is clicked', async () => {
+        await setTestPage(
+            '/test',
+            renderComponent('input', {
+                ...EXAMPLE_INPUT_MINIMAL,
+                prefix: {
+                    id: 'example-prefix-id',
+                    title: 'Example prefix title',
+                    text: 'Example prefix text',
+                },
+            }),
+        );
+        await page.click('.ons-js-input-abbr');
+        const focusedElementId = await page.evaluate(() => document.activeElement.id);
+        expect(focusedElementId).toEqual('example-id');
+    });
 });

package/components/label/_label.scss

@@ -1,31 +1,31 @@
 .ons-label {
-  color: inherit;
-  display: block;
-  font-weight: $font-weight-bold;
-  margin: 0 0 0.6rem;
+    color: inherit;
+    display: block;
+    font-weight: $font-weight-bold;
+    margin: 0 0 0.6rem;
 
-  &__description {
-    @extend .ons-u-fs-s;
+    &__description {
+        @extend .ons-u-fs-s;
 
-    display: block;
-    line-height: 1.4;
-  }
+        display: block;
+        line-height: 1.4;
+    }
 
-  &--with-description {
-    margin-bottom: 0;
-    padding-bottom: 0;
-  }
+    &--with-description {
+        margin-bottom: 0;
+        padding-bottom: 0;
+    }
 
-  &--placeholder {
-    font-size: 1rem;
-    font-weight: $font-weight-regular;
-    color: var(--ons-color-text-placeholder);
-    left: 10px;
-    position: absolute;
-    top: 6px;
-  }
+    &--placeholder {
+        font-size: 1rem;
+        font-weight: $font-weight-regular;
+        color: var(--ons-color-text-placeholder);
+        left: 10px;
+        position: absolute;
+        top: 6px;
+    }
 
-  &--white {
-    color: var(--ons-color-white);
-  }
+    &--white {
+        color: var(--ons-color-white);
+    }
 }

package/components/label/_macro.njk

@@ -1,8 +1,8 @@
 {% macro onsLabel(params) %}
     {% if params.id %}
-        {% set descriptionID = params.id ~ "-description-hint" %}
+        {% set descriptionId = params.id ~ "-description-hint" %}
     {% else %}
-        {% set descriptionID = "description-hint" %}
+        {% set descriptionId = "description-hint" %}
     {% endif %}
 
     {% if params.inputType == "checkbox" or params.inputType == "radio" %}
@@ -11,37 +11,43 @@
         {% set isCheckboxOrRadio = false %}
     {% endif %}
 
-    {% set description -%}
-        <span{% if isCheckboxOrRadio == false %} id="{{ descriptionID }}"{% endif %} class="ons-label__description {% if params.inputType %}ons-{{ params.inputType }}__label--with-description{% else %} ons-input--with-description{% endif %}">
-              {{- params.description -}}
+    {%- set description -%}
+        <span
+            {% if isCheckboxOrRadio == false %}id="{{ descriptionId }}"{% endif %}class="ons-label__description{% if params.inputType %}{{ ' ' }}ons-{{ params.inputType }}__label--with-description{% else %}{{ ' ' }}ons-input--with-description{% endif %}"
+        >
+            {{- params.description -}}
         </span>
-    {%- endset %}
+    {%- endset -%}
+
     {%- if params.description and params.accessiblePlaceholder -%}
         {{- description | safe -}}
     {%- else -%}
-    <label
-        class="{% if params.inputType is not defined -%}ons-label{%- endif %}{{- ' ' + params.classes if params.classes else "" -}}{%- if params.description %} ons-label--with-description{%- endif %} {{- ' ons-label--placeholder' if params.accessiblePlaceholder else "" -}}"
-        for="{{ params.for }}"
-        {% if params.description %}aria-describedby="{{ descriptionID }}"{% endif %}
-        {% if params.id %} id="{{ params.id }}"{% 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 %}
-    >
-
-        {{- params.text | safe -}}
 
         {%- if isCheckboxOrRadio == true -%}
-            {%- if params.description -%}
+            {%- set ariaHiddenDescription -%}
                 <span class="ons-label__aria-hidden-description" aria-hidden="true">{{- description | safe -}}</span>
+            {%- endset -%}
+
+            {%- set description -%}
+                <span class="ons-label__visually-hidden-description ons-u-vh" id="{{ descriptionId }}">{{- params.description -}}</span>
+            {%- endset -%}
+        {%- endif -%}
+
+        <label
+            class="{{ 'ons-label' if params.inputType is not defined }}{{ ' ' + params.classes if params.classes else '' }}{{ ' ons-label--with-description' if params.description }}{{ ' ons-label--placeholder' if params.accessiblePlaceholder }}"
+            for="{{ params.for }}"
+            {% if params.description %}aria-describedby="{{ descriptionId }}"{% endif %}
+            {% if params.id %}id="{{ params.id }}"{% 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 %}
+        >
+            {{- params.text | safe -}}
+
+            {%- if isCheckboxOrRadio == true and params.description -%}
+                {{- ariaHiddenDescription | safe -}}
             {%- endif -%}
-            </label>
-            {% if isCheckboxOrRadio == true and params.description -%}
-                <span class="ons-label__visually-hidden-description ons-u-vh" id="{{ descriptionID }}">{{- params.description -}}</span>
-            {%- endif -%}
-        {%- else -%}
-            </label>
-            {%- if params.description -%}
-                {{- description | safe -}}
-            {%- endif -%}
-        {%- endif %}
+        </label>
+        {%- if params.description -%}
+            {{- description | safe -}}
+        {%- endif -%}
     {%- endif -%}
 {% endmacro %}

package/components/label/_macro.spec.js

@@ -6,206 +6,209 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
 const EXAMPLE_LABEL = {
-  id: 'example-label',
-  for: 'some-input',
-  text: 'Example label text',
+    id: 'example-label',
+    for: 'some-input',
+    text: 'Example label text',
 };
 
 const EXAMPLE_LABEL_WITH_INPUT_TYPE = {
-  ...EXAMPLE_LABEL,
-  inputType: 'checkbox',
+    ...EXAMPLE_LABEL,
+    inputType: 'checkbox',
 };
 
 const EXAMPLE_LABEL_WITH_DESCRIPTION = {
-  ...EXAMPLE_LABEL,
-  description: 'An example description',
+    ...EXAMPLE_LABEL,
+    description: 'An example description',
 };
 
 const EXAMPLE_LABEL_WITH_ACCESSIBLE_PLACEHOLDER = {
-  ...EXAMPLE_LABEL,
-  accessiblePlaceholder: 'An example placeholder',
+    ...EXAMPLE_LABEL,
+    accessiblePlaceholder: 'An example placeholder',
 };
 
 describe('macro: label', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(renderComponent('label', EXAMPLE_LABEL));
-
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
-
-  it('passes jest-axe checks with description', async () => {
-    const $ = cheerio.load(renderComponent('label', EXAMPLE_LABEL_WITH_DESCRIPTION));
-
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
-
-  it('has the provided `id` attribute', () => {
-    const $ = cheerio.load(renderComponent('label', EXAMPLE_LABEL));
-
-    expect($('.ons-label').attr('id')).toBe('example-label');
-  });
-
-  it('has the provided `for` attribute', () => {
-    const $ = cheerio.load(renderComponent('label', EXAMPLE_LABEL));
-
-    expect($('.ons-label').attr('for')).toBe('some-input');
-  });
-
-  it('has `aria-describedby` and correct value when description is provided', () => {
-    const $ = cheerio.load(renderComponent('label', EXAMPLE_LABEL_WITH_DESCRIPTION));
-
-    expect($('.ons-label').attr('aria-describedby')).toBe('example-label-description-hint');
-  });
-
-  it.each([
-    ['`inputType` parameter is not provided', EXAMPLE_LABEL, true],
-    ['`inputType` parameter is provided', EXAMPLE_LABEL_WITH_INPUT_TYPE, false],
-  ])('has the `ons-label` block class when %s', (_, params, expectedState) => {
-    const $ = cheerio.load(renderComponent('label', params));
-
-    expect($('label').hasClass('ons-label')).toBe(expectedState);
-  });
-
-  it.each([
-    ['`description` parameter is not provided', EXAMPLE_LABEL, false],
-    ['`description` parameter is provided', EXAMPLE_LABEL_WITH_DESCRIPTION, true],
-  ])('has the `ons-label--with-description` modifier class when %s', (_, params, expectedState) => {
-    const $ = cheerio.load(renderComponent('label', params));
-
-    expect($('.ons-label').hasClass('ons-label--with-description')).toBe(expectedState);
-  });
-
-  it.each([
-    ['`accessiblePlaceholder` parameter is not provided', EXAMPLE_LABEL, false],
-    ['`accessiblePlaceholder` parameter is provided', EXAMPLE_LABEL_WITH_ACCESSIBLE_PLACEHOLDER, true],
-  ])('has the `ons-label--placeholder` modifier class when %s', (_, params, expectedState) => {
-    const $ = cheerio.load(renderComponent('label', params));
-
-    expect($('.ons-label').hasClass('ons-label--placeholder')).toBe(expectedState);
-  });
-
-  it('has additionally provided style classes', () => {
-    const $ = cheerio.load(
-      renderComponent('label', {
-        ...EXAMPLE_LABEL,
-        classes: 'extra-class another-extra-class',
-      }),
-    );
-
-    expect($('.ons-label').hasClass('extra-class')).toBe(true);
-    expect($('.ons-label').hasClass('another-extra-class')).toBe(true);
-  });
-
-  it('has additionally provided `attributes`', () => {
-    const $ = cheerio.load(
-      renderComponent('label', {
-        ...EXAMPLE_LABEL,
-        attributes: {
-          a: 123,
-          b: 456,
-        },
-      }),
-    );
-
-    expect($('.ons-label').attr('a')).toBe('123');
-    expect($('.ons-label').attr('b')).toBe('456');
-  });
-
-  it.each([
-    ['when without a description', EXAMPLE_LABEL],
-    ['when with a description', EXAMPLE_LABEL_WITH_DESCRIPTION],
-  ])('has the provided `text` %s', (_, params) => {
-    const $ = cheerio.load(renderComponent('label', params));
-
-    expect($('.ons-label').text().trim().startsWith('Example label text')).toBe(true);
-  });
-
-  describe('description element', () => {
-    it.each([
-      ['when the `inputType` parameter is not provided', EXAMPLE_LABEL_WITH_DESCRIPTION],
-      [
-        'when the "checkbox" `inputType` parameter is provided',
-        {
-          ...EXAMPLE_LABEL_WITH_DESCRIPTION,
-          inputType: 'checkbox',
-        },
-      ],
-      [
-        'when the "radio" `inputType` parameter is provided',
-        {
-          ...EXAMPLE_LABEL_WITH_DESCRIPTION,
-          inputType: 'radio',
-        },
-      ],
-    ])('has the provided `description` text %s', (_, params) => {
-      const $ = cheerio.load(renderComponent('label', params));
-
-      expect($('.ons-label__description').text().trim()).toBe('An example description');
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(renderComponent('label', EXAMPLE_LABEL));
+
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
     });
 
-    it('has a default `id` attribute of `description-hint`', () => {
-      const $ = cheerio.load(
-        renderComponent('label', {
-          ...EXAMPLE_LABEL_WITH_DESCRIPTION,
-          id: undefined,
-        }),
-      );
+    it('passes jest-axe checks with description', async () => {
+        const $ = cheerio.load(renderComponent('label', EXAMPLE_LABEL_WITH_DESCRIPTION));
 
-      expect($('.ons-label__description').attr('id')).toBe('description-hint');
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
     });
 
-    it('has an `id` attribute which adds `-description-hint` to the provided `id`', () => {
-      const $ = cheerio.load(renderComponent('label', EXAMPLE_LABEL_WITH_DESCRIPTION));
+    it('has the provided `id` attribute', () => {
+        const $ = cheerio.load(renderComponent('label', EXAMPLE_LABEL));
 
-      expect($('.ons-label__description').attr('id')).toBe('example-label-description-hint');
+        expect($('.ons-label').attr('id')).toBe('example-label');
     });
 
-    it('has the modifier class `ons-input--with-description` when `inputType` is not provided', () => {
-      const $ = cheerio.load(renderComponent('label', EXAMPLE_LABEL_WITH_DESCRIPTION));
+    it('has the provided `for` attribute', () => {
+        const $ = cheerio.load(renderComponent('label', EXAMPLE_LABEL));
+
+        expect($('.ons-label').attr('for')).toBe('some-input');
+    });
+
+    it('has `aria-describedby` and correct value when description is provided', () => {
+        const $ = cheerio.load(renderComponent('label', EXAMPLE_LABEL_WITH_DESCRIPTION));
+
+        expect($('.ons-label').attr('aria-describedby')).toBe('example-label-description-hint');
+    });
+
+    it.each([
+        ['`inputType` parameter is not provided', EXAMPLE_LABEL, true],
+        ['`inputType` parameter is provided', EXAMPLE_LABEL_WITH_INPUT_TYPE, false],
+    ])('has the `ons-label` block class when %s', (_, params, expectedState) => {
+        const $ = cheerio.load(renderComponent('label', params));
+
+        expect($('label').hasClass('ons-label')).toBe(expectedState);
+    });
+
+    it.each([
+        ['`description` parameter is not provided', EXAMPLE_LABEL, false],
+        ['`description` parameter is provided', EXAMPLE_LABEL_WITH_DESCRIPTION, true],
+    ])('has the `ons-label--with-description` modifier class when %s', (_, params, expectedState) => {
+        const $ = cheerio.load(renderComponent('label', params));
 
-      expect($('.ons-label__description').hasClass('ons-input--with-description')).toBe(true);
+        expect($('.ons-label').hasClass('ons-label--with-description')).toBe(expectedState);
     });
 
     it.each([
-      ['checkbox', 'ons-checkbox__label--with-description'],
-      ['radio', 'ons-radio__label--with-description'],
-    ])('has an input-specific modifier class when "%s" `inputType` is provided', (inputType, expectedInputSpecificModifier) => {
-      const $ = cheerio.load(
-        renderComponent('label', {
-          ...EXAMPLE_LABEL_WITH_DESCRIPTION,
-          inputType,
-        }),
-      );
-
-      expect($('.ons-label__description').hasClass(expectedInputSpecificModifier)).toBe(true);
-      expect($('.ons-label__description').hasClass('ons-input--with-description')).toBe(false);
+        ['`accessiblePlaceholder` parameter is not provided', EXAMPLE_LABEL, false],
+        ['`accessiblePlaceholder` parameter is provided', EXAMPLE_LABEL_WITH_ACCESSIBLE_PLACEHOLDER, true],
+    ])('has the `ons-label--placeholder` modifier class when %s', (_, params, expectedState) => {
+        const $ = cheerio.load(renderComponent('label', params));
+
+        expect($('.ons-label').hasClass('ons-label--placeholder')).toBe(expectedState);
     });
 
-    it.each([['checkbox'], ['radio']])('has the description in an `aria-hidden` element when "%s" `inputType` is provided', (inputType) => {
-      const $ = cheerio.load(
-        renderComponent('label', {
-          ...EXAMPLE_LABEL_WITH_DESCRIPTION,
-          inputType,
-        }),
-      );
+    it('has additionally provided style classes', () => {
+        const $ = cheerio.load(
+            renderComponent('label', {
+                ...EXAMPLE_LABEL,
+                classes: 'extra-class another-extra-class',
+            }),
+        );
 
-      expect($('.ons-label__aria-hidden-description').attr('aria-hidden')).toBe('true');
+        expect($('.ons-label').hasClass('extra-class')).toBe(true);
+        expect($('.ons-label').hasClass('another-extra-class')).toBe(true);
     });
 
-    it.each([['checkbox'], ['radio']])(
-      'has a duplicate description in a visually hidden element when "%s" `inputType` is provided',
-      (inputType) => {
+    it('has additionally provided `attributes`', () => {
         const $ = cheerio.load(
-          renderComponent('label', {
-            ...EXAMPLE_LABEL_WITH_DESCRIPTION,
-            inputType,
-          }),
+            renderComponent('label', {
+                ...EXAMPLE_LABEL,
+                attributes: {
+                    a: 123,
+                    b: 456,
+                },
+            }),
         );
 
-        expect($('.ons-label__visually-hidden-description').hasClass('ons-u-vh')).toBe(true);
-      },
-    );
-  });
+        expect($('.ons-label').attr('a')).toBe('123');
+        expect($('.ons-label').attr('b')).toBe('456');
+    });
+
+    it.each([
+        ['when without a description', EXAMPLE_LABEL],
+        ['when with a description', EXAMPLE_LABEL_WITH_DESCRIPTION],
+    ])('has the provided `text` %s', (_, params) => {
+        const $ = cheerio.load(renderComponent('label', params));
+
+        expect($('.ons-label').text().trim().startsWith('Example label text')).toBe(true);
+    });
+
+    describe('description element', () => {
+        it.each([
+            ['when the `inputType` parameter is not provided', EXAMPLE_LABEL_WITH_DESCRIPTION],
+            [
+                'when the "checkbox" `inputType` parameter is provided',
+                {
+                    ...EXAMPLE_LABEL_WITH_DESCRIPTION,
+                    inputType: 'checkbox',
+                },
+            ],
+            [
+                'when the "radio" `inputType` parameter is provided',
+                {
+                    ...EXAMPLE_LABEL_WITH_DESCRIPTION,
+                    inputType: 'radio',
+                },
+            ],
+        ])('has the provided `description` text %s', (_, params) => {
+            const $ = cheerio.load(renderComponent('label', params));
+
+            expect($('.ons-label__description').text().trim()).toBe('An example description');
+        });
+
+        it('has a default `id` attribute of `description-hint`', () => {
+            const $ = cheerio.load(
+                renderComponent('label', {
+                    ...EXAMPLE_LABEL_WITH_DESCRIPTION,
+                    id: undefined,
+                }),
+            );
+
+            expect($('.ons-label__description').attr('id')).toBe('description-hint');
+        });
+
+        it('has an `id` attribute which adds `-description-hint` to the provided `id`', () => {
+            const $ = cheerio.load(renderComponent('label', EXAMPLE_LABEL_WITH_DESCRIPTION));
+
+            expect($('.ons-label__description').attr('id')).toBe('example-label-description-hint');
+        });
+
+        it('has the modifier class `ons-input--with-description` when `inputType` is not provided', () => {
+            const $ = cheerio.load(renderComponent('label', EXAMPLE_LABEL_WITH_DESCRIPTION));
+
+            expect($('.ons-label__description').hasClass('ons-input--with-description')).toBe(true);
+        });
+
+        it.each([
+            ['checkbox', 'ons-checkbox__label--with-description'],
+            ['radio', 'ons-radio__label--with-description'],
+        ])('has an input-specific modifier class when "%s" `inputType` is provided', (inputType, expectedInputSpecificModifier) => {
+            const $ = cheerio.load(
+                renderComponent('label', {
+                    ...EXAMPLE_LABEL_WITH_DESCRIPTION,
+                    inputType,
+                }),
+            );
+
+            expect($('.ons-label__description').hasClass(expectedInputSpecificModifier)).toBe(true);
+            expect($('.ons-label__description').hasClass('ons-input--with-description')).toBe(false);
+        });
+
+        it.each([['checkbox'], ['radio']])(
+            'has the description in an `aria-hidden` element when "%s" `inputType` is provided',
+            (inputType) => {
+                const $ = cheerio.load(
+                    renderComponent('label', {
+                        ...EXAMPLE_LABEL_WITH_DESCRIPTION,
+                        inputType,
+                    }),
+                );
+
+                expect($('.ons-label__aria-hidden-description').attr('aria-hidden')).toBe('true');
+            },
+        );
+
+        it.each([['checkbox'], ['radio']])(
+            'has a duplicate description in a visually hidden element when "%s" `inputType` is provided',
+            (inputType) => {
+                const $ = cheerio.load(
+                    renderComponent('label', {
+                        ...EXAMPLE_LABEL_WITH_DESCRIPTION,
+                        inputType,
+                    }),
+                );
+
+                expect($('.ons-label__visually-hidden-description').hasClass('ons-u-vh')).toBe(true);
+            },
+        );
+    });
 });