@ons/design-system 72.0.1 → 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-macro.njk

@@ -98,6 +98,26 @@
                             "radios": params.other.radios
                         })
                     }}
+                {% elif otherType == "textarea" %}
+                    {% from "components/textarea/_macro.njk" import onsTextarea %}
+                    {{
+                        onsTextarea({
+                            "id": params.other.id,
+                            "name": params.other.name,
+                            "value": params.other.value,
+                            "label": {
+                                "id": params.other.id + "-label",
+                                "text": params.other.label.text,
+                                "description": params.other.label.description,
+                                "classes": 'ons-u-fw-n'
+                            },
+                            "charCheckLimit": {
+                                "limit": params.other.charCheckLimit.limit,
+                                "charCountSingular": params.other.charCheckLimit.charCountSingular,
+                                "charCountPlural": params.other.charCheckLimit.charCountPlural
+                            }
+                        })
+                    }}
                 {% endif %}
             </span>
         {% endif %}

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/checkboxes/_macro.njk

@@ -90,6 +90,11 @@
                                     "label": {
                                         "text": checkbox.other.label.text
                                     },
+                                    "charCheckLimit": {
+                                        "limit": checkbox.other.charCheckLimit.limit,
+                                        "charCountSingular": checkbox.other.charCheckLimit.charCountSingular,
+                                        "charCountPlural": checkbox.other.charCheckLimit.charCountPlural
+                                    },
                                     "legend": checkbox.other.legend,
                                     "legendClasses": checkbox.other.legendClasses,
                                     "value": checkbox.other.value,

package/components/checkboxes/_macro.spec.js

@@ -87,6 +87,31 @@ const EXAMPLE_CHECKBOXES_WITH_MUTUALLY_EXCLUSIVE_WITH_ERROR = {
     },
 };
 
+const EXAMPLE_CHECKBOX_ITEM_CHECKBOXES_WITH_TEXTAREA = {
+    name: 'example-checkboxes-name',
+    legend: 'Legend text',
+    checkboxesLabel: 'Select all that apply',
+    checkboxesLabelClasses: 'extra-checkboxes-label-class',
+    checkboxes: [
+        EXAMPLE_CHECKBOX_ITEM,
+        {
+            other: {
+                otherType: 'textarea',
+                id: 'other-textbox-example-checkbox-with-revealed-text-area',
+                name: 'other answer',
+                label: {
+                    text: 'Provide more details',
+                },
+                charCheckLimit: {
+                    limit: 300,
+                    charCountSingular: 'You have {x} character remaining',
+                    charCountPlural: 'You have {x} characters remaining',
+                },
+            },
+        },
+    ],
+};
+
 describe('macro: checkboxes', () => {
     it('passes jest-axe checks', async () => {
         const $ = cheerio.load(renderComponent('checkboxes', EXAMPLE_CHECKBOXES));
@@ -135,6 +160,16 @@ describe('macro: checkboxes', () => {
         });
     });
 
+    describe('checkbox item with text area', () => {
+        it('renders the text area with expected parameters', () => {
+            const $ = cheerio.load(renderComponent('checkboxes', EXAMPLE_CHECKBOX_ITEM_CHECKBOXES_WITH_TEXTAREA));
+            expect($('.ons-input--textarea').attr('name')).toBe('other answer');
+            expect($('.ons-input--textarea').attr('maxlength')).toBe('300');
+            expect($('.ons-input__limit').attr('data-charcount-singular')).toBe('You have {x} character remaining');
+            expect($('.ons-input__limit').attr('data-charcount-plural')).toBe('You have {x} characters remaining');
+        });
+    });
+
     describe('mutually exclusive', () => {
         it('has the `ons-js-exclusive-group-item` class', () => {
             const $ = cheerio.load(renderComponent('checkboxes', EXAMPLE_CHECKBOXES_WITH_MUTUALLY_EXCLUSIVE_WITH_ERROR));

package/components/checkboxes/example-checkboxes-with-revealed-text-area-expanded.njk

@@ -0,0 +1,68 @@
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
+
+{%
+    call onsQuestion({
+        "title": "Do you have any dietary requirements?",
+        "legendIsQuestionTitle": true,
+        "classes": "ons-u-mt-no"
+    })
+%}
+    {{
+        onsCheckboxes({
+            "checkboxesLabel": "Select all that apply",
+            "dontWrap": true,
+            "checkboxes": [
+                {
+                    "id": "gluten-free-example-checkbox-with-revealed-text-area",
+                    "label": {
+                        "text": "Gluten free"
+                    },
+                    "value": "gluten-free"
+                },
+                {
+                    "id": "lactose-intolerant-example-checkbox-with-revealed-text-area",
+                    "label": {
+                        "text": "Lactose intolerant"
+                    },
+                    "value": "lactose-intolerant"
+                },
+                {
+                    "id": "vegan-example-checkbox-with-revealed-text-area",
+                    "label": {
+                        "text": "Vegan"
+                    },
+                    "value": "vegan"
+                },
+                {
+                    "id": "vegetarian-example-checkbox-with-revealed-text-area",
+                    "label": {
+                        "text": "Vegetarian"
+                    },
+                    "value": "vegetarian"
+                },
+                {
+                    "id": "other-checkbox-with-revealed-text-area",
+                    "label": {
+                        "text": "Other"
+                    },
+                    "value": "other",
+                    "checked": true,
+                    "other": {
+                        "otherType": "textarea",
+                        "id": "other-textbox-example-checkbox-with-revealed-text-area",
+                        "name": "other-answer",
+                        "label": {
+                            "text": "Provide more details"
+                        },
+                        "charCheckLimit": {
+                            "limit": 200,
+                            "charCountSingular": "You have {x} character remaining",
+                            "charCountPlural": "You have {x} characters remaining"
+                        }
+                    }
+                }
+            ]
+        })
+    }}
+{% endcall %}

package/components/checkboxes/example-checkboxes-with-revealed-text-area.njk

@@ -0,0 +1,67 @@
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
+
+{%
+    call onsQuestion({
+        "title": "Do you have any dietary requirements?",
+        "legendIsQuestionTitle": true,
+        "classes": "ons-u-mt-no"
+    })
+%}
+    {{
+        onsCheckboxes({
+            "checkboxesLabel": "Select all that apply",
+            "dontWrap": true,
+            "checkboxes": [
+                {
+                    "id": "gluten-free-example-checkbox-with-revealed-text-area",
+                    "label": {
+                        "text": "Gluten free"
+                    },
+                    "value": "gluten-free"
+                },
+                {
+                    "id": "lactose-intolerant-example-checkbox-with-revealed-text-area",
+                    "label": {
+                        "text": "Lactose intolerant"
+                    },
+                    "value": "lactose-intolerant"
+                },
+                {
+                    "id": "vegan-example-checkbox-with-revealed-text-area",
+                    "label": {
+                        "text": "Vegan"
+                    },
+                    "value": "vegan"
+                },
+                {
+                    "id": "vegetarian-example-checkbox-with-revealed-text-area",
+                    "label": {
+                        "text": "Vegetarian"
+                    },
+                    "value": "vegetarian"
+                },
+                {
+                    "id": "other-checkbox-with-revealed-text-area",
+                    "label": {
+                        "text": "Other"
+                    },
+                    "value": "other",
+                    "other": {
+                        "otherType": "textarea",
+                        "id": "other-textbox-example-checkbox-with-revealed-text-area",
+                        "name": "other-answer",
+                        "label": {
+                            "text": "Provide more details"
+                        },
+                        "charCheckLimit": {
+                            "limit": 200,
+                            "charCountSingular": "You have {x} character remaining",
+                            "charCountPlural": "You have {x} characters remaining"
+                        }
+                    }
+                }
+            ]
+        })
+    }}
+{% endcall %}

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