feat: Checkbox Tile Variant (#1104)

trussworks · Apr 27, 2021 · 9936c4a · 9936c4a
1 parent a2f40a0
commit 9936c4a
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 1 deletion.
diff --git 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={<strong>My Checkbox</strong>}
   />
 )
+
+export const WithLabelDescription = (): React.ReactElement => (
+  <Checkbox
+    id="checkbox"
+    name="checkbox"
+    label="My Checkbox"
+    labelDescription="This is optional text that can be used to describe the label in more detail."
+  />
+)
+
+export const tile = (): React.ReactElement => (
+  <Checkbox id="checkbox" name="checkbox" label="My Checkbox" tile />
+)
+
+export const tileWithLabelDescription = (): React.ReactElement => (
+  <Checkbox
+    id="checkbox"
+    name="checkbox"
+    label="My Checkbox"
+    labelDescription="This is optional text that can be used to describe the label in more detail."
+    tile
+  />
+)
diff --git 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(
+    <Checkbox
+      id="input-checkbox"
+      name="input-checkbox"
+      label="My checkbox"
+      tile
+    />
+  )
+  expect(queryByLabelText('My checkbox')).toHaveClass(
+    'usa-checkbox__input usa-checkbox__input--tile'
+  )
+})
+
+it('renders label description', () => {
+  const { queryByText } = render(
+    <Checkbox
+      id="input-checkbox"
+      name="input-checkbox"
+      label="My checkbox"
+      labelDescription="Label description"
+      tile
+    />
+  )
+  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
@@ -12,6 +12,8 @@ interface CheckboxProps {
     | React.RefObject<HTMLInputElement>
     | 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 (
     <div data-testid="checkbox" className={classes}>
       <input
-        className="usa-checkbox__input"
+        className={checkboxClasses}
         id={id}
         type="checkbox"
         name={name}
@@ -36,6 +43,11 @@ export const Checkbox = ({
       />
       <label className="usa-checkbox__label" htmlFor={id}>
         {label}
+        {labelDescription && (
+          <span className="usa-checkbox__label-description">
+            {labelDescription}
+          </span>
+        )}
       </label>
     </div>
   )