@ons/design-system 50.0.1 → 53.0.0

package/components/reply/_macro.spec.js

@@ -0,0 +1,69 @@
+/** @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: 'reply-textarea',
+  name: 'reply',
+  label: {
+    text: 'Reply',
+  },
+};
+
+const EXAMPLE_BUTTON = {
+  id: 'reply-button',
+  type: 'button',
+  text: 'Send message',
+  classes: 'u-mb-xs',
+};
+
+const EXAMPLE_REPLY = {
+  textarea: EXAMPLE_TEXTAREA,
+  button: EXAMPLE_BUTTON,
+  closeLinkText: 'Close conversation',
+  closeLinkUrl: '/close-conversation',
+};
+
+describe('macro: reply', () => {
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(renderComponent('reply', EXAMPLE_REPLY));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('renders the provided `textarea` using the `textarea` component', () => {
+    const faker = templateFaker();
+    const textareaSpy = faker.spy('textarea');
+
+    cheerio.load(faker.renderComponent('reply', EXAMPLE_REPLY));
+
+    expect(textareaSpy.occurrences[0]).toEqual(EXAMPLE_TEXTAREA);
+  });
+
+  it('renders the provided `button` using the `button` component', () => {
+    const faker = templateFaker();
+    const buttonSpy = faker.spy('button');
+
+    cheerio.load(faker.renderComponent('reply', EXAMPLE_REPLY));
+
+    expect(buttonSpy.occurrences[0]).toEqual(EXAMPLE_BUTTON);
+  });
+
+  it('has the expected hyperlink URL', async () => {
+    const $ = cheerio.load(renderComponent('reply', EXAMPLE_REPLY));
+
+    const $el = $('.ons-reply__link');
+    expect($el.attr('href')).toBe(EXAMPLE_REPLY.closeLinkUrl);
+  });
+
+  it('has the expected link text', async () => {
+    const $ = cheerio.load(renderComponent('reply', EXAMPLE_REPLY));
+
+    const $el = $('.ons-reply__link');
+    expect($el.text()).toBe(EXAMPLE_REPLY.closeLinkText);
+  });
+});

package/components/reply/reply.spec.js

@@ -0,0 +1,78 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+const EXAMPLE_REPLY = {
+  textarea: {
+    id: 'reply-textarea',
+    name: 'reply',
+    label: {
+      text: 'Reply',
+    },
+  },
+  button: {
+    id: 'reply-button',
+    type: 'button',
+    text: 'Send message',
+    classes: 'u-mb-xs',
+  },
+  closeLinkText: 'Close conversation',
+  closeLinkUrl: '/close-conversation',
+};
+
+describe('script: reply', () => {
+  describe('scenario: Empty textarea', () => {
+    it('the button is disabled', async () => {
+      await setTestPage('/test', renderComponent('reply', EXAMPLE_REPLY));
+
+      const disabledButton = await page.evaluate(() => document.querySelector('#reply-button').disabled);
+      expect(disabledButton).toBe(true);
+    });
+
+    it('the button has classes applied', async () => {
+      await setTestPage('/test', renderComponent('reply', EXAMPLE_REPLY));
+      const disabledButton = await page.$eval('#reply-button', element => element.classList.contains('ons-btn--disabled'));
+      expect(disabledButton).toBe(true);
+    });
+  });
+
+  describe('scenario: Filled textarea', () => {
+    it('the button is enabled', async () => {
+      await setTestPage('/test', renderComponent('reply', EXAMPLE_REPLY));
+      await page.focus('#reply-textarea');
+      await page.keyboard.type('Sausages');
+
+      const disabledButton = await page.evaluate(() => document.querySelector('#reply-button').disabled);
+      expect(disabledButton).toBe(false);
+    });
+
+    it('the button has classes removed', async () => {
+      await setTestPage('/test', renderComponent('reply', EXAMPLE_REPLY));
+      await page.focus('#reply-textarea');
+      await page.keyboard.type('Sausages');
+
+      const disabledButton = await page.$eval('#reply-button', element => element.classList.contains('ons-btn--disabled'));
+      expect(disabledButton).toBe(false);
+    });
+  });
+
+  describe('scenario: Filled then emptied textarea', () => {
+    it('the button is disabled', async () => {
+      await setTestPage('/test', renderComponent('reply', EXAMPLE_REPLY));
+      await page.focus('#reply-textarea');
+      await page.keyboard.type('s');
+      await page.keyboard.press('Backspace');
+
+      const disabledButton = await page.evaluate(() => document.querySelector('#reply-button').disabled);
+      expect(disabledButton).toBe(true);
+    });
+
+    it('the button has classes applied', async () => {
+      await setTestPage('/test', renderComponent('reply', EXAMPLE_REPLY));
+      await page.focus('#reply-textarea');
+      await page.keyboard.type('s');
+      await page.keyboard.press('Backspace');
+
+      const disabledButton = await page.$eval('#reply-button', element => element.classList.contains('ons-btn--disabled'));
+      expect(disabledButton).toBe(true);
+    });
+  });
+});

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