@okta/odyssey-react-mui 1.7.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -51,7 +51,7 @@
     "@mui/system": "^5.14.9",
     "@mui/utils": "^5.11.2",
     "@mui/x-date-pickers": "^5.0.15",
-    "@okta/odyssey-design-tokens": "1.7.0",
+    "@okta/odyssey-design-tokens": "1.8.0",
     "date-fns": "^2.30.0",
     "i18next": "^23.5.1",
     "material-react-table": "^2.0.2",
@@ -63,5 +63,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "edc15e98af7428f68d2cd4bf68bbb81a520a7cb8"
+  "gitHead": "279ce97d18cf87719c03592ff66e341441b51c10"
 }

package/src/Badge.tsx

@@ -0,0 +1,99 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { CSSProperties, memo, useMemo } from "react";
+
+import {
+  useOdysseyDesignTokens,
+  DesignTokens,
+} from "./OdysseyDesignTokensContext";
+import { Box } from "./Box";
+import type { SeleniumProps } from "./SeleniumProps";
+
+export const badgeTypeValues = ["default", "attention", "danger"] as const;
+
+export type BadgeProps = {
+  badgeContent: number;
+  badgeContentMax?: number;
+  type?: (typeof badgeTypeValues)[number];
+} & SeleniumProps;
+
+const badgeTypeColors = (odysseyTokens: DesignTokens) => ({
+  default: {
+    background: odysseyTokens.HueNeutral200,
+    font: odysseyTokens.TypographyColorBody,
+  },
+  attention: {
+    background: odysseyTokens.PalettePrimaryMain,
+    font: odysseyTokens.TypographyColorInverse,
+  },
+  danger: {
+    background: odysseyTokens.PaletteDangerMain,
+    font: odysseyTokens.TypographyColorInverse,
+  },
+});
+
+const Badge = ({
+  badgeContent,
+  badgeContentMax = 999,
+  type = "default",
+}: BadgeProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  const greaterThanZeroContentMax = badgeContentMax > 0 ? badgeContentMax : 1;
+  const threeDigitLimitedMax =
+    greaterThanZeroContentMax > 999 ? 999 : greaterThanZeroContentMax;
+  const isOverContentMax = Boolean(
+    badgeContent && badgeContent > threeDigitLimitedMax
+  );
+  const overContentMaxMessage = `${greaterThanZeroContentMax}+`;
+  const formattedContent = isOverContentMax
+    ? overContentMaxMessage
+    : badgeContent;
+  const contentIsLongerThanOneChar = formattedContent?.toString()?.length > 1;
+
+  const badgeStyles = useMemo<CSSProperties>(
+    () => ({
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      minWidth: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,
+      height: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,
+      minHeight: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,
+      // 6px horizontal padding per design requirements
+      padding: `0 calc(${odysseyDesignTokens.Spacing1} * 1.5)`,
+      backgroundColor: badgeTypeColors(odysseyDesignTokens)[type].background,
+      color: badgeTypeColors(odysseyDesignTokens)[type].font,
+      borderRadius: contentIsLongerThanOneChar
+        ? `${odysseyDesignTokens.BorderRadiusOuter}`
+        : "50%",
+      fontSize: `${odysseyDesignTokens.TypographyScale0}`,
+      fontFamily: `${odysseyDesignTokens.TypographyFamilyMono}`,
+      fontWeight: `${odysseyDesignTokens.TypographyWeightBodyBold}`,
+      lineHeight: 1,
+    }),
+    [type, contentIsLongerThanOneChar, odysseyDesignTokens]
+  );
+
+  const shouldHideBadge = badgeContent <= 0 || !badgeContent;
+
+  if (shouldHideBadge) {
+    return null;
+  }
+
+  return <Box sx={badgeStyles}>{formattedContent}</Box>;
+};
+
+const MemoizedBadge = memo(Badge);
+MemoizedBadge.displayName = "Badge";
+
+export { MemoizedBadge as Badge };

package/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}

package/src/OdysseyDesignTokensContext.tsx

@@ -13,7 +13,8 @@
 import * as Tokens from "@okta/odyssey-design-tokens";
 import { createContext, useContext } from "react";
 
-export const OdysseyDesignTokensContext = createContext<typeof Tokens>(Tokens);
+export type DesignTokens = typeof Tokens;
+export const OdysseyDesignTokensContext = createContext<DesignTokens>(Tokens);
 
 export const useOdysseyDesignTokens = () =>
   useContext(OdysseyDesignTokensContext);