diff --git a/src/components/forms/Checkbox/Checkbox.stories.tsx b/src/components/forms/Checkbox/Checkbox.stories.tsx index 8d44d8086d..e49c14fc5a 100644 --- a/src/components/forms/Checkbox/Checkbox.stories.tsx +++ b/src/components/forms/Checkbox/Checkbox.stories.tsx @@ -36,3 +36,26 @@ export const withRichLabel = (): React.ReactElement => ( label={My Checkbox} /> ) + +export const WithLabelDescription = (): React.ReactElement => ( + +) + +export const tile = (): React.ReactElement => ( + +) + +export const tileWithLabelDescription = (): React.ReactElement => ( + +) diff --git a/src/components/forms/Checkbox/Checkbox.test.tsx b/src/components/forms/Checkbox/Checkbox.test.tsx index 091762ead4..27969bd1bb 100644 --- a/src/components/forms/Checkbox/Checkbox.test.tsx +++ b/src/components/forms/Checkbox/Checkbox.test.tsx @@ -11,3 +11,32 @@ describe('Checkbox component', () => { expect(queryByTestId('checkbox')).toBeInTheDocument() }) }) + +it('renders tiled checkbox', () => { + const { queryByLabelText } = render( + + ) + expect(queryByLabelText('My checkbox')).toHaveClass( + 'usa-checkbox__input usa-checkbox__input--tile' + ) +}) + +it('renders label description', () => { + const { queryByText } = render( + + ) + expect(queryByText('Label description')).toHaveClass( + 'usa-checkbox__label-description' + ) +}) diff --git a/src/components/forms/Checkbox/Checkbox.tsx b/src/components/forms/Checkbox/Checkbox.tsx index ce630829e1..2fe6bc41a6 100644 --- a/src/components/forms/Checkbox/Checkbox.tsx +++ b/src/components/forms/Checkbox/Checkbox.tsx @@ -12,6 +12,8 @@ interface CheckboxProps { | React.RefObject | null | undefined + tile?: boolean + labelDescription?: React.ReactNode } export const Checkbox = ({ @@ -20,14 +22,19 @@ export const Checkbox = ({ className, label, inputRef, + tile, + labelDescription, ...inputProps }: CheckboxProps & JSX.IntrinsicElements['input']): React.ReactElement => { const classes = classnames('usa-checkbox', className) + const checkboxClasses = classnames('usa-checkbox__input', { + 'usa-checkbox__input--tile': tile, + }) return (
)