From c1eb8a600970c6d6d313e7c8e6800077e2a30bb1 Mon Sep 17 00:00:00 2001
From: Marjo Poindexter <marjopoindexter@marjos-mbp.lan>
Date: Thu, 8 Apr 2021 16:27:14 -0500
Subject: [PATCH 1/5] add tile option for checkboxes

---
 package.json                                  |  4 +-
 .../forms/Checkbox/Checkbox.stories.tsx       |  4 ++
 .../forms/Checkbox/Checkbox.test.tsx          | 14 +++++
 src/components/forms/Checkbox/Checkbox.tsx    |  7 ++-
 yarn.lock                                     | 58 +++++++++----------
 5 files changed, 54 insertions(+), 33 deletions(-)

diff --git a/package.json b/package.json
index a384968b93..784dfcd64d 100644
--- a/package.json
+++ b/package.json
@@ -62,7 +62,7 @@
   "peerDependencies": {
     "react": "^16.x || ^17.x",
     "react-dom": "^16.x || ^17.x",
-    "uswds": "2.9.0"
+    "uswds": "2.10.0"
   },
   "devDependencies": {
     "@babel/core": "^7.10.5",
@@ -126,7 +126,7 @@
     "ts-jest": "^26.1.2",
     "typescript": "^3.8.0",
     "url-loader": "^4.0.0",
-    "uswds": "2.9.0",
+    "uswds": "2.10.0",
     "webpack": "^4.41.0",
     "webpack-cli": "^4.0.0"
   },
diff --git a/src/components/forms/Checkbox/Checkbox.stories.tsx b/src/components/forms/Checkbox/Checkbox.stories.tsx
index 8d44d8086d..18aff0f929 100644
--- a/src/components/forms/Checkbox/Checkbox.stories.tsx
+++ b/src/components/forms/Checkbox/Checkbox.stories.tsx
@@ -36,3 +36,7 @@ export const withRichLabel = (): React.ReactElement => (
     label={<strong>My Checkbox</strong>}
   />
 )
+
+export const tile = (): React.ReactElement => (
+  <Checkbox id="checkbox" name="checkbox" label="My Checkbox" tile />
+)
diff --git a/src/components/forms/Checkbox/Checkbox.test.tsx b/src/components/forms/Checkbox/Checkbox.test.tsx
index 091762ead4..c22e07bde6 100644
--- a/src/components/forms/Checkbox/Checkbox.test.tsx
+++ b/src/components/forms/Checkbox/Checkbox.test.tsx
@@ -11,3 +11,17 @@ 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'
+  )
+})
diff --git a/src/components/forms/Checkbox/Checkbox.tsx b/src/components/forms/Checkbox/Checkbox.tsx
index ce630829e1..7a77c975c8 100644
--- a/src/components/forms/Checkbox/Checkbox.tsx
+++ b/src/components/forms/Checkbox/Checkbox.tsx
@@ -12,6 +12,7 @@ interface CheckboxProps {
     | React.RefObject<HTMLInputElement>
     | null
     | undefined
+  tile?: boolean
 }
 
 export const Checkbox = ({
@@ -20,14 +21,18 @@ export const Checkbox = ({
   className,
   label,
   inputRef,
+  tile,
   ...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}
diff --git a/yarn.lock b/yarn.lock
index 8074f735ed..34c1ee83d7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5389,18 +5389,18 @@ define-property@^2.0.2:
     is-descriptor "^1.0.2"
     isobject "^3.0.1"
 
-del@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/del/-/del-5.1.0.tgz#d9487c94e367410e6eff2925ee58c0c84a75b3a7"
-  integrity sha512-wH9xOVHnczo9jN2IW68BabcecVPxacIA3g/7z6vhSU/4stOKQzeCRK0yD0A24WiAAUJmmVpWqrERcTxnLo3AnA==
+del@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/del/-/del-6.0.0.tgz#0b40d0332cea743f1614f818be4feb717714c952"
+  integrity sha512-1shh9DQ23L16oXSZKB2JxpL7iMy2E0S9d517ptA1P8iw0alkPtQcrKH7ru31rYtKwF499HkTu+DRzq3TCKDFRQ==
   dependencies:
-    globby "^10.0.1"
-    graceful-fs "^4.2.2"
+    globby "^11.0.1"
+    graceful-fs "^4.2.4"
     is-glob "^4.0.1"
     is-path-cwd "^2.2.0"
-    is-path-inside "^3.0.1"
-    p-map "^3.0.0"
-    rimraf "^3.0.0"
+    is-path-inside "^3.0.2"
+    p-map "^4.0.0"
+    rimraf "^3.0.2"
     slash "^3.0.0"
 
 delayed-stream@~1.0.0:
@@ -6450,7 +6450,7 @@ fast-glob@^2.2.6:
     merge2 "^1.2.3"
     micromatch "^3.1.10"
 
-fast-glob@^3.0.3, fast-glob@^3.1.1, fast-glob@^3.2.5:
+fast-glob@^3.1.1, fast-glob@^3.2.5:
   version "3.2.5"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.5.tgz#7939af2a656de79a4f1901903ee8adcaa7cb9661"
   integrity sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg==
@@ -7192,18 +7192,16 @@ globby@11.0.1:
     merge2 "^1.3.0"
     slash "^3.0.0"
 
-globby@^10.0.1:
-  version "10.0.2"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-10.0.2.tgz#277593e745acaa4646c3ab411289ec47a0392543"
-  integrity sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==
+globby@^11.0.1:
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.3.tgz#9b1f0cb523e171dd1ad8c7b2a9fb4b644b9593cb"
+  integrity sha512-ffdmosjA807y7+lA1NM0jELARVmYul/715xiILEjo3hBLPTcirgQNnXECn5g3mtR8TOLCVbkfua1Hpen25/Xcg==
   dependencies:
-    "@types/glob" "^7.1.1"
     array-union "^2.1.0"
     dir-glob "^3.0.1"
-    fast-glob "^3.0.3"
-    glob "^7.1.3"
-    ignore "^5.1.1"
-    merge2 "^1.2.3"
+    fast-glob "^3.1.1"
+    ignore "^5.1.4"
+    merge2 "^1.3.0"
     slash "^3.0.0"
 
 globby@^11.0.2:
@@ -7251,7 +7249,7 @@ good-listener@^1.2.2:
   dependencies:
     delegate "^3.1.2"
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@^4.2.0, graceful-fs@^4.2.2, graceful-fs@^4.2.4:
+graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@^4.2.0, graceful-fs@^4.2.4:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
   integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
@@ -7740,7 +7738,7 @@ ignore@^4.0.3, ignore@^4.0.6:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
   integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
 
-ignore@^5.1.1, ignore@^5.1.4, ignore@^5.1.8:
+ignore@^5.1.4, ignore@^5.1.8:
   version "5.1.8"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
   integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
@@ -8187,10 +8185,10 @@ is-path-cwd@^2.2.0:
   resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-2.2.0.tgz#67d43b82664a7b5191fd9119127eb300048a9fdb"
   integrity sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==
 
-is-path-inside@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.2.tgz#f5220fc82a3e233757291dddc9c5877f2a1f3017"
-  integrity sha512-/2UGPSgmtqwo1ktx8NDHjuPwZWmHhO+gj0f93EkhLB5RgW9RZevWYYlIkS6zePc6U2WpOdQYIwHe9YC4DWEBVg==
+is-path-inside@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
+  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
 is-plain-obj@^1.1.0:
   version "1.1.0"
@@ -13947,13 +13945,13 @@ use@^3.1.0:
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
   integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
 
-uswds@2.9.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/uswds/-/uswds-2.9.0.tgz#002089d74582960099b0ee836f89f043cdf6d0bc"
-  integrity sha512-5IMVgMCUUlgWVFrB7Wf1qTvv5L3oDDlSsAgvJ02+/sV2uh4JzO9YPm3493RTaMuHTc+feRCuYyEIloXsEQY0Pg==
+uswds@2.10.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/uswds/-/uswds-2.10.0.tgz#c7ecb779c82302fa189b36ca3eefe59dfde7f782"
+  integrity sha512-A6HjL42ryf9pdfbm6JrGxZywKzCZraHO4v3Ve21uFDqoA3ijoNjiSYME+3SG86CIgC6zRasrbQVuI3bvd3Xv2w==
   dependencies:
     classlist-polyfill "^1.0.3"
-    del "^5.1.0"
+    del "^6.0.0"
     domready "^1.0.8"
     elem-dataset "^2.0.0"
     lodash.debounce "^4.0.7"

From 2100c79d571a1f18ac7fe9c63fe27e69ea05d8bc Mon Sep 17 00:00:00 2001
From: Marjo Poindexter <marjopoindexter@marjos-mbp.lan>
Date: Fri, 9 Apr 2021 15:20:22 -0500
Subject: [PATCH 2/5] add optional label description

---
 .../forms/Checkbox/Checkbox.stories.tsx       | 19 +++++++++++++++++++
 .../forms/Checkbox/Checkbox.test.tsx          | 15 +++++++++++++++
 src/components/forms/Checkbox/Checkbox.tsx    |  9 +++++++++
 3 files changed, 43 insertions(+)

diff --git a/src/components/forms/Checkbox/Checkbox.stories.tsx b/src/components/forms/Checkbox/Checkbox.stories.tsx
index 18aff0f929..f2d81cf53c 100644
--- a/src/components/forms/Checkbox/Checkbox.stories.tsx
+++ b/src/components/forms/Checkbox/Checkbox.stories.tsx
@@ -37,6 +37,25 @@ export const withRichLabel = (): React.ReactElement => (
   />
 )
 
+export const WithLabelDescription = (): React.ReactElement => (
+  <Checkbox
+    id="checkbox"
+    name="checkbox"
+    label="My Checkbox"
+    labelDescription="Optional label description"
+  />
+)
+
 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="Optional label description"
+    tile
+  />
+)
diff --git a/src/components/forms/Checkbox/Checkbox.test.tsx b/src/components/forms/Checkbox/Checkbox.test.tsx
index c22e07bde6..27969bd1bb 100644
--- a/src/components/forms/Checkbox/Checkbox.test.tsx
+++ b/src/components/forms/Checkbox/Checkbox.test.tsx
@@ -25,3 +25,18 @@ it('renders tiled checkbox', () => {
     '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 7a77c975c8..9f7c3734a0 100644
--- a/src/components/forms/Checkbox/Checkbox.tsx
+++ b/src/components/forms/Checkbox/Checkbox.tsx
@@ -13,6 +13,7 @@ interface CheckboxProps {
     | null
     | undefined
   tile?: boolean
+  labelDescription?: React.ReactNode
 }
 
 export const Checkbox = ({
@@ -22,12 +23,19 @@ export const Checkbox = ({
   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,
   })
+  const description =
+    labelDescription != null ? (
+      <span className="usa-checkbox__label-description">
+        {labelDescription}
+      </span>
+    ) : null
 
   return (
     <div data-testid="checkbox" className={classes}>
@@ -41,6 +49,7 @@ export const Checkbox = ({
       />
       <label className="usa-checkbox__label" htmlFor={id}>
         {label}
+        {description}
       </label>
     </div>
   )

From ffd0c27eeb153d80f1a7bd4650f5878d3c419b22 Mon Sep 17 00:00:00 2001
From: mlm55 <mlm55@users.noreply.github.com>
Date: Tue, 13 Apr 2021 09:41:42 -0500
Subject: [PATCH 3/5] Update src/components/forms/Checkbox/Checkbox.tsx

Co-authored-by: Brandon Lenz <brandonalenz@gmail.com>
---
 src/components/forms/Checkbox/Checkbox.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/forms/Checkbox/Checkbox.tsx b/src/components/forms/Checkbox/Checkbox.tsx
index 9f7c3734a0..d4d149d0b3 100644
--- a/src/components/forms/Checkbox/Checkbox.tsx
+++ b/src/components/forms/Checkbox/Checkbox.tsx
@@ -49,7 +49,12 @@ export const Checkbox = ({
       />
       <label className="usa-checkbox__label" htmlFor={id}>
         {label}
-        {description}
+        {
+          labelDescription && 
+            <span className="usa-checkbox__label-description">
+              {labelDescription}
+            </span>
+        }
       </label>
     </div>
   )

From 6d323251c52ebb52b955afb5595065dadd0a568a Mon Sep 17 00:00:00 2001
From: Marjo Poindexter <marjopoindexter@marjos-mbp.lan>
Date: Tue, 13 Apr 2021 09:55:01 -0500
Subject: [PATCH 4/5] check if falsey instead of against null

---
 src/components/forms/Checkbox/Checkbox.tsx | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/components/forms/Checkbox/Checkbox.tsx b/src/components/forms/Checkbox/Checkbox.tsx
index d4d149d0b3..2fe6bc41a6 100644
--- a/src/components/forms/Checkbox/Checkbox.tsx
+++ b/src/components/forms/Checkbox/Checkbox.tsx
@@ -30,12 +30,6 @@ export const Checkbox = ({
   const checkboxClasses = classnames('usa-checkbox__input', {
     'usa-checkbox__input--tile': tile,
   })
-  const description =
-    labelDescription != null ? (
-      <span className="usa-checkbox__label-description">
-        {labelDescription}
-      </span>
-    ) : null
 
   return (
     <div data-testid="checkbox" className={classes}>
@@ -49,12 +43,11 @@ export const Checkbox = ({
       />
       <label className="usa-checkbox__label" htmlFor={id}>
         {label}
-        {
-          labelDescription && 
-            <span className="usa-checkbox__label-description">
-              {labelDescription}
-            </span>
-        }
+        {labelDescription && (
+          <span className="usa-checkbox__label-description">
+            {labelDescription}
+          </span>
+        )}
       </label>
     </div>
   )

From 41ac67b9a672d9449d8099b2f83e16d701ec4903 Mon Sep 17 00:00:00 2001
From: Marjo Poindexter <marjopoindexter@marjos-mbp.lan>
Date: Tue, 13 Apr 2021 09:55:51 -0500
Subject: [PATCH 5/5] change label description text

---
 src/components/forms/Checkbox/Checkbox.stories.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/forms/Checkbox/Checkbox.stories.tsx b/src/components/forms/Checkbox/Checkbox.stories.tsx
index f2d81cf53c..e49c14fc5a 100644
--- a/src/components/forms/Checkbox/Checkbox.stories.tsx
+++ b/src/components/forms/Checkbox/Checkbox.stories.tsx
@@ -42,7 +42,7 @@ export const WithLabelDescription = (): React.ReactElement => (
     id="checkbox"
     name="checkbox"
     label="My Checkbox"
-    labelDescription="Optional label description"
+    labelDescription="This is optional text that can be used to describe the label in more detail."
   />
 )
 
@@ -55,7 +55,7 @@ export const tileWithLabelDescription = (): React.ReactElement => (
     id="checkbox"
     name="checkbox"
     label="My Checkbox"
-    labelDescription="Optional label description"
+    labelDescription="This is optional text that can be used to describe the label in more detail."
     tile
   />
 )