@okta/odyssey-react-mui 1.21.2 → 1.22.0

package/src/labs/SideNav/SideNavFooterContent.tsx

@@ -0,0 +1,64 @@
+/*!
+ * 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 { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext";
+import type { SideNavFooterItem } from "./types";
+import { Box } from "../../Box";
+import { Link } from "../../Link";
+
+const SideNavFooterContent = ({
+  footerItems,
+}: {
+  footerItems: SideNavFooterItem[];
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  const footerContent = useMemo(() => {
+    return footerItems?.map((item, index) => (
+      <Box
+        key={`${item.id}-wrapper`}
+        sx={{
+          display: "flex",
+        }}
+      >
+        {item.href ? (
+          <Link key={item.id} 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>
+    ));
+  }, [footerItems, odysseyDesignTokens]);
+
+  return footerContent;
+};
+const MemoizedSideNavFooterContent = memo(SideNavFooterContent);
+MemoizedSideNavFooterContent.displayName = "SideNavFooterContent";
+
+export { MemoizedSideNavFooterContent as SideNavFooterContent };

package/src/labs/SideNav/SideNavHeader.tsx

@@ -0,0 +1,65 @@
+/*!
+ * 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 styled from "@emotion/styled";
+import { memo, ReactNode, useMemo } from "react";
+import {
+  type DesignTokens,
+  useOdysseyDesignTokens,
+} from "../../OdysseyDesignTokensContext";
+import { Box } from "../../Box";
+import { Heading6 } from "../../Typography";
+import { CollapseIcon } from "./CollapseIcon";
+import type { SideNavProps } from "./types";
+
+const SideNavHeaderContainer = 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,
+}));
+
+const SideNavHeader = ({
+  navHeaderText,
+  isCollapsible,
+  onCollapse,
+}: Pick<
+  SideNavProps,
+  "navHeaderText" | "isCollapsible" | "onCollapse"
+>): ReactNode => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  const sideNavHeaderStyles = useMemo(
+    () => ({
+      marginTop: odysseyDesignTokens.Spacing2,
+    }),
+    [odysseyDesignTokens],
+  );
+
+  return (
+    <SideNavHeaderContainer odysseyDesignTokens={odysseyDesignTokens}>
+      <Box sx={sideNavHeaderStyles}>
+        <Heading6>{navHeaderText}</Heading6>
+      </Box>
+      {isCollapsible && <CollapseIcon onClick={onCollapse} />}
+    </SideNavHeaderContainer>
+  );
+};
+const MemoizedSideNavHeader = memo(SideNavHeader);
+MemoizedSideNavHeader.displayName = "SideNavHeader";
+
+export { MemoizedSideNavHeader as SideNavHeader };

package/src/labs/SideNav/SideNavItemContent.tsx

@@ -0,0 +1,216 @@
+/*!
+ * 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 styled from "@emotion/styled";
+import {
+  useRef,
+  useImperativeHandle,
+  useCallback,
+  memo,
+  KeyboardEvent,
+} from "react";
+import { Link } from "../../Link";
+import {
+  type DesignTokens,
+  useOdysseyDesignTokens,
+} from "../../OdysseyDesignTokensContext";
+import { SideNavItemLinkContent } from "./SideNavItemLinkContent";
+import type { SideNavItem } from "./types";
+
+export const SideNavListItemContainer = styled("li", {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" &&
+    prop !== "isSelected" &&
+    prop !== "isDisabled",
+})<{
+  odysseyDesignTokens: DesignTokens;
+  isSelected?: boolean;
+  disabled?: boolean;
+  isDisabled?: boolean;
+}>(({ odysseyDesignTokens, isSelected, isDisabled }) => ({
+  display: "flex",
+  alignItems: "center",
+  cursor: isDisabled ? "default" : "pointer",
+  pointerEvents: isDisabled ? "none" : "auto",
+  backgroundColor: isSelected ? odysseyDesignTokens.HueNeutral50 : "unset",
+  margin: `${odysseyDesignTokens.Spacing1} 0`,
+  "&: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) => {
+  if (node) {
+    node?.scrollIntoView({
+      behavior: "instant",
+      block: "center",
+      inline: "nearest",
+    });
+  }
+};
+
+type ScrollIntoViewHandle = {
+  scrollIntoView: () => void;
+};
+
+const SideNavItemContent = ({
+  id,
+  label,
+  href,
+  target,
+  startIcon,
+  severity,
+  statusLabel,
+  endIcon,
+  onClick,
+  isSelected,
+  isDisabled,
+  scrollRef,
+}: Pick<
+  SideNavItem,
+  | "id"
+  | "label"
+  | "href"
+  | "target"
+  | "startIcon"
+  | "severity"
+  | "statusLabel"
+  | "endIcon"
+  | "onClick"
+  | "isSelected"
+  | "isDisabled"
+> & {
+  /**
+   * The ref used to scroll to this item
+   */
+  scrollRef?: React.RefObject<ScrollIntoViewHandle>;
+}) => {
+  const localScrollRef = useRef<HTMLLIElement>(null);
+  useImperativeHandle(
+    scrollRef,
+    () => {
+      return {
+        scrollIntoView: () => {
+          scrollToNode(localScrollRef.current);
+        },
+      };
+    },
+    [],
+  );
+  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>) => {
+      if (event?.key === "Enter") {
+        event.preventDefault();
+        onClick?.();
+      }
+    },
+    [onClick],
+  );
+
+  return (
+    <SideNavListItemContainer
+      ref={localScrollRef}
+      id={id}
+      key={id}
+      disabled={isDisabled}
+      aria-disabled={isDisabled}
+      isDisabled={isDisabled}
+      isSelected={isSelected}
+      odysseyDesignTokens={odysseyDesignTokens}
+    >
+      {
+        // Use Link for nav items with links and div for disabled or non-link items
+        isDisabled ? (
+          <NavItemContentClickContainer>
+            <SideNavItemLinkContent
+              label={label}
+              startIcon={startIcon}
+              endIcon={endIcon}
+              statusLabel={statusLabel}
+              severity={severity}
+            />
+          </NavItemContentClickContainer>
+        ) : !href ? (
+          <NavItemContentClickContainer
+            role="button"
+            tabIndex={0}
+            onClick={onClick}
+            onKeyDown={sideNavItemContentKeyHandler}
+          >
+            <SideNavItemLinkContent
+              label={label}
+              startIcon={startIcon}
+              endIcon={endIcon}
+              statusLabel={statusLabel}
+              severity={severity}
+            />
+          </NavItemContentClickContainer>
+        ) : (
+          <Link href={href} target={target} onClick={onClick}>
+            <SideNavItemLinkContent
+              label={label}
+              startIcon={startIcon}
+              endIcon={endIcon}
+              statusLabel={statusLabel}
+              severity={severity}
+            />
+          </Link>
+        )
+      }
+    </SideNavListItemContainer>
+  );
+};
+const MemoizedSideNavItemContent = memo(SideNavItemContent);
+MemoizedSideNavItemContent.displayName = "SideNavItemContent";
+
+export { MemoizedSideNavItemContent as SideNavItemContent };

package/src/labs/SideNav/SideNavItemLinkContent.tsx

@@ -0,0 +1,87 @@
+/*!
+ * 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 styled from "@emotion/styled";
+import { memo, ReactNode, useMemo } from "react";
+import {
+  type DesignTokens,
+  useOdysseyDesignTokens,
+} from "../../OdysseyDesignTokensContext";
+import { Box } from "../../Box";
+import { Status } from "../../Status";
+import type { SideNavItem } from "./types";
+
+const SideNavItemLabelContainer = styled("div", {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "isIconVisible",
+})<{
+  odysseyDesignTokens: DesignTokens;
+  isIconVisible: boolean;
+}>(({ odysseyDesignTokens, isIconVisible }) => ({
+  width: "100%",
+  display: "flex",
+  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",
+  },
+}));
+
+const SideNavItemLinkContent = ({
+  label,
+  startIcon,
+  endIcon,
+  severity,
+  statusLabel,
+}: Pick<
+  SideNavItem,
+  "label" | "startIcon" | "endIcon" | "severity" | "statusLabel"
+>): ReactNode => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  const sideNavItemContentStyles = useMemo(
+    () => ({
+      marginLeft: odysseyDesignTokens.Spacing2,
+    }),
+    [odysseyDesignTokens],
+  );
+
+  return (
+    <>
+      {startIcon && startIcon}
+      <SideNavItemLabelContainer
+        odysseyDesignTokens={odysseyDesignTokens}
+        isIconVisible={Boolean(startIcon)}
+      >
+        {label}
+        {severity && (
+          <Box sx={sideNavItemContentStyles}>
+            <Status severity={severity} label={statusLabel || ""} />
+          </Box>
+        )}
+      </SideNavItemLabelContainer>
+      {endIcon && endIcon}
+    </>
+  );
+};
+const MemoizedSideNavItemLinkContent = memo(SideNavItemLinkContent);
+MemoizedSideNavItemLinkContent.displayName = "SideNavItemLinkContent";
+
+export { MemoizedSideNavItemLinkContent as SideNavItemLinkContent };

package/src/labs/SideNav/index.ts

@@ -0,0 +1,15 @@
+/*!
+ * 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.
+ */
+
+export { SideNav } from "./SideNav";
+
+export * from "./types";

package/src/labs/SideNav/types.ts

@@ -0,0 +1,125 @@
+/*!
+ * 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 type { ReactElement } from "react";
+import type { HtmlProps } from "../../HtmlProps";
+import type { statusSeverityValues } from "../../Status";
+
+export type SideNavProps = {
+  /**
+   * Side Nav header text that is usually reserved to show the App name
+   */
+  navHeaderText: string;
+  /**
+   *  Determines whether the side nav is collapsible
+   */
+  isCollapsible?: boolean;
+  /**
+   * Footer items in the side nav
+   */
+  footerItems?: SideNavFooterItem[];
+  /**
+   *  Triggers when the side nav is collapsed
+   */
+  onCollapse?(): void;
+  /**
+   *  Triggers when the side nav is expanded
+   */
+  onExpand?(): void;
+  /**
+   * Nav items in the side nav
+   */
+  sideNavItems: SideNavItem[];
+} & Pick<HtmlProps, "testId">;
+
+export type SideNavItem = {
+  id: string;
+  label: string;
+  /**
+   * The icon element to display at the end of the Nav Item
+   */
+  endIcon?: ReactElement;
+  /**
+   * Whether the item is disabled. When set to true the nav item is set to Disabled color,
+   * the link/item is not clickable, and item with children is not expandable.
+   */
+  isDisabled?: boolean;
+  /**
+   * Whether the item is active/selected
+   */
+  isSelected?: boolean;
+  /**
+   * Event fired when the nav item is clicked
+   */
+  onClick?(): void;
+  /**
+   * The status element to display after the label
+   */
+  severity?: (typeof statusSeverityValues)[number];
+  /**
+   * The icon element to display at the start of the Nav Item
+   */
+  startIcon?: ReactElement;
+  /**
+   * The label to display inside the status
+   */
+  statusLabel?: string;
+  /**
+   * The link target prop. e.g., "_blank"
+   */
+  target?: string;
+} & (
+  | {
+      /**
+       * Determines if the side nav item is a section header
+       */
+      isSectionHeader: true;
+      href?: never;
+      children?: never;
+      isDefaultExpanded?: never;
+      isExpanded?: never;
+    }
+  | {
+      /**
+       * link added to the nav item. if it is undefined, static text will be displayed.
+       * fires onClick event when it is passed
+       */
+      href: string;
+      children?: never;
+      isSectionHeader?: never;
+      isDefaultExpanded?: never;
+      isExpanded?: never;
+    }
+  | {
+      /**
+       * An array of side nav items to be displayed as children within Accordion
+       */
+      children?: SideNavItem[];
+      /**
+       * Whether the accordion (nav item with children) is expanded by default
+       */
+      isDefaultExpanded?: boolean;
+      /**
+       * If true, expands the accordion, otherwise collapse it.
+       * Setting this prop enables control over the accordion.
+       */
+      isExpanded?: boolean;
+      isSectionHeader?: never;
+      href?: never;
+    }
+);
+
+export type SideNavFooterItem = {
+  href?: string;
+  id: string;
+  label: string;
+};