@okta/odyssey-react-mui 1.25.0 → 1.26.0

package/src/labs/SideNav/SideNavToggleButton.tsx

@@ -0,0 +1,249 @@
+/*!
+ * Copyright (c) 2022-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 { Button as MuiButton } from "@mui/material";
+import type { ButtonProps as MuiButtonProps } from "@mui/material";
+import {
+  HTMLAttributes,
+  memo,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from "react";
+import styled from "@emotion/styled";
+import { useTranslation } from "react-i18next";
+
+import { FocusHandle } from "../../inputUtils";
+import { MuiPropsContext, MuiPropsContextType } from "../../MuiPropsContext";
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from "../../OdysseyDesignTokensContext";
+import { Tooltip } from "../../Tooltip";
+
+const StyledToggleButton = styled(MuiButton, {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed",
+})(
+  ({
+    isSideNavCollapsed,
+    odysseyDesignTokens,
+  }: {
+    isSideNavCollapsed: boolean;
+    odysseyDesignTokens: DesignTokens;
+  }) => ({
+    backgroundColor: "transparent",
+    position: "relative",
+    width: odysseyDesignTokens.Spacing6,
+    height: odysseyDesignTokens.Spacing6,
+    border: 0,
+    zIndex: 2,
+
+    "&:focus-visible": {
+      boxShadow: `inset 0 0 0 2px ${odysseyDesignTokens.PalettePrimaryMain}`,
+      outline: "none",
+    },
+
+    "&:hover, &:focus": {
+      backgroundColor: "transparent",
+
+      "#lineOne": {
+        animation:
+          "lineOne-animate-to-collapse 250ms cubic-bezier(0, 0, 0.2, 1)",
+        animationFillMode: "forwards",
+        "@keyframes lineOne-animate-to-collapse": {
+          "0%": {
+            transform: "translate3d(-50%, -50%, 0)",
+          },
+          "50%": {
+            transform: "translate3d(-50%, -50%, 0) rotate(-90deg) scaleY(.75)",
+          },
+          "100%": {
+            transform: "translate3d(-50%, -27%, 0) rotate(-45deg) scaleY(.75)",
+          },
+        },
+      },
+
+      "#lineTwo": {
+        animation:
+          "lineTwo-animate-to-collapse 250ms cubic-bezier(0, 0, 0.2, 1)",
+        animationFillMode: "forwards",
+        "@keyframes lineTwo-animate-to-collapse": {
+          "0%": {
+            transform: "translate3d(-50%, -50%, 0)",
+          },
+          "50%": {
+            transform: "translate3d(-50%, -50%, 0) rotate(-90deg) scaleY(.75)",
+          },
+          "100%": {
+            transform: "translate3d(-50%, -73%, 0) rotate(-135deg) scaleY(.75)",
+          },
+        },
+      },
+
+      ...(isSideNavCollapsed && {
+        "#lineOne": {
+          animation:
+            "lineOne-animate-to-expand 250ms cubic-bezier(0, 0, 0.2, 1)",
+          animationFillMode: "forwards",
+          "@keyframes lineOne-animate-to-expand": {
+            "0%": {
+              transform: "translate3d(-50%, -50%, 0)",
+            },
+            "50%": {
+              transform: "translate3d(-50%, -50%, 0) rotate(90deg) scaleY(.75)",
+            },
+            "100%": {
+              transform:
+                "translate3d(-50%, -73%, 0) rotate(135deg) scaleY(.75)",
+            },
+          },
+        },
+
+        "#lineTwo": {
+          animation:
+            "lineTwo-animate-to-expand 250ms cubic-bezier(0, 0, 0.2, 1)",
+          animationFillMode: "forwards",
+          "@keyframes lineTwo-animate-to-expand": {
+            "0%": {
+              transform: "translate3d(-50%, -50%, 0)",
+            },
+            "50%": {
+              transform: "translate3d(-50%, -50%, 0) rotate(90deg) scaleY(.75)",
+            },
+            "100%": {
+              transform: "translate3d(-50%, -27%, 0) rotate(45deg) scaleY(.75)",
+            },
+          },
+        },
+      }),
+    },
+
+    span: {
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      width: "2px",
+      height: odysseyDesignTokens.Spacing4,
+      backgroundColor: odysseyDesignTokens.HueNeutral500,
+      transform: "translate3d(-50%, -50%, 0)",
+      transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,
+    },
+  }),
+);
+
+export type SideNavToggleButtonProps = {
+  /**
+   * The ref forwarded to the Button
+   */
+  buttonRef?: React.RefObject<FocusHandle>;
+  /**
+   * The `id` of the item this button controls
+   */
+  ariaControls: string;
+  /**
+   * The ID of the Button
+   */
+  id?: string;
+  isSideNavCollapsed: boolean;
+  tabIndex?: HTMLAttributes<HTMLElement>["tabIndex"];
+  /**
+   * The click event handler for the Button
+   */
+  onClick?: MuiButtonProps["onClick"];
+  onKeyDown?: MuiButtonProps["onKeyDown"];
+};
+
+const SideNavToggleButton = ({
+  ariaControls,
+  buttonRef,
+  id,
+  isSideNavCollapsed,
+  onClick,
+  tabIndex,
+}: SideNavToggleButtonProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const { t } = useTranslation();
+
+  const localButtonRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);
+
+  useImperativeHandle(
+    buttonRef,
+    () => ({
+      focus: () => {
+        localButtonRef.current?.focus();
+      },
+    }),
+    [],
+  );
+
+  const toggleLabel = useMemo(
+    () =>
+      isSideNavCollapsed
+        ? t("sidenav.toggle.expand")
+        : t("sidenav.toggle.collapse"),
+    [isSideNavCollapsed, t],
+  );
+
+  const renderButton = useCallback(
+    (muiProps: MuiPropsContextType) => {
+      return (
+        <StyledToggleButton
+          {...muiProps}
+          aria-controls={ariaControls}
+          aria-expanded={!isSideNavCollapsed}
+          aria-label={toggleLabel}
+          data-sidenav-toggle={true}
+          id={id}
+          isSideNavCollapsed={isSideNavCollapsed}
+          odysseyDesignTokens={odysseyDesignTokens}
+          onClick={onClick}
+          ref={(element) => {
+            if (element) {
+              (
+                localButtonRef as React.MutableRefObject<HTMLButtonElement>
+              ).current = element;
+              //@ts-expect-error ref is not an optional prop on the props context type
+              muiProps?.ref?.(element);
+            }
+          }}
+          tabIndex={tabIndex}
+          variant="floating"
+        >
+          <span id="lineOne" />
+          <span id="lineTwo" />
+        </StyledToggleButton>
+      );
+    },
+    [
+      ariaControls,
+      id,
+      isSideNavCollapsed,
+      odysseyDesignTokens,
+      onClick,
+      tabIndex,
+      toggleLabel,
+    ],
+  );
+
+  return (
+    <Tooltip ariaType="description" placement="right" text={toggleLabel}>
+      <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>
+    </Tooltip>
+  );
+};
+
+const MemoizedSideNavToggleButton = memo(SideNavToggleButton);
+MemoizedSideNavToggleButton.displayName = "SideNavToggleButton";
+
+export { MemoizedSideNavToggleButton as SideNavToggleButton };

package/src/labs/SideNav/types.ts

@@ -14,15 +14,62 @@ import type { ReactElement } from "react";
 import type { HtmlProps } from "../../HtmlProps";
 import type { statusSeverityValues } from "../../Status";
 
+export type SideNavLogoProps = {
+  href?: string;
+} & (
+  | {
+      /**
+       * a component to render as the logo
+       */
+      logoComponent: ReactElement;
+      imageAltText?: never;
+      imageUrl?: never;
+    }
+  | {
+      /**
+       * The src url to render in an `img` tag
+       */
+      imageUrl: string;
+      /**
+       * alt text for the img logo
+       */
+      imageAltText: string;
+      logoComponent?: never;
+    }
+  | {
+      /**
+       * The src url to render in an `img` tag
+       */
+      imageUrl?: never;
+      /**
+       * alt text for the img logo
+       */
+      imageAltText?: never;
+      logoComponent?: never;
+    }
+);
+
 export type SideNavProps = {
   /**
    * Side Nav header text that is usually reserved to show the App name
    */
-  navHeaderText: string;
+  appName: string;
   /**
    *  Determines whether the side nav is collapsible
    */
   isCollapsible?: boolean;
+  /**
+   *  Determines whether the side nav items use compact layout
+   */
+  isCompact?: boolean;
+  /**
+   *  Before the side nav has items, it will be in a loading state.
+   */
+  isLoading?: boolean;
+  /**
+   * An optional logo component or src string for an img to display in the header. If not provided, will default to the Okta logo
+   */
+  logoProps?: SideNavLogoProps;
   /**
    *  Triggers when the side nav is collapsed
    */
@@ -35,46 +82,36 @@ export type SideNavProps = {
    * Nav items in the side nav
    */
   sideNavItems: SideNavItem[];
-  /**
-   * A CSS length string indicating the customizable expanded width of the SideNav container.
-   * (it will be smaller if isCollapsible and collapsed)
-   */
-  expandedWidth?: string;
-  /**
-   * An optional logo to display in the header. If not provided, will default to the Okta logo
-   */
-  logo?: ReactElement;
 } & (
   | {
       /**
-       * Footer items in the side nav
-       */
-      footerItems?: SideNavFooterItem[];
-      /**
-       * footerComponent cannot be used if footerItems are defined
+       * The component to display as the footer; if present the `footerItems` are ignored and not rendered.
        */
-      footerComponent?: never;
+      footerComponent?: ReactElement;
+      footerItems?: never;
+      hasCustomFooter: true;
     }
   | {
+      footerComponent?: never;
       /**
-       * footerItems cannot be used if footerComponent is defined
-       */
-      footerItems?: never;
-      /**
-       * The component to display as the footer; if present the `footerItems` are ignored and not rendered.
+       * Footer items in the side nav
        */
-      footerComponent?: ReactElement;
+      footerItems?: SideNavFooterItem[];
+      hasCustomFooter?: false;
     }
 ) &
   Pick<HtmlProps, "testId">;
 
 export type SideNavItem = {
-  id: string;
-  label: string;
+  /**
+   * The number to display as a count alongside the nav item
+   */
+  count?: number;
   /**
    * The icon element to display at the end of the Nav Item
    */
   endIcon?: ReactElement;
+  id: string;
   /**
    * 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.
@@ -84,6 +121,7 @@ export type SideNavItem = {
    * Whether the item is active/selected
    */
   isSelected?: boolean;
+  label: string;
   /**
    * Event fired when the nav item is clicked
    */
@@ -106,31 +144,33 @@ export type SideNavItem = {
   target?: string;
 } & (
   | {
+      children?: never;
+      href?: never;
+      isDefaultExpanded?: never;
+      isExpanded?: never;
       /**
        * Determines if the side nav item is a section header
        */
       isSectionHeader: true;
-      href?: never;
-      children?: never;
-      isDefaultExpanded?: never;
-      isExpanded?: never;
     }
   | {
+      children?: 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;
+      href?: string;
       isDefaultExpanded?: never;
       isExpanded?: never;
+      isSectionHeader?: never;
     }
   | {
       /**
        * An array of side nav items to be displayed as children within Accordion
        */
-      children?: SideNavItem[];
+      children?: Array<Omit<SideNavItem, "startIcon" | "endIcon">>;
+      endIcon?: never;
+      href?: never;
       /**
        * Whether the accordion (nav item with children) is expanded by default
        */
@@ -141,7 +181,6 @@ export type SideNavItem = {
        */
       isExpanded?: boolean;
       isSectionHeader?: never;
-      href?: never;
     }
 );
 

package/src/labs/TopNav/TopNav.tsx

@@ -0,0 +1,95 @@
+/*!
+ * Copyright (c) 2022-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, type ReactElement } from "react";
+
+import type { HtmlProps } from "../../HtmlProps";
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from "../../OdysseyDesignTokensContext";
+
+export const TOP_NAV_HEIGHT = `${64 / 14}rem`;
+
+const StyledLeftSideContainer = styled("div")(() => ({
+  flexGrow: 1,
+}));
+
+const StyledRightSideContainer = styled("div")(() => ({
+  flexShrink: 0,
+}));
+
+const StyledTopNavContainer = styled("div", {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "isScrolled",
+})<{
+  odysseyDesignTokens: DesignTokens;
+  isScrolled?: boolean;
+}>(({ odysseyDesignTokens, isScrolled }) => ({
+  alignItems: "center",
+  backgroundColor: odysseyDesignTokens.HueNeutral50,
+  boxShadow: isScrolled ? odysseyDesignTokens.DepthMedium : undefined,
+  clipPath: "inset(0 0 -100vh 0)",
+  display: "flex",
+  gap: odysseyDesignTokens.Spacing4,
+  height: "100%",
+  justifyContent: "space-between",
+  maxHeight: TOP_NAV_HEIGHT,
+  minHeight: TOP_NAV_HEIGHT,
+  paddingBlock: odysseyDesignTokens.Spacing2,
+  paddingInline: odysseyDesignTokens.Spacing6,
+  transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,
+  zIndex: 1,
+}));
+
+export type TopNavProps = {
+  /**
+   * Whether or not the underlying content has been scrolled
+   */
+  isScrolled?: boolean;
+  /**
+   * React components that render into the left side of the top nav.
+   */
+  leftSideComponent?: ReactElement;
+  /**
+   * React components that render into the right side of the top nav.
+   */
+  rightSideComponent?: ReactElement;
+} & Pick<HtmlProps, "testId">;
+
+const TopNav = ({
+  isScrolled,
+  leftSideComponent,
+  rightSideComponent,
+}: TopNavProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  return (
+    <StyledTopNavContainer
+      odysseyDesignTokens={odysseyDesignTokens}
+      isScrolled={isScrolled}
+    >
+      <StyledLeftSideContainer>
+        {leftSideComponent ?? <div />}
+      </StyledLeftSideContainer>
+      <StyledRightSideContainer>
+        {rightSideComponent ?? <div />}
+      </StyledRightSideContainer>
+    </StyledTopNavContainer>
+  );
+};
+
+const MemoizedTopNav = memo(TopNav);
+MemoizedTopNav.displayName = "TopNav";
+
+export { MemoizedTopNav as TopNav };

package/src/labs/TopNav/TopNavLinksList.tsx

@@ -0,0 +1,68 @@
+/*!
+ * Copyright (c) 2022-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, type ReactElement } from "react";
+
+import type { HtmlProps } from "../../HtmlProps";
+import { TopNavListItem, TopNavListItemProps } from "./TopNavListItem";
+import { UserProfileProps } from "./UserProfile";
+
+export type TopNavLinksListProps = {
+  /**
+   * Pass in an additional component like `Button` that will be displayed after the nav link items
+   */
+  additionalNavItem?: ReactElement;
+  /**
+   * URL to the help page.
+   */
+  helpPageHref?: string;
+  /**
+   *  Pass in a SearchField component with the variant="filled" prop set
+   */
+  searchField?: ReactElement;
+  /**
+   * URL to settings page.
+   */
+  settingsPageHref?: string;
+  /**
+   * Nav links in the top nav
+   */
+  topNavLinkItems: TopNavListItemProps[];
+  /**
+   * Displays user account info
+   */
+  userProfile?: UserProfileProps;
+} & Pick<HtmlProps, "testId">;
+
+const StyledTopNavList = styled("ul")(() => ({
+  alignItems: "center",
+  display: "flex",
+  listStyle: "none",
+  listStyleType: "none",
+  padding: 0,
+}));
+
+const TopNavLinksList = ({ topNavLinkItems }: TopNavLinksListProps) => (
+  <nav>
+    <StyledTopNavList>
+      {topNavLinkItems.map((item) => (
+        <TopNavListItem {...item} key={item.id} />
+      ))}
+    </StyledTopNavList>
+  </nav>
+);
+
+const MemoizedTopNavLinksList = memo(TopNavLinksList);
+MemoizedTopNavLinksList.displayName = "TopNavLinksList";
+
+export { MemoizedTopNavLinksList as TopNavLinksList };