diff --git a/src/components/Checkbox/README.md b/src/components/Checkbox/README.md index 5f219a0..4464c4a 100644 --- a/src/components/Checkbox/README.md +++ b/src/components/Checkbox/README.md @@ -28,4 +28,5 @@ import { BBBCheckbox } from 'bbb-ui-components'; | `layout` | `keyof typeof LAYOUTS` | `'right'` | The position of the label relative to the checkbox. | | `round` | `boolean` | `false` | If `true`, the checkbox will be rendered as a round radio-style button. | | `ariaLabel`| `string` | | The accessible name for the checkbox. | +| `dataTest` | `string` | | The `data-test` attribute on the underlying `` element. | | `...props` | `any` | | Any other props will be passed down to the underlying Material-UI Checkbox component. | diff --git a/src/components/Checkbox/component.stories.tsx b/src/components/Checkbox/component.stories.tsx index d5d14ac..c6f7d22 100644 --- a/src/components/Checkbox/component.stories.tsx +++ b/src/components/Checkbox/component.stories.tsx @@ -25,6 +25,10 @@ const meta = { control: 'text', description: 'Accessible name for the checkbox.', }, + dataTest: { + control: 'text', + description: '`data-test` attribute on the underlying `` element.', + }, }, } satisfies Meta; diff --git a/src/components/Checkbox/component.tsx b/src/components/Checkbox/component.tsx index 808740e..4e52e96 100644 --- a/src/components/Checkbox/component.tsx +++ b/src/components/Checkbox/component.tsx @@ -17,16 +17,22 @@ function Checkbox({ layout = DEFAULT_LAYOUT, round = false, ariaLabel, + id, + dataTest, + inputProps, ...props }: CheckboxProps): JSX.Element { - const id = useId(); + const generatedId = useId(); + const checkboxId = id ?? generatedId; + const mergedInputProps = { 'data-test': dataTest, ...inputProps }; const checkbox = ( : undefined} checkedIcon={round ? : undefined} + inputProps={mergedInputProps} /> ); @@ -36,9 +42,9 @@ function Checkbox({ return ( - {layout === LAYOUTS.LEFT && {label}} + {layout === LAYOUTS.LEFT && {label}} {checkbox} - {layout === LAYOUTS.RIGHT && {label}} + {layout === LAYOUTS.RIGHT && {label}} ); } diff --git a/src/components/Checkbox/types.ts b/src/components/Checkbox/types.ts index bd7298c..c61e065 100644 --- a/src/components/Checkbox/types.ts +++ b/src/components/Checkbox/types.ts @@ -15,4 +15,7 @@ export interface CheckboxProps extends MuiCheckboxProps { /** Accessible name for the checkbox. */ ariaLabel?: string; + + /** `data-test` attribute on the underlying `` element. */ + dataTest?: string; }