@ons/design-system 50.0.1 → 51.0.0

package/components/tabs/tabs.spec.js

@@ -0,0 +1,162 @@
+import puppeteer from 'puppeteer';
+
+import { setViewport } from '../../tests/helpers/puppeteer';
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+const EXAMPLE_TABS = {
+  title: 'Example tabs',
+  tabs: [
+    {
+      title: 'Tab 1',
+      content: 'First content...',
+    },
+    {
+      title: 'Tab 2',
+      content: 'Second content...',
+    },
+    {
+      title: 'Tab 3',
+      content: 'Third content...',
+    },
+  ],
+};
+
+describe('script: tabs', () => {
+  afterEach(async () => {
+    // Clear viewport size and browser emulation after each test.
+    await jestPuppeteer.resetPage();
+  });
+
+  describe('when the viewport is large', () => {
+    beforeEach(async () => {
+      await setViewport(page, { width: 1650, height: 1050 });
+      await setTestPage('/test', renderComponent('tabs', EXAMPLE_TABS));
+    });
+
+    it('has the "presentation" role assigned to tab list items', async () => {
+      const role = await page.$eval('.ons-tab__list-item', node => node.getAttribute('role'));
+      expect(role).toBe('presentation');
+    });
+
+    it('has the "tab" role assigned to each tab', async () => {
+      const tabRoleValues = await page.$$eval('.ons-tab', nodes => nodes.map(node => node.getAttribute('role')));
+
+      expect(tabRoleValues).toEqual(['tab', 'tab', 'tab']);
+    });
+
+    it('has "aria-controls" assigned to each tab with the corresponding panel id', async () => {
+      const ariaControlsValues = await page.$$eval('.ons-tab', nodes => nodes.map(node => node.getAttribute('aria-controls')));
+
+      expect(ariaControlsValues).toEqual(['tabId1', 'tabId2', 'tabId3']);
+    });
+
+    it('has "aria-selected" assigned to the first tab', async () => {
+      const ariaSelectedValue = await page.$eval('.ons-tab', node => node.getAttribute('aria-selected'));
+
+      expect(ariaSelectedValue).toBe('true');
+    });
+
+    it('has the "ons-tab--selected" class assigned to the first tab', async () => {
+      const hasClass = await page.$eval('.ons-tab', node => node.classList.contains('ons-tab--selected'));
+
+      expect(hasClass).toBe(true);
+    });
+
+    it('has "tabindex" assigned to each tab', async () => {
+      const tabIndexValues = await page.$$eval('.ons-tab', nodes => nodes.map(node => node.getAttribute('tabindex')));
+
+      expect(tabIndexValues).toEqual(['0', '-1', '-1']);
+    });
+
+    it('has only one visible tab panel', async () => {
+      const panelHiddenStates = await page.$$eval('.ons-tabs__panel', nodes =>
+        nodes.map(node => node.classList.contains('ons-tabs__panel--hidden')),
+      );
+
+      expect(panelHiddenStates).toEqual([false, true, true]);
+    });
+
+    describe('when a tab is clicked', () => {
+      beforeEach(async () => {
+        await page.focus('#tabId2Item a');
+        await page.keyboard.press('Enter');
+      });
+
+      it('is assigned a "tabindex" value', async () => {
+        const tabIndexValues = await page.$$eval('.ons-tab', nodes => nodes.map(node => node.getAttribute('tabindex')));
+
+        expect(tabIndexValues).toEqual(['-1', '0', '-1']);
+      });
+
+      it('has the "aria-selected" attribute', async () => {
+        const ariaSelectedValue = await page.$eval('#tabId2Item a', node => node.getAttribute('aria-selected'));
+
+        expect(ariaSelectedValue).toBe('true');
+      });
+
+      it('has the "ons-tab--selected" class assigned', async () => {
+        const hasClass = await page.$eval('#tabId2Item a', node => node.classList.contains('ons-tab--selected'));
+
+        expect(hasClass).toBe(true);
+      });
+
+      it('shows the corresponding panel', async () => {
+        const panelHiddenStates = await page.$$eval('.ons-tabs__panel', nodes =>
+          nodes.map(node => node.classList.contains('ons-tabs__panel--hidden')),
+        );
+
+        expect(panelHiddenStates).toEqual([true, false, true]);
+      });
+    });
+
+    describe('when the right arrow key is pressed', () => {
+      it('focuses the next tab', async () => {
+        await page.focus('#tabId2Item a');
+        await page.keyboard.press('ArrowRight');
+
+        const activeElementId = await page.evaluate(() => document.activeElement.parentElement.id);
+        expect(activeElementId).toBe('tabId3Item');
+      });
+    });
+
+    describe('when the left arrow key is pressed', () => {
+      it('focuses the previous tab', async () => {
+        await page.focus('#tabId2Item a');
+        await page.keyboard.press('ArrowLeft');
+
+        const activeElementId = await page.evaluate(() => document.activeElement.parentElement.id);
+        expect(activeElementId).toBe('tabId1Item');
+      });
+    });
+  });
+
+  describe('when the viewport is small', () => {
+    beforeEach(async () => {
+      await page.emulate(puppeteer.devices['iPhone X']);
+
+      await setTestPage('/test', renderComponent('tabs', EXAMPLE_TABS));
+    });
+
+    it('has no aria attributes on tabs', async () => {
+      const tabElements = await page.$$('.ons-tab');
+      for (let i = 0; i < 3; ++i) {
+        const hasRoleAttribute = await tabElements[i].evaluate(node => node.getAttribute('role') !== null);
+        expect(hasRoleAttribute).toBe(false);
+
+        const hasAriaControlsAttribute = await tabElements[i].evaluate(node => node.getAttribute('aria-controls') !== null);
+        expect(hasAriaControlsAttribute).toBe(false);
+
+        const hasAriaSelectedAttribute = await tabElements[i].evaluate(node => node.getAttribute('aria-selected') !== null);
+        expect(hasAriaSelectedAttribute).toBe(false);
+      }
+    });
+
+    it('has no hidden tab panels', async () => {
+      const panelCount = await page.$$eval('.ons-tabs__panel', nodes => nodes.length);
+      expect(panelCount).toBe(3);
+
+      const hiddenPanelCount = await page.$$eval('.ons-tabs__panel--hidden', nodes => nodes.length);
+      expect(hiddenPanelCount).toBe(0);
+    });
+  });
+});

package/components/text-indent/_macro.spec.js

@@ -0,0 +1,52 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent } from '../../tests/helpers/rendering';
+
+describe('macro: text-indent', () => {
+  describe('mode: text parameter', () => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(
+        renderComponent('text-indent', {
+          text: 'Example text...',
+        }),
+      );
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has expected text', async () => {
+      const $ = cheerio.load(
+        renderComponent('text-indent', {
+          text: 'Example text...',
+        }),
+      );
+
+      const content = $('.ons-text-indent')
+        .text()
+        .trim();
+      expect(content).toBe('Example text...');
+    });
+  });
+
+  describe('mode: called with content', () => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(renderComponent('text-indent', {}, 'Example content...'));
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has expected text', async () => {
+      const $ = cheerio.load(renderComponent('text-indent', {}, 'Example content...'));
+
+      const content = $('.ons-text-indent')
+        .text()
+        .trim();
+      expect(content).toBe('Example content...');
+    });
+  });
+});

package/components/textarea/_macro.njk

@@ -19,8 +19,10 @@
 
         <textarea
             id="{{ params.id }}"
-            class="ons-input ons-input--textarea {% if params.error is defined and params.error %} ons-input--error {% endif %}{% if params.charCheckLimit is defined and params.charCheckLimit and params.charCheckLimit.limit is defined and params.charCheckLimit.limit %} ons-js-char-limit-input{% endif %}{{ textareaExclusiveClass }} {{ params.classes }} {% if params.width is defined and params.width %}ons-input--w-{{ params.width }}{% endif %}"
-            name="{{ params.name }}"
+            class="ons-input ons-input--textarea {% if params.error is defined and params.error %} ons-input--error {% endif %}{% if params.charCheckLimit is defined and params.charCheckLimit and params.charCheckLimit.limit is defined and params.charCheckLimit.limit %} ons-js-char-limit-input{% endif %}{{ textareaExclusiveClass }} {{ params.classes if params.classes is defined and params.classes }} {% if params.width is defined and params.width %}ons-input--w-{{ params.width }}{% endif %}"
+            {% if params.name is defined and params.name %}
+             name="{{ params.name }}"
+            {% endif %}
             rows="{{ params.rows | default(8) }}"
             {% if params.charCheckLimit is defined and params.charCheckLimit and params.charCheckLimit.limit is defined and params.charCheckLimit.limit %}
                 maxlength="{{ params.charCheckLimit.limit }}"
@@ -28,7 +30,7 @@
                 aria-describedby="{{ params.id }}-lim-remaining"
             {% 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 %}
-        >{{ params.value }}</textarea>
+        >{{ params.value if params.value is defined and params.value }}</textarea>
 
         {% if params.charCheckLimit is defined and params.charCheckLimit and params.charCheckLimit.limit is defined and params.charCheckLimit.limit %}
             {% call onsCharLimit({

package/components/textarea/_macro.spec.js

@@ -0,0 +1,300 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const EXAMPLE_TEXTAREA = {
+  id: 'example-id',
+  name: 'feedback',
+  label: {
+    classes: 'extra-label-class',
+    text: 'Please provide some feedback',
+    description: 'For example, describe any difficulties you experienced in the use of this service',
+  },
+};
+
+const EXAMPLE_TEXTAREA_WITH_CHARACTER_LIMIT = {
+  ...EXAMPLE_TEXTAREA,
+  width: 30,
+  charCheckLimit: {
+    limit: 200,
+    charCountSingular: 'You have {x} character remaining',
+    charCountPlural: 'You have {x} characters remaining',
+  },
+};
+
+const EXAMPLE_TEXTAREA_WITH_ERROR = {
+  ...EXAMPLE_TEXTAREA,
+  error: {
+    id: 'feedback-error',
+    text: 'Enter your feedback',
+  },
+};
+
+const EXAMPLE_TEXTAREA_WITH_MUTUALLY_EXCLUSIVE_WITH_ERROR = {
+  ...EXAMPLE_TEXTAREA_WITH_ERROR,
+  dontWrap: true,
+  mutuallyExclusive: {
+    or: 'Or',
+    deselectMessage: 'Selecting this will clear your feedback',
+    deselectGroupAdjective: 'cleared',
+    deselectExclusiveOptionAdjective: 'deselected',
+    exclusiveOptions: [
+      {
+        id: 'feedback-exclusive-option',
+        name: 'no-feedback',
+        value: 'no-feedback',
+        label: {
+          text: 'I dont want to provide feedback',
+        },
+      },
+    ],
+  },
+};
+
+describe('macro: textarea', () => {
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(renderComponent('textarea', EXAMPLE_TEXTAREA));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has the provided `id` attribute', () => {
+    const $ = cheerio.load(renderComponent('textarea', EXAMPLE_TEXTAREA));
+
+    expect($('.ons-input--textarea').attr('id')).toBe('example-id');
+  });
+
+  it('has additionally provided classes', () => {
+    const $ = cheerio.load(
+      renderComponent('textarea', {
+        ...EXAMPLE_TEXTAREA,
+        classes: 'extra-class another-extra-class',
+      }),
+    );
+
+    expect($('.ons-input--textarea').hasClass('extra-class')).toBe(true);
+    expect($('.ons-input--textarea').hasClass('another-extra-class')).toBe(true);
+  });
+
+  it('has additionally provided `attributes`', () => {
+    const $ = cheerio.load(
+      renderComponent('textarea', {
+        ...EXAMPLE_TEXTAREA,
+        attributes: {
+          a: 123,
+          b: 456,
+        },
+      }),
+    );
+
+    expect($('.ons-input--textarea').attr('a')).toBe('123');
+    expect($('.ons-input--textarea').attr('b')).toBe('456');
+  });
+
+  it('has the provided `name` attribute', () => {
+    const $ = cheerio.load(renderComponent('textarea', EXAMPLE_TEXTAREA));
+
+    expect($('.ons-input--textarea').attr('name')).toBe('feedback');
+  });
+
+  it('defaults to having 8 rows of text', () => {
+    const $ = cheerio.load(renderComponent('textarea', EXAMPLE_TEXTAREA));
+
+    expect($('.ons-input--textarea').attr('rows')).toBe('8');
+  });
+
+  it('has the provided number of rows', () => {
+    const $ = cheerio.load(
+      renderComponent('textarea', {
+        ...EXAMPLE_TEXTAREA,
+        rows: 12,
+      }),
+    );
+
+    expect($('.ons-input--textarea').attr('rows')).toBe('12');
+  });
+
+  it('has a class representing the provided `width`', () => {
+    const $ = cheerio.load(
+      renderComponent('textarea', {
+        ...EXAMPLE_TEXTAREA,
+        width: 10,
+      }),
+    );
+
+    expect($('.ons-input--textarea').hasClass('ons-input--w-10')).toBe(true);
+  });
+
+  it('has no value initially', () => {
+    const $ = cheerio.load(renderComponent('textarea', EXAMPLE_TEXTAREA));
+
+    expect($('.ons-input--textarea').text()).toBe('');
+  });
+
+  it('has the provided initial value', () => {
+    const $ = cheerio.load(
+      renderComponent('textarea', {
+        ...EXAMPLE_TEXTAREA,
+        value: 'Initial value',
+      }),
+    );
+
+    expect($('.ons-input--textarea').text()).toBe('Initial value');
+  });
+
+  it('does not render label component when not specified', () => {
+    const faker = templateFaker();
+    const labelSpy = faker.spy('label');
+
+    faker.renderComponent('textarea', {
+      ...EXAMPLE_TEXTAREA,
+      label: undefined,
+    });
+
+    expect(labelSpy.occurrences.length).toBe(0);
+  });
+
+  it('renders label using the label component', () => {
+    const faker = templateFaker();
+    const labelSpy = faker.spy('label');
+
+    faker.renderComponent('textarea', EXAMPLE_TEXTAREA);
+
+    expect(labelSpy.occurrences).toContainEqual({
+      for: 'example-id',
+      text: 'Please provide some feedback',
+      description: 'For example, describe any difficulties you experienced in the use of this service',
+      classes: 'extra-label-class',
+    });
+  });
+
+  it('does not render character limit component when not specified', () => {
+    const faker = templateFaker();
+    const charCheckLimitSpy = faker.spy('char-check-limit');
+
+    faker.renderComponent('textarea', EXAMPLE_TEXTAREA);
+
+    expect(charCheckLimitSpy.occurrences.length).toBe(0);
+  });
+
+  it('renders field component', () => {
+    const faker = templateFaker();
+    const fieldSpy = faker.spy('field');
+
+    faker.renderComponent('textarea', {
+      ...EXAMPLE_TEXTAREA_WITH_ERROR,
+      dontWrap: true,
+      fieldId: 'example-field-id',
+      fieldClasses: 'extra-field-class',
+    });
+
+    expect(fieldSpy.occurrences).toContainEqual({
+      id: 'example-field-id',
+      classes: 'extra-field-class',
+      dontWrap: true,
+      error: EXAMPLE_TEXTAREA_WITH_ERROR.error,
+    });
+  });
+
+  describe('with character limit', () => {
+    it('has the `ons-js-char-limit-input` class', () => {
+      const $ = cheerio.load(renderComponent('textarea', EXAMPLE_TEXTAREA_WITH_CHARACTER_LIMIT));
+
+      expect($('.ons-input--textarea').hasClass('ons-js-char-limit-input')).toBe(true);
+    });
+
+    it('has the provided maximum length', () => {
+      const $ = cheerio.load(renderComponent('textarea', EXAMPLE_TEXTAREA_WITH_CHARACTER_LIMIT));
+
+      expect($('.ons-input--textarea').attr('maxlength')).toBe('200');
+    });
+
+    it('has data attribute which references the character limit component', () => {
+      const $ = cheerio.load(renderComponent('textarea', EXAMPLE_TEXTAREA_WITH_CHARACTER_LIMIT));
+
+      expect($('.ons-input--textarea').attr('data-char-limit-ref')).toBe('example-id-lim-remaining');
+    });
+
+    it('has `aria-describedby` attribute which references the character limit component', () => {
+      const $ = cheerio.load(renderComponent('textarea', EXAMPLE_TEXTAREA_WITH_CHARACTER_LIMIT));
+
+      expect($('.ons-input--textarea').attr('aria-describedby')).toBe('example-id-lim-remaining');
+    });
+
+    it('renders character limit component', () => {
+      const faker = templateFaker();
+      const charCheckLimitSpy = faker.spy('char-check-limit');
+
+      faker.renderComponent('textarea', EXAMPLE_TEXTAREA_WITH_CHARACTER_LIMIT);
+
+      expect(charCheckLimitSpy.occurrences).toContainEqual({
+        id: 'example-id-lim',
+        limit: 200,
+        charCountSingular: 'You have {x} character remaining',
+        charCountPlural: 'You have {x} characters remaining',
+      });
+    });
+  });
+
+  describe('with error', () => {
+    it('has the `error` modifier class', () => {
+      const $ = cheerio.load(renderComponent('textarea', EXAMPLE_TEXTAREA_WITH_ERROR));
+
+      expect($('.ons-input--textarea').hasClass('ons-input--error')).toBe(true);
+    });
+  });
+
+  describe('mutually exclusive', () => {
+    it('has the `ons-js-exclusive-group-item` class', () => {
+      const $ = cheerio.load(renderComponent('textarea', EXAMPLE_TEXTAREA_WITH_MUTUALLY_EXCLUSIVE_WITH_ERROR));
+
+      expect($('.ons-input--textarea').hasClass('ons-js-exclusive-group-item')).toBe(true);
+    });
+
+    it('renders mutually exclusive component', () => {
+      const faker = templateFaker();
+      const mutuallyExclusiveSpy = faker.spy('mutually-exclusive');
+
+      faker.renderComponent('textarea', {
+        ...EXAMPLE_TEXTAREA_WITH_MUTUALLY_EXCLUSIVE_WITH_ERROR,
+        fieldId: 'example-field-id',
+        fieldClasses: 'extra-field-class',
+        legend: 'Legend text',
+        legendClasses: 'extra-legend-class',
+        description: 'Example description text',
+        legendIsQuestionTitle: true,
+      });
+
+      expect(mutuallyExclusiveSpy.occurrences).toContainEqual({
+        id: 'example-field-id',
+        classes: 'extra-field-class',
+        legend: 'Legend text',
+        legendClasses: 'extra-legend-class',
+        description: 'Example description text',
+        dontWrap: true,
+        legendIsQuestionTitle: true,
+        exclusiveOptions: EXAMPLE_TEXTAREA_WITH_MUTUALLY_EXCLUSIVE_WITH_ERROR.mutuallyExclusive.exclusiveOptions,
+        or: 'Or',
+        deselectMessage: 'Selecting this will clear your feedback',
+        deselectGroupAdjective: 'cleared',
+        deselectExclusiveOptionAdjective: 'deselected',
+        error: EXAMPLE_TEXTAREA_WITH_MUTUALLY_EXCLUSIVE_WITH_ERROR.error,
+      });
+    });
+
+    it('still renders field component', () => {
+      const faker = templateFaker();
+      const fieldSpy = faker.spy('field');
+
+      faker.renderComponent('textarea', EXAMPLE_TEXTAREA_WITH_MUTUALLY_EXCLUSIVE_WITH_ERROR);
+
+      expect(fieldSpy.occurrences).toContainEqual({
+        error: EXAMPLE_TEXTAREA_WITH_MUTUALLY_EXCLUSIVE_WITH_ERROR.error,
+      });
+    });
+  });
+});

package/components/textarea/textarea.spec.js

@@ -0,0 +1,98 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+describe('script: textarea', () => {
+  describe('character limit', () => {
+    beforeEach(async () => {
+      await setTestPage(
+        '/test',
+        renderComponent('textarea', {
+          id: 'example-textarea',
+          name: 'feedback-limited',
+          width: '30',
+          label: {
+            text: 'Please provide some feedback',
+            description: 'For example describe any difficulties you experienced in the use of this service',
+          },
+          charCheckLimit: {
+            limit: 50,
+            charCountSingular: 'You have {x} character remaining',
+            charCountPlural: 'You have {x} characters remaining',
+          },
+        }),
+      );
+    });
+
+    describe('Given that the char limit helper has initialised correctly', () => {
+      it('the char limit readout should be visible', async () => {
+        const hasClass = await page.$eval('#example-textarea-lim-remaining', node => node.classList.contains('ons-u-d-no'));
+        expect(hasClass).toBe(false);
+      });
+    });
+
+    describe('Given that the user has not typed into the textarea', () => {
+      describe('when the user types into the textarea', () => {
+        beforeEach(async () => {
+          await page.type('#example-textarea', 'Lorem ipsum dolor.\nMorbi rhoncus amet.');
+        });
+
+        it('then the characters remaining readout reflect the number of characters remaining', async () => {
+          const readout = await page.$eval('#example-textarea-lim-remaining', node => node.textContent);
+          expect(readout).toBe('You have 12 characters remaining');
+        });
+      });
+
+      describe('when the user reaches/exceeds the maxlength of the textarea', () => {
+        beforeEach(async () => {
+          await page.type('#example-textarea', 'Lorem ipsum dolor sit amet, consectetur porttitor.');
+        });
+
+        it('then the characters remaining readout reflect the number of characters remaining', async () => {
+          const readout = await page.$eval('#example-textarea-lim-remaining', node => node.textContent);
+          expect(readout).toBe('You have 0 characters remaining');
+        });
+
+        it('then the textarea should be given limit reached classes', async () => {
+          const hasClass = await page.$eval('#example-textarea', node => node.classList.contains('ons-input--limit-reached'));
+          expect(hasClass).toBe(true);
+        });
+
+        it('then the readout should be given limit reached classes', async () => {
+          const hasClass = await page.$eval('#example-textarea-lim-remaining', node =>
+            node.classList.contains('ons-input__limit--reached'),
+          );
+          expect(hasClass).toBe(true);
+        });
+      });
+    });
+
+    describe('Given that the user has reached/exceeded the maxlength of the textarea', () => {
+      beforeEach(async () => {
+        await page.type('#example-textarea', 'Lorem ipsum dolor sit amet, consectetur porttitor.');
+      });
+
+      describe('when the user removes a character', () => {
+        beforeEach(async () => {
+          await page.focus('#example-textarea');
+          await page.keyboard.press('Backspace');
+        });
+
+        it('then the characters remaining readout reflect the number of characters remaining', async () => {
+          const readout = await page.$eval('#example-textarea-lim-remaining', node => node.textContent);
+          expect(readout).toBe('You have 1 character remaining');
+        });
+
+        it('then the textarea should not be given limit reached classes', async () => {
+          const hasClass = await page.$eval('#example-textarea', node => node.classList.contains('ons-input--limit-reached'));
+          expect(hasClass).toBe(false);
+        });
+
+        it('then the readout should not be given limit reached classes', async () => {
+          const hasClass = await page.$eval('#example-textarea-lim-remaining', node =>
+            node.classList.contains('ons-input__limit--reached'),
+          );
+          expect(hasClass).toBe(false);
+        });
+      });
+    });
+  });
+});

package/components/timeline/_macro.njk

@@ -6,11 +6,11 @@
 
         {% for item in params.items %}
         <div class="ons-timeline__item">
-            
+
             <h2 class="ons-timeline__heading">{{ item.heading }}</h2>
-            
+
             {% if item.itemsList is defined and item.itemsList %}
-            
+
                 {{
                     onsList({
                         "variants": 'bare',