@ons/design-system 50.0.1 → 53.0.0

package/components/radios/radios.spec.js

@@ -0,0 +1,180 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+const EXAMPLE_RADIOS_PARAMS = {
+  name: 'contact-preference',
+  clearRadios: {
+    text: 'Clear selection',
+    url: '/',
+    ariaClearText: 'You can clear your answer by clicking the clear selection button under the radio buttons',
+    ariaClearedText: 'You have cleared your answer',
+  },
+  legend: 'How would you like us to contact you?',
+  legendClasses: 'ons-u-vh',
+  radios: [
+    {
+      id: 'email',
+      value: 'email',
+      label: {
+        text: 'Email',
+      },
+      other: {
+        id: 'email-other',
+        type: 'email',
+        label: {
+          text: 'Enter your email address',
+        },
+      },
+    },
+    {
+      id: 'phone',
+      value: 'phone',
+      label: {
+        text: 'Phone',
+      },
+      other: {
+        id: 'tel-other',
+        type: 'tel',
+        label: {
+          text: 'Enter your phone number',
+        },
+      },
+    },
+    {
+      id: 'text',
+      value: 'Open input test',
+      label: {
+        text: 'Text',
+      },
+      other: {
+        id: 'text-other',
+        type: 'text',
+        open: true,
+        label: {
+          text: 'Enter something else',
+        },
+      },
+    },
+  ],
+};
+
+describe('script: radios', () => {
+  beforeEach(async () => {
+    await setTestPage('/test', renderComponent('radios', EXAMPLE_RADIOS_PARAMS));
+  });
+
+  it('radios with other options should be given aria-expanded attributes', async () => {
+    const ariaExpandedOption1 = await page.$eval('#email', node => node.getAttribute('aria-expanded'));
+    expect(ariaExpandedOption1).toBe('false');
+    const ariaExpandedOption2 = await page.$eval('#phone', node => node.getAttribute('aria-expanded'));
+    expect(ariaExpandedOption2).toBe('false');
+  });
+
+  it('radios with "open" other options should not be given aria-expanded attributes', async () => {
+    const hasAriaExpandedOption3 = await page.$eval('#text', node => node.hasAttribute('aria-expanded'));
+    expect(hasAriaExpandedOption3).toBe(false);
+  });
+
+  describe('a radio checked', () => {
+    beforeEach(async () => {
+      await page.click('#email');
+    });
+
+    it('then the checked radio aria-expanded attribute should be set to true', async () => {
+      const ariaExpandedOption1 = await page.$eval('#email', node => node.getAttribute('aria-expanded'));
+      expect(ariaExpandedOption1).toBe('true');
+    });
+
+    it('then the unchecked radio aria-expanded attribute should be set to false', async () => {
+      const ariaExpandedOption2 = await page.$eval('#phone', node => node.getAttribute('aria-expanded'));
+      expect(ariaExpandedOption2).toBe('false');
+    });
+
+    it('then the unchecked radio aria-expanded attribute of "open" radio should not be set', async () => {
+      const hasAriaExpanded = await page.$eval('#text', node => node.hasAttribute('aria-expanded'));
+      expect(hasAriaExpanded).toBe(false);
+    });
+
+    it('then the clear button should be visible', async () => {
+      const isHidden = await page.$eval('.ons-js-clear-btn', node => node.classList.contains('ons-u-db-no-js_enabled'));
+      expect(isHidden).toBe(false);
+    });
+
+    it('then the aria live message should announce that the answer can be cleared', async () => {
+      const alertText = await page.$eval('.ons-js-clear-radio-alert', node => node.innerHTML);
+      expect(alertText).toBe('You can clear your answer by clicking the clear selection button under the radio buttons');
+    });
+
+    describe('and the radio selection is changed', () => {
+      beforeEach(async () => {
+        await page.click('#phone');
+      });
+
+      it('then the checked radio aria-expanded attribute should be set to true', async () => {
+        const ariaExpandedOption2 = await page.$eval('#phone', node => node.getAttribute('aria-expanded'));
+        expect(ariaExpandedOption2).toBe('true');
+      });
+
+      it('then the unchecked radio aria-expanded attribute should be set to false', async () => {
+        const ariaExpandedOption1 = await page.$eval('#email', node => node.getAttribute('aria-expanded'));
+        expect(ariaExpandedOption1).toBe('false');
+      });
+
+      it('then the unchecked radio aria-expanded attribute of "open" radio should not be set', async () => {
+        const hasAriaExpanded = await page.$eval('#text', node => node.hasAttribute('aria-expanded'));
+        expect(hasAriaExpanded).toBe(false);
+      });
+    });
+  });
+
+  describe('the clear button is clicked', () => {
+    beforeEach(async () => {
+      await page.$eval('.ons-js-clear-btn', node => node.click());
+    });
+
+    it('then the clear button should not be visible', async () => {
+      const isHidden = await page.$eval('.ons-js-clear-btn', node => node.classList.contains('ons-u-db-no-js_enabled'));
+      expect(isHidden).toBe(true);
+    });
+
+    it('then the aria live message should announce that the answer has been cleared', async () => {
+      const alertText = await page.$eval('.ons-js-clear-radio-alert', node => node.innerHTML);
+      expect(alertText).toBe('You have cleared your answer');
+    });
+
+    it('then all radios should not be checked', async () => {
+      const checkedRadios = await page.$$eval('.ons-js-radio', nodes => nodes.map(node => node.checked));
+      expect(checkedRadios).not.toContain(true);
+    });
+
+    it('then all other input fields should be empty', async () => {
+      const emailOtherValue = await page.$eval('#email-other', node => node.value);
+      expect(emailOtherValue).toBe('');
+      const telOtherValue = await page.$eval('#tel-other', node => node.value);
+      expect(telOtherValue).toBe('');
+      const textOtherValue = await page.$eval('#text-other', node => node.value);
+      expect(textOtherValue).toBe('');
+    });
+  });
+
+  describe('there is a visible input which is focused', () => {
+    beforeEach(async () => {
+      await page.focus('#text-other');
+    });
+
+    it('then the radio button should be checked', async () => {
+      const isRadioChecked = await page.$eval('#text', node => node.checked);
+      expect(isRadioChecked).toBe(true);
+    });
+  });
+
+  describe('there is a visible input and the radio is checked', () => {
+    beforeEach(async () => {
+      await page.click('#text');
+    });
+
+    it('then the input should have a tab index of 0', async () => {
+      const tabIndex = await page.$eval('#text-other', node => node.getAttribute('tabindex'));
+      expect(tabIndex).toBe('0');
+    });
+  });
+});

package/components/related-content/_macro.njk

@@ -1,45 +1,38 @@
 {% macro onsRelatedContent(params) %}
 
-{% from "components/lists/_macro.njk" import onsList %}
-
-{% if params is defined and params and params.classes is defined and params.classes %}
-  {% set classes = ' ' + params.classes %}
-{% endif %}
+  {% if params is defined and params and params.classes is defined and params.classes %}
+    {% set classes = ' ' + params.classes %}
+  {% endif %}
 
   <aside class="ons-related-content{{ classes }}" aria-label="{{ params.ariaLabel | default("Related content") }}">
 
     <div class="ons-related-content__body">
-
       {% if params.rows is defined and params.rows %}
-
         {% for row in params.rows %}
-          <div class="ons-related-content__section">
-            {% if row.title %}
-              <h2 class="ons-related-content__title ons-u-fs-r--b ons-u-mb-xs" id="{{ row.id }}">{{ row.title }}</h2>
-            {% endif %}
+          {% from "components/related-content/_section-macro.njk" import onsRelatedContentSection %}
+          {% call onsRelatedContentSection(
+            {
+              "title": row.title,
+              "id": row.id
+            }
+          ) %}            
             <nav class="ons-related-content__navigation" aria-labelledby="{{ row.id }}">
+              {% from "components/lists/_macro.njk" import onsList %}
               {{
                 onsList({
                   "variants": 'bare',
+                  "iconType": row.iconType,
                   "iconPosition": row.iconPosition,
                   "iconSize": row.iconSize,
                   "itemsList": row.itemsList
                 })
               }}
             </nav>
-          </div>
+          {% endcall %}
         {% endfor %}
-
       {% else %}
-
-        <h2 class="ons-related-content__title ons-u-fs-r--b ons-u-mb-xs">{{ params.title }}</h2>
-
-        <div class="ons-related-content__body">
-          {{ (params.body if params else "") | safe }}{{ caller() if caller }}
-        </div>
-
+        {{ caller() if caller }}
       {% endif %}
-
     </div>
 
   </aside>

package/components/related-content/_macro.spec.js

@@ -0,0 +1,133 @@
+/** @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_RELATED_CONTENT_GENERAL = {
+  title: 'Related information',
+  id: 'related-general-content',
+};
+
+const EXAMPLE_RELATED_CONTENT_LINKS = {
+  rows: [
+    {
+      id: 'related-articles',
+      title: 'Related articles',
+      iconPosition: 'before',
+      iconSize: 'xl',
+      itemsList: [
+        { text: 'First', url: '/article/first' },
+        { text: 'Second', url: '/article/second' },
+      ],
+    },
+    {
+      id: 'related-links',
+      title: 'Related links',
+      iconPosition: 'after',
+      iconSize: 'xxl',
+      itemsList: [
+        { text: 'A', url: '/article/a' },
+        { text: 'B', url: '/article/b' },
+      ],
+    },
+  ],
+};
+
+describe('macro: related-content', () => {
+  describe.each([
+    ['general content', EXAMPLE_RELATED_CONTENT_GENERAL],
+    ['list of links', EXAMPLE_RELATED_CONTENT_LINKS],
+  ])('mode: %s', (_, params) => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(renderComponent('related-content', params));
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has a default `aria-label` of "Related content"', () => {
+      const $ = cheerio.load(renderComponent('related-content', params));
+
+      expect($('.ons-related-content').attr('aria-label')).toBe('Related content');
+    });
+
+    it('has the provided `aria-label`', () => {
+      const $ = cheerio.load(
+        renderComponent('related-content', {
+          ...params,
+          ariaLabel: 'Related articles',
+        }),
+      );
+
+      expect($('.ons-related-content').attr('aria-label')).toBe('Related articles');
+    });
+
+    it('has additionally provided style classes', () => {
+      const $ = cheerio.load(
+        renderComponent('related-content', {
+          ...params,
+          classes: 'extra-class another-extra-class',
+        }),
+      );
+
+      expect($('.ons-related-content').hasClass('extra-class')).toBe(true);
+      expect($('.ons-related-content').hasClass('another-extra-class')).toBe(true);
+    });
+  });
+
+  describe('mode: general content', () => {
+    it('calls with content', () => {
+      const $ = cheerio.load(renderComponent('related-content', { EXAMPLE_RELATED_CONTENT_GENERAL }, 'Example content...'));
+
+      const content = $('.ons-related-content__body')
+        .text()
+        .trim();
+      expect(content).toEqual(expect.stringContaining('Example content...'));
+    });
+  });
+
+  describe('mode: list of links', () => {
+    it('renders the expected output using the related-content/section macro', () => {
+      const faker = templateFaker();
+      const sectionSpy = faker.spy('related-content/section');
+
+      faker.renderComponent('related-content', EXAMPLE_RELATED_CONTENT_LINKS);
+
+      expect(sectionSpy.occurrences[0]).toHaveProperty('title', 'Related articles');
+      expect(sectionSpy.occurrences[0]).toHaveProperty('id', 'related-articles');
+      expect(sectionSpy.occurrences[1]).toHaveProperty('title', 'Related links');
+      expect(sectionSpy.occurrences[1]).toHaveProperty('id', 'related-links');
+    });
+
+    it('has the `aria-labelledby` attribute for each section of links', () => {
+      const $ = cheerio.load(renderComponent('related-content', EXAMPLE_RELATED_CONTENT_LINKS));
+
+      const values = mapAll($('.ons-related-content__navigation'), node => node.attr('aria-labelledby'));
+      expect(values).toEqual(['related-articles', 'related-links']);
+    });
+
+    it('renders the expected list items using the list macro', () => {
+      const faker = templateFaker();
+      const listsSpy = faker.spy('lists');
+
+      faker.renderComponent('related-content', EXAMPLE_RELATED_CONTENT_LINKS);
+
+      expect(listsSpy.occurrences[0]).toHaveProperty('iconPosition', 'before');
+      expect(listsSpy.occurrences[0]).toHaveProperty('iconSize', 'xl');
+      expect(listsSpy.occurrences[0]).toHaveProperty('itemsList', [
+        { text: 'First', url: '/article/first' },
+        { text: 'Second', url: '/article/second' },
+      ]);
+
+      expect(listsSpy.occurrences[1]).toHaveProperty('iconPosition', 'after');
+      expect(listsSpy.occurrences[1]).toHaveProperty('iconSize', 'xxl');
+      expect(listsSpy.occurrences[1]).toHaveProperty('itemsList', [
+        { text: 'A', url: '/article/a' },
+        { text: 'B', url: '/article/b' },
+      ]);
+    });
+  });
+});

package/components/related-content/_section-macro.njk

@@ -0,0 +1,10 @@
+{% macro onsRelatedContentSection(params) %}
+  <div class="ons-related-content__section">
+    {% if params.title %}
+      <h2 class="ons-related-content__title ons-u-fs-r--b ons-u-mb-xs" {% if params.id %}id="{{ params.id }}"{% endif %}>{{ params.title }}</h2>
+    {% endif %}
+    <div class="ons-related-content__content">
+      {{ caller() if caller }}
+    </div>
+  </div>
+{% endmacro %}

package/components/related-content/_section-macro.spec.js

@@ -0,0 +1,43 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent } from '../../tests/helpers/rendering';
+
+const EXAMPLE_RELATED_SECTION_CONTENT = {
+  title: 'Related information',
+  id: 'related-general-content',
+};
+
+describe('macro: related-content/section', () => {
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(renderComponent('related-content/section', EXAMPLE_RELATED_SECTION_CONTENT));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has the provided `title` text', () => {
+    const $ = cheerio.load(renderComponent('related-content/section', EXAMPLE_RELATED_SECTION_CONTENT));
+    expect(
+      $('.ons-related-content__title')
+        .text()
+        .trim(),
+    ).toEqual('Related information');
+  });
+
+  it('has the `id` attribute for the title', () => {
+    const $ = cheerio.load(renderComponent('related-content/section', EXAMPLE_RELATED_SECTION_CONTENT));
+    expect($('#related-general-content').length).toBe(1);
+  });
+
+  it('has the provided content', () => {
+    const $ = cheerio.load(renderComponent('related-content/section', { EXAMPLE_RELATED_SECTION_CONTENT }, 'Example content...'));
+
+    const content = $('.ons-related-content__content')
+      .text()
+      .trim();
+    expect(content).toEqual(expect.stringContaining('Example content...'));
+  });
+});

package/components/relationships/_macro.spec.js

@@ -0,0 +1,108 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const EXAMPLE_RELATIONSHIPS = {
+  playback: "Amanda Bloggs is Joe Bloggs' <em>…</em>",
+  name: 'relationship',
+  dontWrap: true,
+  legendIsQuestionTitle: true,
+  radios: [
+    {
+      id: 'grandparent',
+      value: 'grandparent',
+      label: {
+        text: 'Grandparent',
+      },
+      attributes: {
+        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <em>grandparents</em>',
+        'data-playback': "Amanda Bloggs is Joe Bloggs' <em>grandparents</em>",
+      },
+    },
+    {
+      id: 'other-relation',
+      value: 'other-relation',
+      label: {
+        text: 'Other relation',
+      },
+      attributes: {
+        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <em>other relation</em>',
+        'data-playback': "Amanda Bloggs is Joe Bloggs' <em>other relation</em>",
+      },
+    },
+    {
+      id: 'unrelated',
+      value: 'unrelated',
+      label: {
+        text: 'Unrelated',
+        description: 'Including foster child',
+      },
+      attributes: {
+        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is <em>unrelated</em> to Joe Bloggs',
+        'data-playback': 'Amanda Bloggs is <em>unrelated</em> to Joe Bloggs',
+      },
+    },
+  ],
+};
+
+describe('macro: relationships', () => {
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(renderComponent('relationships', EXAMPLE_RELATIONSHIPS));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has the expected `id` attribute', () => {
+    const $ = cheerio.load(
+      renderComponent('relationships', {
+        ...EXAMPLE_RELATIONSHIPS,
+        id: 'example-relationships',
+      }),
+    );
+
+    expect($('.ons-relationships').attr('id')).toBe('example-relationships');
+  });
+
+  it('has additionally provided style classes', () => {
+    const $ = cheerio.load(
+      renderComponent('relationships', {
+        ...EXAMPLE_RELATIONSHIPS,
+        classes: 'extra-class another-extra-class',
+      }),
+    );
+
+    expect($('.ons-relationships').hasClass('extra-class')).toBe(true);
+    expect($('.ons-relationships').hasClass('another-extra-class')).toBe(true);
+  });
+
+  it('has the provided `playback` text', () => {
+    const $ = cheerio.load(renderComponent('relationships', EXAMPLE_RELATIONSHIPS));
+
+    const playbackContent = $('.ons-relationships__playback')
+      .html()
+      .trim();
+    expect(playbackContent).toBe("Amanda Bloggs is Joe Bloggs' <em>…</em>");
+  });
+
+  it('has playback paragraph hidden initially', async () => {
+    const $ = cheerio.load(renderComponent('relationships', EXAMPLE_RELATIONSHIPS));
+
+    expect($('.ons-relationships__playback').hasClass('ons-u-d-no')).toBe(true);
+  });
+
+  it('renders the expected radio items the radios macro', () => {
+    const faker = templateFaker();
+    const radiosSpy = faker.spy('radios');
+
+    faker.renderComponent('relationships', EXAMPLE_RELATIONSHIPS);
+
+    expect(radiosSpy.occurrences[0]).toHaveProperty('name', 'relationship');
+    expect(radiosSpy.occurrences[0]).toHaveProperty('dontWrap', true);
+    expect(radiosSpy.occurrences[0]).toHaveProperty('legendIsQuestionTitle', true);
+    expect(radiosSpy.occurrences[0]).toHaveProperty('radios', EXAMPLE_RELATIONSHIPS.radios);
+  });
+});

package/components/relationships/relationships.spec.js

@@ -0,0 +1,84 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+const EXAMPLE_RELATIONSHIPS = {
+  dontWrap: true,
+  playback: "Amanda Bloggs is Joe Bloggs' <em>…</em>",
+  name: 'relationship',
+  radios: [
+    {
+      id: 'grandparent',
+      value: 'grandparent',
+      label: {
+        text: 'Grandparent',
+      },
+      attributes: {
+        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <em>grandparents</em>',
+        'data-playback': "Amanda Bloggs is Joe Bloggs' <em>grandparents</em>",
+      },
+    },
+    {
+      id: 'other-relation',
+      value: 'other-relation',
+      label: {
+        text: 'Other relation',
+      },
+      attributes: {
+        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <em>other relation</em>',
+        'data-playback': "Amanda Bloggs is Joe Bloggs' <em>other relation</em>",
+      },
+    },
+    {
+      id: 'unrelated',
+      value: 'unrelated',
+      label: {
+        text: 'Unrelated',
+        description: 'Including foster child',
+      },
+      attributes: {
+        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is <em>unrelated</em> to Joe Bloggs',
+        'data-playback': 'Amanda Bloggs is <em>unrelated</em> to Joe Bloggs',
+      },
+    },
+  ],
+};
+
+describe('script: relationships', () => {
+  beforeEach(async () => {
+    await setTestPage(
+      '/test',
+      renderComponent(
+        'question',
+        {
+          title: 'Thinking of Joe Bloggs, Amanda Bloggs is their <em>…</em>',
+          readDescriptionFirst: true,
+          legendIsQuestionTitle: true,
+          legendTitleClasses: 'ons-js-relationships-legend',
+        },
+        [renderComponent('relationships', EXAMPLE_RELATIONSHIPS)],
+      ),
+    );
+  });
+
+  describe('when the component initialises', () => {
+    it('then the playback paragraph should become visible', async () => {
+      const hasHideClass = await page.$eval('.ons-relationships__playback', node => node.classList.contains('ons-u-d-no'));
+      expect(hasHideClass).toBe(false);
+    });
+  });
+
+  describe('when the user selects a relationship', () => {
+    beforeEach(async () => {
+      await page.click('#other-relation');
+    });
+
+    it('the question title should be changed to reflect the relationship', async () => {
+      const headingText = await page.$eval('h1', element => element.innerHTML);
+      expect(headingText.trim()).toBe('Thinking of Joe Bloggs, Amanda Bloggs is their <em>other relation</em>');
+    });
+
+    it('the playback should be changed to reflect the relationship', async () => {
+      const playbackText = await page.$eval('.ons-relationships__playback', element => element.innerHTML);
+      expect(playbackText.trim()).toBe("Amanda Bloggs is Joe Bloggs' <em>other relation</em>");
+    });
+  });
+});

package/components/reply/_macro.njk

@@ -1,7 +1,7 @@
 {% macro onsReply(params) %}
     {% from "components/textarea/_macro.njk" import onsTextarea %}
     {% from "components/button/_macro.njk" import onsButton %}
-    <div class="ons-js-reply">
+    <div class="ons-reply ons-js-reply">
         {{
             onsTextarea({
                 "id": params.textarea.id,
@@ -23,7 +23,7 @@
                 }}
             </div>
             <div class="ons-grid__col ons-u-ml-m">
-                <a href="{{ params.closeLinkUrl }}">{{ params.closeLinkText }}</a>
+                <a class="ons-reply__link" href="{{ params.closeLinkUrl }}">{{ params.closeLinkText }}</a>
             </div>
         </div>
     </div>