diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area-and-character-limit-expanded_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area-and-character-limit-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-and-character-limit-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-and-character-limit-expanded_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area-and-character-limit-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-and-character-limit-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-and-character-limit-expanded_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area-and-character-limit-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-and-character-limit-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-and-character-limit_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area-and-character-limit_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-and-character-limit_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-and-character-limit_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area-and-character-limit_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-and-character-limit_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-and-character-limit_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_checkboxes_example-checkboxes-with-revealed-text-area-and-character-limit_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-and-character-limit_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 0485fdac51..cc96a96f5c 100644 --- a/src/components/checkboxes/_checkbox-macro.njk +++ b/src/components/checkboxes/_checkbox-macro.njk @@ -106,6 +106,7 @@ "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' diff --git a/src/components/checkboxes/_macro.spec.js b/src/components/checkboxes/_macro.spec.js index 017efa0a46..2eed26cae4 100644 --- a/src/components/checkboxes/_macro.spec.js +++ b/src/components/checkboxes/_macro.spec.js @@ -164,6 +164,7 @@ describe('macro: checkboxes', () => { 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'); }); diff --git a/src/components/checkboxes/example-checkboxes-with-revealed-text-area-and-character-limit-expanded.njk b/src/components/checkboxes/example-checkboxes-with-revealed-text-area-and-character-limit-expanded.njk new file mode 100644 index 0000000000..38a85a608c --- /dev/null +++ b/src/components/checkboxes/example-checkboxes-with-revealed-text-area-and-character-limit-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-text-area-and-character-limit.njk b/src/components/checkboxes/example-checkboxes-with-revealed-text-area-and-character-limit.njk similarity index 92% rename from src/components/checkboxes/example-checkboxes-with-text-area-and-character-limit.njk rename to src/components/checkboxes/example-checkboxes-with-revealed-text-area-and-character-limit.njk index 68304d7166..7a314a0f80 100644 --- a/src/components/checkboxes/example-checkboxes-with-text-area-and-character-limit.njk +++ b/src/components/checkboxes/example-checkboxes-with-revealed-text-area-and-character-limit.njk @@ -14,35 +14,35 @@ "dontWrap": true, "checkboxes": [ { - "id": "gluten-free-example-checkbox-with-revealed-text-input", + "id": "gluten-free-example-checkbox-with-revealed-text-area", "label": { "text": "Gluten free" }, "value": "gluten-free" }, { - "id": "lactose-intolerant-example-checkbox-with-revealed-text-input", + "id": "lactose-intolerant-example-checkbox-with-revealed-text-area", "label": { "text": "Lactose intolerant" }, "value": "lactose-intolerant" }, { - "id": "vegan-example-checkbox-with-revealed-text-input", + "id": "vegan-example-checkbox-with-revealed-text-area", "label": { "text": "Vegan" }, "value": "vegan" }, { - "id": "vegetarian-example-checkbox-with-revealed-text-input", + "id": "vegetarian-example-checkbox-with-revealed-text-area", "label": { "text": "Vegetarian" }, "value": "vegetarian" }, { - "id": "other-checkbox-with-revealed-text-input", + "id": "other-checkbox-with-revealed-text-area", "label": { "text": "Other" }, @@ -55,7 +55,7 @@ "text": "Provide more details" }, "charCheckLimit": { - "limit": 400, + "limit": 200, "charCountSingular": "You have {x} character remaining", "charCountPlural": "You have {x} characters remaining" }