feat: add hint prop to Checkbox (#2050)

okta · Dec 1, 2023 · 1fdc55e · 1fdc55e
1 parent ba092e8
commit 1fdc55e
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 13 deletions.
diff --git a/packages/odyssey-react-mui/src/Checkbox.tsx b/packages/odyssey-react-mui/src/Checkbox.tsx
@@ -16,6 +16,7 @@ import {
   Checkbox as MuiCheckbox,
   CheckboxProps as MuiCheckboxProps,
   FormControlLabel,
+  FormHelperText,
 } from "@mui/material";
 
 import { FieldComponentProps } from "./FieldComponentProps";
@@ -55,6 +56,10 @@ export type CheckboxProps = {
    * The label text for the Checkbox
    */
   label?: string;
+  /**
+   * The helper text content
+   */
+  hint?: string;
   /**
    * The checkbox validity, if different from its enclosing group. Defaults to "inherit".
    */
@@ -77,6 +82,7 @@ const Checkbox = ({
   isIndeterminate,
   isRequired,
   label: labelProp,
+  hint,
   name: nameOverride,
   onChange: onChangeProp,
   testId,
@@ -90,19 +96,21 @@ const Checkbox = ({
   });
 
   const label = useMemo(() => {
-    if (isRequired) {
-      return (
-        <>
-          {labelProp}{" "}
-          <Typography component="span" color="textSecondary">
-            ({t("fieldlabel.required.text")})
-          </Typography>
-        </>
-      );
-    } else {
-      return <>{labelProp}</>;
-    }
-  }, [isRequired, labelProp, t]);
+    return (
+      <>
+        {labelProp}
+        {isRequired && (
+          <>
+            {" "}
+            <Typography component="span" color="textSecondary">
+              ({t("fieldlabel.required.text")})
+            </Typography>
+          </>
+        )}
+        {hint && <FormHelperText>{hint}</FormHelperText>}
+      </>
+    );
+  }, [isRequired, labelProp, hint, t]);
 
   const onChange = useCallback<NonNullable<MuiCheckboxProps["onChange"]>>(
     (event, checked) => {
@@ -114,6 +122,7 @@ const Checkbox = ({
 
   return (
     <FormControlLabel
+      sx={{ alignItems: "flex-start" }}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
       className={
@@ -129,6 +138,9 @@ const Checkbox = ({
           indeterminate={isIndeterminate}
           onChange={onChange}
           required={isRequired}
+          sx={() => ({
+            marginBlockStart: "2px",
+          })}
         />
       }
       data-se={testId}

diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Checkbox/Checkbox.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Checkbox/Checkbox.stories.tsx
@@ -94,6 +94,15 @@ const storybookMeta: Meta<typeof Checkbox> = {
         },
       },
     },
+    hint: {
+      control: "text",
+      description: "The helper text content",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
     name: fieldComponentPropsMetaData.name,
     onChange: {
       control: null,
@@ -224,6 +233,23 @@ export const Invalid: StoryObj<typeof Checkbox> = {
   },
 };
 
+export const Hint: StoryObj<typeof Checkbox> = {
+  parameters: {
+    docs: {
+      description: {
+        story: "hint provides helper text to the Checkbox",
+      },
+    },
+  },
+  args: {
+    label: "I agree to the terms and conditions",
+    hint: "Really helpful hint",
+  },
+  play: async ({ canvasElement, step }) => {
+    checkTheBox({ canvasElement, step })("Checkbox Hint");
+  },
+};
+
 export const Uncontrolled: StoryObj<typeof Checkbox> = {
   args: {
     label: "Pre-flight systems check complete",