@okta/odyssey-react-mui 1.25.0 → 1.26.0

package/src/labs/SideNav/SideNavFooterContent.tsx

@@ -11,10 +11,30 @@
  */
 
 import { memo, useMemo } from "react";
-import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext";
+import styled from "@emotion/styled";
+
+import {
+  useOdysseyDesignTokens,
+  DesignTokens,
+} from "../../OdysseyDesignTokensContext";
 import type { SideNavFooterItem } from "./types";
 import { Box } from "../../Box";
 import { Link } from "../../Link";
+import { useTranslation } from "react-i18next";
+
+const StyledFooterNav = styled("nav")({
+  display: "flex",
+});
+
+const StyledFooterItemContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  "& + &": {
+    marginInlineStart: odysseyDesignTokens.Spacing4,
+    paddingInlineStart: odysseyDesignTokens.Spacing4,
+    borderInlineStart: `1px solid ${odysseyDesignTokens.HueNeutral300}`,
+  },
+}));
 
 const SideNavFooterContent = ({
   footerItems,
@@ -22,41 +42,29 @@ const SideNavFooterContent = ({
   footerItems: SideNavFooterItem[];
 }) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
+  const { t } = useTranslation();
 
-  const footerContent = useMemo(() => {
-    return footerItems?.map((item, index) => (
-      <Box
-        key={`${item.id}-wrapper`}
-        sx={{
-          display: "flex",
-        }}
+  const memoizedFooterContent = useMemo(() => {
+    return footerItems?.map((item) => (
+      <StyledFooterItemContainer
+        key={item.id}
+        odysseyDesignTokens={odysseyDesignTokens}
+        role="menuitem"
       >
         {item.href ? (
-          <Link key={item.id} href={item.href}>
-            {item.label}
-          </Link>
+          <Link href={item.href}>{item.label}</Link>
         ) : (
-          <Box component="span" key={item.id}>
-            {item.label}
-          </Box>
-        )}
-        {index < footerItems.length - 1 && (
-          <Box
-            key={`${item.id}-separator`}
-            sx={{
-              marginLeft: odysseyDesignTokens.Spacing4,
-              marginRight: odysseyDesignTokens.Spacing4,
-              color: odysseyDesignTokens.HueNeutral300,
-            }}
-          >
-            |
-          </Box>
+          <Box component="span">{item.label}</Box>
         )}
-      </Box>
+      </StyledFooterItemContainer>
     ));
   }, [footerItems, odysseyDesignTokens]);
 
-  return footerContent;
+  return (
+    <StyledFooterNav role="menubar" aria-label={t("navigation.footer")}>
+      {memoizedFooterContent}
+    </StyledFooterNav>
+  );
 };
 const MemoizedSideNavFooterContent = memo(SideNavFooterContent);
 MemoizedSideNavFooterContent.displayName = "SideNavFooterContent";

package/src/labs/SideNav/SideNavHeader.tsx

@@ -11,77 +11,94 @@
  */
 
 import styled from "@emotion/styled";
-import { memo, ReactNode, useMemo } from "react";
+import { memo } from "react";
+import { Skeleton } from "@mui/material";
+
 import {
   type DesignTokens,
   useOdysseyDesignTokens,
 } from "../../OdysseyDesignTokensContext";
-import { Box } from "../../Box";
+import { SideNavLogo } from "./SideNavLogo";
+import { SideNavProps } from "./types";
 import { Heading6 } from "../../Typography";
-import { CollapseIcon } from "./CollapseIcon";
-import type { SideNavProps } from "./types";
-import { TOP_NAV_HEIGHT_TOKEN } from "../TopNav";
+import { TOP_NAV_HEIGHT } from "../TopNav";
+
+const SideNavHeaderContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  backgroundColor: odysseyDesignTokens.HueNeutralWhite,
+  zIndex: 1,
+}));
 
 const SideNavLogoContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
 })(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
-  height: odysseyDesignTokens[TOP_NAV_HEIGHT_TOKEN],
-  padding: odysseyDesignTokens.Spacing3,
-  borderColor: odysseyDesignTokens.HueNeutral50,
-  borderStyle: odysseyDesignTokens.BorderStyleMain,
-  borderWidth: 0,
-  borderBottomWidth: odysseyDesignTokens.BorderWidthMain,
+  display: "flex",
+  alignItems: "center",
+  height: TOP_NAV_HEIGHT,
+  padding: odysseyDesignTokens.Spacing4,
+
+  "svg, img": {
+    maxHeight: "100%",
+    width: "auto",
+    maxWidth: "100%",
+  },
 }));
 
-const SideNavHeaderContainer = styled("div", {
+const SideNavHeadingContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
 })(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({
   display: "flex",
   justifyContent: "space-between",
   alignItems: "center",
-  paddingLeft: odysseyDesignTokens.Spacing4,
-  paddingRight: odysseyDesignTokens.Spacing4,
-  paddingTop: odysseyDesignTokens.Spacing3,
-  paddingBottom: odysseyDesignTokens.Spacing3,
+  padding: odysseyDesignTokens.Spacing4,
+  width: "100%",
+
+  ["& .MuiTypography-root"]: {
+    margin: 0,
+    width: "100%",
+  },
 }));
 
+export type SideNavHeaderProps = {
+  /**
+   * The app's name.
+   */
+  appName: string;
+  /**
+   * If the side nav currently has no items, it will be loading.
+   */
+  isLoading?: boolean;
+} & Pick<SideNavProps, "logoProps">;
+
 const SideNavHeader = ({
-  navHeaderText,
-  isCollapsible,
-  onCollapse,
-  logo,
-}: Pick<
-  SideNavProps,
-  "navHeaderText" | "isCollapsible" | "onCollapse" | "logo"
->): ReactNode => {
+  appName,
+  isLoading,
+  logoProps,
+}: SideNavHeaderProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
 
-  const sideNavHeaderStyles = useMemo(
-    () => ({
-      marginTop: odysseyDesignTokens.Spacing2,
-    }),
-    [odysseyDesignTokens],
-  );
-
   return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-      }}
-    >
+    <SideNavHeaderContainer odysseyDesignTokens={odysseyDesignTokens}>
       <SideNavLogoContainer odysseyDesignTokens={odysseyDesignTokens}>
-        {logo}
+        {isLoading ? (
+          //  The skeleton takes the hardcoded dimensions of the Okta logo
+          <Skeleton variant="rounded" height={24} width={67} />
+        ) : (
+          <SideNavLogo {...logoProps} />
+        )}
       </SideNavLogoContainer>
-      <SideNavHeaderContainer odysseyDesignTokens={odysseyDesignTokens}>
-        <Box sx={sideNavHeaderStyles}>
-          <Heading6>{navHeaderText}</Heading6>
-        </Box>
-        {isCollapsible && <CollapseIcon onClick={onCollapse} />}
-      </SideNavHeaderContainer>
-    </Box>
+
+      <SideNavHeadingContainer odysseyDesignTokens={odysseyDesignTokens}>
+        <Heading6 component="h2">{isLoading ? <Skeleton /> : appName}</Heading6>
+      </SideNavHeadingContainer>
+    </SideNavHeaderContainer>
   );
 };
+
 const MemoizedSideNavHeader = memo(SideNavHeader);
 MemoizedSideNavHeader.displayName = "SideNavHeader";
 

package/src/labs/SideNav/SideNavItemContent.tsx

@@ -17,55 +17,44 @@ import {
   useCallback,
   memo,
   KeyboardEvent,
+  useMemo,
 } from "react";
-import { Link } from "../../Link";
+import { Link as NavItemLink } from "@mui/material";
 import {
   type DesignTokens,
   useOdysseyDesignTokens,
 } from "../../OdysseyDesignTokensContext";
 import { SideNavItemLinkContent } from "./SideNavItemLinkContent";
 import type { SideNavItem } from "./types";
+import {
+  SideNavItemContentContextValue,
+  useSideNavItemContent,
+} from "./SideNavItemContentContext";
+import { ExternalLinkIcon } from "../../icons.generated";
 
-export const SideNavListItemContainer = styled("li", {
+export const StyledSideNavListItem = styled("li", {
   shouldForwardProp: (prop) =>
-    prop !== "odysseyDesignTokens" &&
-    prop !== "isSelected" &&
-    prop !== "isDisabled",
+    prop !== "odysseyDesignTokens" && prop !== "isSelected",
 })<{
   odysseyDesignTokens: DesignTokens;
   isSelected?: boolean;
   disabled?: boolean;
-  isDisabled?: boolean;
-}>(({ odysseyDesignTokens, isSelected, isDisabled }) => ({
+}>(({ odysseyDesignTokens, isSelected }) => ({
   display: "flex",
   alignItems: "center",
-  cursor: isDisabled ? "default" : "pointer",
-  pointerEvents: isDisabled ? "none" : "auto",
-  backgroundColor: isSelected ? odysseyDesignTokens.HueNeutral50 : "unset",
-  margin: `${odysseyDesignTokens.Spacing1} 0`,
+  backgroundColor: "unset",
+  borderRadius: odysseyDesignTokens.BorderRadiusMain,
+  lineHeight: 1.5,
+  transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,
+
+  ...(isSelected && {
+    color: `${odysseyDesignTokens.TypographyColorAction} !important`,
+    backgroundColor: odysseyDesignTokens.HueBlue50,
+  }),
+
   "&:last-child": {
     marginBottom: odysseyDesignTokens.Spacing2,
   },
-  "& a": {
-    display: "flex",
-    alignItems: "center",
-    width: "100%",
-    minHeight: "48px",
-    padding: `${odysseyDesignTokens.Spacing3} ${odysseyDesignTokens.Spacing4}`,
-    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
-    pointerEvents: isDisabled ? "none" : "auto",
-  },
-  "& a:hover": {
-    textDecoration: "none",
-    cursor: isDisabled ? "default" : "pointer",
-    backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "inherit",
-  },
-  "& a:focus-visible": {
-    outlineOffset: 0,
-    borderRadius: 0,
-    outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain,
-    backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "inherit",
-  },
 }));
 
 const scrollToNode = (node: HTMLElement | null) => {
@@ -82,7 +71,87 @@ type ScrollIntoViewHandle = {
   scrollIntoView: () => void;
 };
 
+const GetNavItemContentStyles = ({
+  odysseyDesignTokens,
+  contextValue,
+  isDisabled,
+  isSelected,
+}: {
+  odysseyDesignTokens: DesignTokens;
+  contextValue: SideNavItemContentContextValue;
+  isDisabled?: boolean;
+  isSelected?: boolean;
+}) => {
+  return {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    textDecoration: "none",
+    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
+    minHeight: odysseyDesignTokens.Spacing7,
+    paddingBlock: odysseyDesignTokens.Spacing4,
+    paddingInline: `calc(${odysseyDesignTokens.Spacing4} * ${contextValue.depth})`,
+    borderRadius: odysseyDesignTokens.BorderRadiusMain,
+    transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,
+
+    "&:hover": {
+      textDecoration: "none",
+      cursor: "pointer",
+      backgroundColor: !isDisabled
+        ? odysseyDesignTokens.HueNeutral50
+        : "inherit",
+
+      ...(isDisabled && {
+        color: "inherit",
+        cursor: "default",
+      }),
+
+      ...(isSelected && {
+        "&:hover": {
+          backgroundColor: odysseyDesignTokens.HueBlue50,
+        },
+      }),
+    },
+
+    ...(isSelected && {
+      color: `${odysseyDesignTokens.TypographyColorAction} !important`,
+      fontWeight: odysseyDesignTokens.TypographyWeightBodyBold,
+    }),
+
+    ...(isDisabled && {
+      color: `${odysseyDesignTokens.TypographyColorDisabled} !important`,
+    }),
+
+    ...(contextValue.isCompact && {
+      paddingBlock: odysseyDesignTokens.Spacing1,
+      minHeight: odysseyDesignTokens.Spacing6,
+    }),
+
+    "&:focus-visible": {
+      outline: "none",
+      boxShadow: `inset 0 0 0 3px ${odysseyDesignTokens.PalettePrimaryMain}`,
+    },
+  };
+};
+
+const NavItemContentContainer = styled("div", {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" &&
+    prop != "contextValue" &&
+    prop !== "isDisabled" &&
+    prop !== "isSelected",
+})(GetNavItemContentStyles);
+
+const NavItemLinkContainer = styled(NavItemLink, {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" &&
+    prop != "contextValue" &&
+    prop !== "isDisabled" &&
+    prop !== "isSelected",
+})(GetNavItemContentStyles);
+
 const SideNavItemContent = ({
+  count,
   id,
   label,
   href,
@@ -97,6 +166,7 @@ const SideNavItemContent = ({
   scrollRef,
 }: Pick<
   SideNavItem,
+  | "count"
   | "id"
   | "label"
   | "href"
@@ -114,6 +184,13 @@ const SideNavItemContent = ({
    */
   scrollRef?: React.RefObject<ScrollIntoViewHandle>;
 }) => {
+  const sidenavItemContentContext = useSideNavItemContent();
+  const contextValue = useMemo(
+    () => sidenavItemContentContext,
+    [sidenavItemContentContext],
+  );
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
   const localScrollRef = useRef<HTMLLIElement>(null);
   useImperativeHandle(
     scrollRef,
@@ -126,26 +203,6 @@ const SideNavItemContent = ({
     },
     [],
   );
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-
-  const NavItemContentClickContainer = styled("div", {
-    shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
-  })(() => ({
-    display: "flex",
-    alignItems: "center",
-    width: "100%",
-    minHeight: "48px",
-    padding: `${odysseyDesignTokens.Spacing3} ${odysseyDesignTokens.Spacing4}`,
-    color: `${isDisabled ? odysseyDesignTokens.TypographyColorDisabled : odysseyDesignTokens.TypographyColorHeading} !important`,
-    "&:focus-visible": {
-      borderRadius: 0,
-      outlineColor: odysseyDesignTokens.FocusOutlineColorPrimary,
-      outlineStyle: odysseyDesignTokens.FocusOutlineStyle,
-      outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain,
-      backgroundColor: odysseyDesignTokens.HueNeutral50,
-      textDecoration: "none",
-    },
-  }));
 
   const sideNavItemContentKeyHandler = useCallback(
     (event: KeyboardEvent<HTMLDivElement>) => {
@@ -158,56 +215,79 @@ const SideNavItemContent = ({
   );
 
   return (
-    <SideNavListItemContainer
+    <StyledSideNavListItem
       ref={localScrollRef}
       id={id}
       key={id}
+      isSelected={isSelected}
       disabled={isDisabled}
       aria-disabled={isDisabled}
-      isDisabled={isDisabled}
-      isSelected={isSelected}
+      aria-current={isSelected ? "page" : undefined}
       odysseyDesignTokens={odysseyDesignTokens}
     >
       {
         // Use Link for nav items with links and div for disabled or non-link items
         isDisabled ? (
-          <NavItemContentClickContainer>
+          <NavItemContentContainer
+            odysseyDesignTokens={odysseyDesignTokens}
+            contextValue={contextValue}
+            isDisabled={isDisabled}
+            isSelected={isSelected}
+          >
             <SideNavItemLinkContent
+              count={count}
               label={label}
               startIcon={startIcon}
               endIcon={endIcon}
               statusLabel={statusLabel}
               severity={severity}
             />
-          </NavItemContentClickContainer>
+          </NavItemContentContainer>
         ) : !href ? (
-          <NavItemContentClickContainer
-            role="button"
+          <NavItemContentContainer
+            odysseyDesignTokens={odysseyDesignTokens}
+            contextValue={contextValue}
+            isDisabled={isDisabled}
             tabIndex={0}
             onClick={onClick}
             onKeyDown={sideNavItemContentKeyHandler}
           >
             <SideNavItemLinkContent
+              count={count}
               label={label}
               startIcon={startIcon}
               endIcon={endIcon}
               statusLabel={statusLabel}
               severity={severity}
             />
-          </NavItemContentClickContainer>
+          </NavItemContentContainer>
         ) : (
-          <Link href={href} target={target} onClick={onClick}>
+          <NavItemLinkContainer
+            odysseyDesignTokens={odysseyDesignTokens}
+            contextValue={contextValue}
+            isDisabled={isDisabled}
+            isSelected={isSelected}
+            href={href}
+            target={target}
+            onClick={onClick}
+          >
             <SideNavItemLinkContent
+              count={count}
               label={label}
               startIcon={startIcon}
               endIcon={endIcon}
               statusLabel={statusLabel}
               severity={severity}
             />
-          </Link>
+            {target === "_blank" && (
+              <span className="Link-indicator" role="presentation">
+                <ExternalLinkIcon />
+              </span>
+            )}
+          </NavItemLinkContainer>
         )
       }
-    </SideNavListItemContainer>
+    </StyledSideNavListItem>
   );
 };
 const MemoizedSideNavItemContent = memo(SideNavItemContent);

package/src/labs/SideNav/SideNavItemContentContext.tsx

@@ -0,0 +1,27 @@
+/*!
+ * Copyright (c) 2024-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 { createContext, useContext } from "react";
+
+export type SideNavItemContentContextValue = {
+  isCompact?: boolean;
+  depth: number;
+};
+
+export const SideNavItemContentContext =
+  createContext<SideNavItemContentContextValue>({
+    isCompact: false,
+    depth: 1,
+  });
+
+export const useSideNavItemContent = () =>
+  useContext(SideNavItemContentContext);

package/src/labs/SideNav/SideNavItemLinkContent.tsx

@@ -19,6 +19,7 @@ import {
 import { Box } from "../../Box";
 import { Status } from "../../Status";
 import type { SideNavItem } from "./types";
+import { Badge } from "../../Badge";
 
 const SideNavItemLabelContainer = styled("div", {
   shouldForwardProp: (prop) =>
@@ -32,19 +33,11 @@ const SideNavItemLabelContainer = styled("div", {
   flexWrap: "wrap",
   alignItems: "center",
   fontSize: odysseyDesignTokens.TypographyScale0,
-  fontWeight: odysseyDesignTokens.TypographyWeightHeading,
-  marginLeft: isIconVisible ? odysseyDesignTokens.Spacing2 : 0,
-  "& a": {
-    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
-    fontSize: odysseyDesignTokens.TypographyScale0,
-  },
-  "& a:hover": {
-    textDecoration: "none",
-    cursor: "pointer",
-  },
+  marginInlineStart: isIconVisible ? odysseyDesignTokens.Spacing2 : 0,
 }));
 
 const SideNavItemLinkContent = ({
+  count,
   label,
   startIcon,
   endIcon,
@@ -52,13 +45,16 @@ const SideNavItemLinkContent = ({
   statusLabel,
 }: Pick<
   SideNavItem,
-  "label" | "startIcon" | "endIcon" | "severity" | "statusLabel"
+  "count" | "label" | "startIcon" | "endIcon" | "severity" | "statusLabel"
 >): ReactNode => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
 
   const sideNavItemContentStyles = useMemo(
     () => ({
-      marginLeft: odysseyDesignTokens.Spacing2,
+      alignItems: "center",
+      display: "flex",
+      gap: odysseyDesignTokens.Spacing1,
+      marginInlineStart: odysseyDesignTokens.Spacing2,
     }),
     [odysseyDesignTokens],
   );
@@ -71,9 +67,16 @@ const SideNavItemLinkContent = ({
         isIconVisible={Boolean(startIcon)}
       >
         {label}
-        {severity && (
+        {!count && severity && (
           <Box sx={sideNavItemContentStyles}>
-            <Status severity={severity} label={statusLabel || ""} />
+            {severity && (
+              <Status severity={severity} label={statusLabel || ""} />
+            )}
+          </Box>
+        )}
+        {!severity && count && (
+          <Box sx={sideNavItemContentStyles}>
+            {count && <Badge badgeContent={count} />}
           </Box>
         )}
       </SideNavItemLabelContainer>

package/src/labs/SideNav/SideNavLogo.tsx

@@ -0,0 +1,41 @@
+/*!
+ * Copyright (c) 2024-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 { memo, useMemo } from "react";
+import { OktaLogo } from "./OktaLogo";
+import { SideNavLogoProps } from "./types";
+
+const SideNavLogo = ({
+  imageAltText,
+  href,
+  logoComponent,
+  imageUrl,
+}: SideNavLogoProps) => {
+  const logo = useMemo(() => {
+    if (logoComponent) {
+      return logoComponent;
+    }
+
+    if (imageAltText && imageUrl) {
+      return <img src={imageUrl} alt={imageAltText} />;
+    }
+
+    return <OktaLogo />;
+  }, [imageAltText, logoComponent, imageUrl]);
+
+  return href ? <a href={href}>{logo}</a> : logo;
+};
+
+const MemoizedSideNavLogo = memo(SideNavLogo);
+MemoizedSideNavLogo.displayName = "SideNavLogo";
+
+export { MemoizedSideNavLogo as SideNavLogo };