Add textarea variant to checkbox component

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'

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');
         });

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 %}

src/components/checkboxes/example-checkboxes-with-text-area-and-character-limit.njk → 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"
                         }