@ons/design-system 50.0.1 → 53.0.0

package/components/select/_macro.spec.js

@@ -0,0 +1,203 @@
+/** @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_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: '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,
+};
+
+const EXAMPLE_SELECT_WITH_ERROR = {
+  ...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));
+
+    expect(fieldSpy.occurrences[0]).toEqual({
+      id: 'example-select-field',
+      classes: 'extra-field-class',
+      legendClasses: 'extra-legend-class',
+      dontWrap: true,
+      error: undefined,
+    });
+  });
+
+  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('provides expected parameters to the inner `label` component', () => {
+    const faker = templateFaker();
+    const labelSpy = faker.spy('label');
+
+    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',
+    });
+  });
+
+  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/select/select.spec.js

@@ -0,0 +1,56 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+const EXAMPLE_LANGUAGE_FILTER_PAGE = `
+  <div class="ons-js-language-filter">
+    ${renderComponent('select', {
+      classes: 'ons-js-language-filter__select',
+      id: 'language-filter-select',
+      options: [
+        {
+          text: 'Native language',
+          value: 'language-native',
+        },
+        {
+          text: 'English',
+          value: 'language-english',
+        },
+      ],
+    })}
+    <div class="ons-js-language-filter__content" id="language-native"></div>
+    <div class="ons-js-language-filter__content ons-u-hidden" id="language-english"></div>
+  </div>
+`;
+
+describe('script: select', () => {
+  beforeEach(async () => {
+    await setTestPage('/test', EXAMPLE_LANGUAGE_FILTER_PAGE);
+  });
+
+  describe('language filter page with multiple views', () => {
+    it('shows first view by default', async () => {
+      const isFirstHidden = await page.$eval('#language-native', node => node.classList.contains('ons-u-hidden'));
+      expect(isFirstHidden).toBe(false);
+      const isSecondHidden = await page.$eval('#language-english', node => node.classList.contains('ons-u-hidden'));
+      expect(isSecondHidden).toBe(true);
+    });
+
+    it('shows second view when selection is changed to the second item', async () => {
+      await page.select('#language-filter-select', 'language-english');
+
+      const isFirstHidden = await page.$eval('#language-native', node => node.classList.contains('ons-u-hidden'));
+      expect(isFirstHidden).toBe(true);
+      const isSecondHidden = await page.$eval('#language-english', node => node.classList.contains('ons-u-hidden'));
+      expect(isSecondHidden).toBe(false);
+    });
+
+    it('shows first view when selection is changed back to the first item', async () => {
+      await page.select('#language-filter-select', 'language-english');
+      await page.select('#language-filter-select', 'language-native');
+
+      const isFirstHidden = await page.$eval('#language-native', node => node.classList.contains('ons-u-hidden'));
+      expect(isFirstHidden).toBe(false);
+      const isSecondHidden = await page.$eval('#language-english', node => node.classList.contains('ons-u-hidden'));
+      expect(isSecondHidden).toBe(true);
+    });
+  });
+});

package/components/share-page/_macro.njk

@@ -1,14 +1,16 @@
 {% macro onsSharePage(params) %}
     {% from "components/lists/_macro.njk" import onsList %}
 
-    {% set titleTag = params.titleTag | default("h2") %}
-    <{{ titleTag }} class="ons-u-fs-r--b ons-u-mb-xs">{{ params.title }}</{{ titleTag }}>
+    {% if params.title %}
+        {% set titleTag = params.titleTag | default("h2") %}
+        <{{ titleTag }} class="ons-u-fs-r--b ons-u-mb-xs">{{ params.title }}</{{ titleTag }}>
+    {% endif %}
 
     {% set list = [] %}
     {% if params.facebook is defined and params.facebook and params.facebook == true %}
         {% set facebook =
             {
-                "url": 'https://www.facebook.com/sharer/sharer.php?u=' ~ params.pageURL,
+                "url": 'https://www.facebook.com/sharer/sharer.php?u=' ~ params.pageURL|urlencode,
                 "text": 'Facebook',
                 "iconType": 'facebook',
                 "rel": 'noreferrer external',
@@ -21,7 +23,7 @@
     {% if params.twitter is defined and params.twitter and params.twitter == true %}
         {% set twitter =
             {
-                "url": 'https://twitter.com/intent/tweet?original_referer&text=' ~ params.pageTitle ~ '&url=' ~ params.pageURL,
+                "url": 'https://twitter.com/intent/tweet?original_referer&text=' ~ params.pageTitle|urlencode ~ '&url=' ~ params.pageURL|urlencode,
                 "text": 'Twitter',
                 "iconType": 'twitter',
                 "rel": 'noreferrer external',

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

@@ -0,0 +1,110 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+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,
+};
+
+describe('macro: 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();
+  });
+
+  it('wraps title in <h2> element by default', () => {
+    const $ = cheerio.load(renderComponent('share-page', EXAMPLE_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',
+      }),
+    );
+
+    expect(
+      $('h4')
+        .text()
+        .trim(),
+    ).toBe('Share page');
+  });
+
+  it('uses the provided icon size', () => {
+    const faker = templateFaker();
+    const listsSpy = faker.spy('lists');
+
+    faker.renderComponent('share-page', {
+      ...EXAMPLE_SHARE_PAGE,
+      iconSize: '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('lists');
+
+      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',
+      );
+    });
+
+    it('has a link which opens in a new tab', () => {
+      const faker = templateFaker();
+      const listsSpy = faker.spy('lists');
+
+      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');
+    });
+  });
+
+  describe('Share on Facebook', () => {
+    it('has a link with the expected url', () => {
+      const faker = templateFaker();
+      const listsSpy = faker.spy('lists');
+
+      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');
+    });
+
+    it('has a link which opens in a new tab', () => {
+      const faker = templateFaker();
+      const listsSpy = faker.spy('lists');
+
+      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');
+    });
+  });
+});

package/components/skip-to-content/_macro.spec.js

@@ -0,0 +1,57 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+describe('macro: skip-to-content', () => {
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(
+      renderComponent('skip-to-content', {
+        url: '#example-anchor',
+        text: 'Skip to the content',
+      }),
+    );
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has a hyperlink element', async () => {
+    const $ = cheerio.load(
+      renderComponent('skip-to-content', {
+        url: '#example-anchor',
+        text: 'Skip to the content',
+      }),
+    );
+
+    expect($('.ons-skip-link')[0].tagName).toBe('a');
+  });
+
+  it('has skip link with the provided `url`', async () => {
+    const $ = cheerio.load(
+      renderComponent('skip-to-content', {
+        url: '#example-anchor',
+        text: 'Skip to the content',
+      }),
+    );
+
+    expect($('.ons-skip-link').attr('href')).toBe('#example-anchor');
+  });
+
+  it('has skip link with the provided `text`', async () => {
+    const $ = cheerio.load(
+      renderComponent('skip-to-content', {
+        url: '#example-anchor',
+        text: 'Skip to the content',
+      }),
+    );
+
+    expect(
+      $('.ons-skip-link')
+        .text()
+        .trim(),
+    ).toBe('Skip to the content');
+  });
+});

package/components/skip-to-content/skip-to-content.spec.js

@@ -0,0 +1,44 @@
+import { setTestPage } from '../../tests/helpers/rendering';
+
+const EXAMPLE_SKIP_TO_LINK_TEMPLATE = `
+  {% from "components/skip-to-content/_macro.njk" import onsSkipToContent %}
+  {{
+      onsSkipToContent({
+          "url": "#target-element",
+          "text": "Skip to content"
+      })
+  }}
+  <input id="target-element" type="text" style="outline: solid 1px black;" />
+`;
+
+describe('script: skip-to-content', () => {
+  it('sets `tabIndex` of target element to -1', async () => {
+    await setTestPage('/test', EXAMPLE_SKIP_TO_LINK_TEMPLATE);
+
+    await page.focus('.ons-skip-link');
+    await page.keyboard.press('Enter');
+
+    const targetTabIndex = await page.$eval('#target-element', el => el.tabIndex);
+    expect(targetTabIndex).toBe(-1);
+  });
+
+  it('removes outline from target element on navigate', async () => {
+    await setTestPage('/test', EXAMPLE_SKIP_TO_LINK_TEMPLATE);
+
+    await page.focus('.ons-skip-link');
+    await page.keyboard.press('Enter');
+
+    const targetOutline = await page.$eval('#target-element', el => el.style.outline);
+    expect(targetOutline).toBe('none');
+  });
+
+  it('focuses target element on navigate', async () => {
+    await setTestPage('/test', EXAMPLE_SKIP_TO_LINK_TEMPLATE);
+
+    await page.focus('.ons-skip-link');
+    await page.keyboard.press('Enter');
+
+    const focusedElementId = await page.evaluate(() => document.activeElement.id);
+    expect(focusedElementId).toBe('target-element');
+  });
+});

package/components/status/_macro.spec.js

@@ -0,0 +1,77 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent } from '../../tests/helpers/rendering';
+
+describe('macro: status', () => {
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(
+      renderComponent('status', {
+        type: 'success',
+        label: 'Example status message',
+        size: 'small',
+      }),
+    );
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has the default type "info" when `type` is not provided', () => {
+    const $ = cheerio.load(
+      renderComponent('status', {
+        label: 'Example status message',
+      }),
+    );
+
+    expect($('.ons-status').hasClass('ons-status--info')).toBe(true);
+  });
+
+  it('has the provided `type`', () => {
+    const $ = cheerio.load(
+      renderComponent('status', {
+        type: 'success',
+        label: 'Example status message',
+      }),
+    );
+
+    expect($('.ons-status').hasClass('ons-status--success')).toBe(true);
+  });
+
+  it('does not have the `ons-status--small` modifier by default', () => {
+    const $ = cheerio.load(
+      renderComponent('status', {
+        label: 'Example status message',
+      }),
+    );
+
+    expect($('.ons-status').hasClass('ons-status--small')).not.toBe(true);
+  });
+
+  it('has the `ons-status--small` when provided', () => {
+    const $ = cheerio.load(
+      renderComponent('status', {
+        label: 'Example status message',
+        size: 'small',
+      }),
+    );
+
+    expect($('.ons-status').hasClass('ons-status--small')).toBe(true);
+  });
+
+  it('has the provided `label`', () => {
+    const $ = cheerio.load(
+      renderComponent('status', {
+        label: 'Example status message',
+      }),
+    );
+
+    expect(
+      $('.ons-status')
+        .text()
+        .trim(),
+    ).toBe('Example status message');
+  });
+});

package/components/summary/_macro.njk

@@ -59,7 +59,7 @@
                                                     </span>
                                                 {% endif %}
 
-                                                <div class="ons-summary__item--text{{ ' ons-summary__item-title--text' if rowItem.iconType else "" }}">{{ rowItem.rowTitle | default(row.rowTitle) | safe }} {{ hasIcons }}</div>
+                                                <div class="ons-summary__item--text{{ ' ons-summary__item-title--text' if rowItem.iconType else "" }}">{{ rowItem.rowTitle | default(row.rowTitle) | safe }}</div>
 
                                                 {# Render section status for mobile if is hub #}
                                                 {% if params.hub is defined and params.hub and rowItem.valueList is defined and rowItem.valueList %}
@@ -73,7 +73,7 @@
                                                     {% if rowItem.attributes is defined and rowItem.attributes %}{% for attribute, value in (rowItem.attributes.items() if rowItem.attributes is mapping and rowItem.attributes.items else rowItem.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
                                                 >
                                                     {% if rowItem.valueList | length == 1 %}
-                                                        {{ rowItem.valueList[0].text | safe }}
+                                                        <span class="ons-summary__text">{{ rowItem.valueList[0].text | safe }}</span>
                                                         {% if rowItem.valueList[0].other is defined and rowItem.valueList[0].other or rowItem.valueList[0].other == 0 %}
                                                             <ul class="ons-u-mb-no">
                                                                 <li>{{ rowItem.valueList[0].other | safe }}</li>
@@ -83,7 +83,7 @@
                                                         <ul class="ons-u-mb-no">
                                                             {% for value in (rowItem.valueList if rowItem.valueList is iterable else rowItem.valueList.items()) %}
                                                                 <li>
-                                                                    {{ value.text | safe }}
+                                                                    <span class="ons-summary__text">{{ value.text | safe }}</span>
                                                                     {% if value.other is defined and value.other or value.other == 0 %}
                                                                         <ul class="ons-u-mb-no">
                                                                             <li>{{ value.other | safe }}</li>
@@ -114,11 +114,11 @@
                             {% endfor %}
                         </table>
                     {% elif group.placeholderText is defined and group.placeholderText %}
-                        {{ group.placeholderText }}
+                        <span class="ons-summary__placeholder">{{ group.placeholderText }}</span>
                     {% endif %}
 
                     {% if group.summaryLink is defined and group.summaryLink %}
-                        <div class="{% if group.placeholderText is defined and group.placeholderText or group.rows is defined and group.rows %}ons-u-pt-s{% endif %}{% if group.placeholderText is not defined and group.rows is defined and group.rows | length > 1 %} ons-u-bt{% endif %}">
+                        <div class="ons-summary__link{% if group.placeholderText is defined and group.placeholderText or group.rows is defined and group.rows %} ons-u-pt-s{% endif %}{% if group.placeholderText is not defined and group.rows is defined and group.rows | length > 1 %} ons-u-bt{% endif %}">
                             <a {% if group.summaryLink.attributes is defined and group.summaryLink.attributes %}{% for attribute, value in (group.summaryLink.attributes.items() if group.summaryLink.attributes is mapping and group.summaryLink.attributes.items else group.summaryLink.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %} href="{{ group.summaryLink.url }}">{{ group.summaryLink.text }}</a>
                         </div>
                     {% endif %}