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 textarea variant to checkbox component #3403

Merged
merged 10 commits into from
Oct 29, 2024
Merged

Add textarea variant to checkbox component #3403

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
0c7a9d2
add text area variant to checkboxes
precious-onyenaucheya-ons Oct 22, 2024
d8a8468
Addressed PR comment and update visual tests
admilne Oct 25, 2024
c1ac4c9
update as per PR comments
precious-onyenaucheya-ons Oct 28, 2024
61d36cc
update vr test
precious-onyenaucheya-ons Oct 28, 2024
d156f87
remove reference images
precious-onyenaucheya-ons Oct 28, 2024
13d9051
Update src/components/checkboxes/example-checkboxes-with-revealed-tex…
precious-onyenaucheya-ons Oct 29, 2024
73ca77b
Update src/components/checkboxes/example-checkboxes-with-revealed-tex…
precious-onyenaucheya-ons Oct 29, 2024
cbbd842
update example and visual test
precious-onyenaucheya-ons Oct 29, 2024
9af19bc
Merge branch 'main' into feature/3402/checkbox-with-revealed-text-area
rmccar Oct 29, 2024
fcc8fe9
Merge branch 'main' into feature/3402/checkbox-with-revealed-text-area
rmccar Oct 29, 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 ...es_example-checkboxes-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 ...xes_example-checkboxes-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 ...xes_example-checkboxes-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 ..._checkboxes_example-checkboxes-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 ...s_checkboxes_example-checkboxes-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 ...s_checkboxes_example-checkboxes-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: 20 additions & 0 deletions src/components/checkboxes/_checkbox-macro.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
rmccar marked this conversation as resolved.
Show resolved Hide resolved
"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 %}
Expand Down
28 changes: 14 additions & 14 deletions src/components/checkboxes/_macro-options.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
5 changes: 5 additions & 0 deletions src/components/checkboxes/_macro.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
35 changes: 35 additions & 0 deletions src/components/checkboxes/_macro.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand Down Expand Up @@ -135,6 +160,16 @@ describe('macro: checkboxes', () => {
});
});

describe('checkbox item with text area', () => {
rmccar marked this conversation as resolved.
Show resolved Hide resolved
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));
Expand Down
Loading