@ons/design-system 49.2.0 → 51.0.0

package/components/breadcrumbs/_macro.spec.js

@@ -0,0 +1,129 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { mapAll } from '../../tests/helpers/cheerio';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const EXAMPLE_BREADCRUMBS_MINIMAL = {
+  itemsList: [
+    {
+      url: 'https://example.com/',
+      text: 'Home',
+    },
+    {
+      url: 'https://example.com/guide/',
+      text: 'Guide',
+    },
+  ],
+};
+
+const EXAMPLE_BREADCRUMBS = {
+  classes: 'extra-class another-extra-class',
+  ariaLabel: 'Breadcrumbs label',
+  id: 'example-breadcrumbs',
+  itemsList: [
+    {
+      itemClasses: 'item-extra-class item-another-extra-class',
+      linkClasses: 'link-extra-class link-another-extra-class',
+      url: 'https://example.com/',
+      text: 'Home',
+      attributes: {
+        'data-a': '123',
+        'data-b': '456',
+      },
+      id: 'first-breadcrumb',
+    },
+    {
+      url: 'https://example.com/guide/',
+      text: 'Guide',
+      id: 'second-breadcrumb',
+      attributes: {
+        'data-a': '789',
+        'data-b': 'ABC',
+      },
+    },
+  ],
+};
+
+describe('macro: breadcrumbs', () => {
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has additionally provided style classes', () => {
+    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
+
+    expect($('.ons-breadcrumb').hasClass('extra-class')).toBe(true);
+    expect($('.ons-breadcrumb').hasClass('another-extra-class')).toBe(true);
+  });
+
+  it('has a default `aria-label` of "Breadcrumbs"', () => {
+    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_MINIMAL));
+
+    expect($('.ons-breadcrumb').attr('aria-label')).toBe('Breadcrumbs');
+  });
+
+  it('has the provided `ariaLabel` for `aria-label`', () => {
+    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
+
+    expect($('.ons-breadcrumb').attr('aria-label')).toBe('Breadcrumbs label');
+  });
+
+  it('has the provided `id`', () => {
+    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
+
+    expect($('.ons-breadcrumb').attr('id')).toBe('example-breadcrumbs');
+  });
+
+  it('has additionally provided style classes on `item` element', () => {
+    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
+
+    expect($('.ons-breadcrumb__item:first').hasClass('item-extra-class')).toBe(true);
+    expect($('.ons-breadcrumb__item:first').hasClass('item-another-extra-class')).toBe(true);
+  });
+
+  it('has additionally provided style classes on `link` element', () => {
+    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
+
+    expect($('.ons-breadcrumb__link:first').hasClass('link-extra-class')).toBe(true);
+    expect($('.ons-breadcrumb__link:first').hasClass('link-another-extra-class')).toBe(true);
+  });
+
+  it('has provided `url` on `link` elements', () => {
+    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
+
+    const urls = mapAll($('.ons-breadcrumb__link'), node => node.attr('href'));
+    expect(urls).toEqual(['https://example.com/', 'https://example.com/guide/']);
+  });
+
+  it('has provided `text` on `link` elements', () => {
+    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
+
+    const labels = mapAll($('.ons-breadcrumb__link'), node => node.text().trim());
+    expect(labels).toEqual(['Home', 'Guide']);
+  });
+
+  it('has provided `attributes` on `link` elements', () => {
+    const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS));
+
+    const testValuesA = mapAll($('.ons-breadcrumb__link'), node => node.attr('data-a'));
+    expect(testValuesA).toEqual(['123', '789']);
+    const testValuesB = mapAll($('.ons-breadcrumb__link'), node => node.attr('data-b'));
+    expect(testValuesB).toEqual(['456', 'ABC']);
+  });
+
+  it('has a "chevron" icon for each breadcrumb item', () => {
+    const faker = templateFaker();
+    const iconsSpy = faker.spy('icons');
+
+    faker.renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_MINIMAL);
+
+    const iconTypes = iconsSpy.occurrences.map(occurrence => occurrence.iconType);
+    expect(iconTypes).toEqual(['chevron', 'chevron']);
+  });
+});

package/components/button/_macro.njk

@@ -49,8 +49,8 @@
         {% endif %}
         class="ons-btn{% 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-btn--{{ variant }}{% endfor %}{% else %} ons-btn--{{ params.variants }}{% endif %}{% endif %}{% if params.url is defined and params.url %} ons-btn--link ons-js-submit-btn{% endif %}{% if params.buttonStyle == "download" %} ons-btn--download{% endif %}{% if params.buttonStyle == "print" %} ons-btn--print ons-u-d-no ons-js-print-btn{% endif %}{% if params.submitType == "loader" %} ons-btn--loader ons-js-loader ons-js-submit-btn{% endif %}{% if params.submitType == "timer" %} ons-js-timer ons-js-submit-btn{% endif %}"
         {% if params.id is defined and params.id %}id="{{ params.id }}"{% endif %}
-        {% if params.value is defined and params.value %}value="{{ params.value }}"{% endif %}
-        {% if params.name is defined and params.name and tag != "a" %}name="{{ params.name }}"{% elif params.name is defined and params.name and tag == "a" %}id="{{ params.name }}"{% endif %}
+        {% if params.value is defined and params.value and tag != "a" %}value="{{ params.value }}"{% endif %}
+        {% if params.name is defined and params.name and tag != "a" %}name="{{ params.name }}"{% endif %}
         {% if params.url is defined and params.url and params.newWindow is defined and params.newWindow %}target="_blank" rel="noopener"{% endif %}
         {% if params.buttonStyle == "download" and (params.removeDownloadAttribute is not defined or not params.removeDownloadAttribute or params.removeDownloadAttribute != true) %} download{% 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}}="{{value}}"{% endfor %}{% endif %}
@@ -65,7 +65,7 @@
                         })
                     }}
                 {% endif -%}
-                {{- params.html | safe if params.html is defined and params.html else params.text -}}
+                <span class="ons-btn__text">{{- params.html | safe if params.html is defined and params.html else params.text -}}</span>
                 {%- if iconPosition == "after" %}
                 {{
                     onsIcon({
@@ -80,9 +80,9 @@
                         "iconType": iconType
                     })
                 }}
-                <span class="ons-u-vh@xxs@s">{{- params.html | safe if params.html is defined and params.html else params.text -}}</span>
+                <span class="ons-btn__text ons-u-vh@xxs@s">{{- params.html | safe if params.html is defined and params.html else params.text -}}</span>
             {% else -%}
-                {{- params.html | safe if params.html is defined and params.html else params.text -}}
+                <span class="ons-btn__text">{{- params.html | safe if params.html is defined and params.html else params.text -}}</span>
             {% endif -%}
         </span>
         {% if params.url is defined and params.url and params.newWindow is defined and params.newWindow %}

package/components/button/_macro.spec.js

@@ -0,0 +1,446 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+describe('macro: button', () => {
+  it('has the provided `id` attribute', () => {
+    const $ = cheerio.load(
+      renderComponent('button', {
+        id: 'example-id',
+      }),
+    );
+
+    expect($('#example-id').length).toBe(1);
+  });
+
+  it('is an `a` element when `dsExample` is truthy', () => {
+    const $ = cheerio.load(
+      renderComponent('button', {
+        dsExample: true,
+      }),
+    );
+
+    expect($('a').length).toBe(1);
+  });
+
+  it('has additionally provided `attributes`', () => {
+    const $ = cheerio.load(
+      renderComponent('button', {
+        attributes: {
+          a: 123,
+          b: 456,
+        },
+      }),
+    );
+
+    expect($('button').attr('a')).toBe('123');
+    expect($('button').attr('b')).toBe('456');
+  });
+
+  it('has expected style classes', () => {
+    const $ = cheerio.load(renderComponent('button'));
+
+    expect($('.ons-btn .ons-btn__inner').length).toBe(1);
+  });
+
+  it('has provided variant style classes', () => {
+    const $ = cheerio.load(
+      renderComponent('button', {
+        variants: ['variant-a', 'variant-b'],
+      }),
+    );
+
+    expect($('.ons-btn').hasClass('ons-btn--variant-a')).toBe(true);
+    expect($('.ons-btn').hasClass('ons-btn--variant-b')).toBe(true);
+  });
+
+  it('has download variant style class when `buttonStyle` is `download`', () => {
+    const $ = cheerio.load(
+      renderComponent('button', {
+        url: 'http://example.com',
+        buttonStyle: 'download',
+      }),
+    );
+
+    expect($('.ons-btn').hasClass('ons-btn--download')).toBe(true);
+  });
+
+  it('has `download` icon when `buttonStyle` is "download"', () => {
+    const faker = templateFaker();
+    const iconsSpy = faker.spy('icons');
+
+    faker.renderComponent('button', {
+      url: 'http://example.com',
+      buttonStyle: 'download',
+    });
+
+    expect(iconsSpy.occurrences[0].iconType).toBe('download');
+  });
+
+  it('has provided variant style classes when `buttonStyle` is "print"', () => {
+    const $ = cheerio.load(
+      renderComponent('button', {
+        buttonStyle: 'print',
+      }),
+    );
+
+    expect($('.ons-btn').hasClass('ons-btn--print')).toBe(true);
+    expect($('.ons-btn').hasClass('ons-u-d-no')).toBe(true);
+    expect($('.ons-btn').hasClass('ons-js-print-btn')).toBe(true);
+  });
+
+  it('has `print` icon when `buttonStyle` is "print"', () => {
+    const faker = templateFaker();
+    const iconsSpy = faker.spy('icons');
+
+    faker.renderComponent('button', {
+      url: 'http://example.com',
+      buttonStyle: 'print',
+    });
+
+    expect(iconsSpy.occurrences[0].iconType).toBe('print');
+  });
+
+  it('has provided variant style classes when `submitType` is "loader"', () => {
+    const $ = cheerio.load(
+      renderComponent('button', {
+        submitType: 'loader',
+      }),
+    );
+
+    expect($('.ons-btn').hasClass('ons-btn--loader')).toBe(true);
+    expect($('.ons-btn').hasClass('ons-js-loader')).toBe(true);
+    expect($('.ons-btn').hasClass('ons-js-submit-btn')).toBe(true);
+  });
+
+  it('has `loader` icon when `submitType` is "loader"', () => {
+    const faker = templateFaker();
+    const iconsSpy = faker.spy('icons');
+
+    faker.renderComponent('button', {
+      submitType: 'loader',
+    });
+
+    expect(iconsSpy.occurrences[0].iconType).toBe('loader');
+  });
+
+  it('has `chevron` icon when `buttonStyle` is "mobile"', () => {
+    const faker = templateFaker();
+    const iconsSpy = faker.spy('icons');
+
+    faker.renderComponent('button', {
+      buttonStyle: 'mobile',
+    });
+
+    expect(iconsSpy.occurrences[0].iconType).toBe('chevron');
+  });
+
+  it('has provided variant style classes when `submitType` is "timer"', () => {
+    const $ = cheerio.load(
+      renderComponent('button', {
+        submitType: 'timer',
+      }),
+    );
+
+    expect($('.ons-btn').hasClass('ons-js-timer')).toBe(true);
+    expect($('.ons-btn').hasClass('ons-js-submit-btn')).toBe(true);
+  });
+
+  it('has additionally provided style classes', () => {
+    const $ = cheerio.load(
+      renderComponent('button', {
+        classes: 'extra-class another-extra-class',
+      }),
+    );
+
+    expect($('.ons-btn').hasClass('extra-class')).toBe(true);
+    expect($('.ons-btn').hasClass('another-extra-class')).toBe(true);
+  });
+
+  it('has additionally provided inner style classes', () => {
+    const $ = cheerio.load(
+      renderComponent('button', {
+        innerClasses: 'extra-inner-class another-extra-inner-class',
+      }),
+    );
+
+    expect($('.ons-btn__inner').hasClass('extra-inner-class')).toBe(true);
+    expect($('.ons-btn__inner').hasClass('another-extra-inner-class')).toBe(true);
+  });
+
+  it('has label text when `text` is provided', () => {
+    const $ = cheerio.load(
+      renderComponent('button', {
+        text: 'Click > me!',
+      }),
+    );
+
+    expect($('.ons-btn__text').html()).toBe('Click > me!');
+  });
+
+  it('has label text when `html` is provided', () => {
+    const $ = cheerio.load(
+      renderComponent('button', {
+        html: 'Click <strong>me</strong>!',
+      }),
+    );
+
+    expect($('.ons-btn__text').html()).toBe('Click <strong>me</strong>!');
+  });
+
+  it('has button context text when `buttonContext` is provided', () => {
+    const $ = cheerio.load(
+      renderComponent('button', {
+        buttonContext: 'button context text',
+      }),
+    );
+
+    expect($('.ons-btn__context').text()).toBe('button context text');
+  });
+
+  it('has custom icon before button text', () => {
+    const $ = cheerio.load(
+      renderComponent('button', {
+        text: 'Click me!',
+        iconPosition: 'before',
+        iconType: 'exit',
+      }),
+    );
+
+    expect($('.ons-svg-icon + .ons-btn__text').text()).toBe('Click me!');
+  });
+
+  it('has custom icon after button text', () => {
+    const $ = cheerio.load(
+      renderComponent('button', {
+        text: 'Click me!',
+        iconPosition: 'after',
+        iconType: 'exit',
+      }),
+    );
+
+    expect(
+      $('.ons-btn__text + .ons-svg-icon')
+        .prev()
+        .text(),
+    ).toBe('Click me!');
+  });
+
+  describe('mode: standard', () => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(
+        renderComponent('button', {
+          text: 'Example button',
+          name: 'example',
+          value: 'example-value',
+        }),
+      );
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('is an `button` element', () => {
+      const $ = cheerio.load(renderComponent('button'));
+
+      expect($('button').length).toBe(1);
+    });
+
+    it('has the provided `type` attribute', () => {
+      const $ = cheerio.load(
+        renderComponent('button', {
+          type: 'special-type',
+        }),
+      );
+
+      expect($('button').attr('type')).toBe('special-type');
+    });
+
+    it('has the provided `type` attribute even if `buttonStyle` is provided', () => {
+      const $ = cheerio.load(
+        renderComponent('button', {
+          type: 'special-type',
+          buttonStyle: 'print',
+        }),
+      );
+
+      expect($('button').attr('type')).toBe('special-type');
+    });
+
+    it('defaults to being a "submit" button when `type` is not provided', () => {
+      const $ = cheerio.load(renderComponent('button'));
+
+      expect($('button').attr('type')).toBe('submit');
+    });
+
+    it('defaults to being a "button" when `type` is not provided and `buttonStyle` is set to "print"', () => {
+      const $ = cheerio.load(
+        renderComponent('button', {
+          buttonStyle: 'print',
+        }),
+      );
+
+      expect($('button').attr('type')).toBe('button');
+    });
+
+    it('has the provided `value` attribute', () => {
+      const $ = cheerio.load(
+        renderComponent('button', {
+          value: 'special-value',
+        }),
+      );
+
+      expect($('button').attr('value')).toBe('special-value');
+    });
+
+    it('has the provided `name` attribute', () => {
+      const $ = cheerio.load(
+        renderComponent('button', {
+          name: 'special-name',
+        }),
+      );
+
+      expect($('button').attr('name')).toBe('special-name');
+    });
+  });
+
+  describe('mode: link', () => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(
+        renderComponent('button', {
+          text: 'Example button',
+          name: 'example',
+          value: 'example-value',
+          url: 'http://example.com',
+        }),
+      );
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('is an `a` element', () => {
+      const $ = cheerio.load(
+        renderComponent('button', {
+          url: 'http://example.com',
+        }),
+      );
+
+      expect($('a').length).toBe(1);
+    });
+
+    it('has expected style classes', () => {
+      const $ = cheerio.load(
+        renderComponent('button', {
+          url: 'http://example.com',
+        }),
+      );
+
+      expect($('a').hasClass('ons-btn')).toBe(true);
+      expect($('.ons-btn').hasClass('ons-btn--link')).toBe(true);
+      expect($('.ons-btn').hasClass('ons-js-submit-btn')).toBe(true);
+    });
+
+    it('has the provided link', () => {
+      const $ = cheerio.load(
+        renderComponent('button', {
+          url: 'http://example.com',
+        }),
+      );
+
+      expect($('a').attr('href')).toBe('http://example.com');
+    });
+
+    it('has `arrow-next` icon by default', () => {
+      const faker = templateFaker();
+      const iconsSpy = faker.spy('icons');
+
+      faker.renderComponent('button', {
+        url: 'http://example.com',
+      });
+
+      expect(iconsSpy.occurrences[0].iconType).toBe('arrow-next');
+    });
+
+    it('opens in a new window when `newWindow` is `true`', () => {
+      const $ = cheerio.load(
+        renderComponent('button', {
+          url: 'http://example.com',
+          newWindow: true,
+        }),
+      );
+
+      expect($('a').attr('target')).toBe('_blank');
+      expect($('a').attr('rel')).toBe('noopener');
+    });
+
+    it('has `external-link` icon when `newWindow` is `true`', () => {
+      const faker = templateFaker();
+      const iconsSpy = faker.spy('icons');
+
+      faker.renderComponent('button', {
+        url: 'http://example.com',
+        newWindow: true,
+      });
+
+      expect(iconsSpy.occurrences[0].iconType).toBe('external-link');
+    });
+
+    it('has the `button` role', () => {
+      const $ = cheerio.load(
+        renderComponent('button', {
+          url: 'http://example.com',
+        }),
+      );
+
+      expect($('.ons-btn').attr('role')).toBe('button');
+    });
+
+    it('has a default new window description when `newWindow` is `true`', () => {
+      const $ = cheerio.load(
+        renderComponent('button', {
+          url: 'http://example.com',
+          newWindow: true,
+        }),
+      );
+
+      expect($('.ons-btn__new-window-description').text()).toBe('opens in a new window');
+    });
+
+    it('has a custom new window description when `newWindow` is `true` and `newWindowDescription` is provided', () => {
+      const $ = cheerio.load(
+        renderComponent('button', {
+          url: 'http://example.com',
+          newWindow: true,
+          newWindowDescription: 'custom opens in a new window text',
+        }),
+      );
+
+      expect($('.ons-btn__new-window-description').text()).toBe('custom opens in a new window text');
+    });
+
+    it('has the `download` attribute when `buttonStyle` is "download"', () => {
+      const $ = cheerio.load(
+        renderComponent('button', {
+          buttonStyle: 'download',
+        }),
+      );
+
+      expect($('.ons-btn').attr('download')).toBeDefined();
+    });
+
+    it('does not have the `download` attribute when `buttonStyle` is "download" and `removeDownloadAttribute` is `true`', () => {
+      const $ = cheerio.load(
+        renderComponent('button', {
+          buttonStyle: 'download',
+          removeDownloadAttribute: true,
+        }),
+      );
+
+      expect($('.ons-btn').attr('download')).toBeUndefined();
+    });
+  });
+});