@ons/design-system 50.0.0 → 52.0.0

package/components/duration/_macro.spec.js

@@ -0,0 +1,251 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const EXAMPLE_DURATION_INPUT_BASE = {
+  id: 'duration',
+  legendOrLabel: 'How long have you lived at this address?',
+  description: 'Enter “0” into the years field if you have lived at this address for less than a year',
+};
+
+const EXAMPLE_FIELD_1 = {
+  field1: {
+    id: 'address-duration-years',
+    name: 'address-duration-years',
+    value: '0',
+    suffix: {
+      text: 'Years',
+      id: 'address-duration-years-suffix',
+    },
+  },
+};
+
+const EXAMPLE_FIELD_2 = {
+  field2: {
+    id: 'address-duration-months',
+    name: 'address-duration-months',
+    value: '0',
+    suffix: {
+      text: 'Months',
+      id: 'address-duration-months-suffix',
+    },
+  },
+};
+
+const EXAMPLE_DURATION_SINGLE_FIELD = {
+  ...EXAMPLE_DURATION_INPUT_BASE,
+  ...EXAMPLE_FIELD_1,
+};
+
+const EXAMPLE_DURATION_MULTIPLE_FIELDS = {
+  ...EXAMPLE_DURATION_INPUT_BASE,
+  ...EXAMPLE_FIELD_1,
+  ...EXAMPLE_FIELD_2,
+};
+
+describe('macro: duration', () => {
+  describe('mode: multiple fields', () => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(renderComponent('duration', EXAMPLE_DURATION_MULTIPLE_FIELDS));
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has the expected `input` output for `field1`', () => {
+      const faker = templateFaker();
+      const inputSpy = faker.spy('input');
+
+      faker.renderComponent('duration', EXAMPLE_DURATION_MULTIPLE_FIELDS);
+
+      expect(inputSpy.occurrences[0]).toEqual({
+        id: 'address-duration-years',
+        type: 'number',
+        width: '2',
+        classes: '',
+        value: '0',
+        attributes: undefined,
+        classes: '',
+        error: '',
+        fieldId: '',
+        label: {
+          description: '',
+          text: '',
+        },
+        name: 'address-duration-years',
+        suffix: {
+          id: 'address-duration-years-suffix',
+          text: 'Years',
+          title: 'Years',
+        },
+      });
+
+      expect(inputSpy.occurrences[1]).toEqual({
+        id: 'address-duration-months',
+        type: 'number',
+        width: '2',
+        classes: '',
+        value: '0',
+        attributes: undefined,
+        classes: '',
+        error: '',
+        fieldId: '',
+        label: {
+          description: '',
+          text: '',
+        },
+        name: 'address-duration-months',
+        suffix: {
+          id: 'address-duration-months-suffix',
+          text: 'Months',
+          title: 'Months',
+        },
+      });
+    });
+
+    it('has the group class div', () => {
+      const $ = cheerio.load(renderComponent('duration', EXAMPLE_DURATION_MULTIPLE_FIELDS));
+      const div = $('.ons-field:first-child').parent();
+      expect($(div).hasClass('ons-field-group')).toBe(true);
+    });
+
+    it('has the expected `fieldset` output', () => {
+      const faker = templateFaker();
+      const fieldsetSpy = faker.spy('fieldset');
+
+      faker.renderComponent('duration', {
+        ...EXAMPLE_DURATION_MULTIPLE_FIELDS,
+        legendClasses: 'custom-legend-class',
+        dontWrap: true,
+        legendIsQuestionTitle: true,
+        error: false,
+      });
+
+      expect(fieldsetSpy.occurrences[0]).toEqual({
+        id: 'duration',
+        legend: 'How long have you lived at this address?',
+        description: 'Enter “0” into the years field if you have lived at this address for less than a year',
+        legendClasses: 'ons-u-mb-xs custom-legend-class',
+        dontWrap: true,
+        legendIsQuestionTitle: true,
+        error: false,
+      });
+    });
+  });
+
+  describe('mode: multiple fields with mutually exclusive', () => {
+    it('has the correct class on each input', async () => {
+      const $ = cheerio.load(
+        renderComponent('duration', {
+          ...EXAMPLE_DURATION_MULTIPLE_FIELDS,
+          mutuallyExclusive: {
+            legendClasses: 'custom-legend-class',
+            dontWrap: true,
+            legendIsQuestionTitle: true,
+            error: false,
+            mutuallyExclusive: {
+              checkbox: {},
+              or: 'Or',
+              deselectMessage: 'Deselect message',
+              deselectGroupAdjective: 'Deselect group adjective',
+              deselectExclusiveOptionAdjective: 'Deselect checkbox adjective',
+            },
+          },
+        }),
+      );
+
+      const exclusiveClassCount = $('.ons-js-exclusive-group-item').length;
+      expect(exclusiveClassCount).toBe(2);
+    });
+
+    it('has the expected `mutuallyExclusive` output', () => {
+      const faker = templateFaker();
+      const mutuallyExclusiveSpy = faker.spy('mutually-exclusive');
+
+      faker.renderComponent('duration', {
+        ...EXAMPLE_DURATION_MULTIPLE_FIELDS,
+        legendClasses: 'custom-legend-class',
+        dontWrap: true,
+        legendIsQuestionTitle: true,
+        error: false,
+        mutuallyExclusive: {
+          checkbox: {},
+          or: 'Or',
+          deselectMessage: 'Deselect message',
+          deselectGroupAdjective: 'Deselect group adjective',
+          deselectExclusiveOptionAdjective: 'Deselect checkbox adjective',
+        },
+      });
+
+      expect(mutuallyExclusiveSpy.occurrences[0]).toEqual({
+        id: 'duration',
+        legend: 'How long have you lived at this address?',
+        description: 'Enter “0” into the years field if you have lived at this address for less than a year',
+        legendClasses: 'custom-legend-class',
+        dontWrap: true,
+        legendIsQuestionTitle: true,
+        error: false,
+        checkbox: {},
+        or: 'Or',
+        deselectMessage: 'Deselect message',
+        deselectGroupAdjective: 'Deselect group adjective',
+        deselectExclusiveOptionAdjective: 'Deselect checkbox adjective',
+      });
+    });
+  });
+
+  describe('mode: single field', () => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(renderComponent('duration', EXAMPLE_DURATION_SINGLE_FIELD));
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has the expected `input` output for the field', () => {
+      const faker = templateFaker();
+      const inputSpy = faker.spy('input');
+
+      faker.renderComponent('duration', EXAMPLE_DURATION_SINGLE_FIELD);
+
+      expect(inputSpy.occurrences[0]).toEqual({
+        id: 'address-duration-years',
+        type: 'number',
+        width: '2',
+        classes: '',
+        value: '0',
+        attributes: undefined,
+        classes: '',
+        error: undefined,
+        fieldId: 'duration',
+        label: {
+          text: 'How long have you lived at this address?',
+          description: 'Enter “0” into the years field if you have lived at this address for less than a year',
+        },
+        name: 'address-duration-years',
+        suffix: {
+          id: 'address-duration-years-suffix',
+          text: 'Years',
+          title: 'Years',
+        },
+      });
+    });
+
+    it('has the expected `error` output', () => {
+      const faker = templateFaker();
+      const errorSpy = faker.spy('error');
+
+      faker.renderComponent('duration', {
+        ...EXAMPLE_DURATION_SINGLE_FIELD,
+        error: { text: 'Put something else', dsExample: false },
+      });
+
+      expect(errorSpy.occurrences[0]).toEqual({
+        text: 'Put something else',
+        dsExample: false,
+      });
+    });
+  });
+});

package/components/error/_macro.spec.js

@@ -0,0 +1,97 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const FAKE_NESTED_CONTENT = '<span class="test--nested">Nested content...</span>';
+
+describe('macro: error', () => {
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(
+      renderComponent(
+        'error',
+        {
+          text: 'Example error text.',
+          id: 'example-error',
+        },
+        FAKE_NESTED_CONTENT,
+      ),
+    );
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has the provided `text` text', () => {
+    const $ = cheerio.load(
+      renderComponent(
+        'error',
+        {
+          text: 'Example error text.',
+          id: 'example-error',
+        },
+        FAKE_NESTED_CONTENT,
+      ),
+    );
+
+    expect(
+      $('.ons-panel__error')
+        .text()
+        .trim(),
+    ).toBe('Example error text.');
+  });
+
+  it('applies the provided `attributes` to the error content paragraph', () => {
+    const $ = cheerio.load(
+      renderComponent(
+        'error',
+        {
+          text: 'Example error text.',
+          id: 'example-error',
+          attributes: {
+            'data-test-a': 'foo',
+            'data-test-b': 'bar',
+          },
+        },
+        FAKE_NESTED_CONTENT,
+      ),
+    );
+
+    expect($('.ons-panel__error').attr('data-test-a')).toBe('foo');
+    expect($('.ons-panel__error').attr('data-test-b')).toBe('bar');
+  });
+
+  it('renders output using a `panel` component', () => {
+    const faker = templateFaker();
+    const panelSpy = faker.spy('panel');
+
+    faker.renderComponent(
+      'error',
+      {
+        text: 'Example error text.',
+        id: 'example-error',
+      },
+      FAKE_NESTED_CONTENT,
+    );
+
+    expect(panelSpy.occurrences[0].type).toBe('error');
+    expect(panelSpy.occurrences[0].id).toBe('example-error');
+  });
+
+  it('renders output using a `panel` component with expected nested content', () => {
+    const $ = cheerio.load(
+      renderComponent(
+        'error',
+        {
+          text: 'Example error text.',
+          id: 'example-error',
+        },
+        FAKE_NESTED_CONTENT,
+      ),
+    );
+
+    expect($('.ons-panel .test--nested').text()).toBe('Nested content...');
+  });
+});

package/components/external-link/_macro.spec.js

@@ -0,0 +1,60 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent } from '../../tests/helpers/rendering';
+
+const EXAMPLE_EXTERNAL_LINK = {
+  url: 'http://example.com',
+  linkText: 'Example link',
+};
+
+describe('macro: external-link', () => {
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has additionally provided style classes', () => {
+    const $ = cheerio.load(
+      renderComponent('external-link', {
+        ...EXAMPLE_EXTERNAL_LINK,
+        classes: 'extra-class another-extra-class',
+      }),
+    );
+
+    expect($('.ons-external-link').hasClass('extra-class')).toBe(true);
+    expect($('.ons-external-link').hasClass('another-extra-class')).toBe(true);
+  });
+
+  it('has the expected hyperlink URL', async () => {
+    const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
+
+    const $hyperlink = $('a.ons-external-link');
+    expect($hyperlink.attr('href')).toBe('http://example.com');
+  });
+
+  it('opens in a new window when `newWindow` is `true`', () => {
+    const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
+
+    expect($('a').attr('target')).toBe('_blank');
+    expect($('a').attr('rel')).toBe('noopener');
+  });
+
+  it('has the expected link text', async () => {
+    const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
+
+    const $hyperlink = $('a.ons-external-link');
+    expect($hyperlink.text().trim()).toBe('Example link');
+  });
+
+  it('has an "external-link" icon', async () => {
+    const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
+
+    const $svg = $('.ons-external-link__icon svg');
+    expect($svg.length).toBe(1);
+  });
+});

package/components/feedback/_macro.njk

@@ -1,8 +1,10 @@
 {% macro onsFeedback(params) %}
     {% set headingLevel = params.headingLevel | default("2") %}
-    <div id="params.id" class="ons-feedback{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}">
-        <h{{ headingLevel }}{% if params.headingClasses is defined and params.headingClasses %} class="ons-{{ params.headingClasses }}"{% endif %}>{{ params.heading }}</h{{ headingLevel }}>
-        <p>{{ params.content }}</p>
+    <div {% if params.id is defined and params.id %} id="{{ params.id }}"{% endif %} class="ons-feedback{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}">
+        <h{{ headingLevel }} class="ons-feedback__heading{{ ' ' + params.headingClasses if params.headingClasses is defined and params.headingClasses }}">
+            {{ params.heading }}
+        </h{{ headingLevel }}>
+        <p class="ons-feedback__content">{{- params.content | safe -}}</p>
         <a href="{{ params.url }}" class="ons-feedback__link">{{- params.linkText -}}</a>
     </div>
 {% endmacro %}

package/components/feedback/_macro.spec.js

@@ -0,0 +1,122 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent } from '../../tests/helpers/rendering';
+
+const EXAMPLE_FEEDBACK_MINIMAL = {
+  heading: 'Feedback heading',
+  content: 'Feedback content...',
+  url: 'http://example.com',
+  linkText: 'Feedback link text',
+};
+
+const EXAMPLE_FEEDBACK_FULL = {
+  id: 'example-feedback',
+  classes: 'extra-class',
+  heading: 'Feedback heading',
+  headingLevel: 5,
+  headingClasses: 'extra-heading-class another-extra-heading-class',
+  content: 'Feedback content...',
+  url: 'http://example.com',
+  linkText: 'Feedback link text',
+};
+
+describe('macro: feedback', () => {
+  it('passes jest-axe checks with minimum parameters', async () => {
+    const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('passes jest-axe checks with full parameters', async () => {
+    const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_FULL));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has the provided `id` attribute', () => {
+    const $ = cheerio.load(
+      renderComponent('feedback', {
+        id: 'example-id',
+      }),
+    );
+
+    expect($('#example-id').length).toBe(1);
+  });
+
+  it('has additionally provided style classes', () => {
+    const $ = cheerio.load(
+      renderComponent('feedback', {
+        classes: 'extra-class another-extra-class',
+      }),
+    );
+
+    expect($('.ons-feedback').hasClass('extra-class')).toBe(true);
+    expect($('.ons-feedback').hasClass('another-extra-class')).toBe(true);
+  });
+
+  it.each([
+    [1, 'h1'],
+    [4, 'h4'],
+  ])('has the correct element type for the provided `headingLevel` (%i -> %s)', (headingLevel, expectedTitleTag) => {
+    const $ = cheerio.load(
+      renderComponent('feedback', {
+        ...EXAMPLE_FEEDBACK_MINIMAL,
+        headingLevel,
+      }),
+    );
+
+    expect(
+      $(`${expectedTitleTag}.ons-feedback__heading`)
+        .text()
+        .trim(),
+    ).toBe('Feedback heading');
+  });
+
+  it('has a default `headingLevel` of 2', () => {
+    const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
+
+    expect(
+      $(`h2.ons-feedback__heading`)
+        .text()
+        .trim(),
+    ).toBe('Feedback heading');
+  });
+
+  it('has additional heading style classes', () => {
+    const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_FULL));
+
+    expect($('.ons-feedback__heading').hasClass('extra-heading-class')).toBe(true);
+    expect($('.ons-feedback__heading').hasClass('another-extra-heading-class')).toBe(true);
+  });
+
+  it('has a paragraph with the provided `content`', () => {
+    const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
+
+    expect(
+      $('p')
+        .text()
+        .trim(),
+    ).toBe('Feedback content...');
+  });
+
+  it('has a link with the provided `url`', () => {
+    const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
+
+    expect($('.ons-feedback__link').attr('href')).toBe('http://example.com');
+  });
+
+  it('has a link with the provided `linkText`', () => {
+    const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
+
+    expect(
+      $('.ons-feedback__link')
+        .text()
+        .trim(),
+    ).toBe('Feedback link text');
+  });
+});

package/components/field/_macro.njk

@@ -7,14 +7,14 @@
 
     {% set field %}
         {% if params.dontWrap is defined and params.dontWrap %}
-            {{ caller() }}
+            {{- caller() if caller -}}
         {% else %}
             <div
                 {% if params.id is defined and params.id %}id="{{ params.id }}"{% endif %}
                 class="ons-field{% if params.inline is defined and params.inline %} ons-field--inline{% endif %}{% if params.classes is defined and params.classes %} {{ params.classes }}{% 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 %}
             >
-                {{ caller() }}
+                {{- caller() if caller -}}
             </div>
         {% endif %}
     {% endset %}

package/components/field/_macro.spec.js

@@ -0,0 +1,97 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const EXAMPLE_FIELD_BASIC = {
+  id: 'example-field',
+};
+
+describe('macro: field', () => {
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(renderComponent('field', EXAMPLE_FIELD_BASIC));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has the provided `id` attribute', () => {
+    const $ = cheerio.load(renderComponent('field', EXAMPLE_FIELD_BASIC));
+
+    expect($('.ons-field').attr('id')).toBe('example-field');
+  });
+
+  it('has additionally provided style classes', () => {
+    const $ = cheerio.load(
+      renderComponent('field', {
+        ...EXAMPLE_FIELD_BASIC,
+        classes: 'extra-class another-extra-class',
+      }),
+    );
+
+    expect($('.ons-field').hasClass('extra-class')).toBe(true);
+    expect($('.ons-field').hasClass('another-extra-class')).toBe(true);
+  });
+
+  it('has correct class when `inline` is provided', () => {
+    const $ = cheerio.load(
+      renderComponent('field', {
+        ...EXAMPLE_FIELD_BASIC,
+        inline: true,
+      }),
+    );
+
+    expect($('.ons-field').hasClass('ons-field--inline')).toBe(true);
+  });
+
+  it('has additionally provided `attributes`', () => {
+    const $ = cheerio.load(
+      renderComponent('field', {
+        ...EXAMPLE_FIELD_BASIC,
+        attributes: {
+          a: 123,
+          b: 456,
+        },
+      }),
+    );
+
+    expect($('.ons-field').attr('a')).toBe('123');
+    expect($('.ons-field').attr('b')).toBe('456');
+  });
+
+  it('has the correct element with `dontWrap`', () => {
+    const $ = cheerio.load(
+      renderComponent('field', {
+        ...EXAMPLE_FIELD_BASIC,
+        dontWrap: true,
+      }),
+    );
+
+    expect($('.ons-field').length).toBe(0);
+  });
+
+  it('calls with content', () => {
+    const $ = cheerio.load(renderComponent('field', EXAMPLE_FIELD_BASIC, 'Example content...'));
+
+    const content = $('.ons-field')
+      .html()
+      .trim();
+    expect(content).toEqual(expect.stringContaining('Example content...'));
+  });
+
+  it('calls the error component when `error` is provided', () => {
+    const faker = templateFaker();
+    const errorSpy = faker.spy('error');
+
+    faker.renderComponent('field', {
+      ...EXAMPLE_FIELD_BASIC,
+      error: { text: 'There is an error' },
+    });
+
+    expect(errorSpy.occurrences[0]).toEqual({
+      text: 'There is an error',
+    });
+  });
+});

package/components/fieldset/_macro.njk

@@ -4,7 +4,7 @@
     {% set fieldset -%}
         {% if params.dontWrap is defined and params.dontWrap -%}
             <div class="ons-input-items">
-                {{- caller() -}}
+                {{- caller() if caller -}}
             </div>
         {%- elif (params.legend is defined and params.legend) or (params.legendIsQuestionTitle is defined and params.legendIsQuestionTitle) -%}
             <fieldset
@@ -18,7 +18,7 @@
                             {{- params.legend | safe -}}
                         </h1>
                     {%- else -%}
-                        {{- params.legend | safe -}}
+                        <span class="ons-fieldset__legend-title">{{- params.legend | safe -}}</span>
                     {%- endif -%}
                     {%- if params.description is defined and params.description -%}
                         <div class="ons-fieldset__description{% if params.legendIsQuestionTitle %} ons-fieldset__description--title ons-u-mb-m{% endif %}">
@@ -26,7 +26,7 @@
                         </div>
                     {%- endif -%}
                 </legend>
-                {{- caller() -}}
+                {{- caller() if caller -}}
             </fieldset>
         {%- endif %}
     {%- endset %}