fix(BBBCheckbox): respect caller-provided id prop & feat(BBBCheckbox): add dataTest prop for the underlying input

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 `<input>` element.              |
 | `...props` | `any`                  |           | Any other props will be passed down to the underlying Material-UI Checkbox component. |

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 `<input>` element.',
+    },
   },
 } satisfies Meta<typeof BBBCheckbox>;
 

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 = (
     <Styled.StyledCheckbox
       {...props}
-      id={id}
+      id={checkboxId}
       aria-label={ariaLabel}
       icon={round ? <RadioButtonUnchecked /> : undefined}
       checkedIcon={round ? <RadioButtonChecked /> : undefined}
+      inputProps={mergedInputProps}
     />
   );
 
@@ -36,9 +42,9 @@ function Checkbox({
 
   return (
     <Styled.Container>
-      {layout === LAYOUTS.LEFT && <Styled.Label htmlFor={id}>{label}</Styled.Label>}
+      {layout === LAYOUTS.LEFT && <Styled.Label htmlFor={checkboxId}>{label}</Styled.Label>}
       {checkbox}
-      {layout === LAYOUTS.RIGHT && <Styled.Label htmlFor={id}>{label}</Styled.Label>}
+      {layout === LAYOUTS.RIGHT && <Styled.Label htmlFor={checkboxId}>{label}</Styled.Label>}
     </Styled.Container>
   );
 }

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 `<input>` element. */
+  dataTest?: string;
 }