SideNav updates

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

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>

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}

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"