@ons/design-system 50.0.1 → 51.0.0

package/components/search/_macro.njk

@@ -3,16 +3,18 @@
 
     {% set content = caller() %}
 
-    {{ content | safe }}
-    {{
-        onsButton({
-            "type": params.searchButton.type,
-            "text": params.searchButton.text,
-            "id": params.searchButton.id,
-            "variants": 'small',
-            "classes": 'ons-search__btn ons-u-mt-xs@xxs@s' + (" " + params.searchButton.classes if params.searchButton.classes else ""),
-            "attributes": params.searchButton.attributes,
-            "iconType": params.searchButton.iconType
-        })
-    }}
+    <div class="ons-search-component">
+        {{ content | safe }}
+        {{
+            onsButton({
+                "type": params.searchButton.type,
+                "text": params.searchButton.text,
+                "id": params.searchButton.id,
+                "variants": 'small',
+                "classes": 'ons-search__btn ons-u-mt-xs@xxs@s' + (" " + params.searchButton.classes if params.searchButton.classes else ""),
+                "attributes": params.searchButton.attributes,
+                "iconType": params.searchButton.iconType
+            })
+        }}
+    </div>
 {% endmacro %}

package/components/search/_macro.spec.js

@@ -0,0 +1,44 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const EXAMPLE_SEARCH = {
+  searchButton: {
+    id: 'search-button-id',
+    type: 'button',
+    text: 'Search for address',
+    iconType: 'search',
+    classes: 'extra-search-button-class',
+    attributes: { a: 42 },
+  },
+};
+
+const FAKE_NESTED_CONTENT = '<span class="test--nested">Nested content...</span>';
+
+describe('macro: search', () => {
+  it('renders expected nested content', () => {
+    const $ = cheerio.load(renderComponent('search', EXAMPLE_SEARCH, FAKE_NESTED_CONTENT));
+
+    expect($('.ons-search-component .test--nested').text()).toBe('Nested content...');
+  });
+
+  it('renders button component', () => {
+    const faker = templateFaker();
+    const buttonSpy = faker.spy('button');
+
+    faker.renderComponent('input', EXAMPLE_SEARCH);
+
+    expect(buttonSpy.occurrences[0]).toEqual({
+      id: 'search-button-id',
+      type: 'button',
+      text: 'Search for address',
+      variants: 'small',
+      classes: 'ons-search__btn ons-u-mt-xs@xxs@s extra-search-button-class',
+      attributes: EXAMPLE_SEARCH.searchButton.attributes,
+      iconType: 'search',
+    });
+  });
+});

package/components/search/_search.scss

@@ -1,16 +1,16 @@
-.ons-search {
+.ons-search-component {
+  display: flex;
   flex-flow: row wrap;
-  margin-left: -0.5rem;
-  margin-top: -0.5rem;
 
   @include mq(s) {
     flex-flow: row nowrap !important;
   }
-  &__btn {
+  .ons-search__btn {
     margin-top: -3px;
   }
-  &__btn,
-  &__input {
-    margin-left: 0.5rem;
+  .ons-search__btn {
+    @include mq(s) {
+      margin-left: 0.5rem;
+    }
   }
 }

package/components/section-navigation/_macro.njk

@@ -2,8 +2,13 @@
   <nav class="ons-section-nav{% if params.variants is defined and params.variants == 'vertical' %} ons-section-nav--vertical{% endif %}" id="{{ params.id }}" aria-label="{{ params.ariaLabel | default("Section menu") }}">
       <ul class="ons-section-nav__list">
         {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) %}
-          <li class="ons-section-nav__item {{ item.classes }}{{ ' ons-section-nav__item--active' if (item.url == params.currentPath) or (item.url in params.currentPath) or (params.tabQuery == item.title|lower) }}">
-            <a class="ons-section-nav__link" href="{{ item.url }}" {% if (item.url == params.currentPath) or (item.url in params.currentPath) or (params.tabQuery == item.title|lower) %} aria-current="location" {% endif %}>{{ item.title }}</a>
+          {% if (params.currentPath and (item.url == params.currentPath or item.url in params.currentPath)) or (params.tabQuery and params.tabQuery == item.title|lower) %}
+            {% set isCurrent = true %}
+          {% else %}
+            {% set isCurrent = false %}
+          {% endif %}
+          <li class="ons-section-nav__item{% if item.classes %} ' ' + {{ item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
+            <a class="ons-section-nav__link" href="{{ item.url }}"{% if isCurrent == true %} aria-current="location"{% endif %}>{{ item.title }}</a>
               {% if item.anchors is defined and item.anchors %}
                   <ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
                       {% for anchor in item.anchors %}

package/components/section-navigation/_macro.spec.js

@@ -0,0 +1,206 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { mapAll } from '../../tests/helpers/cheerio';
+import { renderComponent } from '../../tests/helpers/rendering';
+
+const EXAMPLE_SECTION_NAVIGATION = {
+  id: 'section-menu',
+  currentPath: '/results',
+  itemsList: [
+    {
+      title: 'Results',
+      url: '/results',
+    },
+    {
+      title: 'Dashboard',
+      url: '/results/dashboard',
+    },
+  ],
+};
+
+const EXAMPLE_SECTION_NAVIGATION_VERTICAL = {
+  variants: 'vertical',
+  currentPath: '#section-2',
+  itemsList: [
+    {
+      title: 'Section 1',
+      url: '#section-1',
+    },
+    {
+      title: 'Section 2',
+      url: '#section-2',
+      anchors: [
+        {
+          title: 'Sub section 1',
+          url: '#sub-section-1',
+        },
+        {
+          title: 'Sub section 2',
+          url: '#sub-section-2',
+        },
+        {
+          title: 'Sub section 3',
+          url: '#sub-section-3',
+        },
+      ],
+    },
+    {
+      title: 'Section 3',
+      url: '#0',
+    },
+  ],
+};
+
+describe('macro: section-navigation', () => {
+  describe('variant: horizontal', () => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('does not have the `vertical` modifier class', async () => {
+      const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
+
+      expect($('.ons-section-nav').hasClass('ons-section-nav--vertical')).toBe(false);
+    });
+  });
+
+  describe('variant: vertical', () => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION_VERTICAL));
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has the `vertical` modifier class', async () => {
+      const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION_VERTICAL));
+
+      expect($('.ons-section-nav').hasClass('ons-section-nav--vertical')).toBe(true);
+    });
+  });
+
+  it('has the provided `id` attribute', () => {
+    const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
+
+    expect($('.ons-section-nav').attr('id')).toBe('section-menu');
+  });
+
+  it('has the provided `ariaLabel` parameter', () => {
+    const $ = cheerio.load(
+      renderComponent('section-navigation', {
+        ...EXAMPLE_SECTION_NAVIGATION,
+        ariaLabel: 'Section navigation menu',
+      }),
+    );
+
+    expect($('.ons-section-nav').attr('aria-label')).toBe('Section navigation menu');
+  });
+
+  it('assumes a default `ariaLabel` of "Section menu"', () => {
+    const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
+
+    expect($('.ons-section-nav').attr('aria-label')).toBe('Section menu');
+  });
+
+  describe('navigation items', () => {
+    it('renders top level navigation items', () => {
+      const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
+
+      const itemLabels = mapAll($('.ons-section-nav__item .ons-section-nav__link'), node => node.text().trim());
+      expect(itemLabels).toEqual(['Results', 'Dashboard']);
+
+      const itemLinks = mapAll($('.ons-section-nav__item .ons-section-nav__link'), node => node.attr('href'));
+      expect(itemLinks).toEqual(['/results', '/results/dashboard']);
+    });
+
+    it('has additionally provided style classes', () => {
+      const $ = cheerio.load(
+        renderComponent('section-navigation', {
+          currentPath: '#section-1',
+          itemsList: [
+            {
+              classes: 'extra-class another-extra-class',
+              title: 'Section 1',
+              url: '#section-1',
+            },
+          ],
+        }),
+      );
+
+      expect($('.ons-section-nav__item').hasClass('extra-class')).toBe(true);
+      expect($('.ons-section-nav__item').hasClass('another-extra-class')).toBe(true);
+    });
+
+    it('marks the current item with a class when `currentPath` is provided', () => {
+      const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
+
+      expect(
+        $('.ons-section-nav__item--active')
+          .text()
+          .trim(),
+      ).toBe('Results');
+    });
+
+    it('marks the current item with a class when `tabQuery` is provided', () => {
+      const $ = cheerio.load(
+        renderComponent('section-navigation', {
+          ...EXAMPLE_SECTION_NAVIGATION,
+          currentPath: undefined,
+          tabQuery: 'dashboard',
+        }),
+      );
+
+      expect(
+        $('.ons-section-nav__item--active')
+          .text()
+          .trim(),
+      ).toBe('Dashboard');
+    });
+
+    it('marks the current item with `aria-current` when `currentPath` is provided', () => {
+      const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
+
+      expect($('.ons-section-nav__item--active .ons-section-nav__link').attr('aria-current')).toBe('location');
+    });
+
+    it('marks the current item with `aria-current` when `tabQuery` is provided', () => {
+      const $ = cheerio.load(
+        renderComponent('section-navigation', {
+          ...EXAMPLE_SECTION_NAVIGATION,
+          currentPath: undefined,
+          tabQuery: 'dashboard',
+        }),
+      );
+
+      expect($('.ons-section-nav__item--active .ons-section-nav__link').attr('aria-current')).toBe('location');
+    });
+
+    describe('nested anchor navigation items', () => {
+      it('renders anchor navigation list for top-level items that define `anchors`', () => {
+        const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION_VERTICAL));
+
+        expect($('.ons-section-nav__list > .ons-section-nav__item:nth-child(1) .ons-section-nav__sub-items').length).toBe(0);
+        expect($('.ons-section-nav__list > .ons-section-nav__item:nth-child(2) .ons-section-nav__sub-items').length).toBe(1);
+        expect($('.ons-section-nav__list > .ons-section-nav__item:nth-child(3) .ons-section-nav__sub-items').length).toBe(0);
+      });
+
+      it('renders the expected anchor navigation items', () => {
+        const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION_VERTICAL));
+
+        const itemLabels = mapAll($('.ons-section-nav__sub-items .ons-section-nav__item .ons-section-nav__link'), node =>
+          node.text().trim(),
+        );
+        expect(itemLabels).toEqual(['Sub section 1', 'Sub section 2', 'Sub section 3']);
+
+        const itemLinks = mapAll($('.ons-section-nav__sub-items .ons-section-nav__item .ons-section-nav__link'), node => node.attr('href'));
+        expect(itemLinks).toEqual(['#sub-section-1', '#sub-section-2', '#sub-section-3']);
+      });
+    });
+  });
+});

package/components/select/_macro.njk

@@ -4,7 +4,7 @@
 
     {% call onsField({
         "id": params.fieldId,
-        "classes": params.fieldClases,
+        "classes": params.fieldClasses,
         "legendClasses": params.legendClasses,
         "dontWrap": params.dontWrap,
         "error": params.error,
@@ -21,13 +21,13 @@
         <select
             id="{{ params.id }}"
             name="{{ params.name }}"
-            class="ons-input ons-input--select{% if params.classes %} {{ params.classes }}{% endif %}{% if params.select and params.select.error %} ons-input--error{% endif %}"
+            class="ons-input ons-input--select{% if params.classes %} {{ params.classes }}{% endif %}{% if params.error is defined and params.error %} ons-input--error{% endif %}"
             {% if params.value is defined and params.value %}value="{{ params.value}}" {% 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 %}
         >
             {% for option in params.options %}
             <option value="{{ option.value | default(option.text) }}"
-                {% if option.id is defined and option.id %}"id"="{{ option.id }}" {% endif %}
+                {% if option.id is defined and option.id %}id="{{ option.id }}" {% endif %}
                 {% if option.selected is defined and option.selected %}selected {% endif %}
                 {% if option.disabled is defined and option.disabled %}disabled {% endif %}
                 {% if params.attributes is defined and params.attributes %}{% for attribute, value in option.attributes %}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}

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

@@ -8,7 +8,7 @@
     {% 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 +21,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',