diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area-expanded_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area-expanded_0_document_0_desktop.png new file mode 100644 index 0000000000..d834f157c6 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area-expanded_0_document_0_desktop.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:2dad1e4ba510cd38c3afecbe7b20f47b61edd11e6028354c5387a363e034e532 +size 36883 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area-expanded_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area-expanded_0_document_1_tablet.png new file mode 100644 index 0000000000..bec81ad3ae --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area-expanded_0_document_1_tablet.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:99dfd895a6f302dcfc7ff80685961de73e5848d087fae171614e8bb20cccd6b6 +size 30668 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area-expanded_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area-expanded_0_document_2_mobile.png new file mode 100644 index 0000000000..d8c2431530 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area-expanded_0_document_2_mobile.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0a82f374ecd8fa4af57d44f251044de74f36fd12e344ecbf65de427ced17ee9b +size 27588 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area_0_document_0_desktop.png new file mode 100644 index 0000000000..b3f991bd40 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area_0_document_0_desktop.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:10ba7e91bbe232897053a20ba747e17ed8fa664d18b380ca0f21d9b3c5c1f511 +size 30077 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area_0_document_1_tablet.png new file mode 100644 index 0000000000..ea372414cc --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area_0_document_1_tablet.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:79bb19d47c95fa3a753dc2eae57ec91d93497a0c075e6e436f5bbce7848300f6 +size 24018 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area_0_document_2_mobile.png new file mode 100644 index 0000000000..c76b2938e9 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area_0_document_2_mobile.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:3d79f95ba6ead065a034034d2847176ca2001e9a9d024aeb38a0fb1464df46a1 +size 20799 diff --git a/src/components/checkboxes/_checkbox-macro.njk b/src/components/checkboxes/_checkbox-macro.njk index 4ff4e755e3..cc96a96f5c 100644 --- a/src/components/checkboxes/_checkbox-macro.njk +++ b/src/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 %} {% endif %} diff --git a/src/components/checkboxes/_macro-options.md b/src/components/checkboxes/_macro-options.md index 4344a2cd52..7e0bdc9dd5 100644 --- a/src/components/checkboxes/_macro-options.md +++ b/src/components/checkboxes/_macro-options.md @@ -18,20 +18,20 @@ ## Checkbox -| Name | Type | Required | Description | -| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| id | string | true | The HTML `id` of the checkbox. Used for the label’s `for` attribute. | -| name | string | false | The HTML `name` attribute for the checkbox | -| value | string | false | The HTML `value` attribute for the checkbox to set a preset value for the input | -| classes | string | false | Classes to add to the checkbox | -| inputClasses | string | false | Classes to apply to the checkbox input | -| checked | boolean | false | Set to “true” to check the checkbox when the page loads | -| disabled | boolean | false | Sets checkbox state to disabled and changes style of checkbox and label | -| label | `Label` [_(ref)_](/components/label) | true | Settings for the checkbox label | -| hideLabel | boolean | false | Adds visually hidden class to the label if `true` | -| other | object`` with arrays if using `Select` [_(ref)_](/components/select), `Checkboxes` [_(ref)_](/components/checkboxes) or `Radios` [_(ref)_](/components/radios) | false | Settings for a nested [input](/components/input), [select](/components/select), [checkboxes](/components/checkboxes) or [radios](/components/radios) to provide [other information](#othercheckbox) in addition to the checkbox answer. Defaults to use input. | -| attributes | object | false | HTML attributes (for example, data attributes) to add to the checkbox input element | -| deselectMessage | string | false | For use with mutually exclusive checkboxes. The text the `aria-live` alert will read to warn that selecting the exclusive option will clear all other inputs. | +| Name | Type | Required | Description | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| id | string | true | The HTML `id` of the checkbox. Used for the label’s `for` attribute. | +| name | string | false | The HTML `name` attribute for the checkbox | +| value | string | false | The HTML `value` attribute for the checkbox to set a preset value for the input | +| classes | string | false | Classes to add to the checkbox | +| inputClasses | string | false | Classes to apply to the checkbox input | +| checked | boolean | false | Set to “true” to check the checkbox when the page loads | +| disabled | boolean | false | Sets checkbox state to disabled and changes style of checkbox and label | +| label | `Label` [_(ref)_](/components/label) | true | Settings for the checkbox label | +| hideLabel | boolean | false | Adds visually hidden class to the label if `true` | +| other | object`` with arrays if using `Select` [_(ref)_](/components/select), `Checkboxes` [_(ref)_](/components/checkboxes) or `Radios` [_(ref)_](/components/radios) | false | Settings for a nested [input](/components/input), [select](/components/select), [checkboxes](/components/checkboxes) or [radios](/components/radios) to provide [other information](#othercheckbox) in addition to the checkbox answer or [textarea](/components/text-area) to provide additional information on selection. Defaults to use input. | +| attributes | object | false | HTML attributes (for example, data attributes) to add to the checkbox input element | +| deselectMessage | string | false | For use with mutually exclusive checkboxes. The text the `aria-live` alert will read to warn that selecting the exclusive option will clear all other inputs. | ## OtherCheckbox diff --git a/src/components/checkboxes/_macro.njk b/src/components/checkboxes/_macro.njk index 20f935b7bf..0120fb5dd4 100644 --- a/src/components/checkboxes/_macro.njk +++ b/src/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, diff --git a/src/components/checkboxes/_macro.spec.js b/src/components/checkboxes/_macro.spec.js index 2288ccb3a8..2eed26cae4 100644 --- a/src/components/checkboxes/_macro.spec.js +++ b/src/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)); diff --git a/src/components/checkboxes/example-checkboxes-with-revealed-text-area-expanded.njk b/src/components/checkboxes/example-checkboxes-with-revealed-text-area-expanded.njk new file mode 100644 index 0000000000..f9c5310ffc --- /dev/null +++ b/src/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 %} diff --git a/src/components/checkboxes/example-checkboxes-with-revealed-text-area.njk b/src/components/checkboxes/example-checkboxes-with-revealed-text-area.njk new file mode 100644 index 0000000000..bdd5196c18 --- /dev/null +++ b/src/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 %}