feat: adds new side navigation component for unified nav design

feat: adds status pill to nav component
okta · Jun 21, 2024 · 5e1f852 · 5e1f852
1 parent e91a1e3
commit 5e1f852
Show file tree

Hide file tree

Showing 4 changed files with 753 additions and 0 deletions.
diff --git a/packages/odyssey-react-mui/src/labs/NavAccordion.tsx b/packages/odyssey-react-mui/src/labs/NavAccordion.tsx
@@ -0,0 +1,155 @@
+/*!
+ * Copyright (c) 2023-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 { ReactNode, memo } from "react";
+import type { HtmlProps } from "../HtmlProps";
+import {
+  Box,
+  Accordion as MuiAccordion,
+  AccordionDetails as MuiAccordionDetails,
+  AccordionSummary as MuiAccordionSummary,
+  AccordionProps as MuiAccordionProps,
+} from "@mui/material";
+import { ChevronRightIcon } from "../icons.generated";
+import { Support } from "../Typography";
+import { useUniqueId } from "../useUniqueId";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext";
+
+export type NavAccordionProps = {
+  /**
+   * The content of the Accordion itself
+   */
+  children: ReactNode;
+  /**
+   * Defines IDs for the header and the content of the Accordion
+   */
+  id?: string;
+  /**
+   * The label text for the AccordionSummary
+   */
+  label: string;
+  /**
+   * Whether the item is expanded by default
+   */
+  isDefaultExpanded?: boolean;
+  /**
+   * Whether the item is disabled
+   */
+  isDisabled?: boolean;
+  /**
+   * Whether the item is expanded
+   */
+  isExpanded?: boolean;
+  /**
+   * Event fired when the expansion state of the accordion is changed
+   */
+  onChange?: MuiAccordionProps["onChange"];
+  /**
+   * The icon element to display at the start of the Nav Item
+   */
+  startIcon?: ReactNode;
+} & (
+  | {
+      isExpanded: boolean;
+      isDefaultExpanded?: never;
+    }
+  | {
+      isDefaultExpanded?: boolean;
+      isExpanded?: never;
+    }
+) &
+  Pick<HtmlProps, "testId" | "translate">;
+
+const NavAccordion = ({
+  children,
+  label,
+  id: idOverride,
+  isDefaultExpanded,
+  isDisabled,
+  isExpanded,
+  translate,
+  startIcon,
+}: NavAccordionProps) => {
+  const id = useUniqueId(idOverride);
+  const headerId = `${id}-header`;
+  const contentId = `${id}-content`;
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  return (
+    <MuiAccordion
+      defaultExpanded={isDefaultExpanded}
+      disabled={isDisabled}
+      disableGutters
+      expanded={isExpanded}
+      sx={{
+        border: "0 !important",
+        width: "100%",
+      }}
+    >
+      <MuiAccordionSummary
+        sx={{
+          padding: 0,
+        }}
+        aria-controls={contentId}
+        expandIcon={<ChevronRightIcon />}
+        id={headerId}
+      >
+        <Support component="div" translate={translate}>
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+            }}
+          >
+            <Box
+              component="span"
+              sx={{
+                width: "24px",
+                marginTop: `${odysseyDesignTokens.Spacing1}`,
+              }}
+            >
+              {startIcon && startIcon}
+            </Box>
+            <Box
+              component="span"
+              sx={{
+                width: "100%",
+                fontSize: `0.9rem`,
+                fontWeight: "500",
+                alignSelf: "center",
+                color: `${odysseyDesignTokens.TypographyColorHeading}`,
+                marginLeft: `${odysseyDesignTokens.Spacing3}`,
+              }}
+            >
+              {label}
+            </Box>
+          </Box>
+        </Support>
+      </MuiAccordionSummary>
+      <MuiAccordionDetails
+        aria-labelledby={headerId}
+        sx={{
+          paddingTop: "0",
+          paddingBottom: "0",
+          paddingLeft: `${odysseyDesignTokens.Spacing2}`,
+        }}
+      >
+        {children}
+      </MuiAccordionDetails>
+    </MuiAccordion>
+  );
+};
+
+const MemoizedNavAccordion = memo(NavAccordion);
+MemoizedNavAccordion.displayName = "NavAccordion";
+
+export { MemoizedNavAccordion as NavAccordion };