@okta/odyssey-react-mui 0.16.1 → 0.18.0

package/src/theme/components.types.ts

@@ -52,6 +52,13 @@ declare module "@mui/material/Button" {
   }
 }
 
+declare module "@mui/material/Chip" {
+  interface ChipPropsVariantOverrides {
+    // Enable Odyssey variant for Status component
+    status: true;
+  }
+}
+
 declare module "@mui/material/Link" {
   interface LinkPropsVariantOverrides {
     default: true;

package/src/theme/typography.ts

@@ -89,4 +89,10 @@ export const typography: ThemeOptions["typography"] = {
     lineHeight: Tokens.FontLineHeightHeading6,
     marginBottom: Tokens.SpaceScale1,
   },
+  ui: {
+    fontWeight: Number(Tokens.FontWeightNormal),
+    fontSize: Tokens.FontScale1,
+    lineHeight: Tokens.FontLineHeightUi,
+    letterSpacing: "initial",
+  },
 };

package/src/theme/typography.types.ts

@@ -14,12 +14,12 @@ import { CSSProperties } from "react";
 
 declare module "@mui/material/styles" {
   interface TypographyVariants {
-    kbd: CSSProperties;
     legend: CSSProperties;
+    ui: CSSProperties;
   }
   interface TypographyVariantsOptions {
-    kbd?: CSSProperties;
     legend?: CSSProperties;
+    ui: CSSProperties;
   }
 }
 
@@ -28,11 +28,11 @@ declare module "@mui/material/Typography" {
     body1: true; // Design may refer to this as "body"
     body2: false;
     button: false;
-    kbd: true;
     legend: true;
     overline: false;
     subtitle1: true; // Design may refer to this as "caption"
     subtitle2: false;
+    ui: true;
     default: true; // used by <Link>
     monochrome: true; // used by <Link>
   }

package/src/useUniqueAlphabeticalId.ts

@@ -0,0 +1,21 @@
+/*!
+ * Copyright (c) 2022-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 { useMemo } from "react";
+
+import { createUniqueAlphabeticalId } from "./createUniqueAlphabeticalId";
+
+export const useUniqueAlphabeticalId = (id?: string) => {
+  const uniqueAlphabeticalId = useMemo(() => createUniqueAlphabeticalId(), []);
+
+  return id ?? uniqueAlphabeticalId;
+};

package/src/useUniqueId.ts

@@ -14,8 +14,8 @@ import { useMemo } from "react";
 
 import { createUniqueId } from "./createUniqueId";
 
-export const useUniqueId = (id?: string): string => {
+export const useUniqueId = (id?: string) => {
   const uniqueId = useMemo(() => createUniqueId(), []);
 
-  return id || uniqueId;
+  return id ?? uniqueId;
 };