@ons/design-system 72.1.0 → 72.1.2

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/description-list/_description-list.scss

@@ -7,25 +7,56 @@
         clear: both;
         float: left;
         font-weight: $font-weight-bold;
-
-        &:not(:first-child) {
-            margin-top: 0.5rem;
-        }
     }
 
     &__value {
         float: right;
         margin-left: 0; /* As normalize adds a 40px left margin */
+    }
 
-        &:not(:nth-of-type(1)) {
-            @include mq(m) {
+    &__item {
+        &:not(:first-child) {
+            .ons-description-list__term {
                 margin-top: 0.5rem;
             }
+
+            .ons-description-list__value:nth-of-type(1) {
+                @include mq(m) {
+                    margin-top: 0.5rem;
+                }
+            }
+
+            .ons-description-list--inline & {
+                .ons-description-list__value:nth-of-type(1),
+                .ons-description-list__term {
+                    @include mq(l) {
+                        margin-top: 0;
+                    }
+                    @include mq(xs, l) {
+                        margin-top: 0.5rem;
+                    }
+                }
+            }
+        }
+    }
+
+    &--inline {
+        .ons-description-list__term {
+            padding-right: 1rem;
         }
 
-        & + & {
-            @include mq(m) {
-                margin-top: 0;
+        @include mq(l) {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 0.5rem 2.5rem;
+
+            .ons-description-list__value {
+                grid-column-start: 2;
+            }
+
+            .ons-description-list__item {
+                display: grid;
+                grid-template-columns: auto 1fr;
             }
         }
     }

package/components/description-list/_macro.njk

@@ -1,23 +1,31 @@
 {% macro onsDescriptionList(params) %}
     <dl
-        class="ons-description-list ons-description-list__items ons-grid ons-grid--gutterless ons-u-cf{{ " " + params.classes if params.classes else "" }}"
-        {% if params.id %}id="{{ params.id }}"{% endif %}{% if params.descriptionListLabel %}
+        class="ons-description-list ons-description-list__items ons-grid ons-grid--gutterless{{ ' ons-description-list--inline' if params.variant == 'inline' else ' ons-u-cf' }}{{ ' ' + params.classes if params.classes else '' }}"
+        {% if params.id %}id="{{ params.id }}"{% endif %}
+        {% if params.descriptionListLabel %}
             title="{{ params.descriptionListLabel }}" aria-label="{{ params.descriptionListLabel }}"
         {% endif %}
     >
         {% for item in params.itemsList %}
-            {% if item.term | length %}
-                <dt class="ons-description-list__term ons-grid__col ons-col-{{ params.termCol }}@m">{{ item.term }}</dt>
-            {% endif %}
-            {% for descriptionItem in item.descriptions %}
-                {% if descriptionItem.description | length %}
-                    <dd
-                        {% if descriptionItem.id %}id="{{ descriptionItem.id }}"{% endif %}class="ons-description-list__value ons-grid__col ons-col-{{ params.descriptionCol }}@m"
+            <div class="ons-description-list__item">
+                {% if item.term | length %}
+                    <dt
+                        class="ons-description-list__term ons-grid__col ons-col-{{ params.termCol }}@{{ 'xs@l' if params.variant == 'inline' else 'm' }}"
                     >
-                        {{- descriptionItem.description -}}
-                    </dd>
+                        {{- item.term -}}
+                    </dt>
                 {% endif %}
-            {% endfor %}
+                {% for descriptionItem in item.descriptions %}
+                    {% if descriptionItem.description | length %}
+                        <dd
+                            {% if descriptionItem.id %}id="{{ descriptionItem.id }}"{% endif %}
+                            class="ons-description-list__value ons-grid__col ons-col-{{ params.descriptionCol }}@{{ 'xs@l' if params.variant == 'inline' else 'm' }}"
+                        >
+                            {{- descriptionItem.description -}}
+                        </dd>
+                    {% endif %}
+                {% endfor %}
+            </div>
         {% endfor %}
     </dl>
 {% endmacro %}

package/components/description-list/_macro.spec.js

@@ -1,7 +1,6 @@
 /** @jest-environment jsdom */
 
 import * as cheerio from 'cheerio';
-
 import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
@@ -87,6 +86,17 @@ describe('macro: description-list', () => {
         expect($('#example-id').length).toBe(1);
     });
 
+    it('has the provided variant style class when variant is provided', () => {
+        const $ = cheerio.load(
+            renderComponent('description-list', {
+                ...EXAMPLE_DESCRIPTION_LIST_MINIMAL,
+                variant: 'inline',
+            }),
+        );
+
+        expect($('.ons-description-list').hasClass('ons-description-list--inline')).toBe(true);
+    });
+
     it('has additionally provided style classes', () => {
         const $ = cheerio.load(
             renderComponent('description-list', {

package/components/description-list/example-inline-description-list.njk

@@ -0,0 +1,58 @@
+{% from "components/description-list/_macro.njk" import onsDescriptionList %}
+{{
+    onsDescriptionList({
+        "classes": "ons-u-mb-no",
+        "descriptionListLabel": "Information about this business and its survey requirements",
+        "variant": 'inline',
+        "termCol": "4",
+        "descriptionCol": "8",
+        "itemsList": [
+            {
+                "term": "Survey:",
+                "descriptions": [
+                    {
+                        "description": "Bricks & Blocks"
+                    }
+                ]
+            },
+            {
+                "term": "RU Refs:",
+                "descriptions": [
+                    {
+                        "description": "49900000118"
+                    },
+                    {
+                        "description": "49300005832"
+                    }
+                ]
+            },
+            {
+                "term": "Business:",
+                "descriptions": [
+                    {
+                        "description": "Bolts & Ratchets Ltd."
+                    }
+                ]
+            },
+            {
+                "term": "Trading as:",
+                "descriptions": [
+                    {
+                        "description": "Bolts & Ratchets"
+                    }
+                ]
+            },
+            {
+                "term": "To:",
+                "descriptions": [
+                    {
+                        "description": "Jacky Turner"
+                    },
+                    {
+                        "description": "Louise Goodland"
+                    }
+                ]
+            }
+        ]
+    })
+}}

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',
+};