@ons/design-system 50.0.1 → 51.0.0

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 %}