@okta/odyssey-react-mui 1.24.1 → 1.26.0

package/src/Tag.tsx

@@ -13,26 +13,30 @@
 import { Chip as MuiChip, ChipProps as MuiChipProps } from "@mui/material";
 import { memo, ReactElement, useCallback, useContext } from "react";
 import styled from "@emotion/styled";
-import { TagListContext } from "./TagListContext";
-import { MuiPropsContext, MuiPropsContextType } from "./MuiPropsContext";
+
+import { CloseCircleFilledIcon } from "./icons.generated";
 import { HtmlProps } from "./HtmlProps";
+import { MuiPropsContext, MuiPropsContextType } from "./MuiPropsContext";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
 } from "./OdysseyDesignTokensContext";
-import { CloseCircleFilledIcon } from "./icons.generated";
-import { useContrastContext, ContrastMode } from "./ContrastModeProvider";
+import { TagListContext } from "./TagListContext";
+import { ContrastMode, useContrastModeContext } from "./useContrastMode";
+
+const tagSizeValues = ["medium", "small"] as const;
 
 export const tagColorVariants = [
-  "default",
-  "info",
+  "accentFour",
   "accentOne",
-  "accentTwo",
   "accentThree",
-  "accentFour",
+  "accentTwo",
+  "default",
+  "info",
 ] as const;
 
 type TagColorVariant = (typeof tagColorVariants)[number];
+type TagSize = (typeof tagSizeValues)[number];
 
 export type TagProps = {
   icon?: ReactElement;
@@ -53,103 +57,135 @@ export type TagProps = {
    * Color variant of the Tag, affecting its appearance
    */
   colorVariant?: TagColorVariant;
+  /*
+   *  Size variant of the Tag
+   */
+  size?: TagSize;
 } & Pick<HtmlProps, "testId" | "translate">;
 
-const getChipColors = (
-  colorVariant: TagColorVariant,
-  odysseyDesignTokens: DesignTokens,
-  contrastMode: ContrastMode,
-) => {
+const getChipColors = ({
+  colorVariant,
+  contrastMode,
+  odysseyDesignTokens,
+}: {
+  colorVariant: TagColorVariant;
+  contrastMode: ContrastMode;
+  odysseyDesignTokens: DesignTokens;
+}) => {
   const colors = {
     default: {
-      ...(contrastMode === "lowContrast" && {
+      ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueNeutral200,
         text: odysseyDesignTokens.HueNeutral700,
+        textDisabled: odysseyDesignTokens.HueNeutral400,
       }),
-      ...(contrastMode === "highContrast" && {
+      ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueNeutral100,
         text: odysseyDesignTokens.HueNeutral700,
+        textDisabled: odysseyDesignTokens.HueNeutral300,
       }),
       hover: odysseyDesignTokens.HueNeutral200,
       active: odysseyDesignTokens.HueNeutral300,
       border: odysseyDesignTokens.HueNeutral200,
       deleteIcon: odysseyDesignTokens.HueNeutral500,
       deleteIconHover: odysseyDesignTokens.HueNeutral700,
+      icon: odysseyDesignTokens.HueNeutral700,
+      iconDisabled: odysseyDesignTokens.HueNeutral300,
     },
     info: {
-      ...(contrastMode === "lowContrast" && {
+      ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueBlue200,
         text: odysseyDesignTokens.HueBlue700,
+        textDisabled: odysseyDesignTokens.HueBlue400,
       }),
-      ...(contrastMode === "highContrast" && {
+      ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueBlue100,
         text: odysseyDesignTokens.HueBlue700,
+        textDisabled: odysseyDesignTokens.HueBlue300,
       }),
       hover: odysseyDesignTokens.HueBlue200,
       active: odysseyDesignTokens.HueBlue300,
       border: odysseyDesignTokens.HueBlue200,
       deleteIcon: odysseyDesignTokens.HueBlue500,
       deleteIconHover: odysseyDesignTokens.HueBlue700,
+      icon: odysseyDesignTokens.HueBlue700,
+      iconDisabled: odysseyDesignTokens.HueBlue300,
     },
     accentOne: {
-      ...(contrastMode === "lowContrast" && {
+      ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueAccentOne200,
         text: odysseyDesignTokens.HueAccentOne700,
+        textDisabled: odysseyDesignTokens.HueAccentOne400,
       }),
-      ...(contrastMode === "highContrast" && {
+      ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueAccentOne100,
         text: odysseyDesignTokens.HueAccentOne700,
+        textDisabled: odysseyDesignTokens.HueAccentOne300,
       }),
       hover: odysseyDesignTokens.HueAccentOne200,
       active: odysseyDesignTokens.HueAccentOne300,
       border: odysseyDesignTokens.HueAccentOne200,
       deleteIcon: odysseyDesignTokens.HueAccentOne500,
       deleteIconHover: odysseyDesignTokens.HueAccentOne700,
+      icon: odysseyDesignTokens.HueAccentOne700,
+      iconDisabled: odysseyDesignTokens.HueAccentOne300,
     },
     accentTwo: {
-      ...(contrastMode === "lowContrast" && {
+      ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueAccentTwo200,
         text: odysseyDesignTokens.HueAccentTwo800,
+        textDisabled: odysseyDesignTokens.HueAccentTwo400,
       }),
-      ...(contrastMode === "highContrast" && {
+      ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueAccentTwo100,
         text: odysseyDesignTokens.HueAccentTwo700,
+        textDisabled: odysseyDesignTokens.HueAccentTwo300,
       }),
       hover: odysseyDesignTokens.HueAccentTwo200,
       active: odysseyDesignTokens.HueAccentTwo300,
       border: odysseyDesignTokens.HueAccentTwo200,
       deleteIcon: odysseyDesignTokens.HueAccentTwo500,
       deleteIconHover: odysseyDesignTokens.HueAccentTwo700,
+      icon: odysseyDesignTokens.HueAccentTwo700,
+      iconDisabled: odysseyDesignTokens.HueAccentTwo300,
     },
     accentThree: {
-      ...(contrastMode === "lowContrast" && {
+      ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueAccentThree200,
         text: odysseyDesignTokens.HueAccentThree700,
+        textDisabled: odysseyDesignTokens.HueAccentThree400,
       }),
-      ...(contrastMode === "highContrast" && {
+      ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueAccentThree100,
         text: odysseyDesignTokens.HueAccentThree700,
+        textDisabled: odysseyDesignTokens.HueAccentThree300,
       }),
       hover: odysseyDesignTokens.HueAccentThree200,
       active: odysseyDesignTokens.HueAccentThree300,
       border: odysseyDesignTokens.HueAccentThree200,
       deleteIcon: odysseyDesignTokens.HueAccentThree500,
       deleteIconHover: odysseyDesignTokens.HueAccentThree700,
+      icon: odysseyDesignTokens.HueAccentThree700,
+      iconDisabled: odysseyDesignTokens.HueAccentThree300,
     },
     accentFour: {
-      ...(contrastMode === "lowContrast" && {
+      ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueAccentFour200,
         text: odysseyDesignTokens.HueAccentFour700,
+        textDisabled: odysseyDesignTokens.HueAccentFour400,
       }),
-      ...(contrastMode === "highContrast" && {
+      ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueAccentFour100,
         text: odysseyDesignTokens.HueAccentFour700,
+        textDisabled: odysseyDesignTokens.HueAccentFour300,
       }),
       hover: odysseyDesignTokens.HueAccentFour200,
       active: odysseyDesignTokens.HueAccentFour300,
       border: odysseyDesignTokens.HueAccentFour200,
       deleteIcon: odysseyDesignTokens.HueAccentFour500,
       deleteIconHover: odysseyDesignTokens.HueAccentFour700,
+      icon: odysseyDesignTokens.HueAccentFour700,
+      iconDisabled: odysseyDesignTokens.HueAccentFour300,
     },
   };
 
@@ -158,21 +194,38 @@ const getChipColors = (
 
 const StyledTag = styled(MuiChip, {
   shouldForwardProp: (prop) =>
-    !["colorVariant", "contrastMode", "odysseyDesignTokens"].includes(
+    !["colorVariant", "contrastMode", "odysseyDesignTokens", "size"].includes(
       prop as string,
     ),
 })<{
+  as?: React.ElementType; // Allow the 'as' prop to be forwarded
+  clickable?: boolean;
   colorVariant: TagColorVariant;
   contrastMode: ContrastMode;
   odysseyDesignTokens: DesignTokens;
-  as?: React.ElementType; // Allow the 'as' prop to be forwarded
-}>(({ colorVariant, contrastMode, odysseyDesignTokens }) => {
-  const colors = getChipColors(colorVariant, odysseyDesignTokens, contrastMode);
+  size?: TagSize;
+}>(({ colorVariant, contrastMode, odysseyDesignTokens, clickable, size }) => {
+  const colors = getChipColors({
+    colorVariant,
+    odysseyDesignTokens,
+    contrastMode,
+  });
 
   return {
     backgroundColor: colors.background,
     color: colors.text,
-    borderColor: colors.border,
+
+    ...(clickable === true && {
+      borderColor: colors.border,
+    }),
+
+    ...(clickable === false && {
+      borderColor: "transparent",
+    }),
+
+    ...(size === "small" && {
+      paddingBlock: `calc(${odysseyDesignTokens.Spacing1})`,
+    }),
 
     "&.MuiChip-clickable:hover": {
       backgroundColor: colors.hover,
@@ -183,14 +236,19 @@ const StyledTag = styled(MuiChip, {
     },
 
     "&.Mui-disabled": {
-      "& .MuiChip-deleteIcon": {
-        color: odysseyDesignTokens.HueNeutral300,
+      color: colors.textDisabled,
+      borderColor: colors.border,
+      "& .MuiChip-icon, & .MuiChip-deleteIcon": {
+        color: colors.iconDisabled,
       },
     },
 
+    "& .MuiChip-icon": {
+      color: colors.icon,
+    },
+
     "& .MuiChip-deleteIcon": {
       color: colors.deleteIcon,
-
       "&:hover": {
         color: colors.deleteIconHover,
       },
@@ -205,45 +263,48 @@ const Tag = ({
   label,
   onClick,
   onRemove,
+  size = "medium",
   testId,
   translate,
 }: TagProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const { chipElementType } = useContext(TagListContext);
-  const { contrastMode } = useContrastContext();
+  const { contrastMode } = useContrastModeContext();
 
   const renderTag = useCallback(
     (muiProps: MuiPropsContextType) => (
       <StyledTag
         {...muiProps}
-        as={chipElementType}
         aria-disabled={isDisabled}
+        as={chipElementType}
         clickable={Boolean(onClick)}
-        data-se={testId}
         colorVariant={colorVariant}
-        odysseyDesignTokens={odysseyDesignTokens}
         contrastMode={contrastMode}
+        data-se={testId}
+        deleteIcon={<CloseCircleFilledIcon />}
         disabled={isDisabled}
         icon={icon}
         label={label}
+        odysseyDesignTokens={odysseyDesignTokens}
         onClick={onClick}
         onDelete={onRemove}
-        deleteIcon={<CloseCircleFilledIcon />}
+        size={size}
         translate={translate}
       />
     ),
     [
       chipElementType,
+      colorVariant,
+      contrastMode,
       icon,
       isDisabled,
       label,
+      odysseyDesignTokens,
       onClick,
       onRemove,
+      size,
       testId,
       translate,
-      colorVariant,
-      odysseyDesignTokens,
-      contrastMode,
     ],
   );
 

package/src/createUniqueAlphabeticalId.test.ts

@@ -13,7 +13,7 @@
 import { createUniqueAlphabeticalId } from "./createUniqueAlphabeticalId";
 
 describe("createUniqueAlphabeticalId", () => {
-  it("only has lowercase letters", () => {
+  test("only has lowercase letters", () => {
     const uniqueAlphabeticalId = createUniqueAlphabeticalId();
 
     expect(uniqueAlphabeticalId.match(/[a-z]/)).not.toBeNull();

package/src/createUniqueId.test.ts

@@ -13,7 +13,7 @@
 import { createUniqueId, uniqueIdLength } from "./createUniqueId";
 
 describe("createUniqueId", () => {
-  it("returns a nice id string", () => {
+  test("returns a nice id string", () => {
     const result = createUniqueId();
 
     expect(typeof result).toBe("string");

package/src/i18n.ts

@@ -21,6 +21,7 @@ import { translation as en } from "./properties/ts/odyssey-react-mui";
 import { translation as es } from "./properties/ts/odyssey-react-mui_es";
 import { translation as fi } from "./properties/ts/odyssey-react-mui_fi";
 import { translation as fr } from "./properties/ts/odyssey-react-mui_fr";
+import { translation as ht } from "./properties/ts/odyssey-react-mui_ht";
 import { translation as hu } from "./properties/ts/odyssey-react-mui_hu";
 import { translation as id } from "./properties/ts/odyssey-react-mui_id";
 import { translation as it } from "./properties/ts/odyssey-react-mui_it";
@@ -57,6 +58,7 @@ export const resources: I18nResources = {
   es,
   fi,
   fr,
+  ht,
   hu,
   id,
   it,

package/src/index.ts

@@ -65,21 +65,19 @@ export * from "./Banner";
 export * from "./Box";
 export * from "./Breadcrumbs";
 export * from "./Button";
-export * from "./Card";
 export * from "./Callout";
+export * from "./Card";
 export * from "./Checkbox";
 export * from "./CheckboxGroup";
 export * from "./CircularProgress";
-export * from "./ContrastModeProvider";
-export * from "./CssBaseline";
-export * from "./createShadowDomElements";
 export * from "./createUniqueId";
+export * from "./CssBaseline";
 export * from "./DataTable";
 export * from "./Dialog";
 export * from "./Drawer";
 export * from "./EmptyState";
-export * from "./Fieldset";
 export * from "./FieldComponentProps";
+export * from "./Fieldset";
 export {
   FileUploader,
   fileUploadTypes,
@@ -97,6 +95,7 @@ export * from "./OdysseyCacheProvider";
 export * from "./OdysseyProvider";
 export * from "./OdysseyThemeProvider";
 export * from "./OdysseyTranslationProvider";
+export * from "./Pagination";
 export * from "./PasswordField";
 export * from "./Radio";
 export * from "./RadioGroup";
@@ -106,6 +105,7 @@ export * from "./Select";
 export * from "./Stack";
 export * from "./Status";
 export * from "./Surface";
+export * from "./Switch";
 export * from "./Tabs";
 export * from "./Tag";
 export * from "./TagList";
@@ -113,8 +113,7 @@ export * from "./TextField";
 export * from "./theme";
 export * from "./Toast";
 export * from "./ToastStack";
-export * from "./Switch";
 export * from "./Tooltip";
 export * from "./Typography";
 export * from "./useUniqueId";
-export * from "./Pagination";
+export * from "./web-component";