Merge branch 'main' into feature/3282/increase-search-threshold

ONSdigital · Oct 30, 2024 · 7e8817c · 7e8817c
2 parents ec3e187 + 25dcf1b
commit 7e8817c
Show file tree

Hide file tree

Showing 18 changed files with 235 additions and 23 deletions.
diff --git a/...es_example-checkboxes-with-revealed-text-area-expanded_0_document_0_desktop.png b/...es_example-checkboxes-with-revealed-text-area-expanded_0_document_0_desktop.png
diff --git a/...xes_example-checkboxes-with-revealed-text-area-expanded_0_document_1_tablet.png b/...xes_example-checkboxes-with-revealed-text-area-expanded_0_document_1_tablet.png
diff --git a/...xes_example-checkboxes-with-revealed-text-area-expanded_0_document_2_mobile.png b/...xes_example-checkboxes-with-revealed-text-area-expanded_0_document_2_mobile.png
diff --git a/..._checkboxes_example-checkboxes-with-revealed-text-area_0_document_0_desktop.png b/..._checkboxes_example-checkboxes-with-revealed-text-area_0_document_0_desktop.png
diff --git a/...s_checkboxes_example-checkboxes-with-revealed-text-area_0_document_1_tablet.png b/...s_checkboxes_example-checkboxes-with-revealed-text-area_0_document_1_tablet.png
diff --git a/...s_checkboxes_example-checkboxes-with-revealed-text-area_0_document_2_mobile.png b/...s_checkboxes_example-checkboxes-with-revealed-text-area_0_document_2_mobile.png
diff --git a/...vr-test__foundations_highlighting_example-highlighting_0_document_0_desktop.png b/...vr-test__foundations_highlighting_example-highlighting_0_document_0_desktop.png
diff --git a/...-vr-test__foundations_highlighting_example-highlighting_0_document_1_tablet.png b/...-vr-test__foundations_highlighting_example-highlighting_0_document_1_tablet.png
diff --git a/...-vr-test__foundations_highlighting_example-highlighting_0_document_2_mobile.png b/...-vr-test__foundations_highlighting_example-highlighting_0_document_2_mobile.png
diff --git 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 %}
             </span>
         {% endif %}

diff --git 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`<OtherCheckbox>` 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`<OtherCheckbox>` 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
@@ -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
@@ -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));