@ons/design-system 72.1.0 → 72.1.1

package/components/button/example-button-group.njk

@@ -10,6 +10,7 @@
         onsButton({
             "type": 'button',
             "text": 'Cancel',
+            "name": 'example',
             "variants": 'secondary'
         })
     }}

package/components/checkboxes/_checkbox.scss

@@ -107,7 +107,7 @@ $checkbox-padding: 10px;
         }
 
         .ons-checkbox__other {
-            margin: 0.5rem 0 0.5rem 0.5rem;
+            margin: 0.5rem 0 0.5rem 0.625rem;
         }
     }
 
@@ -170,8 +170,8 @@ $checkbox-padding: 10px;
     &__other {
         border-left: 4px solid var(--ons-color-borders-indent);
         display: block;
-        margin: 0 1rem 0.5rem;
-        padding: 0 $checkbox-padding $checkbox-padding $checkbox-padding * 2 - 1;
+        margin: 0 1.1875rem 0.5rem;
+        padding: 0 $checkbox-padding $checkbox-padding $checkbox-padding * 2;
     }
 
     &__input:checked + &__label::before {

package/components/details/_details.scss

@@ -68,7 +68,6 @@ $details-caret-width: 1.75rem;
 
     &--open & {
         &__icon {
-            left: -0.1rem;
             top: 0.2rem;
             transform: rotate(90deg);
         }
@@ -76,7 +75,7 @@ $details-caret-width: 1.75rem;
         &__content {
             border-left: 4px solid var(--ons-color-borders-indent);
             display: block;
-            margin: 1rem 0 0;
+            margin: 1rem 0 0 0.5rem;
             padding: 0 0 0 1.5rem;
         }
     }

package/components/details/example-details-open.njk

@@ -0,0 +1,10 @@
+{% from "components/details/_macro.njk" import onsDetails %}
+
+{{
+    onsDetails({
+        "id": "details-example",
+        "title": "What is a photovoltaic system?",
+        "content": "<p>A typical photovoltaic system employs solar panels, each comprising a number of solar cells, which generate electrical power. PV installations may be ground-mounted, rooftop mounted or wall mounted. The mount may be fixed, or use a solar tracker to follow the sun across the sky.</p>",
+        "open": true
+    })
+}}

package/components/external-link/_macro.spec.js

@@ -4,79 +4,76 @@ import * as cheerio from 'cheerio';
 
 import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
-
-const EXAMPLE_EXTERNAL_LINK = {
-    url: 'http://example.com',
-    text: 'Example link',
-};
-
-describe('macro: external-link', () => {
-    it('passes jest-axe checks', async () => {
-        const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
-
-        const results = await axe($.html());
-        expect(results).toHaveNoViolations();
-    });
-
-    it('has additionally provided style classes', () => {
-        const $ = cheerio.load(
-            renderComponent('external-link', {
-                ...EXAMPLE_EXTERNAL_LINK,
-                classes: 'extra-class another-extra-class',
-            }),
-        );
-
-        expect($('.ons-external-link').hasClass('extra-class')).toBe(true);
-        expect($('.ons-external-link').hasClass('another-extra-class')).toBe(true);
-    });
-
-    it('has the expected hyperlink URL', async () => {
-        const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
-
-        const $hyperlink = $('a.ons-external-link');
-        expect($hyperlink.attr('href')).toBe('http://example.com');
-    });
-
-    it('opens in a new window when `newWindow` is `true`', () => {
-        const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
-
-        expect($('a').attr('target')).toBe('_blank');
-        expect($('a').attr('rel')).toBe('noopener');
-    });
-
-    it('has the expected link text', async () => {
-        const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
-
-        const $hyperlink = $('a.ons-external-link .ons-external-link__text');
-        expect($hyperlink.text().trim()).toBe('Example link');
-    });
-
-    it('has a default new window description', async () => {
-        const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
-
-        expect($('.ons-external-link__new-window-description').text()).toBe('(opens in a new tab)');
+import { EXAMPLE_EXTERNAL_LINK } from './_test_examples';
+
+describe('FOR: Macro: External-link', () => {
+    describe('GIVEN: Params: required', () => {
+        describe('WHEN: all required params are provided', () => {
+            const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
+            test('THEN: jest-axe checks pass', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+
+            test('THEN: the link points to the expected URL', async () => {
+                const $hyperlink = $('a.ons-external-link');
+                expect($hyperlink.attr('href')).toBe('http://example.com');
+            });
+
+            test('THEN: the link has the expected link text', async () => {
+                const $hyperlink = $('a.ons-external-link .ons-external-link__text');
+                expect($hyperlink.text().trim()).toBe('Example link');
+            });
+
+            test('THEN: the link has a default new window description', async () => {
+                expect($('.ons-external-link__new-window-description').text()).toBe('(opens in a new tab)');
+            });
+
+            test('THEN: the link has the external-link icon', async () => {
+                const faker = templateFaker();
+                const iconsSpy = faker.spy('icon');
+                faker.renderComponent('external-link', {
+                    ...EXAMPLE_EXTERNAL_LINK,
+                });
+                expect(iconsSpy.occurrences[0].iconType).toBe('external-link');
+            });
+        });
     });
 
-    it('has a custom new window description when `newWindowDescription` is provided', () => {
-        const $ = cheerio.load(
-            renderComponent('external-link', {
-                ...EXAMPLE_EXTERNAL_LINK,
-                newWindowDescription: 'custom opens in a new tab text',
-            }),
-        );
-
-        expect($('.ons-external-link__new-window-description').text()).toBe('(custom opens in a new tab text)');
+    describe('GIVEN: Params: classes', () => {
+        describe('WHEN: additional style classes are provided with the classes param', () => {
+            const $ = cheerio.load(
+                renderComponent('external-link', {
+                    ...EXAMPLE_EXTERNAL_LINK,
+                    classes: 'extra-class another-extra-class',
+                }),
+            );
+            test('THEN: renders with provided classes', () => {
+                expect($('.ons-external-link').hasClass('extra-class')).toBe(true);
+                expect($('.ons-external-link').hasClass('another-extra-class')).toBe(true);
+            });
+        });
     });
 
-    it('has an "external-link" icon', async () => {
-        const faker = templateFaker();
-        const iconsSpy = faker.spy('icon');
-
-        faker.renderComponent('external-link', {
-            ...EXAMPLE_EXTERNAL_LINK,
-            newWindowDescription: 'custom opens in a new tab text',
+    describe('GIVEN: Params: newWindowDescription', () => {
+        describe('WHEN: newWindowDescription param is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('external-link', {
+                    ...EXAMPLE_EXTERNAL_LINK,
+                    newWindowDescription: 'custom opens in a new tab text',
+                }),
+            );
+            test('THEN: has the expected new window description', () => {
+                expect($('.ons-external-link__new-window-description').text()).toBe('(custom opens in a new tab text)');
+            });
+
+            test('THEN: the target attribute is set to _blank so that the link opens in a new window', () => {
+                expect($('a').attr('target')).toBe('_blank');
+            });
+
+            test('THEN: the rel attribute is set to noopener', () => {
+                expect($('a').attr('rel')).toBe('noopener');
+            });
         });
-
-        expect(iconsSpy.occurrences[0].iconType).toBe('external-link');
     });
 });

package/components/external-link/_test_examples.js

@@ -0,0 +1,4 @@
+export const EXAMPLE_EXTERNAL_LINK = {
+    url: 'http://example.com',
+    text: 'Example link',
+};

package/components/feedback/_macro.spec.js

@@ -4,103 +4,132 @@ import * as cheerio from 'cheerio';
 
 import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
-
-const EXAMPLE_FEEDBACK_MINIMAL = {
-    heading: 'Feedback heading',
-    content: 'Feedback content...',
-    linkUrl: 'http://example.com',
-    linkText: 'Feedback link text',
-};
-
-const EXAMPLE_FEEDBACK_FULL = {
-    id: 'example-feedback',
-    classes: 'extra-class',
-    heading: 'Feedback heading',
-    headingLevel: 5,
-    headingClasses: 'extra-heading-class another-extra-heading-class',
-    content: 'Feedback content...',
-    linkUrl: 'http://example.com',
-    linkText: 'Feedback link text',
-};
-
-describe('macro: feedback', () => {
-    it('passes jest-axe checks with minimum parameters', async () => {
-        const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
-
-        const results = await axe($.html());
-        expect(results).toHaveNoViolations();
+import { EXAMPLE_FEEDBACK, EXAMPLE_FEEDBACK_ALL_PARAMS } from './_test_examples';
+
+describe('FOR: Macro: Feedback', () => {
+    describe('GIVEN: Params: required', () => {
+        describe('WHEN: all required params are provided', () => {
+            const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK));
+            test('THEN: jest-axe checks pass', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+
+            test('THEN: the title has a default headingLevel of 2', () => {
+                expect($(`h2.ons-feedback__heading`).text().trim()).toBe('Feedback heading');
+            });
+        });
     });
 
-    it('passes jest-axe checks with full parameters', async () => {
-        const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_FULL));
-
-        const results = await axe($.html());
-        expect(results).toHaveNoViolations();
+    describe('GIVEN: Params: all', () => {
+        describe('WHEN: all params are provided', () => {
+            const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_ALL_PARAMS));
+            test('THEN: jest-axe checks pass', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+        });
     });
 
-    it('has the provided `id` attribute', () => {
-        const $ = cheerio.load(
-            renderComponent('feedback', {
-                id: 'example-id',
-            }),
-        );
-
-        expect($('#example-id').length).toBe(1);
+    describe('GIVEN: Params: id', () => {
+        describe('WHEN: id is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('feedback', {
+                    ...EXAMPLE_FEEDBACK,
+                    id: 'example-id',
+                }),
+            );
+            test('THEN: renders with provided id', () => {
+                expect($('#example-id').length).toBe(1);
+            });
+        });
     });
 
-    it('has additionally provided style classes', () => {
-        const $ = cheerio.load(
-            renderComponent('feedback', {
-                classes: 'extra-class another-extra-class',
-            }),
-        );
-
-        expect($('.ons-feedback').hasClass('extra-class')).toBe(true);
-        expect($('.ons-feedback').hasClass('another-extra-class')).toBe(true);
+    describe('GIVEN: Params: classes', () => {
+        describe('WHEN: additional style classes are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('feedback', {
+                    ...EXAMPLE_FEEDBACK,
+                    classes: 'extra-class another-extra-class',
+                }),
+            );
+            test('THEN: renders with provided classes', () => {
+                expect($('.ons-feedback').hasClass('extra-class')).toBe(true);
+                expect($('.ons-feedback').hasClass('another-extra-class')).toBe(true);
+            });
+        });
     });
 
-    it.each([
-        [1, 'h1'],
-        [4, 'h4'],
-    ])('has the correct element type for the provided `headingLevel` (%i -> %s)', (headingLevel, expectedTitleTag) => {
-        const $ = cheerio.load(
-            renderComponent('feedback', {
-                ...EXAMPLE_FEEDBACK_MINIMAL,
-                headingLevel,
-            }),
-        );
-
-        expect($(`${expectedTitleTag}.ons-feedback__heading`).text().trim()).toBe('Feedback heading');
+    describe('GIVEN: Params: heading', () => {
+        describe('WHEN: heading is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('feedback', {
+                    ...EXAMPLE_FEEDBACK,
+                }),
+            );
+            test('THEN: renders with provided heading text', () => {
+                expect($('.ons-feedback__heading').text().trim()).toBe('Feedback heading');
+            });
+        });
     });
 
-    it('has a default `headingLevel` of 2', () => {
-        const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
-
-        expect($(`h2.ons-feedback__heading`).text().trim()).toBe('Feedback heading');
+    describe('GIVEN: Params: headingLevel', () => {
+        describe('WHEN: headingLevel is provided', () => {
+            test.each([
+                [1, 'h1'],
+                [4, 'h4'],
+            ])('THEN: has the correct heading element type for the provided headingLevel (%i -> %s)', (headingLevel, expectedTitleTag) => {
+                const $ = cheerio.load(
+                    renderComponent('feedback', {
+                        ...EXAMPLE_FEEDBACK,
+                        headingLevel,
+                    }),
+                );
+                const titleTag = $(`${expectedTitleTag}.ons-feedback__heading`)[0].tagName;
+                expect(titleTag).toBe(expectedTitleTag);
+            });
+        });
     });
 
-    it('has additional heading style classes', () => {
-        const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_FULL));
-
-        expect($('.ons-feedback__heading').hasClass('extra-heading-class')).toBe(true);
-        expect($('.ons-feedback__heading').hasClass('another-extra-heading-class')).toBe(true);
+    describe('GIVEN: Params: headingClasses', () => {
+        describe('WHEN: additional heading style classes are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('feedback', {
+                    ...EXAMPLE_FEEDBACK,
+                    headingClasses: 'extra-heading-class another-extra-heading-class',
+                }),
+            );
+            test('THEN: renders with provided classes', () => {
+                expect($('.ons-feedback__heading').hasClass('extra-heading-class')).toBe(true);
+                expect($('.ons-feedback__heading').hasClass('another-extra-heading-class')).toBe(true);
+            });
+        });
     });
 
-    it('has a paragraph with the provided `content`', () => {
-        const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
-
-        expect($('p').text().trim()).toBe('Feedback content...');
+    describe('GIVEN: Params: content', () => {
+        describe('WHEN: content is provided', () => {
+            const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK));
+            test('THEN: renders paragraph with the provided content', () => {
+                expect($('p').text().trim()).toBe('Feedback content...');
+            });
+        });
     });
 
-    it('has a link with the provided `linkUrl`', () => {
-        const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
-
-        expect($('.ons-feedback__link').attr('href')).toBe('http://example.com');
+    describe('GIVEN: Params: linkUrl', () => {
+        describe('WHEN: linkUrl is provided', () => {
+            const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK));
+            test('THEN: renders a link with the provided linkUrl', () => {
+                expect($('.ons-feedback__link').attr('href')).toBe('http://example.com');
+            });
+        });
     });
 
-    it('has a link with the provided `linkText`', () => {
-        const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
-
-        expect($('.ons-feedback__link').text().trim()).toBe('Feedback link text');
+    describe('GIVEN: Params: linkText', () => {
+        describe('WHEN: linkText is provided', () => {
+            const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK));
+            test('THEN: renders a link with the provided linkText', () => {
+                expect($('.ons-feedback__link').text().trim()).toBe('Feedback link text');
+            });
+        });
     });
 });

package/components/feedback/_test_examples.js

@@ -0,0 +1,17 @@
+export const EXAMPLE_FEEDBACK = {
+    heading: 'Feedback heading',
+    content: 'Feedback content...',
+    linkUrl: 'http://example.com',
+    linkText: 'Feedback link text',
+};
+
+export const EXAMPLE_FEEDBACK_ALL_PARAMS = {
+    id: 'example-feedback',
+    classes: 'extra-class',
+    heading: 'Feedback heading',
+    headingLevel: 5,
+    headingClasses: 'extra-heading-class another-extra-heading-class',
+    content: 'Feedback content...',
+    linkUrl: 'http://example.com',
+    linkText: 'Feedback link text',
+};

package/components/field/_macro.spec.js

@@ -5,91 +5,128 @@ import * as cheerio from 'cheerio';
 import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
-const EXAMPLE_FIELD_BASIC = {
-    id: 'example-field',
-};
-
-describe('macro: field', () => {
-    it('passes jest-axe checks', async () => {
-        const $ = cheerio.load(renderComponent('field', EXAMPLE_FIELD_BASIC));
-
-        const results = await axe($.html());
-        expect(results).toHaveNoViolations();
+describe('FOR: Macro: Field', () => {
+    describe('GIVEN: Params: none', () => {
+        describe('WHEN: no params are provided', () => {
+            const $ = cheerio.load(renderComponent('field'));
+            test('THEN: passes jest-axe checks', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+        });
     });
 
-    it('has the provided `id` attribute', () => {
-        const $ = cheerio.load(renderComponent('field', EXAMPLE_FIELD_BASIC));
-
-        expect($('.ons-field').attr('id')).toBe('example-field');
+    describe('GIVEN: Params: id', () => {
+        describe('WHEN: id is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('field', {
+                    id: 'example-field',
+                }),
+            );
+            test('THEN: renders with the provided id', () => {
+                expect($('.ons-field').attr('id')).toBe('example-field');
+            });
+        });
     });
 
-    it('has additionally provided style classes', () => {
-        const $ = cheerio.load(
-            renderComponent('field', {
-                ...EXAMPLE_FIELD_BASIC,
-                classes: 'extra-class another-extra-class',
-            }),
-        );
-
-        expect($('.ons-field').hasClass('extra-class')).toBe(true);
-        expect($('.ons-field').hasClass('another-extra-class')).toBe(true);
+    describe('GIVEN: Params: classes', () => {
+        describe('WHEN: additional style classes are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('field', {
+                    classes: 'extra-class another-extra-class',
+                }),
+            );
+            test('THEN: renders with provided classes', () => {
+                expect($('.ons-field').hasClass('extra-class')).toBe(true);
+                expect($('.ons-field').hasClass('another-extra-class')).toBe(true);
+            });
+        });
     });
 
-    it('has correct class when `inline` is provided', () => {
-        const $ = cheerio.load(
-            renderComponent('field', {
-                ...EXAMPLE_FIELD_BASIC,
-                inline: true,
-            }),
-        );
-
-        expect($('.ons-field').hasClass('ons-field--inline')).toBe(true);
+    describe('GIVEN: Params: inline', () => {
+        describe('WHEN: inline is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('field', {
+                    inline: true,
+                }),
+            );
+            test('THEN: renders with the inline class', () => {
+                expect($('.ons-field').hasClass('ons-field--inline')).toBe(true);
+            });
+        });
     });
 
-    it('has additionally provided `attributes`', () => {
-        const $ = cheerio.load(
-            renderComponent('field', {
-                ...EXAMPLE_FIELD_BASIC,
-                attributes: {
-                    a: 123,
-                    b: 456,
-                },
-            }),
-        );
-
-        expect($('.ons-field').attr('a')).toBe('123');
-        expect($('.ons-field').attr('b')).toBe('456');
+    describe('GIVEN: Params: attributes', () => {
+        describe('WHEN: custom attributes are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('field', {
+                    attributes: {
+                        a: 123,
+                        b: 456,
+                    },
+                }),
+            );
+            test('THEN: renders with additionally provided attributes', () => {
+                expect($('.ons-field').attr('a')).toBe('123');
+                expect($('.ons-field').attr('b')).toBe('456');
+            });
+        });
     });
 
-    it('has the correct element with `dontWrap`', () => {
-        const $ = cheerio.load(
-            renderComponent('field', {
-                ...EXAMPLE_FIELD_BASIC,
-                dontWrap: true,
-            }),
-        );
-
-        expect($('.ons-field').length).toBe(0);
-    });
+    describe('GIVEN: Params: dontWrap', () => {
+        describe('WHEN: dontWrap is set to true', () => {
+            const $ = cheerio.load(
+                renderComponent('field', {
+                    dontWrap: true,
+                }),
+            );
+            test('THEN: renders the content without being wrapped in a field div', () => {
+                expect($('.ons-field').length).toBe(0);
+            });
+        });
 
-    it('calls with content', () => {
-        const $ = cheerio.load(renderComponent('field', EXAMPLE_FIELD_BASIC, 'Example content...'));
+        describe('WHEN: dontWrap is set to false', () => {
+            const $ = cheerio.load(
+                renderComponent('field', {
+                    dontWrap: false,
+                }),
+            );
+            test('THEN: renders the content wrapped in a field div', () => {
+                expect($('.ons-field').length).toBe(1);
+            });
+        });
 
-        const content = $('.ons-field').html().trim();
-        expect(content).toEqual(expect.stringContaining('Example content...'));
+        describe('WHEN: dontWrap is not provided', () => {
+            const $ = cheerio.load(renderComponent('field', {}));
+            test('THEN: renders the content wrapped in a field div', () => {
+                expect($('.ons-field').length).toBe(1);
+            });
+        });
     });
 
-    it('calls the error component when `error` is provided', () => {
-        const faker = templateFaker();
-        const errorSpy = faker.spy('error');
-
-        faker.renderComponent('field', {
-            ...EXAMPLE_FIELD_BASIC,
-            error: { text: 'There is an error' },
+    describe('GIVEN: Params: error', () => {
+        describe('WHEN: error is provided', () => {
+            const faker = templateFaker();
+            const errorSpy = faker.spy('error');
+
+            faker.renderComponent('field', {
+                error: { text: 'There is an error' },
+            });
+            test('THEN" calls the error component', () => {
+                expect(errorSpy.occurrences[0]).toEqual({
+                    text: 'There is an error',
+                });
+            });
         });
+    });
 
-        expect(errorSpy.occurrences[0]).toEqual({
-            text: 'There is an error',
+    describe('GIVEN: Content', () => {
+        describe('WHEN: field is called with content provided', () => {
+            const $ = cheerio.load(renderComponent('field', {}, 'Example content...'));
+            const content = $('.ons-field').html().trim();
+            test('THEN: renders the field with the provided content', () => {
+                expect(content).toEqual(expect.stringContaining('Example content...'));
+            });
         });
     });
 });