From 34febd249ebe562510b94ef8c3622d101cb85a0d Mon Sep 17 00:00:00 2001 From: Tom King Date: Wed, 31 Jan 2024 11:17:56 +1000 Subject: [PATCH 1/2] - updated button group, checkbox group and radio group to use slots instead of Children.map or cloneElement - fixed issue with table stories - updated docs to reflect changes to components --- .../button-dropdown-menu-sizes/content.mdoc | 26 +- .../code/development-examples/content.mdoc | 49 ++-- .../design/button-groups/content.mdoc | 83 ++++--- .../code/development-examples/content.mdoc | 235 +++++++++++------- .../design/checkbox-sizes/content.mdoc | 30 ++- .../checkbox-with-hint-text/content.mdoc | 42 ++-- .../design/checkbox-with-reveal/content.mdoc | 30 ++- .../design/horizontal-layout/content.mdoc | 13 +- .../radio-group/accessibilityDemo.mdoc | 13 +- .../code/development-examples/content.mdoc | 183 ++++++++------ .../design/horizontal-layout/content.mdoc | 29 ++- .../design/radio-sizes/content.mdoc | 28 ++- .../design/radios-with-hint-text/content.mdoc | 40 ++- .../design/radios-with-reveal/content.mdoc | 30 ++- .../displaying-error-messages/content.mdoc | 26 +- .../design/auto-address/content.mdoc | 17 +- .../design/error-states/content.mdoc | 19 +- .../design/manual-address/content.mdoc | 13 +- .../name/design/full-name/content.mdoc | 18 +- .../button-group/button-group.component.tsx | 16 +- .../button-group/button-group.spec.tsx | 127 +++++++--- .../button-group/button-group.stories.tsx | 139 ++++++++--- .../button-group/button-group.types.ts | 9 +- .../checkbox-group.component.tsx | 19 +- .../checkbox-group/checkbox-group.spec.tsx | 94 ++++--- .../checkbox-group/checkbox-group.stories.tsx | 117 ++++----- .../checkbox-group/checkbox-group.types.ts | 5 +- .../radio-group/radio-group.component.tsx | 19 +- .../radio-group/radio-group.spec.tsx | 68 +++-- .../radio-group/radio-group.stories.tsx | 112 ++++----- .../radio-group/radio-group.types.ts | 11 +- .../ui/src/components/table/table.stories.tsx | 12 +- 32 files changed, 1006 insertions(+), 666 deletions(-) diff --git a/apps/site/src/content/design-system/components/button-dropdown/design/button-dropdown-menu-sizes/content.mdoc b/apps/site/src/content/design-system/components/button-dropdown/design/button-dropdown-menu-sizes/content.mdoc index a85af7a70..edaa4ca44 100644 --- a/apps/site/src/content/design-system/components/button-dropdown/design/button-dropdown-menu-sizes/content.mdoc +++ b/apps/site/src/content/design-system/components/button-dropdown/design/button-dropdown-menu-sizes/content.mdoc @@ -51,17 +51,23 @@ The button dropdown menus come in three sizes or widths. They are triggered by t
Checkboxes - - Option 1 - Option 2 - Option 3 - + Options - - Option 1 - Option 2 - Option 3 - + diff --git a/apps/site/src/content/design-system/components/button-group/code/development-examples/content.mdoc b/apps/site/src/content/design-system/components/button-group/code/development-examples/content.mdoc index 56a2828ed..f4c8ad149 100644 --- a/apps/site/src/content/design-system/components/button-group/code/development-examples/content.mdoc +++ b/apps/site/src/content/design-system/components/button-group/code/development-examples/content.mdoc @@ -1,11 +1,14 @@ ### ButtonGroup sizes ```jsx - - Left - Middle - Right - + + ``` ### ButtonGroup looks @@ -15,19 +18,21 @@ Index (integer)

} - > - Left - Middle - Right - + buttons={[ + { value: 0, children: "Left" }, + { value: 1, children: "Middle" }, + { value: 2, children: "Right"} + ]} + /> Key (string)

} - > - Left - Middle - Right - + buttons={[ + { value: "left", children: "Left" }, + { value: "middle", children: "Middle" }, + { value: "right", children: "Right"} + ]} + />
``` @@ -53,11 +58,15 @@ reset - - Yes - Maybe - No - + ); }; diff --git a/apps/site/src/content/design-system/components/button-group/design/button-groups/content.mdoc b/apps/site/src/content/design-system/components/button-group/design/button-groups/content.mdoc index 83694d2f6..6cafbf0dc 100644 --- a/apps/site/src/content/design-system/components/button-group/design/button-groups/content.mdoc +++ b/apps/site/src/content/design-system/components/button-group/design/button-groups/content.mdoc @@ -2,22 +2,34 @@ ```tsx
- - Sm - 30px - Label - - - Md - 36px - Label - - - Lg - 42px - Label - - - Xl - 48px - Label - + + + +
``` @@ -25,15 +37,22 @@ ```tsx
- - Yes - No - - - Email - Phone - SMS - + + +
``` @@ -41,10 +60,14 @@ ```jsx
- - Email - Phone - Label - +
``` diff --git a/apps/site/src/content/design-system/components/checkbox-group/code/development-examples/content.mdoc b/apps/site/src/content/design-system/components/checkbox-group/code/development-examples/content.mdoc index d89de64ab..5212b9505 100644 --- a/apps/site/src/content/design-system/components/checkbox-group/code/development-examples/content.mdoc +++ b/apps/site/src/content/design-system/components/checkbox-group/code/development-examples/content.mdoc @@ -4,24 +4,30 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c ```jsx
- Checkbox}> - Option 1 - Option 2 - Option 3 - + Checkbox} + checkboxes={[ + { value: "Option 1", children: "Option 1" }, + { value: "Option 2", children: "Option 2" }, + { value: "Option 3", children: "Option 3" }, + ]} + />
``` ### With default value ```jsx -Checkbox} defaultValue={['1', '3']}> - - Option 1 - - Option 2 - Option 3 - +Checkbox} + defaultValue={['1', '3']} + checkboxes={[ + { value: "1", children: "Option 1", isDisabled: true}, + { value: "2", children: "Option 2" }, + { value: "3", children: "Option 3" }, + ]} +/> ``` ### With onChange @@ -35,11 +41,12 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c value={formCheckValue} onChange={(value, event) => setFormCheckValue(value)} label={Checkbox} - > - Option 1 - Option 2 - Option 3 - + checkboxes={[ + { value: "1", children: "Option 1" }, + { value: "2", children: "Option 2" }, + { value: "3", children: "Option 3" }, + ]} + /> ); }; ``` @@ -48,16 +55,26 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c ```jsx
- Medium} size="medium"> - Option 1 - Option 2 - Option 3 - - Large} size="large"> - Option 1 - Option 2 - Option 3 - + Medium} + size="medium" + checkboxes={[ + { value: "Option 1", children: "Option 1" }, + { value: "Option 2", children: "Option 2" }, + { value: "Option 3", children: "Option 3" }, + ]} + /> + Large} + size="large" + checkboxes={[ + { value: "Option 1", children: "Option 1" }, + { value: "Option 2", children: "Option 2" }, + { value: "Option 3", children: "Option 3" }, + ]} + />
``` @@ -65,28 +82,26 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c ```jsx
- Medium} size="medium"> - - Option 1 - - - Option 2 - - - Option 3 - - - Large} size="large"> - - Option 1 - - - Option 2 - - - Option 3 - - + Medium} + size="medium" + checkboxes={[ + { value: "Option 1", children: "Option 1", hint: "This is hint text" }, + { value: "Option 2", children: "Option 2", hint: "This is hint text" }, + { value: "Option 3", children: "Option 3", hint: "This is hint text" }, + ]} + /> + Large} + size="large" + checkboxes={[ + { value: "Option 1", children: "Option 1", hint: "This is hint text" }, + { value: "Option 2", children: "Option 2", hint: "This is hint text" }, + { value: "Option 3", children: "Option 3", hint: "This is hint text" }, + ]} + />
``` @@ -94,17 +109,26 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c ```jsx
- Medium} orientation="horizontal"> - Option 1 - Option 2 - Option 3 - - - Large} size="large" orientation="horizontal"> - Option 1 - Option 2 - Option 3 - + Medium} + orientation="horizontal" + checkboxes={[ + { value: "Option 1", children: "Option 1" }, + { value: "Option 2", children: "Option 2" }, + { value: "Option 3", children: "Option 3" }, + ]} + /> + + Large} + size="large" + orientation="horizontal" + checkboxes={[ + { value: "Option 1", children: "Option 1" }, + { value: "Option 2", children: "Option 2" }, + { value: "Option 3", children: "Option 3" }, + ]} + />
``` @@ -112,16 +136,26 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c ```jsx
- Medium} size="medium" showAmount={1}> - Option 1 - Option 2 - Option 3 - - Large} size="large" showAmount={1}> - Option 1 - Option 2 - Option 3 - + Medium} + size="medium" + showAmount={1} + checkboxes={[ + { value: "Option 1", children: "Option 1" }, + { value: "Option 2", children: "Option 2" }, + { value: "Option 3", children: "Option 3" }, + ]} + /> + Large} + size="large" + showAmount={1} + checkboxes={[ + { value: "Option 1", children: "Option 1" }, + { value: "Option 2", children: "Option 2" }, + { value: "Option 3", children: "Option 3" }, + ]} + />
``` @@ -129,16 +163,26 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c ```jsx
- Medium} size="medium" isDisabled> - Option 1 - Option 2 - Option 3 - - Large} size="large" isDisabled> - Option 1 - Option 2 - Option 3 - + Medium} + size="medium" + isDisabled + checkboxes={[ + { value: "Option 1", children: "Option 1" }, + { value: "Option 2", children: "Option 2" }, + { value: "Option 3", children: "Option 3" }, + ]} + /> + Large} + size="large" + isDisabled + checkboxes={[ + { value: "Option 1", children: "Option 1" }, + { value: "Option 2", children: "Option 2" }, + { value: "Option 3", children: "Option 3" }, + ]} + />
``` @@ -146,19 +190,24 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c ```jsx
- Medium} size="medium"> - - Option 1 - - Option 2 - Option 3 - - Large} size="large"> - Option 1 - - Option 2 - - Option 3 + Medium} + size="medium" + checkboxes={[ + { value: "Option 1", children: "Option 1", isDisabled: true }, + { value: "Option 2", children: "Option 2" }, + { value: "Option 3", children: "Option 3" }, + ]} + /> + Large} + size="large" + checkboxes={[ + { value: "Option 1", children: "Option 1" }, + { value: "Option 2", children: "Option 2", isDisabled: true }, + { value: "Option 3", children: "Option 3" }, + ]} + />
``` diff --git a/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-sizes/content.mdoc b/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-sizes/content.mdoc index 782e78b90..a67c505c2 100644 --- a/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-sizes/content.mdoc +++ b/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-sizes/content.mdoc @@ -2,15 +2,25 @@ There are two checkbox sizes, make sure when laying out forms that your checkbox ```jsx
- Medium} size="medium"> - Option 1 - Option 2 - Option 3 - - Large} size="large"> - Option 1 - Option 2 - Option 3 - + Medium} + size="medium" + checkboxes={[ + { value: "Option 1", children: "Option 1" }, + { value: "Option 2", children: "Option 2" }, + { value: "Option 3", children: "Option 3" }, + ]} + /> + Large} + size="large" + checkboxes={[ + { value: "Option 1", children: "Option 1" }, + { value: "Option 2", children: "Option 2" }, + { value: "Option 3", children: "Option 3" }, + ]} + />
``` diff --git a/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-hint-text/content.mdoc b/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-hint-text/content.mdoc index 8b871eb6b..dec994fd5 100644 --- a/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-hint-text/content.mdoc +++ b/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-hint-text/content.mdoc @@ -2,27 +2,25 @@ This variation allows supporting text to be displayed below the selectable item. ```jsx
- Medium} size="medium"> - - Option 1 - - - Option 2 - - - Option 3 - - - Large} size="large"> - - Option 1 - - - Option 2 - - - Option 3 - - + Medium} + size="medium" + checkboxes={[ + { value: "Option 1", children: "Option 1", hint: "This is hint text" }, + { value: "Option 2", children: "Option 2", hint: "This is hint text" }, + { value: "Option 3", children: "Option 3", hint: "This is hint text" }, + ]} + /> + Large} + size="large" + checkboxes={[ + { value: "Option 1", children: "Option 1", hint: "This is hint text" }, + { value: "Option 2", children: "Option 2", hint: "This is hint text" }, + { value: "Option 3", children: "Option 3", hint: "This is hint text" }, + ]} + />
``` diff --git a/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-reveal/content.mdoc b/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-reveal/content.mdoc index b26ad36d3..26295f01e 100644 --- a/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-reveal/content.mdoc +++ b/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-reveal/content.mdoc @@ -7,15 +7,25 @@ When requirements dictate long lists of choices, and particularly as mobile scre ```jsx
- Medium} size="medium" showAmount={1}> - Option 1 - Option 2 - Option 3 - - Large} size="large" showAmount={1}> - Option 1 - Option 2 - Option 3 - + Medium} + size="medium" + showAmount={1} + checkboxes={[ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, + ]} + /> + Large} + size="large" + showAmount={1} + checkboxes={[ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, + ]} + />
``` diff --git a/apps/site/src/content/design-system/components/checkbox-group/design/horizontal-layout/content.mdoc b/apps/site/src/content/design-system/components/checkbox-group/design/horizontal-layout/content.mdoc index b68c9a521..a46ff3364 100644 --- a/apps/site/src/content/design-system/components/checkbox-group/design/horizontal-layout/content.mdoc +++ b/apps/site/src/content/design-system/components/checkbox-group/design/horizontal-layout/content.mdoc @@ -1,9 +1,12 @@ Use this option when you require an inline layout, it's only recommended in very specific circumstances and we suggest never having more than two checkboxes side-by-side. ```jsx - - Option 1 - Option 2 - Option 3 - + ``` diff --git a/apps/site/src/content/design-system/components/radio-group/accessibilityDemo.mdoc b/apps/site/src/content/design-system/components/radio-group/accessibilityDemo.mdoc index 4aa304984..03ddc6c2f 100644 --- a/apps/site/src/content/design-system/components/radio-group/accessibilityDemo.mdoc +++ b/apps/site/src/content/design-system/components/radio-group/accessibilityDemo.mdoc @@ -1,7 +1,10 @@ ```tsx - - Option 1 - Option 2 - Option 3 - + ``` diff --git a/apps/site/src/content/design-system/components/radio-group/code/development-examples/content.mdoc b/apps/site/src/content/design-system/components/radio-group/code/development-examples/content.mdoc index 946f9a4d0..72051ac7d 100644 --- a/apps/site/src/content/design-system/components/radio-group/code/development-examples/content.mdoc +++ b/apps/site/src/content/design-system/components/radio-group/code/development-examples/content.mdoc @@ -4,16 +4,24 @@ This component does not contain an option for `checkbox` as it was decided it sh ```jsx
- Medium

} size="medium"> - Option 1 - Option 2 - Option 3 - - Large

} size="large"> - Option 1 - Option 2 - Option 3 - + Medium

} + size="medium" + radios={[ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, + ]} + /> + Large

} + size="large" + radios={[ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, + ]} + />
``` @@ -21,17 +29,26 @@ This component does not contain an option for `checkbox` as it was decided it sh ```jsx
- Medium

} orientation="horizontal"> - Option 1 - Option 2 - Option 3 - + Medium

} + orientation="horizontal" + radios={[ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, + ]} + /> - Large

} size="large" orientation="horizontal"> - Option 1 - Option 2 - Option 3 - + Large

} + size="large" + orientation="horizontal" + radios={[ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, + ]} + />
``` @@ -39,28 +56,24 @@ This component does not contain an option for `checkbox` as it was decided it sh ```jsx
- Medium

} size="medium"> - - Option 1 - - - Option 2 - - - Option 3 - - - Large

} size="large"> - - Option 1 - - - Option 2 - - - Option 3 - - + Medium

} + size="medium" + radios={[ + { value: 'Option 1', children: 'Option 1', hint: 'This is hint text' }, + { value: 'Option 2', children: 'Option 2', hint: 'This is hint text' }, + { value: 'Option 3', children: 'Option 3', hint: 'This is hint text' }, + ]} + /> + Large

} + size="large" + radios={[ + { value: 'Option 1', children: 'Option 1', hint: 'This is hint text' }, + { value: 'Option 2', children: 'Option 2', hint: 'This is hint text' }, + { value: 'Option 3', children: 'Option 3', hint: 'This is hint text' }, + ]} + />
``` @@ -68,16 +81,26 @@ This component does not contain an option for `checkbox` as it was decided it sh ```jsx
- Medium

} size="medium" showAmount={1}> - Option 1 - Option 2 - Option 3 - - Large

} size="large" showAmount={1}> - Option 1 - Option 2 - Option 3 - + Medium

} + size="medium" + showAmount={1} + radios={[ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, + ]} + /> + Large

} + size="large" + showAmount={1} + radios={[ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, + ]} + />
``` @@ -85,16 +108,26 @@ This component does not contain an option for `checkbox` as it was decided it sh ```jsx
- Medium

} size="medium" isDisabled> - Option 1 - Option 2 - Option 3 - - Large

} size="large" isDisabled> - Option 1 - Option 2 - Option 3 - + Medium

} + size="medium" + isDisabled + radios={[ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, + ]} + /> + Large

} + size="large" + isDisabled + radios={[ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, + ]} + />
``` @@ -102,14 +135,24 @@ This component does not contain an option for `checkbox` as it was decided it sh ```jsx
- Medium

} size="medium"> - - Option 1 - - Option 2 - Option 3 - - Large

} size="large"> + Medium

} + size="medium" + radios={[ + { value: 'Option 1', children: 'Option 1', isDisabled: true }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, + ]} + /> + Large

} + size="large" + radios={[ + { value: 'Option 1', children: 'Option 1'}, + { value: 'Option 2', children: 'Option 2', isDisabled: true }, + { value: 'Option 3', children: 'Option 3' }, + ]} + > Option 1 Option 2 diff --git a/apps/site/src/content/design-system/components/radio-group/design/horizontal-layout/content.mdoc b/apps/site/src/content/design-system/components/radio-group/design/horizontal-layout/content.mdoc index 07653e3d8..62b669a48 100644 --- a/apps/site/src/content/design-system/components/radio-group/design/horizontal-layout/content.mdoc +++ b/apps/site/src/content/design-system/components/radio-group/design/horizontal-layout/content.mdoc @@ -2,16 +2,25 @@ Use this option when you require an inline layout, it's only recommended in very ```jsx
- Medium} orientation="horizontal"> - Option 1 - Option 2 - Option 3 - + Medium} + orientation="horizontal" + radios={[ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, + ]} + /> - Large} size="large" orientation="horizontal"> - Option 1 - Option 2 - Option 3 - + Large} + size="large" + orientation="horizontal" + radios={[ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, + ]} + />
``` diff --git a/apps/site/src/content/design-system/components/radio-group/design/radio-sizes/content.mdoc b/apps/site/src/content/design-system/components/radio-group/design/radio-sizes/content.mdoc index ce9d351c7..765d4a22c 100644 --- a/apps/site/src/content/design-system/components/radio-group/design/radio-sizes/content.mdoc +++ b/apps/site/src/content/design-system/components/radio-group/design/radio-sizes/content.mdoc @@ -2,15 +2,23 @@ There are two radio button sizes, make sure when laying out forms that your radi ```jsx
- Medium} size="medium"> - Option 1 - Option 2 - Option 3 - - Large} size="large"> - Option 1 - Option 2 - Option 3 - + Medium} + size="medium" + radios={[ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, + ]} + /> + Large} + size="large" + radios={[ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, + ]} + />
``` diff --git a/apps/site/src/content/design-system/components/radio-group/design/radios-with-hint-text/content.mdoc b/apps/site/src/content/design-system/components/radio-group/design/radios-with-hint-text/content.mdoc index 959e0856a..dc1704065 100644 --- a/apps/site/src/content/design-system/components/radio-group/design/radios-with-hint-text/content.mdoc +++ b/apps/site/src/content/design-system/components/radio-group/design/radios-with-hint-text/content.mdoc @@ -2,27 +2,23 @@ This variation allows supporting text to be displayed below the selectable item. ```jsx
- Medium} size="medium"> - - Option 1 - - - Option 2 - - - Option 3 - - - Large} size="large"> - - Option 1 - - - Option 2 - - - Option 3 - - + Medium} + size="medium" + radios={[ + { value: 'Option 1', children: 'Option 1', hint: 'This is hint text' }, + { value: 'Option 2', children: 'Option 2', hint: 'This is hint text' }, + { value: 'Option 3', children: 'Option 3', hint: 'This is hint text' }, + ]} + /> + Large} + size="large" + radios={[ + { value: 'Option 1', children: 'Option 1', hint: 'This is hint text' }, + { value: 'Option 2', children: 'Option 2', hint: 'This is hint text' }, + { value: 'Option 3', children: 'Option 3', hint: 'This is hint text' }, + ]} + />
``` diff --git a/apps/site/src/content/design-system/components/radio-group/design/radios-with-reveal/content.mdoc b/apps/site/src/content/design-system/components/radio-group/design/radios-with-reveal/content.mdoc index 6daf4c55d..b57f1c9ae 100644 --- a/apps/site/src/content/design-system/components/radio-group/design/radios-with-reveal/content.mdoc +++ b/apps/site/src/content/design-system/components/radio-group/design/radios-with-reveal/content.mdoc @@ -7,15 +7,25 @@ The radio component has the ability to hide a configurable portion of the option ```jsx
- Medium} size="medium" showAmount={1}> - Option 1 - Option 2 - Option 3 - - Large} size="large" showAmount={1}> - Option 1 - Option 2 - Option 3 - + Medium} + size="medium" + showAmount={1} + radios={[ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, + ]} + /> + Large} + size="large" + showAmount={1} + radios={[ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, + ]} + />
``` diff --git a/apps/site/src/content/design-system/content/guidelines/error-message/design/displaying-error-messages/content.mdoc b/apps/site/src/content/design-system/content/guidelines/error-message/design/displaying-error-messages/content.mdoc index ba7cb6385..875090f45 100644 --- a/apps/site/src/content/design-system/content/guidelines/error-message/design/displaying-error-messages/content.mdoc +++ b/apps/site/src/content/design-system/content/guidelines/error-message/design/displaying-error-messages/content.mdoc @@ -24,11 +24,14 @@ There are some instances where the red keyline is not used, such as radio button
- - Option 1 - Option 2 - Option 3 - +
@@ -39,11 +42,14 @@ There are some instances where the red keyline is not used, such as radio button hintMessage="If there is hint text, it can go here" errorMessage="If there is an error, it can go here" > - - Option 1 - Option 2 - Option 3 - + diff --git a/apps/site/src/content/design-system/patterns/addresses/auto-address/design/auto-address/content.mdoc b/apps/site/src/content/design-system/patterns/addresses/auto-address/design/auto-address/content.mdoc index f015d9f72..81686ed98 100644 --- a/apps/site/src/content/design-system/patterns/addresses/auto-address/design/auto-address/content.mdoc +++ b/apps/site/src/content/design-system/patterns/addresses/auto-address/design/auto-address/content.mdoc @@ -18,19 +18,24 @@ To capture a different mailing address, use a text label with a button group to ```tsx () => { - const [hasDifferentMailingAddress, setHasDifferentMailingAddress] = useState(false); + const [hasDifferentMailingAddress, setHasDifferentMailingAddress] = useState(''); return (
- setHasDifferentMailingAddress(value)}> - Yes - No - + setHasDifferentMailingAddress(value)} + buttons={[ + { value: 'yes', children: "Yes" }, + { value: 'no', children: "No" } + ]} + /> - {hasDifferentMailingAddress && } + {hasDifferentMailingAddress === 'yes' && }
); }; diff --git a/apps/site/src/content/design-system/patterns/addresses/manual-address/design/error-states/content.mdoc b/apps/site/src/content/design-system/patterns/addresses/manual-address/design/error-states/content.mdoc index fb27be7b1..a83afbe63 100644 --- a/apps/site/src/content/design-system/patterns/addresses/manual-address/design/error-states/content.mdoc +++ b/apps/site/src/content/design-system/patterns/addresses/manual-address/design/error-states/content.mdoc @@ -2,20 +2,25 @@ The error message should always sit above the input field to give context. The e ```tsx () => { - const [hasDifferentMailingAddress, setHasDifferentMailingAddress] = useState(true); + const [hasDifferentMailingAddress, setHasDifferentMailingAddress] = useState('yes'); return (
- {hasDifferentMailingAddress && } - setHasDifferentMailingAddress(value)}> - Yes - No - + setHasDifferentMailingAddress(value)} + buttons={[ + { value: 'yes', children: "Yes" }, + { value: 'no', children: "No" } + ]} + /> + {hasDifferentMailingAddress === 'yes' && }
); }; -``` +``` \ No newline at end of file diff --git a/apps/site/src/content/design-system/patterns/addresses/manual-address/design/manual-address/content.mdoc b/apps/site/src/content/design-system/patterns/addresses/manual-address/design/manual-address/content.mdoc index 86b7146d1..619ce03d5 100644 --- a/apps/site/src/content/design-system/patterns/addresses/manual-address/design/manual-address/content.mdoc +++ b/apps/site/src/content/design-system/patterns/addresses/manual-address/design/manual-address/content.mdoc @@ -16,7 +16,7 @@ To capture a different mailing address, use a text label with a button group to ```tsx () => { - const [hasDifferentMailingAddress, setHasDifferentMailingAddress] = useState(false); + const [hasDifferentMailingAddress, setHasDifferentMailingAddress] = useState(''); return (
@@ -26,13 +26,14 @@ To capture a different mailing address, use a text label with a button group to size="large" value={hasDifferentMailingAddress} onChange={value => setHasDifferentMailingAddress(value)} - > - Yes - No - + buttons={[ + { value: 'yes', children: "Yes" }, + { value: 'no', children: "No" } + ]} + /> - {hasDifferentMailingAddress && } + {hasDifferentMailingAddress === 'yes' && }
); }; diff --git a/apps/site/src/content/design-system/patterns/personal-details/name/design/full-name/content.mdoc b/apps/site/src/content/design-system/patterns/personal-details/name/design/full-name/content.mdoc index b0c5cb3d6..fa01545ee 100644 --- a/apps/site/src/content/design-system/patterns/personal-details/name/design/full-name/content.mdoc +++ b/apps/site/src/content/design-system/patterns/personal-details/name/design/full-name/content.mdoc @@ -44,7 +44,7 @@ This example shows the base pattern used with additional questions when further ```tsx () => { - const [differentName, setDifferentName] = useState(false); + const [differentName, setDifferentName] = useState(''); return (
@@ -77,13 +77,19 @@ This example shows the base pattern used with additional questions when further - setDifferentName(value)} value={differentName} look="hero"> - Yes - No - + setDifferentName(value)} + value={differentName} + look="hero" + buttons={[ + { value: "yes", children: "Yes" }, + { value: "no", children: "No" } + ]} + /> - {differentName && ( + {differentName === 'yes' && ( diff --git a/packages/ui/src/components/button-group/button-group.component.tsx b/packages/ui/src/components/button-group/button-group.component.tsx index d75fbe736..b1bb8ef52 100644 --- a/packages/ui/src/components/button-group/button-group.component.tsx +++ b/packages/ui/src/components/button-group/button-group.component.tsx @@ -1,10 +1,10 @@ 'use client'; -import React, { ReactElement, cloneElement, createContext } from 'react'; +import React, { createContext } from 'react'; import { useRadioGroup } from 'react-aria'; import { useRadioGroupState } from 'react-stately'; -import { ErrorMessage, Hint, Label } from '../index.js'; +import { ButtonGroupButton, ErrorMessage, Hint, Label } from '../index.js'; import { styles as buttonGroupStyles } from './button-group.styles.js'; import { ButtonGroupContextState, type ButtonGroupProps } from './button-group.types.js'; @@ -27,7 +27,7 @@ export const ButtonGroupContext = createContext({ export function ButtonGroup({ className, - children, + buttons, label, look = 'hero', size = 'medium', @@ -47,12 +47,6 @@ export function ButtonGroup({ state, ); const styles = buttonGroupStyles({}); - const childrenToRender = children.map((child, index) => { - return cloneElement(child as ReactElement, { - key: index, - className: 'group/buttons', - }); - }); return (
@@ -63,7 +57,9 @@ export function ButtonGroup({ )}
- {childrenToRender} + {buttons.map((button, index) => ( + + ))}
diff --git a/packages/ui/src/components/button-group/button-group.spec.tsx b/packages/ui/src/components/button-group/button-group.spec.tsx index 7c12812ca..ce942cfa5 100644 --- a/packages/ui/src/components/button-group/button-group.spec.tsx +++ b/packages/ui/src/components/button-group/button-group.spec.tsx @@ -2,27 +2,50 @@ import { act, render } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { ButtonGroup } from './button-group.component.js'; -import { ButtonGroupButton } from './components/button-group-button/button-group-button.component.js'; describe('ButtonGroup', () => { it('renders the component', () => { const { container } = render( - - Option 1 - Option 2 - Option 3 - , + , ); expect(container).toBeInTheDocument(); }); it('should render buttons when passed as children', () => { const { getByText } = render( - - Option 1 - Option 2 - Option 3 - , + , ); expect(getByText('Option 1')).toBeInTheDocument(); expect(getByText('Option 2')).toBeInTheDocument(); @@ -31,11 +54,24 @@ describe('ButtonGroup', () => { it('should disable options when isDisabled prop passed', () => { const { getAllByRole } = render( - - Option 1 - Option 2 - Option 3 - , + , ); const radios = getAllByRole('radio'); expect(radios[0]).toBeDisabled(); @@ -47,32 +83,53 @@ describe('ButtonGroup', () => { const user = userEvent.setup(); const onChange = vi.fn(); - const { getByTestId } = render( - - - Option 1 - - Option 2 - Option 3 - , + const { getByText } = render( + , ); - await act(() => user.click(getByTestId('option1'))); + await act(() => user.click(getByText('Option 1'))); expect(onChange).toBeCalled(); }); it('should have correct option be selected when clicked', async () => { const user = userEvent.setup(); - const { getByTestId } = render( - - - Option 1 - - Option 2 - Option 3 - , + const { getByText, getByRole } = render( + , ); - await act(() => user.click(getByTestId('option1'))); - expect(getByTestId('option1')).toBeChecked(); + await act(() => user.click(getByText('Option 1'))); + expect(getByRole('radio', { name: 'Option 1' })).toBeChecked(); }); }); diff --git a/packages/ui/src/components/button-group/button-group.stories.tsx b/packages/ui/src/components/button-group/button-group.stories.tsx index 764965794..bc60228df 100644 --- a/packages/ui/src/components/button-group/button-group.stories.tsx +++ b/packages/ui/src/components/button-group/button-group.stories.tsx @@ -1,7 +1,6 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react'; import { ButtonGroup } from './button-group.component.js'; -import { ButtonGroupButton } from './components/button-group-button/button-group-button.component.js'; const meta: Meta = { title: 'Components/ButtonGroup', @@ -39,10 +38,19 @@ const SIZES = ['small', 'medium', 'large', 'xlarge'] as const; */ export const Default: Story = { args: { - children: [ - Option 1, - Option 2, - Option 3, + buttons: [ + { + value: 'Option 1', + children: 'Option 1', + }, + { + value: 'Option 2', + children: 'Option 2', + }, + { + value: 'Option 3', + children: 'Option 3', + }, ], }, }; @@ -53,11 +61,24 @@ export const Default: Story = { export const Colors = () => (
{LOOKS.map(look => ( - {look}} look={look}> - Option 1 - Option 2 - Option 3 - + {look}} + look={look} + buttons={[ + { + value: 'Option 1', + children: 'Option 1', + }, + { + value: 'Option 2', + children: 'Option 2', + }, + { + value: 'Option 3', + children: 'Option 3', + }, + ]} + /> ))}
); @@ -68,11 +89,24 @@ export const Colors = () => ( export const Sizes = () => (
{SIZES.map(size => ( - {size}} size={size}> - Option 1 - Option 2 - Option 3 - + {size}} + size={size} + buttons={[ + { + value: 'Option 1', + children: 'Option 1', + }, + { + value: 'Option 2', + children: 'Option 2', + }, + { + value: 'Option 3', + children: 'Option 3', + }, + ]} + /> ))}
); @@ -82,10 +116,19 @@ export const Sizes = () => ( */ export const ResponsiveSize: Story = { args: { - children: [ - Option 1, - Option 2, - Option 3, + buttons: [ + { + value: 'Option 1', + children: 'Option 1', + }, + { + value: 'Option 2', + children: 'Option 2', + }, + { + value: 'Option 3', + children: 'Option 3', + }, ], size: { initial: 'small', @@ -101,11 +144,25 @@ export const ResponsiveSize: Story = { export const Block = () => (
{SIZES.map(size => ( - {size}} size={size}> - Option 1 - Option 2 - Option 3 - + {size}} + size={size} + buttons={[ + { + value: 'Option 1', + children: 'Option 1', + }, + { + value: 'Option 2', + children: 'Option 2', + }, + { + value: 'Option 3', + children: 'Option 3', + }, + ]} + /> ))}
); @@ -115,10 +172,19 @@ export const Block = () => ( */ export const Disabled: Story = { args: { - children: [ - Option 1, - Option 2, - Option 3, + buttons: [ + { + value: 'Option 1', + children: 'Option 1', + }, + { + value: 'Option 2', + children: 'Option 2', + }, + { + value: 'Option 3', + children: 'Option 3', + }, ], isDisabled: true, }, @@ -133,10 +199,19 @@ export const ErrorMessageAndLabel: Story = { errorMessage: 'This is an inline error message', validationState: 'invalid', hintMessage: 'Hint: choose from one of the following options', - children: [ - Option 1, - Option 2, - Option 3, + buttons: [ + { + value: 'Option 1', + children: 'Option 1', + }, + { + value: 'Option 2', + children: 'Option 2', + }, + { + value: 'Option 3', + children: 'Option 3', + }, ], }, }; diff --git a/packages/ui/src/components/button-group/button-group.types.ts b/packages/ui/src/components/button-group/button-group.types.ts index d648f6e5f..f6f2c9665 100644 --- a/packages/ui/src/components/button-group/button-group.types.ts +++ b/packages/ui/src/components/button-group/button-group.types.ts @@ -1,18 +1,19 @@ -import { ReactNode } from 'react'; import { AriaRadioGroupProps } from 'react-aria'; import { RadioGroupState } from 'react-stately'; import { type ButtonProps } from '../button/index.js'; +import { ButtonGroupButtonProps } from './components/button-group-button/button-group-button.types.js'; + export type ButtonGroupProps = { /** * Sets whether buttons fill the entire box they are located in */ block?: boolean; /** - * The `Button` components to render + * The `Button` components to render in the form of an object */ - children: ReactNode[]; + buttons: Omit[]; /** * String to override base style */ @@ -29,7 +30,7 @@ export type ButtonGroupProps = { * Controls look of `Button` components, can't be applied directly to `Button` */ look?: 'hero' | 'primary'; -} & Omit & +} & Omit & Pick; export type ButtonGroupContextState = { diff --git a/packages/ui/src/components/checkbox-group/checkbox-group.component.tsx b/packages/ui/src/components/checkbox-group/checkbox-group.component.tsx index a3594f93d..a2ccb9bc1 100644 --- a/packages/ui/src/components/checkbox-group/checkbox-group.component.tsx +++ b/packages/ui/src/components/checkbox-group/checkbox-group.component.tsx @@ -1,12 +1,12 @@ 'use client'; -import React, { ReactElement, cloneElement, createContext, useEffect, useMemo, useRef, useState } from 'react'; +import React, { createContext, useEffect, useMemo, useRef, useState } from 'react'; import { useCheckboxGroup, useFocusRing } from 'react-aria'; import { useCheckboxGroupState } from 'react-stately'; import { Button } from '../button/index.js'; import { ExpandMoreIcon } from '../icon/index.js'; -import { ErrorMessage, Hint, Label } from '../index.js'; +import { CheckboxGroupCheckbox, ErrorMessage, Hint, Label } from '../index.js'; import { styles as checkboxStyles } from './checkbox-group.styles.js'; import { type CheckboxGroupContextState, type CheckboxGroupProps } from './checkbox-group.types.js'; @@ -26,7 +26,7 @@ export const CheckboxGroupContext = createContext({ }); export function CheckboxGroup({ className, - children, + checkboxes, label, orientation = 'vertical', showAmount = 0, @@ -40,18 +40,15 @@ export function CheckboxGroup({ const { isFocusVisible, focusProps } = useFocusRing(); const [hiddenOptions, setHiddenOptions] = useState(showAmount > 0); const firstNewCheckboxRef = useRef(null); - const revealAmount = children && children.length - showAmount; + const revealAmount = checkboxes && checkboxes.length - showAmount; const styles = checkboxStyles({ orientation, isFocusVisible }); const childrenToRender = useMemo(() => { - const newChildren = children.map((child, index) => { - return cloneElement(child as ReactElement, { - key: index, - ref: index === showAmount ? firstNewCheckboxRef : null, - }); - }); + const newChildren = checkboxes.map((checkbox, index) => ( + + )); return hiddenOptions ? newChildren.slice(0, showAmount) : newChildren; - }, [children, hiddenOptions, showAmount]); + }, [checkboxes, hiddenOptions, showAmount]); useEffect(() => { if (showAmount > 0 && !hiddenOptions) { diff --git a/packages/ui/src/components/checkbox-group/checkbox-group.spec.tsx b/packages/ui/src/components/checkbox-group/checkbox-group.spec.tsx index 67da95b7b..0cdf4cde4 100644 --- a/packages/ui/src/components/checkbox-group/checkbox-group.spec.tsx +++ b/packages/ui/src/components/checkbox-group/checkbox-group.spec.tsx @@ -2,25 +2,30 @@ import { act, render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { CheckboxGroup } from './checkbox-group.component.js'; -import { CheckboxGroupCheckbox } from './components/checkbox-group-checkbox/checkbox-group-checkbox.component.js'; describe('CheckboxGroup', () => { it('renders the component', () => { const { container } = render( - - Option 1 - Option 2 - , + , ); expect(container).toBeInTheDocument(); }); it('should render Options when passed as children', () => { const { getByText } = render( - - Option 1 - Option 2 - , + , ); expect(getByText('Option 1')).toBeInTheDocument(); expect(getByText('Option 2')).toBeInTheDocument(); @@ -30,11 +35,15 @@ describe('CheckboxGroup', () => { const user = userEvent.setup(); const { getByText } = render( - - Option 1 - Option 2 - Option 3 - , + , ); expect(getByText('Option 1')).toBeInTheDocument(); expect(screen.queryByText('Option 2')).not.toBeInTheDocument(); @@ -47,10 +56,14 @@ describe('CheckboxGroup', () => { it('should display correct text on button showAmount prop is passed and there is only one hidden', () => { const { getByText } = render( - - Option 1 - Option 2 - , + , ); expect(getByText('Option 1')).toBeInTheDocument(); expect(screen.queryByText('Option 2')).not.toBeInTheDocument(); @@ -61,15 +74,17 @@ describe('CheckboxGroup', () => { const user = userEvent.setup(); const onChange = vi.fn(); - const { getByTestId } = render( - - - Option 1 - - Option 2 - , + const { getByRole } = render( + , ); - await act(() => user.click(getByTestId('option1'))); + await act(() => user.click(getByRole('checkbox', { name: 'Option 1' }))); expect(onChange).toBeCalled(); }); @@ -77,20 +92,19 @@ describe('CheckboxGroup', () => { const user = userEvent.setup(); const onChange = vi.fn(); - const { getByTestId } = render( - - - Option 1 - - - Option 2 - - Option 3 - , + const { getByRole, getAllByRole } = render( + , ); - await act(() => user.click(getByTestId('option1'))); - await act(() => user.click(getByTestId('option2'))); - expect(getByTestId('option1')).toBeChecked(); - expect(getByTestId('option2')).toBeChecked(); + await act(() => user.click(getByRole('checkbox', { name: 'Option 1' }))); + await act(() => user.click(getByRole('checkbox', { name: 'Option 2' }))); + expect(getAllByRole('checkbox', { checked: true }).length).toBe(2); }); }); diff --git a/packages/ui/src/components/checkbox-group/checkbox-group.stories.tsx b/packages/ui/src/components/checkbox-group/checkbox-group.stories.tsx index f9b94df5b..bb7f0a37b 100644 --- a/packages/ui/src/components/checkbox-group/checkbox-group.stories.tsx +++ b/packages/ui/src/components/checkbox-group/checkbox-group.stories.tsx @@ -2,7 +2,6 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react'; import { CheckboxGroup } from './checkbox-group.component.js'; -import { CheckboxGroupCheckbox } from './components/checkbox-group-checkbox/checkbox-group-checkbox.component.js'; const meta: Meta = { title: 'Components/CheckboxGroup', @@ -43,10 +42,10 @@ type Story = StoryObj; */ export const Default: Story = { args: { - children: [ - Option 1, - Option 2, - Option 3, + checkboxes: [ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, ], }, }; @@ -56,14 +55,14 @@ export const Default: Story = { */ export const LongLines: Story = { args: { - children: [ - Option 1, - Option 2, - - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt - consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci - repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero. - , + checkboxes: [ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { + value: 'Option 3', + children: + 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.', + }, ], }, }; @@ -73,10 +72,10 @@ export const LongLines: Story = { */ export const DefaultValue: Story = { args: { - children: [ - Option 1, - Option 2, - Option 3, + checkboxes: [ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, ], defaultValue: ['Option 1'], }, @@ -87,10 +86,10 @@ export const DefaultValue: Story = { */ export const Inline: Story = { args: { - children: [ - Option 1, - Option 2, - Option 3, + checkboxes: [ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, ], orientation: 'horizontal', }, @@ -101,14 +100,14 @@ export const Inline: Story = { */ export const InlineLongLines: Story = { args: { - children: [ - Option 1, - Option 2, - - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt - consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci - repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero. - , + checkboxes: [ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { + value: 'Option 3', + children: + 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.', + }, ], orientation: 'horizontal', }, @@ -119,10 +118,10 @@ export const InlineLongLines: Story = { */ export const Disabled: Story = { args: { - children: [ - Option 1, - Option 2, - Option 3, + checkboxes: [ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, ], isDisabled: true, defaultValue: ['Option 1'], @@ -134,10 +133,10 @@ export const Disabled: Story = { */ export const Large: Story = { args: { - children: [ - Option 1, - Option 2, - Option 3, + checkboxes: [ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, ], size: 'large', }, @@ -148,10 +147,10 @@ export const Large: Story = { */ export const HiddenItems: Story = { args: { - children: [ - Option 1, - Option 2, - Option 3, + checkboxes: [ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, ], showAmount: 1, }, @@ -162,16 +161,10 @@ export const HiddenItems: Story = { */ export const HintText: Story = { args: { - children: [ - - Option 1 - , - - Option 2 - , - - Option 3 - , + checkboxes: [ + { value: 'Option 1', children: 'Option 1', hint: 'This is hint text 1' }, + { value: 'Option 2', children: 'Option 2', hint: 'This is hint text 2' }, + { value: 'Option 3', children: 'Option 3', hint: 'This is hint text 3' }, ], }, }; @@ -181,16 +174,10 @@ export const HintText: Story = { */ export const OnChange: Story = { args: { - children: [ - - Option 1 - , - - Option 2 - , - - Option 3 - , + checkboxes: [ + { value: 'Option 1', children: 'Option 1', hint: 'This is hint text 1' }, + { value: 'Option 2', children: 'Option 2', hint: 'This is hint text 2' }, + { value: 'Option 3', children: 'Option 3', hint: 'This is hint text 3' }, ], onChange: e => console.log(e), }, @@ -205,10 +192,10 @@ export const ErrorMessageAndLabel: Story = { errorMessage: 'This is an inline error message', validationState: 'invalid', hintMessage: 'Hint: choose from one of the following options', - children: [ - Option 1, - Option 2, - Option 3, + checkboxes: [ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, ], }, }; diff --git a/packages/ui/src/components/checkbox-group/checkbox-group.types.ts b/packages/ui/src/components/checkbox-group/checkbox-group.types.ts index 78e9659fb..624f1484f 100644 --- a/packages/ui/src/components/checkbox-group/checkbox-group.types.ts +++ b/packages/ui/src/components/checkbox-group/checkbox-group.types.ts @@ -1,14 +1,15 @@ -import { ReactNode } from 'react'; import { AriaCheckboxGroupProps } from 'react-aria'; import { CheckboxGroupState } from 'react-stately'; import { HintProps } from '../index.js'; +import { CheckboxGroupCheckboxProps } from './components/checkbox-group-checkbox/checkbox-group-checkbox.types.js'; + export type CheckboxGroupProps = { /** * The `CheckboxItem` components to render */ - children: ReactNode[]; + checkboxes: CheckboxGroupCheckboxProps[]; /** * String to override base style */ diff --git a/packages/ui/src/components/radio-group/radio-group.component.tsx b/packages/ui/src/components/radio-group/radio-group.component.tsx index 3cf214364..e35a1e9cf 100644 --- a/packages/ui/src/components/radio-group/radio-group.component.tsx +++ b/packages/ui/src/components/radio-group/radio-group.component.tsx @@ -1,12 +1,12 @@ 'use client'; -import React, { ReactElement, cloneElement, createContext, useEffect, useMemo, useRef, useState } from 'react'; +import React, { createContext, useEffect, useMemo, useRef, useState } from 'react'; import { useFocusRing, useRadioGroup } from 'react-aria'; import { useRadioGroupState } from 'react-stately'; import { Button } from '../button/index.js'; import { ExpandMoreIcon } from '../icon/index.js'; -import { ErrorMessage, Hint, Label } from '../index.js'; +import { ErrorMessage, Hint, Label, RadioGroupRadio } from '../index.js'; import { styles as radioGroupStyles } from './radio-group.styles.js'; import { type RadioGroupContextState, type RadioGroupProps } from './radio-group.types.js'; @@ -28,7 +28,7 @@ export const RadioGroupContext = createContext({ export function RadioGroup({ className, - children, + radios, label, orientation = 'vertical', showAmount = 0, @@ -45,18 +45,15 @@ export function RadioGroup({ const { isFocusVisible, focusProps } = useFocusRing(); const [hiddenOptions, setHiddenOptions] = useState(showAmount > 0); const firstNewRadioRef = useRef(null); - const revealAmount = children && children.length - showAmount; + const revealAmount = radios && radios.length - showAmount; const styles = radioGroupStyles({ orientation, isFocusVisible }); const childrenToRender = useMemo(() => { - const newChildren = children.map((child, index) => { - return cloneElement(child as ReactElement, { - key: index, - ref: index === showAmount ? firstNewRadioRef : null, - }); - }); + const newChildren = radios.map((radio, index) => ( + + )); return hiddenOptions ? newChildren.slice(0, showAmount) : newChildren; - }, [children, hiddenOptions, showAmount]); + }, [radios, hiddenOptions, showAmount]); useEffect(() => { if (showAmount > 0 && !hiddenOptions) { diff --git a/packages/ui/src/components/radio-group/radio-group.spec.tsx b/packages/ui/src/components/radio-group/radio-group.spec.tsx index cc5e9aaca..9d2efd2ee 100644 --- a/packages/ui/src/components/radio-group/radio-group.spec.tsx +++ b/packages/ui/src/components/radio-group/radio-group.spec.tsx @@ -3,25 +3,29 @@ import userEvent from '@testing-library/user-event'; import { RadioGroup } from './radio-group.component.js'; -import { RadioGroupRadio } from './index.js'; - describe('RadioGroup', () => { it('renders the component', () => { const { container } = render( - - Option 1 - Option 2 - , + , ); expect(container).toBeInTheDocument(); }); it('should render Radios when passed as children', () => { const { getByText } = render( - - Option 1 - Option 2 - , + , ); expect(getByText('Option 1')).toBeInTheDocument(); expect(getByText('Option 2')).toBeInTheDocument(); @@ -31,11 +35,15 @@ describe('RadioGroup', () => { const user = userEvent.setup(); const { getByText } = render( - - Option 1 - Option 2 - Option 3 - , + , ); expect(getByText('Option 1')).toBeInTheDocument(); expect(screen.queryByText('Option 2')).not.toBeInTheDocument(); @@ -48,10 +56,14 @@ describe('RadioGroup', () => { it('should display correct text on button showAmount prop is passed and there is only one hidden', () => { const { getByText } = render( - - Option 1 - Option 2 - , + , ); expect(getByText('Option 1')).toBeInTheDocument(); expect(screen.queryByText('Option 2')).not.toBeInTheDocument(); @@ -62,15 +74,17 @@ describe('RadioGroup', () => { const user = userEvent.setup(); const onChange = vi.fn(); - const { getByTestId } = render( - - - Option 1 - - Option 2 - , + const { getByRole } = render( + , ); - await act(() => user.click(getByTestId('option1'))); + await act(() => user.click(getByRole('radio', { name: 'Option 1' }))); expect(onChange).toBeCalled(); }); }); diff --git a/packages/ui/src/components/radio-group/radio-group.stories.tsx b/packages/ui/src/components/radio-group/radio-group.stories.tsx index 986fb296e..fe0340ce9 100644 --- a/packages/ui/src/components/radio-group/radio-group.stories.tsx +++ b/packages/ui/src/components/radio-group/radio-group.stories.tsx @@ -3,8 +3,6 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react'; import { RadioGroup } from './radio-group.component.js'; -import { RadioGroupRadio } from './index.js'; - const meta: Meta = { title: 'Components/RadioGroup', component: RadioGroup, @@ -38,10 +36,10 @@ type Story = StoryObj; */ export const Default: Story = { args: { - children: [ - Option 1, - Option 2, - Option 3, + radios: [ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, ], }, }; @@ -51,14 +49,14 @@ export const Default: Story = { */ export const LongLines: Story = { args: { - children: [ - Option 1, - Option 2, - - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt - consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci - repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero. - , + radios: [ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { + value: 'Option 3', + children: + 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.', + }, ], }, }; @@ -68,10 +66,10 @@ export const LongLines: Story = { */ export const DefaultValue: Story = { args: { - children: [ - Option 1, - Option 2, - Option 3, + radios: [ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, ], defaultValue: 'Option 1', }, @@ -82,10 +80,10 @@ export const DefaultValue: Story = { */ export const Inline: Story = { args: { - children: [ - Option 1, - Option 2, - Option 3, + radios: [ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, ], orientation: 'horizontal', }, @@ -96,14 +94,14 @@ export const Inline: Story = { */ export const InlineLongLines: Story = { args: { - children: [ - Option 1, - Option 2, - - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt - consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci - repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero. - , + radios: [ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { + value: 'Option 3', + children: + 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.', + }, ], orientation: 'horizontal', }, @@ -114,10 +112,10 @@ export const InlineLongLines: Story = { */ export const Disabled: Story = { args: { - children: [ - Option 1, - Option 2, - Option 3, + radios: [ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, ], isDisabled: true, }, @@ -128,10 +126,10 @@ export const Disabled: Story = { */ export const Large: Story = { args: { - children: [ - Option 1, - Option 2, - Option 3, + radios: [ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, ], size: 'large', }, @@ -142,10 +140,10 @@ export const Large: Story = { */ export const HiddenOptions: Story = { args: { - children: [ - Option 1, - Option 2, - Option 3, + radios: [ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, ], showAmount: 1, }, @@ -156,16 +154,10 @@ export const HiddenOptions: Story = { */ export const HintText: Story = { args: { - children: [ - - Option 1 - , - - Option 2 - , - - Option 3 - , + radios: [ + { value: 'Option 1', children: 'Option 1', hint: 'This is hint text 1' }, + { value: 'Option 2', children: 'Option 2', hint: 'This is hint text 2' }, + { value: 'Option 3', children: 'Option 3', hint: 'This is hint text 3' }, ], }, }; @@ -175,10 +167,10 @@ export const HintText: Story = { */ export const OnChange: Story = { args: { - children: [ - Option 1, - Option 2, - Option 3, + radios: [ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, ], onChange: e => console.log(e), }, @@ -193,10 +185,10 @@ export const ErrorMessageAndLabel: Story = { errorMessage: 'This is an inline error message', validationState: 'invalid', hintMessage: 'Hint: choose from one of the following options', - children: [ - Option 1, - Option 2, - Option 3, + radios: [ + { value: 'Option 1', children: 'Option 1' }, + { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 3', children: 'Option 3' }, ], }, }; diff --git a/packages/ui/src/components/radio-group/radio-group.types.ts b/packages/ui/src/components/radio-group/radio-group.types.ts index 07b0b1f22..1d2263334 100644 --- a/packages/ui/src/components/radio-group/radio-group.types.ts +++ b/packages/ui/src/components/radio-group/radio-group.types.ts @@ -1,14 +1,11 @@ -import { ReactNode } from 'react'; import { type AriaRadioGroupProps } from 'react-aria'; import { type RadioGroupState } from 'react-stately'; import { HintProps } from '../index.js'; +import { RadioGroupRadioProps } from './components/radio-group-radio/radio-group-radio.types.js'; + export type RadioGroupProps = { - /** - * The `Radio` components to render - */ - children: ReactNode[]; /** * String to override base style */ @@ -21,6 +18,10 @@ export type RadioGroupProps = { * hint message */ hintMessage?: HintProps['children']; + /** + * The `Radio` components to render + */ + radios: RadioGroupRadioProps[]; /** * Amount of Radios to display, remainder will be hidden behind reveal button */ diff --git a/packages/ui/src/components/table/table.stories.tsx b/packages/ui/src/components/table/table.stories.tsx index 31160f8e8..c8e12ac85 100644 --- a/packages/ui/src/components/table/table.stories.tsx +++ b/packages/ui/src/components/table/table.stories.tsx @@ -1,9 +1,17 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react'; -import { TableBody, TableHeader } from 'react-stately'; import { Table } from './table.component.js'; -import { TableCaption, TableCell, TableFooter, TableHeaderCell, TableHeaderRow, TableRow } from './index.js'; +import { + TableBody, + TableCaption, + TableCell, + TableFooter, + TableHeader, + TableHeaderCell, + TableHeaderRow, + TableRow, +} from './index.js'; const meta: Meta = { title: 'Components/Table', From 2e500e46b4a5d344d6b8207dfb05d51eee57e599 Mon Sep 17 00:00:00 2001 From: Tom King Date: Wed, 31 Jan 2024 14:12:09 +1000 Subject: [PATCH 2/2] - updated children on buttons, checkboxes and radios for group components to label --- .../button-dropdown-menu-sizes/content.mdoc | 12 +-- .../code/development-examples/content.mdoc | 24 ++--- .../design/button-groups/content.mdoc | 32 +++---- .../code/development-examples/content.mdoc | 91 +++++++++---------- .../design/checkbox-sizes/content.mdoc | 12 +-- .../checkbox-with-hint-text/content.mdoc | 12 +-- .../design/checkbox-with-reveal/content.mdoc | 12 +-- .../design/horizontal-layout/content.mdoc | 6 +- .../radio-group/accessibilityDemo.mdoc | 6 +- .../code/development-examples/content.mdoc | 80 ++++++++-------- .../design/horizontal-layout/content.mdoc | 12 +-- .../design/radio-sizes/content.mdoc | 12 +-- .../design/radios-with-hint-text/content.mdoc | 12 +-- .../design/radios-with-reveal/content.mdoc | 12 +-- .../displaying-error-messages/content.mdoc | 12 +-- .../design/auto-address/content.mdoc | 4 +- .../design/error-states/content.mdoc | 4 +- .../design/manual-address/content.mdoc | 4 +- .../name/design/full-name/content.mdoc | 4 +- .../button-group/button-group.spec.tsx | 32 +++---- .../button-group/button-group.stories.tsx | 42 ++++----- .../button-group-button.component.tsx | 6 +- .../button-group-button.spec.tsx | 2 +- .../button-group-button.types.ts | 7 +- .../checkbox-group/checkbox-group.spec.tsx | 30 +++--- .../checkbox-group/checkbox-group.stories.tsx | 66 +++++++------- .../checkbox-group-checkbox.component.tsx | 10 +- .../checkbox-group-checkbox.spec.tsx | 2 +- .../checkbox-group-checkbox.stories.tsx | 6 +- .../checkbox-group-checkbox.types.ts | 6 +- .../radio-group-radio.component.tsx | 6 +- .../radio-group-radio.spec.tsx | 2 +- .../radio-group-radio.stories.tsx | 6 +- .../radio-group-radio.types.ts | 6 +- .../radio-group/radio-group.spec.tsx | 24 ++--- .../radio-group/radio-group.stories.tsx | 66 +++++++------- 36 files changed, 346 insertions(+), 336 deletions(-) diff --git a/apps/site/src/content/design-system/components/button-dropdown/design/button-dropdown-menu-sizes/content.mdoc b/apps/site/src/content/design-system/components/button-dropdown/design/button-dropdown-menu-sizes/content.mdoc index edaa4ca44..2bb0d13d3 100644 --- a/apps/site/src/content/design-system/components/button-dropdown/design/button-dropdown-menu-sizes/content.mdoc +++ b/apps/site/src/content/design-system/components/button-dropdown/design/button-dropdown-menu-sizes/content.mdoc @@ -54,18 +54,18 @@ The button dropdown menus come in three sizes or widths. They are triggered by t Options diff --git a/apps/site/src/content/design-system/components/button-group/code/development-examples/content.mdoc b/apps/site/src/content/design-system/components/button-group/code/development-examples/content.mdoc index f4c8ad149..064ce64dc 100644 --- a/apps/site/src/content/design-system/components/button-group/code/development-examples/content.mdoc +++ b/apps/site/src/content/design-system/components/button-group/code/development-examples/content.mdoc @@ -3,9 +3,9 @@ ```jsx @@ -19,18 +19,18 @@ defaultValue={0} label={

Index (integer)

} buttons={[ - { value: 0, children: "Left" }, - { value: 1, children: "Middle" }, - { value: 2, children: "Right"} + { value: 0, label: "Left" }, + { value: 1, label: "Middle" }, + { value: 2, label: "Right"} ]} /> Key (string)

} buttons={[ - { value: "left", children: "Left" }, - { value: "middle", children: "Middle" }, - { value: "right", children: "Right"} + { value: "left", label: "Left" }, + { value: "middle", label: "Middle" }, + { value: "right", label: "Right"} ]} />
@@ -62,9 +62,9 @@ look="hero" value={controlled} buttons={[ - { value: "yes", children: "Yes"}, - { value: "maybe", children: "Maybe" }, - { value: "no", children: "No"} + { value: "yes", label: "Yes"}, + { value: "maybe", label: "Maybe" }, + { value: "no", label: "No"} ]} /> diff --git a/apps/site/src/content/design-system/components/button-group/design/button-groups/content.mdoc b/apps/site/src/content/design-system/components/button-group/design/button-groups/content.mdoc index 6cafbf0dc..172c13224 100644 --- a/apps/site/src/content/design-system/components/button-group/design/button-groups/content.mdoc +++ b/apps/site/src/content/design-system/components/button-group/design/button-groups/content.mdoc @@ -5,29 +5,29 @@ @@ -40,17 +40,17 @@ @@ -64,9 +64,9 @@ look="hero" block buttons={[ - { value: "Email", children: "Email"}, - { value: "Phone", children: "Phone" }, - { value: "SMS", children: "SMS" } + { value: "Email", label: "Email"}, + { value: "Phone", label: "Phone" }, + { value: "SMS", label: "SMS" } ]} /> diff --git a/apps/site/src/content/design-system/components/checkbox-group/code/development-examples/content.mdoc b/apps/site/src/content/design-system/components/checkbox-group/code/development-examples/content.mdoc index 5212b9505..803c5fbae 100644 --- a/apps/site/src/content/design-system/components/checkbox-group/code/development-examples/content.mdoc +++ b/apps/site/src/content/design-system/components/checkbox-group/code/development-examples/content.mdoc @@ -8,9 +8,9 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c className="col-span-1" label={Checkbox} checkboxes={[ - { value: "Option 1", children: "Option 1" }, - { value: "Option 2", children: "Option 2" }, - { value: "Option 3", children: "Option 3" }, + { value: "Option 1", label: "Option 1" }, + { value: "Option 2", label: "Option 2" }, + { value: "Option 3", label: "Option 3" }, ]} /> @@ -23,9 +23,9 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c label={Checkbox} defaultValue={['1', '3']} checkboxes={[ - { value: "1", children: "Option 1", isDisabled: true}, - { value: "2", children: "Option 2" }, - { value: "3", children: "Option 3" }, + { value: "1", label: "Option 1", isDisabled: true}, + { value: "2", label: "Option 2" }, + { value: "3", label: "Option 3" }, ]} /> ``` @@ -42,9 +42,9 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c onChange={(value, event) => setFormCheckValue(value)} label={Checkbox} checkboxes={[ - { value: "1", children: "Option 1" }, - { value: "2", children: "Option 2" }, - { value: "3", children: "Option 3" }, + { value: "1", label: "Option 1" }, + { value: "2", label: "Option 2" }, + { value: "3", label: "Option 3" }, ]} /> ); @@ -60,9 +60,9 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c label={Medium} size="medium" checkboxes={[ - { value: "Option 1", children: "Option 1" }, - { value: "Option 2", children: "Option 2" }, - { value: "Option 3", children: "Option 3" }, + { value: "Option 1", label: "Option 1" }, + { value: "Option 2", label: "Option 2" }, + { value: "Option 3", label: "Option 3" }, ]} /> Large} size="large" checkboxes={[ - { value: "Option 1", children: "Option 1" }, - { value: "Option 2", children: "Option 2" }, - { value: "Option 3", children: "Option 3" }, + { value: "Option 1", label: "Option 1" }, + { value: "Option 2", label: "Option 2" }, + { value: "Option 3", label: "Option 3" }, ]} /> @@ -87,9 +87,9 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c label={Medium} size="medium" checkboxes={[ - { value: "Option 1", children: "Option 1", hint: "This is hint text" }, - { value: "Option 2", children: "Option 2", hint: "This is hint text" }, - { value: "Option 3", children: "Option 3", hint: "This is hint text" }, + { value: "Option 1", label: "Option 1", hint: "This is hint text" }, + { value: "Option 2", label: "Option 2", hint: "This is hint text" }, + { value: "Option 3", label: "Option 3", hint: "This is hint text" }, ]} /> Large} size="large" checkboxes={[ - { value: "Option 1", children: "Option 1", hint: "This is hint text" }, - { value: "Option 2", children: "Option 2", hint: "This is hint text" }, - { value: "Option 3", children: "Option 3", hint: "This is hint text" }, + { value: "Option 1", label: "Option 1", hint: "This is hint text" }, + { value: "Option 2", label: "Option 2", hint: "This is hint text" }, + { value: "Option 3", label: "Option 3", hint: "This is hint text" }, ]} /> @@ -113,9 +113,9 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c label={Medium} orientation="horizontal" checkboxes={[ - { value: "Option 1", children: "Option 1" }, - { value: "Option 2", children: "Option 2" }, - { value: "Option 3", children: "Option 3" }, + { value: "Option 1", label: "Option 1" }, + { value: "Option 2", label: "Option 2" }, + { value: "Option 3", label: "Option 3" }, ]} /> @@ -124,9 +124,9 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c size="large" orientation="horizontal" checkboxes={[ - { value: "Option 1", children: "Option 1" }, - { value: "Option 2", children: "Option 2" }, - { value: "Option 3", children: "Option 3" }, + { value: "Option 1", label: "Option 1" }, + { value: "Option 2", label: "Option 2" }, + { value: "Option 3", label: "Option 3" }, ]} /> @@ -141,9 +141,9 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c size="medium" showAmount={1} checkboxes={[ - { value: "Option 1", children: "Option 1" }, - { value: "Option 2", children: "Option 2" }, - { value: "Option 3", children: "Option 3" }, + { value: "Option 1", label: "Option 1" }, + { value: "Option 2", label: "Option 2" }, + { value: "Option 3", label: "Option 3" }, ]} /> @@ -168,9 +168,9 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c size="medium" isDisabled checkboxes={[ - { value: "Option 1", children: "Option 1" }, - { value: "Option 2", children: "Option 2" }, - { value: "Option 3", children: "Option 3" }, + { value: "Option 1", label: "Option 1" }, + { value: "Option 2", label: "Option 2" }, + { value: "Option 3", label: "Option 3" }, ]} /> @@ -194,20 +194,19 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c label={Medium} size="medium" checkboxes={[ - { value: "Option 1", children: "Option 1", isDisabled: true }, - { value: "Option 2", children: "Option 2" }, - { value: "Option 3", children: "Option 3" }, + { value: "Option 1", label: "Option 1", isDisabled: true }, + { value: "Option 2", label: "Option 2" }, + { value: "Option 3", label: "Option 3" }, ]} /> Large} size="large" checkboxes={[ - { value: "Option 1", children: "Option 1" }, - { value: "Option 2", children: "Option 2", isDisabled: true }, - { value: "Option 3", children: "Option 3" }, + { value: "Option 1", label: "Option 1" }, + { value: "Option 2", label: "Option 2", isDisabled: true }, + { value: "Option 3", label: "Option 3" }, ]} /> - ``` diff --git a/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-sizes/content.mdoc b/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-sizes/content.mdoc index a67c505c2..4a9adfda9 100644 --- a/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-sizes/content.mdoc +++ b/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-sizes/content.mdoc @@ -7,9 +7,9 @@ There are two checkbox sizes, make sure when laying out forms that your checkbox label={Medium} size="medium" checkboxes={[ - { value: "Option 1", children: "Option 1" }, - { value: "Option 2", children: "Option 2" }, - { value: "Option 3", children: "Option 3" }, + { value: "Option 1", label: "Option 1" }, + { value: "Option 2", label: "Option 2" }, + { value: "Option 3", label: "Option 3" }, ]} /> Large} size="large" checkboxes={[ - { value: "Option 1", children: "Option 1" }, - { value: "Option 2", children: "Option 2" }, - { value: "Option 3", children: "Option 3" }, + { value: "Option 1", label: "Option 1" }, + { value: "Option 2", label: "Option 2" }, + { value: "Option 3", label: "Option 3" }, ]} /> diff --git a/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-hint-text/content.mdoc b/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-hint-text/content.mdoc index dec994fd5..99ff906c6 100644 --- a/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-hint-text/content.mdoc +++ b/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-hint-text/content.mdoc @@ -7,9 +7,9 @@ This variation allows supporting text to be displayed below the selectable item. label={Medium} size="medium" checkboxes={[ - { value: "Option 1", children: "Option 1", hint: "This is hint text" }, - { value: "Option 2", children: "Option 2", hint: "This is hint text" }, - { value: "Option 3", children: "Option 3", hint: "This is hint text" }, + { value: "Option 1", label: "Option 1", hint: "This is hint text" }, + { value: "Option 2", label: "Option 2", hint: "This is hint text" }, + { value: "Option 3", label: "Option 3", hint: "This is hint text" }, ]} /> Large} size="large" checkboxes={[ - { value: "Option 1", children: "Option 1", hint: "This is hint text" }, - { value: "Option 2", children: "Option 2", hint: "This is hint text" }, - { value: "Option 3", children: "Option 3", hint: "This is hint text" }, + { value: "Option 1", label: "Option 1", hint: "This is hint text" }, + { value: "Option 2", label: "Option 2", hint: "This is hint text" }, + { value: "Option 3", label: "Option 3", hint: "This is hint text" }, ]} /> diff --git a/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-reveal/content.mdoc b/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-reveal/content.mdoc index 26295f01e..548e8c692 100644 --- a/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-reveal/content.mdoc +++ b/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-reveal/content.mdoc @@ -12,9 +12,9 @@ When requirements dictate long lists of choices, and particularly as mobile scre size="medium" showAmount={1} checkboxes={[ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ]} /> diff --git a/apps/site/src/content/design-system/components/checkbox-group/design/horizontal-layout/content.mdoc b/apps/site/src/content/design-system/components/checkbox-group/design/horizontal-layout/content.mdoc index a46ff3364..b37fcf2cb 100644 --- a/apps/site/src/content/design-system/components/checkbox-group/design/horizontal-layout/content.mdoc +++ b/apps/site/src/content/design-system/components/checkbox-group/design/horizontal-layout/content.mdoc @@ -4,9 +4,9 @@ Use this option when you require an inline layout, it's only recommended in very ``` diff --git a/apps/site/src/content/design-system/components/radio-group/accessibilityDemo.mdoc b/apps/site/src/content/design-system/components/radio-group/accessibilityDemo.mdoc index 03ddc6c2f..e5c57f8f7 100644 --- a/apps/site/src/content/design-system/components/radio-group/accessibilityDemo.mdoc +++ b/apps/site/src/content/design-system/components/radio-group/accessibilityDemo.mdoc @@ -2,9 +2,9 @@ ``` diff --git a/apps/site/src/content/design-system/components/radio-group/code/development-examples/content.mdoc b/apps/site/src/content/design-system/components/radio-group/code/development-examples/content.mdoc index 72051ac7d..7d3bfa629 100644 --- a/apps/site/src/content/design-system/components/radio-group/code/development-examples/content.mdoc +++ b/apps/site/src/content/design-system/components/radio-group/code/development-examples/content.mdoc @@ -8,18 +8,18 @@ This component does not contain an option for `checkbox` as it was decided it sh label={

Medium

} size="medium" radios={[ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ]} /> Large

} size="large" radios={[ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ]} /> @@ -33,9 +33,9 @@ This component does not contain an option for `checkbox` as it was decided it sh label={

Medium

} orientation="horizontal" radios={[ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ]} /> @@ -44,9 +44,9 @@ This component does not contain an option for `checkbox` as it was decided it sh size="large" orientation="horizontal" radios={[ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ]} /> @@ -60,18 +60,18 @@ This component does not contain an option for `checkbox` as it was decided it sh label={

Medium

} size="medium" radios={[ - { value: 'Option 1', children: 'Option 1', hint: 'This is hint text' }, - { value: 'Option 2', children: 'Option 2', hint: 'This is hint text' }, - { value: 'Option 3', children: 'Option 3', hint: 'This is hint text' }, + { value: 'Option 1', label: 'Option 1', hint: 'This is hint text' }, + { value: 'Option 2', label: 'Option 2', hint: 'This is hint text' }, + { value: 'Option 3', label: 'Option 3', hint: 'This is hint text' }, ]} /> Large

} size="large" radios={[ - { value: 'Option 1', children: 'Option 1', hint: 'This is hint text' }, - { value: 'Option 2', children: 'Option 2', hint: 'This is hint text' }, - { value: 'Option 3', children: 'Option 3', hint: 'This is hint text' }, + { value: 'Option 1', label: 'Option 1', hint: 'This is hint text' }, + { value: 'Option 2', label: 'Option 2', hint: 'This is hint text' }, + { value: 'Option 3', label: 'Option 3', hint: 'This is hint text' }, ]} /> @@ -86,9 +86,9 @@ This component does not contain an option for `checkbox` as it was decided it sh size="medium" showAmount={1} radios={[ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ]} /> @@ -113,9 +113,9 @@ This component does not contain an option for `checkbox` as it was decided it sh size="medium" isDisabled radios={[ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ]} /> @@ -139,25 +139,19 @@ This component does not contain an option for `checkbox` as it was decided it sh label={

Medium

} size="medium" radios={[ - { value: 'Option 1', children: 'Option 1', isDisabled: true }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1', isDisabled: true }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ]} /> Large

} size="large" radios={[ - { value: 'Option 1', children: 'Option 1'}, - { value: 'Option 2', children: 'Option 2', isDisabled: true }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1'}, + { value: 'Option 2', label: 'Option 2', isDisabled: true }, + { value: 'Option 3', label: 'Option 3' }, ]} - > - Option 1 - - Option 2 - - Option 3 - + /> ``` diff --git a/apps/site/src/content/design-system/components/radio-group/design/horizontal-layout/content.mdoc b/apps/site/src/content/design-system/components/radio-group/design/horizontal-layout/content.mdoc index 62b669a48..183691b9a 100644 --- a/apps/site/src/content/design-system/components/radio-group/design/horizontal-layout/content.mdoc +++ b/apps/site/src/content/design-system/components/radio-group/design/horizontal-layout/content.mdoc @@ -6,9 +6,9 @@ Use this option when you require an inline layout, it's only recommended in very label={Medium} orientation="horizontal" radios={[ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ]} /> @@ -17,9 +17,9 @@ Use this option when you require an inline layout, it's only recommended in very size="large" orientation="horizontal" radios={[ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ]} /> diff --git a/apps/site/src/content/design-system/components/radio-group/design/radio-sizes/content.mdoc b/apps/site/src/content/design-system/components/radio-group/design/radio-sizes/content.mdoc index 765d4a22c..446137783 100644 --- a/apps/site/src/content/design-system/components/radio-group/design/radio-sizes/content.mdoc +++ b/apps/site/src/content/design-system/components/radio-group/design/radio-sizes/content.mdoc @@ -6,18 +6,18 @@ There are two radio button sizes, make sure when laying out forms that your radi label={Medium} size="medium" radios={[ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ]} /> Large} size="large" radios={[ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ]} /> diff --git a/apps/site/src/content/design-system/components/radio-group/design/radios-with-hint-text/content.mdoc b/apps/site/src/content/design-system/components/radio-group/design/radios-with-hint-text/content.mdoc index dc1704065..d3fa36948 100644 --- a/apps/site/src/content/design-system/components/radio-group/design/radios-with-hint-text/content.mdoc +++ b/apps/site/src/content/design-system/components/radio-group/design/radios-with-hint-text/content.mdoc @@ -6,18 +6,18 @@ This variation allows supporting text to be displayed below the selectable item. label={Medium} size="medium" radios={[ - { value: 'Option 1', children: 'Option 1', hint: 'This is hint text' }, - { value: 'Option 2', children: 'Option 2', hint: 'This is hint text' }, - { value: 'Option 3', children: 'Option 3', hint: 'This is hint text' }, + { value: 'Option 1', label: 'Option 1', hint: 'This is hint text' }, + { value: 'Option 2', label: 'Option 2', hint: 'This is hint text' }, + { value: 'Option 3', label: 'Option 3', hint: 'This is hint text' }, ]} /> Large} size="large" radios={[ - { value: 'Option 1', children: 'Option 1', hint: 'This is hint text' }, - { value: 'Option 2', children: 'Option 2', hint: 'This is hint text' }, - { value: 'Option 3', children: 'Option 3', hint: 'This is hint text' }, + { value: 'Option 1', label: 'Option 1', hint: 'This is hint text' }, + { value: 'Option 2', label: 'Option 2', hint: 'This is hint text' }, + { value: 'Option 3', label: 'Option 3', hint: 'This is hint text' }, ]} /> diff --git a/apps/site/src/content/design-system/components/radio-group/design/radios-with-reveal/content.mdoc b/apps/site/src/content/design-system/components/radio-group/design/radios-with-reveal/content.mdoc index b57f1c9ae..c36e87cdd 100644 --- a/apps/site/src/content/design-system/components/radio-group/design/radios-with-reveal/content.mdoc +++ b/apps/site/src/content/design-system/components/radio-group/design/radios-with-reveal/content.mdoc @@ -12,9 +12,9 @@ The radio component has the ability to hide a configurable portion of the option size="medium" showAmount={1} radios={[ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ]} /> diff --git a/apps/site/src/content/design-system/content/guidelines/error-message/design/displaying-error-messages/content.mdoc b/apps/site/src/content/design-system/content/guidelines/error-message/design/displaying-error-messages/content.mdoc index 875090f45..61c1c35f7 100644 --- a/apps/site/src/content/design-system/content/guidelines/error-message/design/displaying-error-messages/content.mdoc +++ b/apps/site/src/content/design-system/content/guidelines/error-message/design/displaying-error-messages/content.mdoc @@ -27,9 +27,9 @@ There are some instances where the red keyline is not used, such as radio button @@ -45,9 +45,9 @@ There are some instances where the red keyline is not used, such as radio button diff --git a/apps/site/src/content/design-system/patterns/addresses/auto-address/design/auto-address/content.mdoc b/apps/site/src/content/design-system/patterns/addresses/auto-address/design/auto-address/content.mdoc index 81686ed98..497fe1e2f 100644 --- a/apps/site/src/content/design-system/patterns/addresses/auto-address/design/auto-address/content.mdoc +++ b/apps/site/src/content/design-system/patterns/addresses/auto-address/design/auto-address/content.mdoc @@ -29,8 +29,8 @@ To capture a different mailing address, use a text label with a button group to value={hasDifferentMailingAddress} onChange={value => setHasDifferentMailingAddress(value)} buttons={[ - { value: 'yes', children: "Yes" }, - { value: 'no', children: "No" } + { value: 'yes', label: "Yes" }, + { value: 'no', label: "No" } ]} /> diff --git a/apps/site/src/content/design-system/patterns/addresses/manual-address/design/error-states/content.mdoc b/apps/site/src/content/design-system/patterns/addresses/manual-address/design/error-states/content.mdoc index a83afbe63..26d884972 100644 --- a/apps/site/src/content/design-system/patterns/addresses/manual-address/design/error-states/content.mdoc +++ b/apps/site/src/content/design-system/patterns/addresses/manual-address/design/error-states/content.mdoc @@ -13,8 +13,8 @@ The error message should always sit above the input field to give context. The e value={hasDifferentMailingAddress} onChange={value => setHasDifferentMailingAddress(value)} buttons={[ - { value: 'yes', children: "Yes" }, - { value: 'no', children: "No" } + { value: 'yes', label: "Yes" }, + { value: 'no', label: "No" } ]} /> diff --git a/apps/site/src/content/design-system/patterns/addresses/manual-address/design/manual-address/content.mdoc b/apps/site/src/content/design-system/patterns/addresses/manual-address/design/manual-address/content.mdoc index 619ce03d5..b1ffb9a92 100644 --- a/apps/site/src/content/design-system/patterns/addresses/manual-address/design/manual-address/content.mdoc +++ b/apps/site/src/content/design-system/patterns/addresses/manual-address/design/manual-address/content.mdoc @@ -27,8 +27,8 @@ To capture a different mailing address, use a text label with a button group to value={hasDifferentMailingAddress} onChange={value => setHasDifferentMailingAddress(value)} buttons={[ - { value: 'yes', children: "Yes" }, - { value: 'no', children: "No" } + { value: 'yes', label: "Yes" }, + { value: 'no', label: "No" } ]} /> diff --git a/apps/site/src/content/design-system/patterns/personal-details/name/design/full-name/content.mdoc b/apps/site/src/content/design-system/patterns/personal-details/name/design/full-name/content.mdoc index fa01545ee..201ffe2d9 100644 --- a/apps/site/src/content/design-system/patterns/personal-details/name/design/full-name/content.mdoc +++ b/apps/site/src/content/design-system/patterns/personal-details/name/design/full-name/content.mdoc @@ -83,8 +83,8 @@ This example shows the base pattern used with additional questions when further value={differentName} look="hero" buttons={[ - { value: "yes", children: "Yes" }, - { value: "no", children: "No" } + { value: "yes", label: "Yes" }, + { value: "no", label: "No" } ]} /> diff --git a/packages/ui/src/components/button-group/button-group.spec.tsx b/packages/ui/src/components/button-group/button-group.spec.tsx index ce942cfa5..d51a45854 100644 --- a/packages/ui/src/components/button-group/button-group.spec.tsx +++ b/packages/ui/src/components/button-group/button-group.spec.tsx @@ -11,15 +11,15 @@ describe('ButtonGroup', () => { buttons={[ { value: 'Option 1', - children: 'Option 1', + label: 'Option 1', }, { value: 'Option 2', - children: 'Option 2', + label: 'Option 2', }, { value: 'Option 3', - children: 'Option 3', + label: 'Option 3', }, ]} />, @@ -27,22 +27,22 @@ describe('ButtonGroup', () => { expect(container).toBeInTheDocument(); }); - it('should render buttons when passed as children', () => { + it('should render buttons when passed as in buttons prop', () => { const { getByText } = render( , @@ -60,15 +60,15 @@ describe('ButtonGroup', () => { buttons={[ { value: 'Option 1', - children: 'Option 1', + label: 'Option 1', }, { value: 'Option 2', - children: 'Option 2', + label: 'Option 2', }, { value: 'Option 3', - children: 'Option 3', + label: 'Option 3', }, ]} />, @@ -90,15 +90,15 @@ describe('ButtonGroup', () => { buttons={[ { value: 'Option 1', - children: 'Option 1', + label: 'Option 1', }, { value: 'Option 2', - children: 'Option 2', + label: 'Option 2', }, { value: 'Option 3', - children: 'Option 3', + label: 'Option 3', }, ]} />, @@ -116,15 +116,15 @@ describe('ButtonGroup', () => { buttons={[ { value: 'Option 1', - children: 'Option 1', + label: 'Option 1', }, { value: 'Option 2', - children: 'Option 2', + label: 'Option 2', }, { value: 'Option 3', - children: 'Option 3', + label: 'Option 3', }, ]} />, diff --git a/packages/ui/src/components/button-group/button-group.stories.tsx b/packages/ui/src/components/button-group/button-group.stories.tsx index bc60228df..7b96f3960 100644 --- a/packages/ui/src/components/button-group/button-group.stories.tsx +++ b/packages/ui/src/components/button-group/button-group.stories.tsx @@ -41,15 +41,15 @@ export const Default: Story = { buttons: [ { value: 'Option 1', - children: 'Option 1', + label: 'Option 1', }, { value: 'Option 2', - children: 'Option 2', + label: 'Option 2', }, { value: 'Option 3', - children: 'Option 3', + label: 'Option 3', }, ], }, @@ -67,15 +67,15 @@ export const Colors = () => ( buttons={[ { value: 'Option 1', - children: 'Option 1', + label: 'Option 1', }, { value: 'Option 2', - children: 'Option 2', + label: 'Option 2', }, { value: 'Option 3', - children: 'Option 3', + label: 'Option 3', }, ]} /> @@ -95,15 +95,15 @@ export const Sizes = () => ( buttons={[ { value: 'Option 1', - children: 'Option 1', + label: 'Option 1', }, { value: 'Option 2', - children: 'Option 2', + label: 'Option 2', }, { value: 'Option 3', - children: 'Option 3', + label: 'Option 3', }, ]} /> @@ -119,15 +119,15 @@ export const ResponsiveSize: Story = { buttons: [ { value: 'Option 1', - children: 'Option 1', + label: 'Option 1', }, { value: 'Option 2', - children: 'Option 2', + label: 'Option 2', }, { value: 'Option 3', - children: 'Option 3', + label: 'Option 3', }, ], size: { @@ -151,15 +151,15 @@ export const Block = () => ( buttons={[ { value: 'Option 1', - children: 'Option 1', + label: 'Option 1', }, { value: 'Option 2', - children: 'Option 2', + label: 'Option 2', }, { value: 'Option 3', - children: 'Option 3', + label: 'Option 3', }, ]} /> @@ -175,15 +175,15 @@ export const Disabled: Story = { buttons: [ { value: 'Option 1', - children: 'Option 1', + label: 'Option 1', }, { value: 'Option 2', - children: 'Option 2', + label: 'Option 2', }, { value: 'Option 3', - children: 'Option 3', + label: 'Option 3', }, ], isDisabled: true, @@ -202,15 +202,15 @@ export const ErrorMessageAndLabel: Story = { buttons: [ { value: 'Option 1', - children: 'Option 1', + label: 'Option 1', }, { value: 'Option 2', - children: 'Option 2', + label: 'Option 2', }, { value: 'Option 3', - children: 'Option 3', + label: 'Option 3', }, ], }, diff --git a/packages/ui/src/components/button-group/components/button-group-button/button-group-button.component.tsx b/packages/ui/src/components/button-group/components/button-group-button/button-group-button.component.tsx index 6d03410a0..bd8f7b67c 100644 --- a/packages/ui/src/components/button-group/components/button-group-button/button-group-button.component.tsx +++ b/packages/ui/src/components/button-group/components/button-group-button/button-group-button.component.tsx @@ -9,11 +9,11 @@ import { ButtonGroupContext } from '../../button-group.component.js'; import { styles as buttonStyles } from './button-group-button.styles.js'; import { type ButtonGroupButtonProps } from './button-group-button.types.js'; -export function ButtonGroupButton({ className, children, ...props }: ButtonGroupButtonProps) { +export function ButtonGroupButton({ className, label, ...props }: ButtonGroupButtonProps) { const state = useContext(ButtonGroupContext); const { size, look, block } = state; const ref = useRef(null); - const { inputProps, isSelected, isDisabled } = useRadio({ ...props, children }, state, ref); + const { inputProps, isSelected, isDisabled } = useRadio({ ...props, children: label }, state, ref); const { isFocusVisible, focusProps } = useFocusRing(); const styles = buttonStyles({ block, isDisabled, isFocusVisible }); @@ -31,7 +31,7 @@ export function ButtonGroupButton({ className, children, ...props }: ButtonGroup size={size} className={styles.button()} > - {children} + {label} ); diff --git a/packages/ui/src/components/button-group/components/button-group-button/button-group-button.spec.tsx b/packages/ui/src/components/button-group/components/button-group-button/button-group-button.spec.tsx index 86c716029..82dea16e7 100644 --- a/packages/ui/src/components/button-group/components/button-group-button/button-group-button.spec.tsx +++ b/packages/ui/src/components/button-group/components/button-group-button/button-group-button.spec.tsx @@ -5,7 +5,7 @@ import { styles } from './button-group-button.styles.js'; describe('ButtonGroupButton', () => { it('renders the component', () => { - const { container } = render(Test); + const { container } = render(); expect(container).toBeInTheDocument(); }); diff --git a/packages/ui/src/components/button-group/components/button-group-button/button-group-button.types.ts b/packages/ui/src/components/button-group/components/button-group-button/button-group-button.types.ts index ea01ee07a..8b43066f8 100644 --- a/packages/ui/src/components/button-group/components/button-group-button/button-group-button.types.ts +++ b/packages/ui/src/components/button-group/components/button-group-button/button-group-button.types.ts @@ -1,3 +1,4 @@ +import { ReactNode } from 'react'; import { AriaRadioProps } from 'react-aria'; export type ButtonGroupButtonProps = { @@ -5,4 +6,8 @@ export type ButtonGroupButtonProps = { * `string` for overriding base style */ className?: string; -} & AriaRadioProps; + /** + * Label to render + */ + label: ReactNode; +} & Omit; diff --git a/packages/ui/src/components/checkbox-group/checkbox-group.spec.tsx b/packages/ui/src/components/checkbox-group/checkbox-group.spec.tsx index 0cdf4cde4..3bafedd31 100644 --- a/packages/ui/src/components/checkbox-group/checkbox-group.spec.tsx +++ b/packages/ui/src/components/checkbox-group/checkbox-group.spec.tsx @@ -9,21 +9,21 @@ describe('CheckboxGroup', () => { , ); expect(container).toBeInTheDocument(); }); - it('should render Options when passed as children', () => { + it('should render Options when passed in through checkboxes prop', () => { const { getByText } = render( , ); @@ -39,9 +39,9 @@ describe('CheckboxGroup', () => { showAmount={1} label="test" checkboxes={[ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ]} />, ); @@ -60,8 +60,8 @@ describe('CheckboxGroup', () => { showAmount={1} label="test" checkboxes={[ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, ]} />, ); @@ -79,8 +79,8 @@ describe('CheckboxGroup', () => { onChange={onChange} label="test" checkboxes={[ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, ]} />, ); @@ -97,9 +97,9 @@ describe('CheckboxGroup', () => { onChange={onChange} label="test" checkboxes={[ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ]} />, ); diff --git a/packages/ui/src/components/checkbox-group/checkbox-group.stories.tsx b/packages/ui/src/components/checkbox-group/checkbox-group.stories.tsx index bb7f0a37b..040b6c11d 100644 --- a/packages/ui/src/components/checkbox-group/checkbox-group.stories.tsx +++ b/packages/ui/src/components/checkbox-group/checkbox-group.stories.tsx @@ -43,9 +43,9 @@ type Story = StoryObj; export const Default: Story = { args: { checkboxes: [ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ], }, }; @@ -56,11 +56,11 @@ export const Default: Story = { export const LongLines: Story = { args: { checkboxes: [ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, { value: 'Option 3', - children: + label: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.', }, ], @@ -73,9 +73,9 @@ export const LongLines: Story = { export const DefaultValue: Story = { args: { checkboxes: [ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ], defaultValue: ['Option 1'], }, @@ -87,9 +87,9 @@ export const DefaultValue: Story = { export const Inline: Story = { args: { checkboxes: [ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ], orientation: 'horizontal', }, @@ -101,11 +101,11 @@ export const Inline: Story = { export const InlineLongLines: Story = { args: { checkboxes: [ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, { value: 'Option 3', - children: + label: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.', }, ], @@ -119,9 +119,9 @@ export const InlineLongLines: Story = { export const Disabled: Story = { args: { checkboxes: [ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ], isDisabled: true, defaultValue: ['Option 1'], @@ -134,9 +134,9 @@ export const Disabled: Story = { export const Large: Story = { args: { checkboxes: [ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ], size: 'large', }, @@ -148,9 +148,9 @@ export const Large: Story = { export const HiddenItems: Story = { args: { checkboxes: [ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ], showAmount: 1, }, @@ -162,9 +162,9 @@ export const HiddenItems: Story = { export const HintText: Story = { args: { checkboxes: [ - { value: 'Option 1', children: 'Option 1', hint: 'This is hint text 1' }, - { value: 'Option 2', children: 'Option 2', hint: 'This is hint text 2' }, - { value: 'Option 3', children: 'Option 3', hint: 'This is hint text 3' }, + { value: 'Option 1', label: 'Option 1', hint: 'This is hint text 1' }, + { value: 'Option 2', label: 'Option 2', hint: 'This is hint text 2' }, + { value: 'Option 3', label: 'Option 3', hint: 'This is hint text 3' }, ], }, }; @@ -175,9 +175,9 @@ export const HintText: Story = { export const OnChange: Story = { args: { checkboxes: [ - { value: 'Option 1', children: 'Option 1', hint: 'This is hint text 1' }, - { value: 'Option 2', children: 'Option 2', hint: 'This is hint text 2' }, - { value: 'Option 3', children: 'Option 3', hint: 'This is hint text 3' }, + { value: 'Option 1', label: 'Option 1', hint: 'This is hint text 1' }, + { value: 'Option 2', label: 'Option 2', hint: 'This is hint text 2' }, + { value: 'Option 3', label: 'Option 3', hint: 'This is hint text 3' }, ], onChange: e => console.log(e), }, @@ -193,9 +193,9 @@ export const ErrorMessageAndLabel: Story = { validationState: 'invalid', hintMessage: 'Hint: choose from one of the following options', checkboxes: [ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ], }, }; diff --git a/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.component.tsx b/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.component.tsx index 467a39c3d..e8affb1f4 100644 --- a/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.component.tsx +++ b/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.component.tsx @@ -31,11 +31,15 @@ function CheckIcon({ copyrightYear = '2023', size, ...props }: IconProps) { ); } -function BaseCheckbox({ className, hint, children, value, ...props }: CheckboxGroupCheckboxProps, ref: any) { +function BaseCheckbox({ className, hint, label, value, ...props }: CheckboxGroupCheckboxProps, ref: any) { const state = useContext(CheckboxGroupContext); const { size, orientation } = state; const localRef = useRef(null); - const { inputProps, isDisabled, isSelected } = useCheckboxGroupItem({ ...props, value, children }, state, localRef); + const { inputProps, isDisabled, isSelected } = useCheckboxGroupItem( + { ...props, value, children: label }, + state, + localRef, + ); const { isFocusVisible, focusProps } = useFocusRing(); const styles = checkboxItemStyles({ isDisabled, size, orientation, isFocusVisible }); @@ -48,7 +52,7 @@ function BaseCheckbox({ className, hint, children, value, ...props }: CheckboxGr {isSelected && }
- {children} + {label} {hint && {hint}}
diff --git a/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.spec.tsx b/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.spec.tsx index 27bb4c02e..3bc153943 100644 --- a/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.spec.tsx +++ b/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.spec.tsx @@ -7,7 +7,7 @@ import { CheckboxGroupCheckboxProps } from './checkbox-group-checkbox.types.js'; describe('Checkbox', () => { const defaultProps: CheckboxGroupCheckboxProps = { value: 'Option 1', - children: 'Option 1', + label: 'Option 1', }; it('renders the component', () => { diff --git a/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.stories.tsx b/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.stories.tsx index 529ce0ac5..38bbe80cf 100644 --- a/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.stories.tsx +++ b/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.stories.tsx @@ -28,19 +28,19 @@ type Story = StoryObj; * > Base Checkbox Item, unchecked as that is handled by Checkbox */ export const Default: Story = { - args: { children: 'Option 1', value: 'Option 1' }, + args: { label: 'Option 1', value: 'Option 1' }, }; /** * > Checkbox Item with hint example */ export const HintText: Story = { - args: { children: 'Option 1', value: 'Option 1', hint: 'Test hint' }, + args: { label: 'Option 1', value: 'Option 1', hint: 'Test hint' }, }; /** * > Disabled Checkbox Item example */ export const Disabled: Story = { - args: { children: 'Option 1', value: 'Option 1', isDisabled: true }, + args: { label: 'Option 1', value: 'Option 1', isDisabled: true }, }; diff --git a/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.types.ts b/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.types.ts index e39a0c94d..c25d089df 100644 --- a/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.types.ts +++ b/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.types.ts @@ -10,4 +10,8 @@ export type CheckboxGroupCheckboxProps = { * Renders hint under option, most likely a `string` but could be something else */ hint?: ReactNode; -} & Omit; + /** + * Label to render + */ + label: ReactNode; +} & Omit; diff --git a/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.component.tsx b/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.component.tsx index 03d199fce..a1931bb53 100644 --- a/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.component.tsx +++ b/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.component.tsx @@ -8,11 +8,11 @@ import { RadioGroupContext } from '../../radio-group.component.js'; import { styles as radioStyles } from './radio-group-radio.styles.js'; import { type RadioGroupRadioProps } from './radio-group-radio.types.js'; -function BaseRadioGroupRadio({ className, hint, children, ...props }: RadioGroupRadioProps, ref: any) { +function BaseRadioGroupRadio({ className, hint, label, ...props }: RadioGroupRadioProps, ref: any) { const state = useContext(RadioGroupContext); const { size, orientation } = state; const localRef = useRef(null); - const { inputProps, isSelected, isDisabled } = useRadio({ ...props, children }, state, localRef); + const { inputProps, isSelected, isDisabled } = useRadio({ ...props, children: label }, state, localRef); const { isFocusVisible, focusProps } = useFocusRing(); const styles = radioStyles({ isDisabled, isSelected, isFocusVisible, size, orientation }); @@ -23,7 +23,7 @@ function BaseRadioGroupRadio({ className, hint, children, ...props }: RadioGroup
- {children} + {label} {hint && {hint}}
diff --git a/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.spec.tsx b/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.spec.tsx index 0ae377b12..4d67999ae 100644 --- a/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.spec.tsx +++ b/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.spec.tsx @@ -7,7 +7,7 @@ import { RadioGroupRadioProps } from './radio-group-radio.types.js'; describe('Radio', () => { const defaultProps: RadioGroupRadioProps = { value: 'Option 1', - children: 'Option 1', + label: 'Option 1', }; it('renders the component', () => { diff --git a/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.stories.tsx b/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.stories.tsx index 968e2b780..d5bb9a18f 100644 --- a/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.stories.tsx +++ b/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.stories.tsx @@ -22,19 +22,19 @@ type Story = StoryObj; * > Base radio, unchecked as that is handled by RadioGroup */ export const Default: Story = { - args: { children: 'Option 1', value: 'Option 1' }, + args: { label: 'Option 1', value: 'Option 1' }, }; /** * > Radio with hint example */ export const Hint: Story = { - args: { children: 'Option 1', value: 'Option 1', hint: 'Test hint' }, + args: { label: 'Option 1', value: 'Option 1', hint: 'Test hint' }, }; /** * > Disabled Radio example */ export const Disabled: Story = { - args: { children: 'Option 1', value: 'Option 1', isDisabled: true }, + args: { label: 'Option 1', value: 'Option 1', isDisabled: true }, }; diff --git a/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.types.ts b/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.types.ts index 5911083cf..cb128f7c4 100644 --- a/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.types.ts +++ b/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.types.ts @@ -10,4 +10,8 @@ export type RadioGroupRadioProps = { * Renders hint under radio, most likely a `string` but could be something else */ hint?: ReactNode; -} & AriaRadioProps; + /** + * Label to render + */ + label: ReactNode; +} & Omit; diff --git a/packages/ui/src/components/radio-group/radio-group.spec.tsx b/packages/ui/src/components/radio-group/radio-group.spec.tsx index 9d2efd2ee..3e1660bc0 100644 --- a/packages/ui/src/components/radio-group/radio-group.spec.tsx +++ b/packages/ui/src/components/radio-group/radio-group.spec.tsx @@ -9,21 +9,21 @@ describe('RadioGroup', () => { , ); expect(container).toBeInTheDocument(); }); - it('should render Radios when passed as children', () => { + it('should render Radios when passed in through radios prop', () => { const { getByText } = render( , ); @@ -39,9 +39,9 @@ describe('RadioGroup', () => { showAmount={1} label="test" radios={[ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ]} />, ); @@ -60,8 +60,8 @@ describe('RadioGroup', () => { showAmount={1} label="test" radios={[ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, ]} />, ); @@ -79,8 +79,8 @@ describe('RadioGroup', () => { onChange={onChange} label="test" radios={[ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, ]} />, ); diff --git a/packages/ui/src/components/radio-group/radio-group.stories.tsx b/packages/ui/src/components/radio-group/radio-group.stories.tsx index fe0340ce9..41bafdebd 100644 --- a/packages/ui/src/components/radio-group/radio-group.stories.tsx +++ b/packages/ui/src/components/radio-group/radio-group.stories.tsx @@ -37,9 +37,9 @@ type Story = StoryObj; export const Default: Story = { args: { radios: [ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ], }, }; @@ -50,11 +50,11 @@ export const Default: Story = { export const LongLines: Story = { args: { radios: [ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, { value: 'Option 3', - children: + label: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.', }, ], @@ -67,9 +67,9 @@ export const LongLines: Story = { export const DefaultValue: Story = { args: { radios: [ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ], defaultValue: 'Option 1', }, @@ -81,9 +81,9 @@ export const DefaultValue: Story = { export const Inline: Story = { args: { radios: [ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ], orientation: 'horizontal', }, @@ -95,11 +95,11 @@ export const Inline: Story = { export const InlineLongLines: Story = { args: { radios: [ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, { value: 'Option 3', - children: + label: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.', }, ], @@ -113,9 +113,9 @@ export const InlineLongLines: Story = { export const Disabled: Story = { args: { radios: [ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ], isDisabled: true, }, @@ -127,9 +127,9 @@ export const Disabled: Story = { export const Large: Story = { args: { radios: [ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ], size: 'large', }, @@ -141,9 +141,9 @@ export const Large: Story = { export const HiddenOptions: Story = { args: { radios: [ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ], showAmount: 1, }, @@ -155,9 +155,9 @@ export const HiddenOptions: Story = { export const HintText: Story = { args: { radios: [ - { value: 'Option 1', children: 'Option 1', hint: 'This is hint text 1' }, - { value: 'Option 2', children: 'Option 2', hint: 'This is hint text 2' }, - { value: 'Option 3', children: 'Option 3', hint: 'This is hint text 3' }, + { value: 'Option 1', label: 'Option 1', hint: 'This is hint text 1' }, + { value: 'Option 2', label: 'Option 2', hint: 'This is hint text 2' }, + { value: 'Option 3', label: 'Option 3', hint: 'This is hint text 3' }, ], }, }; @@ -168,9 +168,9 @@ export const HintText: Story = { export const OnChange: Story = { args: { radios: [ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ], onChange: e => console.log(e), }, @@ -186,9 +186,9 @@ export const ErrorMessageAndLabel: Story = { validationState: 'invalid', hintMessage: 'Hint: choose from one of the following options', radios: [ - { value: 'Option 1', children: 'Option 1' }, - { value: 'Option 2', children: 'Option 2' }, - { value: 'Option 3', children: 'Option 3' }, + { value: 'Option 1', label: 'Option 1' }, + { value: 'Option 2', label: 'Option 2' }, + { value: 'Option 3', label: 'Option 3' }, ], }, };