@ons/design-system 70.0.6 → 70.0.8

package/components/relationships/relationships.spec.js

@@ -1,84 +1,84 @@
 import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
 const EXAMPLE_RELATIONSHIPS = {
-  dontWrap: true,
-  playback: "Amanda Bloggs is Joe Bloggs' <strong>…</strong>",
-  name: 'relationship',
-  radios: [
-    {
-      id: 'grandparent',
-      value: 'grandparent',
-      label: {
-        text: 'Grandparent',
-      },
-      attributes: {
-        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <strong>grandparents</strong>',
-        'data-playback': "Amanda Bloggs is Joe Bloggs' <strong>grandparents</strong>",
-      },
-    },
-    {
-      id: 'other-relation',
-      value: 'other-relation',
-      label: {
-        text: 'Other relation',
-      },
-      attributes: {
-        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <strong>other relation</strong>',
-        'data-playback': "Amanda Bloggs is Joe Bloggs' <strong>other relation</strong>",
-      },
-    },
-    {
-      id: 'unrelated',
-      value: 'unrelated',
-      label: {
-        text: 'Unrelated',
-        description: 'Including foster child',
-      },
-      attributes: {
-        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs',
-        'data-playback': 'Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs',
-      },
-    },
-  ],
-};
-
-describe('script: relationships', () => {
-  beforeEach(async () => {
-    await setTestPage(
-      '/test',
-      renderComponent(
-        'question',
+    dontWrap: true,
+    playback: "Amanda Bloggs is Joe Bloggs' <strong>…</strong>",
+    name: 'relationship',
+    radios: [
         {
-          title: 'Thinking of Joe Bloggs, Amanda Bloggs is their <strong>…</strong>',
-          readDescriptionFirst: true,
-          legendIsQuestionTitle: true,
-          legendTitleClasses: 'ons-js-relationships-legend',
+            id: 'grandparent',
+            value: 'grandparent',
+            label: {
+                text: 'Grandparent',
+            },
+            attributes: {
+                'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <strong>grandparents</strong>',
+                'data-playback': "Amanda Bloggs is Joe Bloggs' <strong>grandparents</strong>",
+            },
         },
-        [renderComponent('relationships', EXAMPLE_RELATIONSHIPS)],
-      ),
-    );
-  });
-
-  describe('when the component initialises', () => {
-    it('then the playback paragraph should become visible', async () => {
-      const hasHideClass = await page.$eval('.ons-relationships__playback', (node) => node.classList.contains('ons-u-d-no'));
-      expect(hasHideClass).toBe(false);
-    });
-  });
+        {
+            id: 'other-relation',
+            value: 'other-relation',
+            label: {
+                text: 'Other relation',
+            },
+            attributes: {
+                'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <strong>other relation</strong>',
+                'data-playback': "Amanda Bloggs is Joe Bloggs' <strong>other relation</strong>",
+            },
+        },
+        {
+            id: 'unrelated',
+            value: 'unrelated',
+            label: {
+                text: 'Unrelated',
+                description: 'Including foster child',
+            },
+            attributes: {
+                'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs',
+                'data-playback': 'Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs',
+            },
+        },
+    ],
+};
 
-  describe('when the user selects a relationship', () => {
+describe('script: relationships', () => {
     beforeEach(async () => {
-      await page.click('#other-relation');
+        await setTestPage(
+            '/test',
+            renderComponent(
+                'question',
+                {
+                    title: 'Thinking of Joe Bloggs, Amanda Bloggs is their <strong>…</strong>',
+                    readDescriptionFirst: true,
+                    legendIsQuestionTitle: true,
+                    legendTitleClasses: 'ons-js-relationships-legend',
+                },
+                [renderComponent('relationships', EXAMPLE_RELATIONSHIPS)],
+            ),
+        );
     });
 
-    it('the question title should be changed to reflect the relationship', async () => {
-      const headingText = await page.$eval('h1', (element) => element.innerHTML);
-      expect(headingText.trim()).toBe('Thinking of Joe Bloggs, Amanda Bloggs is their <strong>other relation</strong>');
+    describe('when the component initialises', () => {
+        it('then the playback paragraph should become visible', async () => {
+            const hasHideClass = await page.$eval('.ons-relationships__playback', (node) => node.classList.contains('ons-u-d-no'));
+            expect(hasHideClass).toBe(false);
+        });
     });
 
-    it('the playback should be changed to reflect the relationship', async () => {
-      const playbackText = await page.$eval('.ons-relationships__playback', (element) => element.innerHTML);
-      expect(playbackText.trim()).toBe("Amanda Bloggs is Joe Bloggs' <strong>other relation</strong>");
+    describe('when the user selects a relationship', () => {
+        beforeEach(async () => {
+            await page.click('#other-relation');
+        });
+
+        it('the question title should be changed to reflect the relationship', async () => {
+            const headingText = await page.$eval('h1', (element) => element.innerHTML);
+            expect(headingText.trim()).toBe('Thinking of Joe Bloggs, Amanda Bloggs is their <strong>other relation</strong>');
+        });
+
+        it('the playback should be changed to reflect the relationship', async () => {
+            const playbackText = await page.$eval('.ons-relationships__playback', (element) => element.innerHTML);
+            expect(playbackText.trim()).toBe("Amanda Bloggs is Joe Bloggs' <strong>other relation</strong>");
+        });
     });
-  });
 });

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);
+        });
     });
-  });
 });