From 4f0ae955d12a511982631b2865e18b27a2c8203d Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Wed, 17 Apr 2024 15:19:22 +0100 Subject: [PATCH] Add variant for radios with a textarea (#3148) * add variant for radios * update macro.md file * fix formatting * Update src/components/radios/_macro.njk Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --------- Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> Co-authored-by: Alessio Venturini <112873190+alessioventuriniAND@users.noreply.github.com> --- ...ext-area-expanded_0_document_0_desktop.png | 3 + ...text-area-expanded_0_document_1_tablet.png | 3 + ...text-area-expanded_0_document_2_mobile.png | 3 + ...evealed-text-area_0_document_0_desktop.png | 3 + ...revealed-text-area_0_document_1_tablet.png | 3 + ...revealed-text-area_0_document_2_mobile.png | 3 + src/components/radios/_macro-options.md | 20 ++--- src/components/radios/_macro.njk | 19 ++++ ...adios-with-revealed-text-area-expanded.njk | 87 +++++++++++++++++++ ...example-radios-with-revealed-text-area.njk | 86 ++++++++++++++++++ 10 files changed, 220 insertions(+), 10 deletions(-) create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area-expanded_0_document_0_desktop.png create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area-expanded_0_document_1_tablet.png create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area-expanded_0_document_2_mobile.png create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area_0_document_0_desktop.png create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area_0_document_1_tablet.png create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area_0_document_2_mobile.png create mode 100644 src/components/radios/example-radios-with-revealed-text-area-expanded.njk create mode 100644 src/components/radios/example-radios-with-revealed-text-area.njk diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area-expanded_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area-expanded_0_document_0_desktop.png new file mode 100644 index 0000000000..9052c68df6 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area-expanded_0_document_0_desktop.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:cf26b18169f7a71fcbb77e46aac3eee8242f3682c616ab270bf531e76d2a8024 +size 47620 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area-expanded_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area-expanded_0_document_1_tablet.png new file mode 100644 index 0000000000..4efc430d03 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area-expanded_0_document_1_tablet.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:4e2768f2c81e8afc08f6e861517560f7b13696efd7f6abd71ce5d4c8db03ffea +size 40559 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area-expanded_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area-expanded_0_document_2_mobile.png new file mode 100644 index 0000000000..5fbb567abc --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area-expanded_0_document_2_mobile.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5d8534262c44035612af103bf617247c43627b350a061ec708a2cd5920c840ad +size 38513 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area_0_document_0_desktop.png new file mode 100644 index 0000000000..cf957bf78d --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area_0_document_0_desktop.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:9aa42904520ec42905b7507d9d59e27743fdbe42d46a7aed2756d630ebf7d83f +size 40808 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area_0_document_1_tablet.png new file mode 100644 index 0000000000..3ddcf30bdb --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area_0_document_1_tablet.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:69f0268f7e69e720b5df6fee04c2fbaa0bab13f38ae936f3724091b6a55d27d1 +size 34272 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area_0_document_2_mobile.png new file mode 100644 index 0000000000..50b565995d --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_radios_example-radios-with-revealed-text-area_0_document_2_mobile.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:03b7f90018d5ebd6d361c7b00cdc2f80a084863c071eb0cfd4f88a93d98fc6bc +size 30747 diff --git a/src/components/radios/_macro-options.md b/src/components/radios/_macro-options.md index 436b6f602a..2e10e2f8d8 100644 --- a/src/components/radios/_macro-options.md +++ b/src/components/radios/_macro-options.md @@ -17,15 +17,15 @@ ## Radio -| Name | Type | Required | Description | -| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| id | string | true | The HTML `id` of the radio. Used for the label’s `for` attribute. | -| value | string | false | The HTML `value` attribute for the radio to set a preset value for the input | -| classes | string | false | Classes to add to the radio | -| checked | boolean | false | Set to “true” to select the radio when the page loads | -| label | `Label` [_(ref)_](/components/label) | true | Settings for the radio label | -| 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](#otherradio) in addition to the radio answer. Defaults to use input. | -| attributes | object | false | HTML attributes (for example, data attributes) to add to the radio input element | +| Name | Type | Required | Description | +| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| id | string | true | The HTML `id` of the radio. Used for the label’s `for` attribute. | +| value | string | false | The HTML `value` attribute for the radio to set a preset value for the input | +| classes | string | false | Classes to add to the radio | +| checked | boolean | false | Set to “true” to select the radio when the page loads | +| label | `Label` [_(ref)_](/components/label) | true | Settings for the radio label | +| 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), [radios](/components/radios) or [textarea](/components/textarea) to provide [other information](#otherradio) in addition to the radio answer. Defaults to use input. | +| attributes | object | false | HTML attributes (for example, data attributes) to add to the radio input element | ## OtherRadio @@ -39,7 +39,7 @@ | width | string | false | Required width of the nested text input in number of letters or digits. Will also accept a breakpoint suffix, for example, “7@m”. Defaults to “auto”. | | type | string | false | Sets the HTML `type` attribute for the nested ``. Can be set to either: “number”, “email”, “tel”, “password”, or “search”. Defaults to “text”. | | inputClasses | string | false | Classes to apply to the radio input element | -| otherType | string | false (unless alternative input used) | Set the type of nested input if not using default text input, using available types: “select”, “checkboxes” or “radios”. | +| otherType | string | false (unless alternative input used) | Set the type of nested input if not using default text input, using available types: “select”, “checkboxes”, “radios” or “textarea”. | | open | boolean | false | Set to “true” to show the nested `other` input when page loads | | selectAllChildren | boolean | false | Set to “true” when using `otherType` set to “checkboxes” to show all nested checkboxes pre-selected | | attributes | object | false | HTML attributes (for example, data attributes) to add to the nested input | diff --git a/src/components/radios/_macro.njk b/src/components/radios/_macro.njk index e7472036bd..3448be8281 100644 --- a/src/components/radios/_macro.njk +++ b/src/components/radios/_macro.njk @@ -113,6 +113,25 @@ "radios": radio.other.radios }) }} + {% elif otherType == "textarea" %} + {% from "components/textarea/_macro.njk" import onsTextarea %} + {{ + onsTextarea({ + "id": radio.other.id, + "name": radio.other.name, + "label": { + "id": radio.other.id + "-label", + "text": radio.other.label.text, + "classes": 'ons-u-fw-n', + "description": radio.other.label.description + }, + "charCheckLimit": { + "limit": radio.other.charCheckLimit.limit, + "charCountSingular": radio.other.charCheckLimit.charCountSingular, + "charCountPlural": radio.other.charCheckLimit.charCountPlural + } + }) + }} {% endif %} {% endif %} diff --git a/src/components/radios/example-radios-with-revealed-text-area-expanded.njk b/src/components/radios/example-radios-with-revealed-text-area-expanded.njk new file mode 100644 index 0000000000..abab2aaf76 --- /dev/null +++ b/src/components/radios/example-radios-with-revealed-text-area-expanded.njk @@ -0,0 +1,87 @@ +{% from "components/radios/_macro.njk" import onsRadios %} +{% from "components/question/_macro.njk" import onsQuestion %} + +{% call onsQuestion({ + "title": "How do you usually travel to work?", + "classes": "ons-u-mt-no", + "legendIsQuestionTitle": true +}) %} + {{ + onsRadios({ + "dontWrap": true, + "name": "travel", + "radios": [ + { + "id": "home-example-radio-with-revealed-text-input", + "label": { + "text": "Work mainly from home" + }, + "value": "home" + }, + { + "id": "car-example-radio-with-revealed-text-input", + "label": { + "text": "Car or van" + }, + "value": "car" + }, + { + "id": "underground-example-radio-with-revealed-text-input", + "label": { + "text": "Underground, metro, light rail or tram" + }, + "value": "underground" + }, + { + "id": "train-example-radio-with-revealed-text-input", + "label": { + "text": "Train" + }, + "value": "train" + }, + { + "id": "bus-example-radio-with-revealed-text-input", + "label": { + "text": "Bus, minibus or coach" + }, + "value": "bus" + }, + { + "id": "bicycle-example-radio-with-revealed-text-input", + "label": { + "text": "Bicycle" + }, + "value": "bicycle" + }, + { + "id": "walk-example-radio-with-revealed-text-input", + "label": { + "text": "Walk" + }, + "value": "walk" + }, + { + "id": "other-radio-example-radio-with-revealed-text-input", + "label": { + "text": "Other" + }, + "value": "other", + "checked": true, + "other": { + "otherType": "textarea", + "id": "other-textbox-example-radio-with-revealed-text-input", + "name": "other-answer", + "label": { + "text": "Enter how you travel" + }, + "charCheckLimit": { + "limit": 200, + "charCountSingular": "You have {x} character remaining", + "charCountPlural": "You have {x} characters remaining" + } + } + } + ] + }) + }} +{% endcall %} diff --git a/src/components/radios/example-radios-with-revealed-text-area.njk b/src/components/radios/example-radios-with-revealed-text-area.njk new file mode 100644 index 0000000000..84ac271ada --- /dev/null +++ b/src/components/radios/example-radios-with-revealed-text-area.njk @@ -0,0 +1,86 @@ +{% from "components/radios/_macro.njk" import onsRadios %} +{% from "components/question/_macro.njk" import onsQuestion %} + +{% call onsQuestion({ + "title": "How do you usually travel to work?", + "classes": "ons-u-mt-no", + "legendIsQuestionTitle": true +}) %} + {{ + onsRadios({ + "dontWrap": true, + "name": "travel", + "radios": [ + { + "id": "home-example-radio-with-revealed-text-input", + "label": { + "text": "Work mainly from home" + }, + "value": "home" + }, + { + "id": "car-example-radio-with-revealed-text-input", + "label": { + "text": "Car or van" + }, + "value": "car" + }, + { + "id": "underground-example-radio-with-revealed-text-input", + "label": { + "text": "Underground, metro, light rail or tram" + }, + "value": "underground" + }, + { + "id": "train-example-radio-with-revealed-text-input", + "label": { + "text": "Train" + }, + "value": "train" + }, + { + "id": "bus-example-radio-with-revealed-text-input", + "label": { + "text": "Bus, minibus or coach" + }, + "value": "bus" + }, + { + "id": "bicycle-example-radio-with-revealed-text-input", + "label": { + "text": "Bicycle" + }, + "value": "bicycle" + }, + { + "id": "walk-example-radio-with-revealed-text-input", + "label": { + "text": "Walk" + }, + "value": "walk" + }, + { + "id": "other-radio-example-radio-with-revealed-text-input", + "label": { + "text": "Other" + }, + "value": "other", + "other": { + "otherType": "textarea", + "id": "other-textbox-example-radio-with-revealed-text-input", + "name": "other-answer", + "label": { + "text": "Enter how you travel" + }, + "charCheckLimit": { + "limit": 200, + "charCountSingular": "You have {x} character remaining", + "charCountPlural": "You have {x} characters remaining" + } + } + } + ] + }) + }} +{% endcall %}