@ons/design-system 70.0.7 → 70.0.9

package/components/textarea/textarea.spec.js

@@ -1,94 +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', (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', () => {
+    describe('character limit', () => {
         beforeEach(async () => {
-          await page.type('#example-textarea', 'Lorem ipsum dolor.\nMorbi rhoncus amet.');
+            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',
+                    },
+                }),
+            );
         });
 
-        it('then the characters remaining readout reflect the number of characters remaining', async () => {
-          const readout = await page.$eval('#example-textarea-lim', (node) => node.textContent);
-          expect(readout).toBe('You have 12 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', (node) => node.classList.contains('ons-u-d-no'));
+                expect(hasClass).toBe(false);
+            });
         });
-      });
 
-      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.');
-        });
+        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', (node) => node.textContent);
-          expect(readout).toBe('You have 0 characters remaining');
-        });
+                it('then the characters remaining readout reflect the number of characters remaining', async () => {
+                    const readout = await page.$eval('#example-textarea-lim', (node) => node.textContent);
+                    expect(readout).toBe('You have 12 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);
-        });
+            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 readout should be given limit reached classes', async () => {
-          const hasClass = await page.$eval('#example-textarea-lim', (node) => node.classList.contains('ons-input__limit--reached'));
-          expect(hasClass).toBe(true);
-        });
-      });
-    });
+                it('then the characters remaining readout reflect the number of characters remaining', async () => {
+                    const readout = await page.$eval('#example-textarea-lim', (node) => node.textContent);
+                    expect(readout).toBe('You have 0 characters remaining');
+                });
 
-    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.');
-      });
+                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);
+                });
 
-      describe('when the user removes a character', () => {
-        beforeEach(async () => {
-          await page.focus('#example-textarea');
-          await page.keyboard.press('Backspace');
+                it('then the readout should be given limit reached classes', async () => {
+                    const hasClass = await page.$eval('#example-textarea-lim', (node) =>
+                        node.classList.contains('ons-input__limit--reached'),
+                    );
+                    expect(hasClass).toBe(true);
+                });
+            });
         });
 
-        it('then the characters remaining readout reflect the number of characters remaining', async () => {
-          const readout = await page.$eval('#example-textarea-lim', (node) => node.textContent);
-          expect(readout).toBe('You have 1 character remaining');
-        });
+        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.');
+            });
 
-        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);
-        });
+            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', (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', (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', (node) =>
+                        node.classList.contains('ons-input__limit--reached'),
+                    );
+                    expect(hasClass).toBe(false);
+                });
+            });
         });
-      });
     });
-  });
 });

package/components/timeline/_macro.njk

@@ -1,12 +1,13 @@
 {% macro onsTimeline(params) %}
-
     {% from "components/list/_macro.njk" import onsList %}
 
     <div class="ons-timeline{{ ' ' + params.classes if params.classes else '' }}">
         {% set titleTag = params.titleTag | default("h2") %}
+        {% set openingTag = "<" + titleTag %}
+        {% set closingTag = "</" + titleTag + ">" %}
         {% for item in params.items %}
             <div class="ons-timeline__item">
-                <{{ titleTag }} class="ons-timeline__heading">{{ item.heading }}</{{ titleTag }}>
+                {{ openingTag | safe }} class="ons-timeline__heading">{{ item.heading }}{{ closingTag | safe }}
                 {% if item.itemsList %}
                     <div class="ons-timeline__content">
                         {{
@@ -17,12 +18,9 @@
                         }}
                     </div>
                 {% elif item.content %}
-                    <div class="ons-timeline__content">
-                        {{ item.content | safe }}
-                    </div>
+                    <div class="ons-timeline__content">{{ item.content | safe }}</div>
                 {% endif %}
             </div>
         {% endfor %}
     </div>
-
 {% endmacro %}

package/components/timeline/_macro.spec.js

@@ -6,94 +6,94 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_TIMELINE = {
-  items: [
-    {
-      heading: 'January 2020',
-      content: 'Timeline entry 1',
-    },
-    {
-      heading: 'March 2020',
-      content: 'Timeline entry 2',
-    },
-    {
-      heading: 'December 2020',
-      itemsList: [
+    items: [
         {
-          text: 'Timeline entry 3 item 1',
+            heading: 'January 2020',
+            content: 'Timeline entry 1',
         },
         {
-          text: 'Timeline entry 3 item 2',
+            heading: 'March 2020',
+            content: 'Timeline entry 2',
         },
-      ],
-    },
-  ],
+        {
+            heading: 'December 2020',
+            itemsList: [
+                {
+                    text: 'Timeline entry 3 item 1',
+                },
+                {
+                    text: 'Timeline entry 3 item 2',
+                },
+            ],
+        },
+    ],
 };
 
 describe('macro: timeline', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(renderComponent('timeline', EXAMPLE_TIMELINE));
-
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
-
-  it('has additionally provided style classes', () => {
-    const $ = cheerio.load(
-      renderComponent('timeline', {
-        ...EXAMPLE_TIMELINE,
-        classes: 'extra-class another-extra-class',
-      }),
-    );
-
-    expect($('.ons-timeline').hasClass('extra-class')).toBe(true);
-    expect($('.ons-timeline').hasClass('another-extra-class')).toBe(true);
-  });
-
-  it('has the provided timeline items', () => {
-    const $ = cheerio.load(renderComponent('timeline', EXAMPLE_TIMELINE));
-
-    const $firstItem = $('.ons-timeline__item:nth-child(1)');
-    const $firstItemHeading = $firstItem.find('.ons-timeline__heading');
-    const $secondItem = $('.ons-timeline__item:nth-child(2)');
-    const $secondItemHeading = $secondItem.find('.ons-timeline__heading');
-
-    expect($firstItemHeading.text().trim()).toBe('January 2020');
-    expect($firstItem.text()).toContain('Timeline entry 1');
-    expect($secondItemHeading.text().trim()).toBe('March 2020');
-    expect($secondItem.text()).toContain('Timeline entry 2');
-  });
-
-  it('renders a heading based upon titleTag parameter', () => {
-    const EXAMPLE_TIMELINE_WITH_TITLE_TAG = {
-      ...EXAMPLE_TIMELINE,
-      titleTag: 'h3',
-    };
-    const $ = cheerio.load(renderComponent('timeline', EXAMPLE_TIMELINE_WITH_TITLE_TAG));
-    const $firstItem = $('.ons-timeline__item:nth-child(1)');
-    expect($firstItem.html().includes('h3')).toBe(true);
-  });
-
-  it('has a provided ons-timeline__content class, wrapping the content', () => {
-    const $ = cheerio.load(renderComponent('timeline', EXAMPLE_TIMELINE));
-
-    const $content = $('.ons-timeline__content');
-
-    expect($content.length).toBe(3);
-  });
-
-  it('has the provided inner item list', () => {
-    const faker = templateFaker();
-    const listSpy = faker.spy('list');
-
-    faker.renderComponent('timeline', EXAMPLE_TIMELINE);
-
-    expect(listSpy.occurrences[0].itemsList).toEqual([
-      {
-        text: 'Timeline entry 3 item 1',
-      },
-      {
-        text: 'Timeline entry 3 item 2',
-      },
-    ]);
-  });
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(renderComponent('timeline', EXAMPLE_TIMELINE));
+
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
+
+    it('has additionally provided style classes', () => {
+        const $ = cheerio.load(
+            renderComponent('timeline', {
+                ...EXAMPLE_TIMELINE,
+                classes: 'extra-class another-extra-class',
+            }),
+        );
+
+        expect($('.ons-timeline').hasClass('extra-class')).toBe(true);
+        expect($('.ons-timeline').hasClass('another-extra-class')).toBe(true);
+    });
+
+    it('has the provided timeline items', () => {
+        const $ = cheerio.load(renderComponent('timeline', EXAMPLE_TIMELINE));
+
+        const $firstItem = $('.ons-timeline__item:nth-child(1)');
+        const $firstItemHeading = $firstItem.find('.ons-timeline__heading');
+        const $secondItem = $('.ons-timeline__item:nth-child(2)');
+        const $secondItemHeading = $secondItem.find('.ons-timeline__heading');
+
+        expect($firstItemHeading.text().trim()).toBe('January 2020');
+        expect($firstItem.text()).toContain('Timeline entry 1');
+        expect($secondItemHeading.text().trim()).toBe('March 2020');
+        expect($secondItem.text()).toContain('Timeline entry 2');
+    });
+
+    it('renders a heading based upon titleTag parameter', () => {
+        const EXAMPLE_TIMELINE_WITH_TITLE_TAG = {
+            ...EXAMPLE_TIMELINE,
+            titleTag: 'h3',
+        };
+        const $ = cheerio.load(renderComponent('timeline', EXAMPLE_TIMELINE_WITH_TITLE_TAG));
+        const $firstItem = $('.ons-timeline__item:nth-child(1)');
+        expect($firstItem.html().includes('h3')).toBe(true);
+    });
+
+    it('has a provided ons-timeline__content class, wrapping the content', () => {
+        const $ = cheerio.load(renderComponent('timeline', EXAMPLE_TIMELINE));
+
+        const $content = $('.ons-timeline__content');
+
+        expect($content.length).toBe(3);
+    });
+
+    it('has the provided inner item list', () => {
+        const faker = templateFaker();
+        const listSpy = faker.spy('list');
+
+        faker.renderComponent('timeline', EXAMPLE_TIMELINE);
+
+        expect(listSpy.occurrences[0].itemsList).toEqual([
+            {
+                text: 'Timeline entry 3 item 1',
+            },
+            {
+                text: 'Timeline entry 3 item 2',
+            },
+        ]);
+    });
 });

package/components/timeline/_timeline.scss

@@ -1,37 +1,37 @@
 .ons-timeline {
-  padding-left: 1.5rem;
-  position: relative;
+    padding-left: 1.5rem;
+    position: relative;
 
-  &::before {
-    border-left: 4px solid var(--ons-color-black);
-    content: '';
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top: 10px;
-  }
+    &::before {
+        border-left: 4px solid var(--ons-color-black);
+        content: '';
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 10px;
+    }
 }
 
 .ons-timeline__item {
-  margin-bottom: 1.5rem;
-  position: relative;
+    margin-bottom: 1.5rem;
+    position: relative;
 
-  &::before {
-    background-color: var(--ons-color-black);
-    content: '';
-    height: 4px;
-    left: -1.5rem;
-    position: absolute;
-    top: 10px;
-    width: 12px;
-  }
+    &::before {
+        background-color: var(--ons-color-black);
+        content: '';
+        height: 4px;
+        left: -1.5rem;
+        position: absolute;
+        top: 10px;
+        width: 12px;
+    }
 
-  :last-child {
-    margin-bottom: 0;
-  }
+    :last-child {
+        margin-bottom: 0;
+    }
 }
 
 .ons-timeline__heading {
-  font-size: 1rem !important;
-  margin-bottom: 0.5rem;
+    font-size: 1rem !important;
+    margin-bottom: 0.5rem;
 }

package/components/timeout-modal/_macro.njk

@@ -1,24 +1,26 @@
 {% from "components/modal/_macro.njk" import onsModal %}
 {% macro onsTimeoutModal(params) %}
-    {% call onsModal({
-        "title": params.title,
-        "btnText": params.btnText,
-        "classes": "ons-js-timeout-modal",
-        "attributes": {
-            "data-redirect-url": params.redirectUrl,
-            "data-server-session-expires-at": params.sessionExpiresAt,
-            "data-show-modal-time": params.showModalTimeInSeconds,
-            "data-server-session-expiry-endpoint": params.serverSessionExpiryEndpoint,
-            "data-countdown-text": params.countdownText,
-            "data-countdown-expired-text": params.countdownExpiredText,
-            "data-minutes-text-singular": params.minutesTextSingular,
-            "data-minutes-text-plural": params.minutesTextPlural,
-            "data-seconds-text-singular": params.secondsTextSingular,
-            "data-seconds-text-plural": params.secondsTextPlural,
-            "data-full-stop": params.endWithFullStop,
-            "aria-describedby": "timeout-time-remaining"
-        }
-    }) %}
+    {%
+        call onsModal({
+            "title": params.title,
+            "btnText": params.btnText,
+            "classes": "ons-js-timeout-modal",
+            "attributes": {
+                "data-redirect-url": params.redirectUrl,
+                "data-server-session-expires-at": params.sessionExpiresAt,
+                "data-show-modal-time": params.showModalTimeInSeconds,
+                "data-server-session-expiry-endpoint": params.serverSessionExpiryEndpoint,
+                "data-countdown-text": params.countdownText,
+                "data-countdown-expired-text": params.countdownExpiredText,
+                "data-minutes-text-singular": params.minutesTextSingular,
+                "data-minutes-text-plural": params.minutesTextPlural,
+                "data-seconds-text-singular": params.secondsTextSingular,
+                "data-seconds-text-plural": params.secondsTextPlural,
+                "data-full-stop": params.endWithFullStop,
+                "aria-describedby": "timeout-time-remaining"
+            }
+        })
+    %}
         <p>{{ params.textFirstLine }}</p>
         <p class="ons-js-timeout-timer" aria-hidden="true" aria-relevant="additions"></p>
         <p class="ons-js-timeout-timer-acc ons-u-vh" role="status" id="timeout-time-remaining"></p>

package/components/timeout-modal/_macro.spec.js

@@ -6,61 +6,61 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_TIMEOUT_MODAL_BASIC = {
-  showModalTimeInSeconds: 60,
-  redirectUrl: '#!',
-  title: 'You will be signed out soon',
-  serverSessionExpiryEndpoint: '/some-endpoint',
-  sessionExpiresAt: '000-000-000',
-  textFirstLine: 'It appears you have been inactive for a while.',
-  countdownText: 'To protect your information, your progress will be saved and you will be signed out in',
-  countdownExpiredText: 'You are being signed out.',
-  btnText: 'Continue survey',
-  minutesTextSingular: 'minute',
-  minutesTextPlural: 'minutes',
-  secondsTextSingular: 'second',
-  secondsTextPlural: 'seconds',
-  endWithFullStop: true,
+    showModalTimeInSeconds: 60,
+    redirectUrl: '#!',
+    title: 'You will be signed out soon',
+    serverSessionExpiryEndpoint: '/some-endpoint',
+    sessionExpiresAt: '000-000-000',
+    textFirstLine: 'It appears you have been inactive for a while.',
+    countdownText: 'To protect your information, your progress will be saved and you will be signed out in',
+    countdownExpiredText: 'You are being signed out.',
+    btnText: 'Continue survey',
+    minutesTextSingular: 'minute',
+    minutesTextPlural: 'minutes',
+    secondsTextSingular: 'second',
+    secondsTextPlural: 'seconds',
+    endWithFullStop: true,
 };
 
 describe('macro: timeout modal', () => {
-  it('passes jest-axe checks with', async () => {
-    const $ = cheerio.load(renderComponent('timeout-modal', EXAMPLE_TIMEOUT_MODAL_BASIC));
+    it('passes jest-axe checks with', async () => {
+        const $ = cheerio.load(renderComponent('timeout-modal', EXAMPLE_TIMEOUT_MODAL_BASIC));
 
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-  it('provides expected parameters to the inner `modal` component', () => {
-    const faker = templateFaker();
-    const modalSpy = faker.spy('modal');
+    it('provides expected parameters to the inner `modal` component', () => {
+        const faker = templateFaker();
+        const modalSpy = faker.spy('modal');
 
-    cheerio.load(faker.renderComponent('timeout-modal', EXAMPLE_TIMEOUT_MODAL_BASIC));
+        cheerio.load(faker.renderComponent('timeout-modal', EXAMPLE_TIMEOUT_MODAL_BASIC));
 
-    expect(modalSpy.occurrences[0]).toEqual({
-      title: 'You will be signed out soon',
-      btnText: 'Continue survey',
-      classes: 'ons-js-timeout-modal',
-      attributes: {
-        'data-redirect-url': '#!',
-        'data-server-session-expires-at': '000-000-000',
-        'data-show-modal-time': 60,
-        'data-server-session-expiry-endpoint': '/some-endpoint',
-        'data-countdown-text': 'To protect your information, your progress will be saved and you will be signed out in',
-        'data-countdown-expired-text': 'You are being signed out.',
-        'data-minutes-text-singular': 'minute',
-        'data-minutes-text-plural': 'minutes',
-        'data-seconds-text-singular': 'second',
-        'data-seconds-text-plural': 'seconds',
-        'data-full-stop': true,
-        'aria-describedby': 'timeout-time-remaining',
-      },
+        expect(modalSpy.occurrences[0]).toEqual({
+            title: 'You will be signed out soon',
+            btnText: 'Continue survey',
+            classes: 'ons-js-timeout-modal',
+            attributes: {
+                'data-redirect-url': '#!',
+                'data-server-session-expires-at': '000-000-000',
+                'data-show-modal-time': 60,
+                'data-server-session-expiry-endpoint': '/some-endpoint',
+                'data-countdown-text': 'To protect your information, your progress will be saved and you will be signed out in',
+                'data-countdown-expired-text': 'You are being signed out.',
+                'data-minutes-text-singular': 'minute',
+                'data-minutes-text-plural': 'minutes',
+                'data-seconds-text-singular': 'second',
+                'data-seconds-text-plural': 'seconds',
+                'data-full-stop': true,
+                'aria-describedby': 'timeout-time-remaining',
+            },
+        });
     });
-  });
 
-  it('has expected `textFirstLine`', () => {
-    const $ = cheerio.load(renderComponent('timeout-modal', EXAMPLE_TIMEOUT_MODAL_BASIC));
+    it('has expected `textFirstLine`', () => {
+        const $ = cheerio.load(renderComponent('timeout-modal', EXAMPLE_TIMEOUT_MODAL_BASIC));
 
-    const title = $('.ons-modal__body > p').html().trim();
-    expect(title).toBe('It appears you have been inactive for a while.');
-  });
+        const title = $('.ons-modal__body > p').html().trim();
+        expect(title).toBe('It appears you have been inactive for a while.');
+    });
 });

package/components/timeout-modal/example-timeout-modal.njk

@@ -1,18 +1,20 @@
 {% from "components/timeout-modal/_macro.njk" import onsTimeoutModal %}
 
 <div style="min-height:20rem;">
-{{ onsTimeoutModal({
-    "showModalTimeInSeconds": 60,
-    "redirectUrl": "#!",
-    "title": "You will be signed out soon",
-    "textFirstLine": "It appears you have been inactive for a while.",
-    "countdownText": "To protect your information, your progress will be saved and you will be signed out in",
-    "countdownExpiredText": "You are being signed out.",
-    "btnText": "Continue survey",
-    "minutesTextSingular": "minute",
-    "minutesTextPlural": "minutes",
-    "secondsTextSingular": "second",
-    "secondsTextPlural": "seconds",
-    "endWithFullStop": true
-}) }}
+    {{
+        onsTimeoutModal({
+            "showModalTimeInSeconds": 60,
+            "redirectUrl": "#!",
+            "title": "You will be signed out soon",
+            "textFirstLine": "It appears you have been inactive for a while.",
+            "countdownText": "To protect your information, your progress will be saved and you will be signed out in",
+            "countdownExpiredText": "You are being signed out.",
+            "btnText": "Continue survey",
+            "minutesTextSingular": "minute",
+            "minutesTextPlural": "minutes",
+            "secondsTextSingular": "second",
+            "secondsTextPlural": "seconds",
+            "endWithFullStop": true
+        })
+    }}
 </div>