From e53f820272513d128da2c489281bc31c9b15f590 Mon Sep 17 00:00:00 2001
From: bc-nick <99336044+bc-nick@users.noreply.github.com>
Date: Wed, 4 Jan 2023 19:20:16 +0200
Subject: [PATCH] feat(component): add Badge props to Checkbox component
 (#1080)

* feat(component): add Badge props to Checkbox component
---
 .../src/components/Checkbox/Checkbox.tsx      |  6 ++-
 .../Checkbox/__snapshots__/spec.tsx.snap      | 50 +++++++++----------
 .../src/components/Checkbox/spec.tsx          | 17 +++++++
 .../docs/PropTables/CheckboxPropTable.tsx     | 13 +++++
 packages/docs/pages/checkbox.tsx              | 45 +++++++++++++++++
 5 files changed, 105 insertions(+), 26 deletions(-)

diff --git a/packages/big-design/src/components/Checkbox/Checkbox.tsx b/packages/big-design/src/components/Checkbox/Checkbox.tsx
index 67b70a9c8..85add3620 100644
--- a/packages/big-design/src/components/Checkbox/Checkbox.tsx
+++ b/packages/big-design/src/components/Checkbox/Checkbox.tsx
@@ -10,6 +10,7 @@ import React, {
 } from 'react';
 
 import { typedMemo, warning } from '../../utils';
+import { Badge, BadgeProps } from '../Badge';
 import { FormControlDescription, FormControlDescriptionLinkProps } from '../Form';
 
 import { CheckboxLabel } from './Label';
@@ -25,6 +26,7 @@ interface Props {
   isIndeterminate?: boolean;
   label: React.ReactChild;
   description?: CheckboxDescription | string;
+  badge?: BadgeProps;
 }
 
 interface CheckboxDescription {
@@ -48,6 +50,7 @@ const RawCheckbox: React.FC<CheckboxProps & PrivateProps> = ({
   label,
   forwardedRef,
   style,
+  badge,
   ...props
 }) => {
   const uniqueCheckboxId = useId();
@@ -69,6 +72,7 @@ const RawCheckbox: React.FC<CheckboxProps & PrivateProps> = ({
           id={labelId}
         >
           {label}
+          {badge ? <Badge marginLeft="xSmall" {...badge} /> : null}
         </CheckboxLabel>
       );
     }
@@ -85,7 +89,7 @@ const RawCheckbox: React.FC<CheckboxProps & PrivateProps> = ({
     }
 
     warning('label must be either a string or a CheckboxLabel component.');
-  }, [disabled, hiddenLabel, id, label, labelId]);
+  }, [badge, disabled, hiddenLabel, id, label, labelId]);
 
   const renderedDescription = useMemo(() => {
     if (!description) {
diff --git a/packages/big-design/src/components/Checkbox/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Checkbox/__snapshots__/spec.tsx.snap
index df4a201b8..c7bb6aa35 100644
--- a/packages/big-design/src/components/Checkbox/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/Checkbox/__snapshots__/spec.tsx.snap
@@ -248,18 +248,18 @@ exports[`render Checkbox disabled checked 1`] = `
 >
   <input
     aria-checked="true"
-    aria-labelledby=":rg:"
+    aria-labelledby=":rj:"
     checked=""
     class="c1 c2"
     disabled=""
-    id=":rf:"
+    id=":ri:"
     type="checkbox"
   />
   <label
     aria-hidden="true"
     class="c3 c4"
     disabled=""
-    for=":rf:"
+    for=":ri:"
   >
     <svg
       aria-hidden="true"
@@ -287,8 +287,8 @@ exports[`render Checkbox disabled checked 1`] = `
       aria-hidden="true"
       class="c7 c8"
       disabled=""
-      for=":rf:"
-      id=":rg:"
+      for=":ri:"
+      id=":rj:"
     >
       Checked
     </label>
@@ -397,17 +397,17 @@ exports[`render Checkbox disabled indeterminate 1`] = `
   class="c0"
 >
   <input
-    aria-labelledby=":rm:"
+    aria-labelledby=":rp:"
     class="c1 c2"
     disabled=""
-    id=":rl:"
+    id=":ro:"
     type="checkbox"
   />
   <label
     aria-hidden="true"
     class="c3 c4"
     disabled=""
-    for=":rl:"
+    for=":ro:"
   >
     <svg
       aria-hidden="true"
@@ -435,8 +435,8 @@ exports[`render Checkbox disabled indeterminate 1`] = `
       aria-hidden="true"
       class="c7 c8"
       disabled=""
-      for=":rl:"
-      id=":rm:"
+      for=":ro:"
+      id=":rp:"
     >
       Unchecked
     </label>
@@ -546,17 +546,17 @@ exports[`render Checkbox disabled unchecked 1`] = `
 >
   <input
     aria-checked="false"
-    aria-labelledby=":rj:"
+    aria-labelledby=":rm:"
     class="c1 c2"
     disabled=""
-    id=":ri:"
+    id=":rl:"
     type="checkbox"
   />
   <label
     aria-hidden="true"
     class="c3 c4"
     disabled=""
-    for=":ri:"
+    for=":rl:"
   >
     <svg
       aria-hidden="true"
@@ -584,8 +584,8 @@ exports[`render Checkbox disabled unchecked 1`] = `
       aria-hidden="true"
       class="c7 c8"
       disabled=""
-      for=":ri:"
-      id=":rj:"
+      for=":rl:"
+      id=":rm:"
     >
       Checked
     </label>
@@ -694,15 +694,15 @@ exports[`render Checkbox indeterminate 1`] = `
   class="c0"
 >
   <input
-    aria-labelledby=":rd:"
+    aria-labelledby=":rg:"
     class="c1 c2"
-    id=":rc:"
+    id=":rf:"
     type="checkbox"
   />
   <label
     aria-hidden="true"
     class="c3 c4"
-    for=":rc:"
+    for=":rf:"
   >
     <svg
       aria-hidden="true"
@@ -728,8 +728,8 @@ exports[`render Checkbox indeterminate 1`] = `
   >
     <label
       class="c7 c8"
-      for=":rc:"
-      id=":rd:"
+      for=":rf:"
+      id=":rg:"
     >
       Unchecked
     </label>
@@ -1196,16 +1196,16 @@ exports[`render Checkbox with description string 1`] = `
 >
   <input
     aria-checked="false"
-    aria-labelledby=":ra:"
+    aria-labelledby=":rd:"
     class="c1 c2"
-    id=":r9:"
+    id=":rc:"
     name="test-group"
     type="checkbox"
   />
   <label
     aria-hidden="true"
     class="c3 c4"
-    for=":r9:"
+    for=":rc:"
   >
     <svg
       aria-hidden="true"
@@ -1231,8 +1231,8 @@ exports[`render Checkbox with description string 1`] = `
   >
     <label
       class="c7 c8"
-      for=":r9:"
-      id=":ra:"
+      for=":rc:"
+      id=":rd:"
     >
       Unchecked
     </label>
diff --git a/packages/big-design/src/components/Checkbox/spec.tsx b/packages/big-design/src/components/Checkbox/spec.tsx
index 733d32243..a8ed9cb35 100644
--- a/packages/big-design/src/components/Checkbox/spec.tsx
+++ b/packages/big-design/src/components/Checkbox/spec.tsx
@@ -46,6 +46,23 @@ describe('render Checkbox', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
+  test('with badge props', () => {
+    const { container } = render(
+      <Checkbox
+        badge={{
+          label: 'Badge',
+          variant: 'secondary',
+        }}
+        description="description text"
+        label="Unchecked"
+        name="test-group"
+        onChange={() => null}
+      />,
+    );
+
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
   test('with description string', () => {
     const { container } = render(
       <Checkbox
diff --git a/packages/docs/PropTables/CheckboxPropTable.tsx b/packages/docs/PropTables/CheckboxPropTable.tsx
index 993bd7e3e..8714edfac 100644
--- a/packages/docs/PropTables/CheckboxPropTable.tsx
+++ b/packages/docs/PropTables/CheckboxPropTable.tsx
@@ -62,6 +62,19 @@ const checkboxProps: Prop[] = [
       </>
     ),
   },
+  {
+    name: 'badge',
+    types: [
+      <NextLink href="/badge" key="badge-type">
+        BadgeProps
+      </NextLink>,
+    ],
+    description: (
+      <>
+        See <NextLink href="/badge">Badge</NextLink> for usage.
+      </>
+    ),
+  },
 ];
 
 const checkboxDescriptionProps: Prop[] = [
diff --git a/packages/docs/pages/checkbox.tsx b/packages/docs/pages/checkbox.tsx
index 43153cb4a..ab1868eed 100644
--- a/packages/docs/pages/checkbox.tsx
+++ b/packages/docs/pages/checkbox.tsx
@@ -134,6 +134,51 @@ const CheckboxPage = () => {
                 </Fragment>
               ),
             },
+            {
+              id: 'badge',
+              title: 'Badge',
+              render: () => (
+                <Fragment key="badge">
+                  <Text>
+                    <Code primary>Checkboxes</Code> support <Code primary>Badge</Code> that display{' '}
+                    status information.
+                  </Text>
+
+                  <CodePreview>
+                    {/* jsx-to-string:start */}
+                    {function Example() {
+                      const [checked, setChecked] = useState(false);
+                      const handleChange = () => setChecked(!checked);
+
+                      return (
+                        <Form>
+                          <FormGroup>
+                            <Checkbox
+                              badge={{
+                                label: 'warning',
+                                variant: 'warning',
+                              }}
+                              checked={checked}
+                              label={checked ? 'Checked' : 'Unchecked'}
+                              onChange={handleChange}
+                            />
+                            <Checkbox
+                              badge={{
+                                label: 'danger',
+                                variant: 'danger',
+                              }}
+                              disabled={true}
+                              label="Disabled"
+                            />
+                          </FormGroup>
+                        </Form>
+                      );
+                    }}
+                    {/* jsx-to-string:end */}
+                  </CodePreview>
+                </Fragment>
+              ),
+            },
           ]}
         />
       </Panel>