SideNav updates (#2402)

DES-6714 refactor: alphabetize props feat: add the loading state feat: add more a11y roles feat(odyssey-storybook): add SideNavToggleButton feat(odyssey-storybook): refacor and use new toggle button test: add unit tests for SideNav Merge branch 'bc-jk-sidenav-updates' of github.com:okta/odyssey into bc-jk-sidenav-updates fix: add accessible heading role to sidenav refactor: replace t with useTranslation in imports feat(odyssey-storybook): add translations for toggle button feat(odyssey-storybook): update padding and cleanup footer code feat: add badge to SideNav refactor: updating accessibility roles Merge remote-tracking branch 'origin/main' into bc-jk-sidenav-updates fix: fixes Side nav collapse icon wasn't showing up over the app content fix: fix a11y role violations feat: add overflow scroll to TopNav fix: adjust width of Heading skeleton feat(odyssey-storybook): add custom logo props fix: moves banner above UI Shell # Conflicts: # packages/odyssey-react-mui/src/labs/UiShell/UiShellContent.tsx fix: fixes styling of TopNav slots and responsiveness # Conflicts: # packages/odyssey-react-mui/src/labs/TopNav/TopNav.tsx fix: refactors UI Shell scroll logic into useScrollState fix: minor rename of useScrollState generic feat(odyssey-storybook): more style updates to match Figma feat: adds ability to know if UI Shell is rendered on the page fix: fixes PageTemplate padding for UI Shell mode fix: adds missing clip-path to TopNav shadow fix: fixes border not showing up when scrolling side nav in UI Shell fix: fixes topnav shadow not going over Surface fix: removes unused expandedWidth
okta · Nov 15, 2024 · 52c6d67 · 52c6d67
1 parent 14607bb
commit 52c6d67
Show file tree

Hide file tree

Showing 25 changed files with 1,469 additions and 545 deletions.
diff --git a/packages/odyssey-react-mui/src/Box.tsx b/packages/odyssey-react-mui/src/Box.tsx
@@ -11,25 +11,27 @@
  */
 
 import { Box as MuiBox, BoxProps as MuiBoxProps } from "@mui/material";
-import { ReactNode, forwardRef, memo } from "react";
+import { AriaRole, ReactNode, forwardRef, memo } from "react";
 
 import type { HtmlProps } from "./HtmlProps";
 
 export type BoxProps = {
   children?: ReactNode;
   component?: MuiBoxProps["component"];
   id?: MuiBoxProps["id"];
+  role?: AriaRole;
   sx?: MuiBoxProps["sx"];
 } & Pick<HtmlProps, "testId" | "translate">;
 
 const Box = forwardRef<HTMLElement, BoxProps>(
-  ({ children, component, id, sx, testId, translate }, ref) => (
+  ({ children, component, id, role, sx, testId, translate }, ref) => (
     <MuiBox
       ref={ref}
       children={children}
       component={component}
       data-se={testId}
       id={id}
+      role={role}
       sx={sx}
       translate={translate}
     />

diff --git a/packages/odyssey-react-mui/src/labs/PageTemplate.tsx b/packages/odyssey-react-mui/src/labs/PageTemplate.tsx
@@ -20,6 +20,7 @@ import {
 import { DocumentationIcon } from "../icons.generated";
 import { Heading4, Subordinate } from "../Typography";
 import { Link } from "../Link";
+import { useHasUiShell } from "./UiShell";
 
 export type PageTemplateProps = {
   /**
@@ -72,16 +73,20 @@ type TemplateContentProps = {
 
 const TemplateContainer = styled("div", {
   shouldForwardProp: (prop) =>
-    prop !== "odysseyDesignTokens" && prop !== "isFullWidth",
+    prop !== "odysseyDesignTokens" &&
+    prop !== "hasUiShell" &&
+    prop !== "isFullWidth",
 })<{
-  odysseyDesignTokens: DesignTokens;
+  hasUiShell: boolean;
   isFullWidth: boolean;
-}>(({ odysseyDesignTokens, isFullWidth }) => ({
+  odysseyDesignTokens: DesignTokens;
+}>(({ hasUiShell, isFullWidth, odysseyDesignTokens }) => ({
   maxWidth: isFullWidth
     ? "100%"
     : `calc(1440px + ${odysseyDesignTokens.Spacing6} + ${odysseyDesignTokens.Spacing6})`,
-  marginInline: isFullWidth ? odysseyDesignTokens.Spacing6 : "auto",
-  padding: odysseyDesignTokens.Spacing6,
+  marginInline:
+    isFullWidth && !hasUiShell ? odysseyDesignTokens.Spacing6 : "auto",
+  padding: hasUiShell ? 0 : odysseyDesignTokens.Spacing6,
 }));
 
 const TemplateHeader = styled("div")(() => ({
@@ -163,24 +168,27 @@ const TemplateContent = styled("div", {
 );
 
 const PageTemplate = ({
-  title,
+  children,
   description,
   documentationLink,
   documentationText,
+  drawer,
+  isFullWidth = false,
   primaryCallToActionComponent,
   secondaryCallToActionComponent,
   tertiaryCallToActionComponent,
-  children,
-  drawer,
-  isFullWidth = false,
+  title,
 }: PageTemplateProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const { isOpen: isDrawerOpen, variant: drawerVariant } = drawer?.props ?? {};
 
+  const hasUiShell = useHasUiShell();
+
   return (
     <TemplateContainer
-      odysseyDesignTokens={odysseyDesignTokens}
+      hasUiShell={hasUiShell}
       isFullWidth={isFullWidth}
+      odysseyDesignTokens={odysseyDesignTokens}
     >
       <TemplateHeader>
         <TemplateHeaderPrimaryContent>

diff --git a/packages/odyssey-react-mui/src/labs/SideNav/NavAccordion.tsx b/packages/odyssey-react-mui/src/labs/SideNav/NavAccordion.tsx
@@ -20,7 +20,7 @@ import {
 import { ReactNode, memo } from "react";
 
 import type { HtmlProps } from "../../HtmlProps";
-import { ChevronRightIcon } from "../../icons.generated";
+import { ChevronDownIcon } from "../../icons.generated";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
@@ -86,26 +86,32 @@ const AccordionSummaryContainer = styled(MuiAccordionSummary, {
   shouldForwardProp: (prop) =>
     prop !== "odysseyDesignTokens" &&
     prop !== "isCompact" &&
-    prop != "isDisabled",
+    prop !== "isDisabled",
 })<{
   odysseyDesignTokens: DesignTokens;
   isCompact?: boolean;
   isDisabled?: boolean;
 }>(({ odysseyDesignTokens, isCompact, isDisabled }) => ({
-  minHeight: isCompact
-    ? `${odysseyDesignTokens.Spacing6}`
-    : `${odysseyDesignTokens.Spacing7}`,
-  padding: isCompact
-    ? `${odysseyDesignTokens.Spacing0} ${odysseyDesignTokens.Spacing4}`
-    : `${odysseyDesignTokens.Spacing2} ${odysseyDesignTokens.Spacing4}`,
-  "&:hover": {
-    backgroundColor: !isDisabled ? odysseyDesignTokens.HueBlue50 : "inherit",
-    "& span": {
-      color: isDisabled
-        ? "default"
-        : `${odysseyDesignTokens.TypographyColorAction}`,
-    },
+  borderRadius: odysseyDesignTokens.BorderRadiusMain,
+  paddingBlock: odysseyDesignTokens.Spacing3,
+  paddingInline: odysseyDesignTokens.Spacing4,
+  lineHeight: 1.5,
+
+  "&:focus-visible": {
+    backgroundColor: "unset",
+    outline: "none",
+    boxShadow: `inset 0 0 0 3px ${odysseyDesignTokens.PalettePrimaryMain}`,
   },
+
+  ...(isCompact && {
+    paddingBlock: odysseyDesignTokens.Spacing2,
+  }),
+
+  ...(!isDisabled && {
+    "&:hover": {
+      backgroundColor: odysseyDesignTokens.HueNeutral50,
+    },
+  }),
 }));
 
 const NavAccordion = ({
@@ -135,7 +141,7 @@ const NavAccordion = ({
       <AccordionSummaryContainer
         className="nav-accordion-summary"
         aria-controls={contentId}
-        expandIcon={<ChevronRightIcon />}
+        expandIcon={<ChevronDownIcon />}
         id={headerId}
         odysseyDesignTokens={odysseyDesignTokens}
         isCompact={isCompact}

diff --git a/packages/odyssey-react-mui/src/labs/SideNav/OktaLogo.tsx b/packages/odyssey-react-mui/src/labs/SideNav/OktaLogo.tsx
@@ -21,6 +21,7 @@ const OktaLogo = () => {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
+      <title>Okta</title>
       <path
         d="M55.308 20.5716C52.1058 20.5716 49.8418 18.0813 49.8418 14.8145C49.8418 11.5476 52.1058 9.0574 55.308 9.0574C58.5103 9.0574 60.7097 11.5476 60.7097 14.8145C60.7097 18.0813 58.478 20.5716 55.308 20.5716ZM54.7905 24C57.3782 24 59.5777 22.9972 60.9682 20.8947C61.2267 22.9326 62.7147 23.6763 64.5905 23.6763H66.0785V20.4418H65.4317C64.3643 20.4418 64.1058 19.9242 64.1058 18.7276V5.95153H60.6774V8.57159C59.5131 6.72814 57.3136 5.62842 54.7911 5.62842C50.2952 5.62842 46.1554 9.38051 46.1554 14.8139C46.1554 20.2473 50.2947 24 54.7905 24ZM37.1309 19.5688C37.1309 22.4797 38.942 23.6763 41.1092 23.6763H45.2813V20.4418H42.2412C40.9799 20.4418 40.7209 19.9565 40.7209 18.7276V9.18608H45.2813V5.95153H40.7209V0H37.1309V19.5688ZM20.7972 23.6763H24.3872V16.0758H25.5838L31.6969 23.6763H36.225L28.4301 14.0379L34.4139 5.9521H30.371L25.4869 12.7766H24.3872V0.00113398H20.7972V23.6763ZM9.1532 5.62842C4.13983 5.62842 0 9.38051 0 14.8139C0 20.2473 4.13983 23.9994 9.1532 23.9994C14.1666 23.9994 18.3064 20.2473 18.3064 14.8139C18.3064 9.38051 14.1666 5.62842 9.1532 5.62842ZM9.1532 20.5716C5.95096 20.5716 3.68689 18.0813 3.68689 14.8145C3.68689 11.5476 5.95096 9.0574 9.1532 9.0574C12.3554 9.0574 14.6195 11.5476 14.6195 14.8145C14.6195 18.0813 12.3554 20.5716 9.1532 20.5716Z"
         fill="black"