From 9936c4ad6d53cd49f52fb6b7a0f52b752eb15317 Mon Sep 17 00:00:00 2001
From: mlm55 <mlm55@users.noreply.github.com>
Date: Tue, 27 Apr 2021 09:46:12 -0500
Subject: [PATCH] feat: Checkbox Tile Variant (#1104)

---
 .../forms/Checkbox/Checkbox.stories.tsx       | 23 +++++++++++++++
 .../forms/Checkbox/Checkbox.test.tsx          | 29 +++++++++++++++++++
 src/components/forms/Checkbox/Checkbox.tsx    | 14 ++++++++-
 3 files changed, 65 insertions(+), 1 deletion(-)

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={<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
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(
+    <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
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<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>
   )