@ons/design-system 70.0.7 → 70.0.9

package/components/reply/_macro.spec.js

@@ -6,70 +6,70 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_TEXTAREA = {
-  id: 'reply-textarea',
-  name: 'reply',
-  label: {
-    text: 'Reply',
-    description: 'Reply description',
-  },
-  charCheckLimit: {
-    limit: 300,
-    charCountSingular: '{x} more character needed',
-    charCountPlural: '{x} more characters needed',
-  },
-  rows: 5,
+    id: 'reply-textarea',
+    name: 'reply',
+    label: {
+        text: 'Reply',
+        description: 'Reply description',
+    },
+    charCheckLimit: {
+        limit: 300,
+        charCountSingular: '{x} more character needed',
+        charCountPlural: '{x} more characters needed',
+    },
+    rows: 5,
 };
 
 const EXAMPLE_BUTTON = {
-  id: 'reply-button',
-  type: 'button',
-  text: 'Send message',
-  classes: 'u-mb-xs',
+    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',
+    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));
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(renderComponent('reply', EXAMPLE_REPLY));
 
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
+        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');
+    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);
-  });
+        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');
+    it('renders the provided `button` using the `button` component', () => {
+        const faker = templateFaker();
+        const buttonSpy = faker.spy('button');
 
-    cheerio.load(faker.renderComponent('reply', EXAMPLE_REPLY));
+        cheerio.load(faker.renderComponent('reply', EXAMPLE_REPLY));
 
-    expect(buttonSpy.occurrences[0]).toEqual(EXAMPLE_BUTTON);
-  });
+        expect(buttonSpy.occurrences[0]).toEqual(EXAMPLE_BUTTON);
+    });
 
-  it('has the expected hyperlink URL', async () => {
-    const $ = cheerio.load(renderComponent('reply', EXAMPLE_REPLY));
+    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);
-  });
+        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));
+    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);
-  });
+        const $el = $('.ons-reply__link');
+        expect($el.text()).toBe(EXAMPLE_REPLY.closeLinkText);
+    });
 });

package/components/reply/reply-input.js

@@ -1,21 +1,21 @@
 export default class ReplyInput {
-  constructor(context) {
-    this.context = context;
-    this.input = this.context.querySelector('.ons-input');
-    this.button = this.context.querySelector('.ons-btn');
+    constructor(context) {
+        this.context = context;
+        this.input = this.context.querySelector('.ons-input');
+        this.button = this.context.querySelector('.ons-btn');
 
-    this.enableDisableButton(this.input);
+        this.enableDisableButton(this.input);
 
-    this.input.addEventListener('input', this.enableDisableButton.bind(this));
-  }
+        this.input.addEventListener('input', this.enableDisableButton.bind(this));
+    }
 
-  enableDisableButton() {
-    if (this.input.value.trim() != '') {
-      this.button.disabled = false;
-      this.button.classList.remove('ons-btn--disabled');
-    } else {
-      this.button.disabled = true;
-      this.button.classList.add('ons-btn--disabled');
+    enableDisableButton() {
+        if (this.input.value.trim() != '') {
+            this.button.disabled = false;
+            this.button.classList.remove('ons-btn--disabled');
+        } else {
+            this.button.disabled = true;
+            this.button.classList.add('ons-btn--disabled');
+        }
     }
-  }
 }

package/components/reply/reply.dom.js

@@ -1,13 +1,13 @@
 import domready from '../../js/domready';
 
 async function initialise() {
-  const replyInputs = [...document.querySelectorAll('.ons-js-reply')];
+    const replyInputs = [...document.querySelectorAll('.ons-js-reply')];
 
-  if (replyInputs.length) {
-    const ReplyInput = (await import('./reply-input')).default;
+    if (replyInputs.length) {
+        const ReplyInput = (await import('./reply-input')).default;
 
-    replyInputs.forEach((input) => new ReplyInput(input));
-  }
+        replyInputs.forEach((input) => new ReplyInput(input));
+    }
 }
 
 domready(initialise);

package/components/reply/reply.spec.js

@@ -1,78 +1,78 @@
 import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
 const EXAMPLE_REPLY = {
-  textarea: {
-    id: 'reply-textarea',
-    name: 'reply',
-    label: {
-      text: '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',
+    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));
+    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);
-    });
+            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);
+        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');
+    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);
-    });
+            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');
+        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);
+            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');
+    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);
-    });
+            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');
+        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);
+            const disabledButton = await page.$eval('#reply-button', (element) => element.classList.contains('ons-btn--disabled'));
+            expect(disabledButton).toBe(true);
+        });
     });
-  });
 });

package/components/section-navigation/_macro.njk

@@ -1,25 +1,39 @@
 {% macro onsSectionNavigation(params) %}
     {% set headingLevel = params.headingLevel | default(2) %}
     {% set sectionTitleHeadingLevel = headingLevel + 1 %}
-    <nav class="ons-section-nav{% if params.variants == 'vertical' %} ons-section-nav--vertical{% endif %} {% if params.classes %} {{ params.classes }} {% endif %}"{% if params.id %} id="{{ params.id }}"{% endif %} aria-labelledby="{{ params.hiddenTitleId | default("section-menu-nav-title")}}">
-        <h{{ headingLevel }} class="ons-u-vh" id="{{ params.hiddenTitleId | default("section-menu-nav-title") }}">{{ params.hiddenTitle | default("Pages in this section") }}</h{{ headingLevel }}>
+    {% set openingHeadingTag = "<h" + headingLevel | string %}
+    {% set closingHeadingTag = "</h" + headingLevel | string + ">" %}
+
+    <nav
+        class="ons-section-nav{{ ' ons-section-nav--vertical' if params.variants == 'vertical' }}{{ ' ' + params.classes if params.classes else '' }}"
+        {% if params.id %}id="{{ params.id }}"{% endif %}
+        aria-labelledby="{{ params.hiddenTitleId | default('section-menu-nav-title') }}"
+    >
+        {{ openingHeadingTag | safe }} class="ons-u-vh"
+        id="{{ params.hiddenTitleId | default('section-menu-nav-title') }}">{{ params.hiddenTitle | default("Pages in this section") }}{{ closingHeadingTag | safe }}
         {% if params.sections %}
             {% for section in params.sections %}
                 {% set sectionItemHeadingLevel = headingLevel + 2 if section.title else headingLevel + 1 %}
                 <div class="ons-section-nav__sub">
                     {% if section.title %}
-                        <h{{ sectionTitleHeadingLevel }} class="ons-u-fs-r--b ons-u-mb-s">{{ section.title }}</h{{ sectionTitleHeadingLevel }}>
+                        {{ openingHeadingTag | replace(headingLevel, sectionTitleHeadingLevel | string) | safe }}
+                        class="ons-u-fs-r--b
+                        ons-u-mb-s">{{ section.title }}{{ closingHeadingTag | replace(headingLevel, sectionTitleHeadingLevel | string) | safe }}
                     {% endif %}
                     <ul class="ons-section-nav__list">
                         {% for item in section.itemsList %}
-                            {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title|lower) %}
+                            {% if (params.currentPath and item.url == 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 %}">
+                            <li
+                                class="ons-section-nav__item{{ ' ' + item.classes if item.classes else '' }}{{ ' ons-section-nav__item--active' if isCurrent == true }}"
+                            >
                                 {% if isCurrent == true %}
-                                    <h{{ sectionItemHeadingLevel }} class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}" aria-current="location">{{ item.title }}</h{{ sectionItemHeadingLevel }}>
+                                    {{ openingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }}
+                                    class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}"
+                                    aria-current="location">{{ item.title }}{{ closingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }}
                                 {% else %}
                                     <a class="ons-section-nav__link" href="{{ item.url }}">{{ item.title }}</a>
                                 {% endif %}
@@ -27,7 +41,9 @@
                                     <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 %}
                                             <li class="ons-section-nav__item ons-list__item">
-                                                <a href="{{ anchor.url }}" class="ons-section-nav__link ons-list__link">{{ anchor.title }}</a>
+                                                <a href="{{ anchor.url }}" class="ons-section-nav__link ons-list__link"
+                                                    >{{ anchor.title }}</a
+                                                >
                                             </li>
                                         {% endfor %}
                                     </ul>
@@ -39,19 +55,25 @@
             {% endfor %}
         {% else %}
             {% if params.title %}
-                <h{{ sectionTitleHeadingLevel }} class="ons-u-fs-r--b ons-u-mb-s">{{ params.title }}</h{{ sectionTitleHeadingLevel }}>
+                {{ openingHeadingTag | replace(headingLevel, sectionTitleHeadingLevel | string) | safe }}
+                class="ons-u-fs-r--b
+                ons-u-mb-s">{{ params.title }}{{ closingHeadingTag | replace(headingLevel, sectionTitleHeadingLevel | string) }}
             {% endif %}
             <ul class="ons-section-nav__list">
                 {% for item in params.itemsList %}
                     {% set sectionItemHeadingLevel = headingLevel + 2 if params.title else headingLevel + 1 %}
-                    {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title|lower) %}
+                    {% if (params.currentPath and item.url == 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 %}">
-                        {% if isCurrent == true %} 
-                            <h{{ sectionItemHeadingLevel }} class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}" aria-current="location">{{ item.title }}</h{{ headingLevel + 2 if section.title else headingLevel + 1 }}>
+                    <li
+                        class="ons-section-nav__item{{ ' ' + item.classes if item.classes else '' }}{% if isCurrent == true %}{{ ' ' }}ons-section-nav__item--active{% endif %}"
+                    >
+                        {% if isCurrent == true %}
+                            {{ openingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }}
+                            class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}"
+                            aria-current="location">{{ item.title }}{{ closingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }}
                         {% else %}
                             <a class="ons-section-nav__link" href="{{ item.url }}">{{ item.title }}</a>
                         {% endif %}