Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add variant for radios with a textarea #3148

Merged
merged 5 commits into from
Apr 17, 2024
Merged

Add variant for radios with a textarea #3148

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
89909af
add variant for radios
precious-onyenaucheya-ons Apr 16, 2024
494870b
update macro.md file
precious-onyenaucheya-ons Apr 17, 2024
1f84e83
fix formatting
precious-onyenaucheya-ons Apr 17, 2024
0bbd6af
Update src/components/radios/_macro.njk
precious-onyenaucheya-ons Apr 17, 2024
df6f025
Merge branch 'main' into feature/3128-variant-for-radio-with-revealed…
alessioventuriniAND Apr 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions ...radios_example-radios-with-revealed-text-area-expanded_0_document_0_desktop.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions ..._radios_example-radios-with-revealed-text-area-expanded_0_document_1_tablet.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions ..._radios_example-radios-with-revealed-text-area-expanded_0_document_2_mobile.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions ...mponents_radios_example-radios-with-revealed-text-area_0_document_0_desktop.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions ...omponents_radios_example-radios-with-revealed-text-area_0_document_1_tablet.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions ...omponents_radios_example-radios-with-revealed-text-area_0_document_2_mobile.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 10 additions & 10 deletions src/components/radios/_macro-options.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`<OtherRadio>` 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`<OtherRadio>` 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

Expand All @@ -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 `<input>`. 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 |
Expand Down
19 changes: 19 additions & 0 deletions src/components/radios/_macro.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,25 @@
"radios": radio.other.radios
})
}}
{% elif otherType == "textarea" %}
{% from "components/textarea/_macro.njk" import onsTextarea %}
{{
onsTextarea({
"id": radio.other.id,
precious-onyenaucheya-ons marked this conversation as resolved.
Show resolved Hide resolved
"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 %}
</span>
{% endif %}
Expand Down
87 changes: 87 additions & 0 deletions src/components/radios/example-radios-with-revealed-text-area-expanded.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 %}
86 changes: 86 additions & 0 deletions src/components/radios/example-radios-with-revealed-text-area.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 %}
Loading