@ons/design-system 50.0.0 → 52.0.0

package/components/label/_macro.spec.js

@@ -0,0 +1,189 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+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',
+};
+
+const EXAMPLE_LABEL_WITH_INPUT_TYPE = {
+  ...EXAMPLE_LABEL,
+  inputType: 'checkbox',
+};
+
+const EXAMPLE_LABEL_WITH_DESCRIPTION = {
+  ...EXAMPLE_LABEL,
+  description: 'An example description',
+};
+
+const EXAMPLE_LABEL_WITH_ACCESSIBLE_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.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('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);
+    });
+  });
+});

package/components/language-selector/_macro.spec.js

@@ -0,0 +1,129 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent } from '../../tests/helpers/rendering';
+
+const EXAMPLE_WITH_TWO_LANGUAGES = {
+  languages: [
+    {
+      url: '/english',
+      ISOCode: 'en',
+      text: 'English',
+      current: true,
+    },
+    {
+      url: '/cymraeg',
+      ISOCode: 'cy',
+      text: 'Cymraeg',
+      current: false,
+      attributes: {
+        a: 123,
+        b: 456,
+      },
+    },
+  ],
+};
+
+const EXAMPLE_WITH_THREE_LANGUAGES = {
+  languages: [
+    {
+      url: '/english',
+      ISOCode: 'en',
+      text: 'English',
+      current: false,
+    },
+    {
+      url: '/cymraeg',
+      ISOCode: 'cy',
+      text: 'Cymraeg',
+      current: true,
+    },
+    {
+      url: '/polski',
+      ISOCode: 'pl',
+      text: 'Polski',
+      current: false,
+    },
+  ],
+};
+
+describe('macro: language-selector', () => {
+  describe('mode: with two languages', () => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has one language selector displayed', () => {
+      const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
+
+      const $items = $('.ons-language-links__item');
+      expect($items.length).toBe(1);
+    });
+
+    it('does not show the current language', () => {
+      const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
+
+      expect($('.ons-language-links__item a').text()).toBe('Cymraeg');
+    });
+
+    it('has the expected hyperlink URL', async () => {
+      const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
+
+      const $hyperlink = $('.ons-language-links__item a');
+      expect($hyperlink.attr('href')).toBe('/cymraeg');
+    });
+
+    it('has the expected lang attribute value', async () => {
+      const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
+
+      expect($('.ons-language-links__item a').attr('lang')).toBe('cy');
+    });
+
+    it('has additionally provided `attributes`', () => {
+      const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
+
+      expect($('.ons-language-links__item a').attr('a')).toBe('123');
+      expect($('.ons-language-links__item a').attr('b')).toBe('456');
+    });
+
+    it('does not have a visibility class applied', () => {
+      const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
+
+      expect($('.ons-language-links').hasClass('ons-u-d-no@xxs@m')).toBe(false);
+    });
+  });
+
+  describe('mode: with three languages', () => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_THREE_LANGUAGES));
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has two language selectors displayed', () => {
+      const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_THREE_LANGUAGES));
+
+      const $items = $('.ons-language-links__item');
+      expect($items.length).toBe(2);
+    });
+
+    it('does not show the current language', () => {
+      const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_THREE_LANGUAGES));
+
+      expect($('.ons-language-links__item:first-child a').text()).toBe('English');
+      expect($('.ons-language-links__item:last-child a').text()).toBe('Polski');
+    });
+
+    it('has the visibility class applied', () => {
+      const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_THREE_LANGUAGES));
+
+      expect($('.ons-language-links').hasClass('ons-u-d-no@xxs@m')).toBe(true);
+    });
+  });
+});

package/components/lists/_list.scss

@@ -84,6 +84,10 @@
       margin-right: 0;
     }
   }
+
+  &--p {
+    padding: 0;
+  }
 }
 
 @include bp-suffix('ons-list--inline') {

package/components/lists/_macro.njk

@@ -20,16 +20,13 @@
     {% else %}
         {% set listEl = 'ul' %}
     {% endif %}
-        <{{listEl}} {% if params.id is defined and params.id %}id="{{ params.id }}"{% endif %}class="{% if listLength > 1 or listEl == 'ul' %}ons-list{% else %}ons-list--p{% endif %}{% if params.classes is defined and params.classes %} {{ params.classes -}}{% endif %}{% if params.variants is defined and params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-list--{{ variant }}{% endfor %}{% else %} ons-list--{{ params.variants }}{% endif %}{% endif %}{% if otherClasses %} {{ otherClasses -}}{% endif %}"{% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
+        <{{listEl}} {% if params.id is defined and params.id %}id="{{ params.id }}"{% endif %} class="ons-list{% if listEl == 'p' %} ons-list--p{% endif %}{% if params.classes is defined and params.classes %} {{ params.classes -}}{% endif %}{% if params.variants is defined and params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-list--{{ variant }}{% endfor %}{% else %} ons-list--{{ params.variants }}{% endif %}{% endif %}{% if otherClasses %} {{ otherClasses -}}{% endif %}"{% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
             {%- for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) -%}
                 {% if listLength > 1 or listEl == 'ul' %}
                 <li class="ons-list__item{% if item.listClasses is defined and item.listClasses %} {{ item.listClasses }}{% endif %}"{% if item.current is defined and item.current %} aria-current="true"{% endif %}>
                 {% endif %}
                     {% set itemText = item.text %}
-
-                    {% if params.itemsList[0] is defined and item.iconType is defined and item.iconType %}
-                        {% set iconType = item.iconType if item.iconType else '' %}
-                    {% endif %}
+                    {% set itemIconType = item.iconType if item.iconType is defined and item.iconType else iconType %}
 
                     {# For Craft support we also support title and navigation title #}
                     {% if item.navigationTitle is defined and item.navigationTitle %}
@@ -46,7 +43,7 @@
                                 {% from "components/icons/_macro.njk" import onsIcon %}
                                 {{
                                     onsIcon({
-                                        "iconType": iconType,
+                                        "iconType": itemIconType,
                                         "iconSize": params.iconSize
                                     })
                                 }}
@@ -81,7 +78,7 @@
                             {% from "components/icons/_macro.njk" import onsIcon %}
                             {{
                                 onsIcon({
-                                    "iconType": iconType,
+                                    "iconType": itemIconType,
                                     "iconSize": params.iconSize
                                 })
                             }}