@okta/odyssey-react-mui 1.15.8 → 1.20.0

package/src/labs/NavAccordion.tsx

@@ -0,0 +1,133 @@
+/*!
+ * 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 styled from "@emotion/styled";
+import {
+  Accordion as MuiAccordion,
+  AccordionDetails as MuiAccordionDetails,
+  AccordionSummary as MuiAccordionSummary,
+  AccordionProps as MuiAccordionProps,
+} from "@mui/material";
+import { ReactNode, memo } from "react";
+
+import type { HtmlProps } from "../HtmlProps";
+import { ChevronRightIcon } from "../icons.generated";
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from "../OdysseyDesignTokensContext";
+import { Support } from "../Typography";
+import { useUniqueId } from "../useUniqueId";
+
+export type NavAccordionProps = {
+  /**
+   * The content of the Accordion itself
+   */
+  children: ReactNode;
+  /**
+   * The label text for the AccordionSummary
+   */
+  label: string;
+  /**
+   * Defines IDs for the header and the content of the Accordion
+   */
+  id?: string;
+  /**
+   * Whether the item is expanded by default
+   */
+  isDefaultExpanded?: boolean;
+  /**
+   * Whether the item is disabled
+   */
+  isDisabled?: boolean;
+  /**
+   * If true, expands the accordion, otherwise collapse it.
+   * Setting this prop enables control over the accordion.
+   */
+  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;
+} & Pick<HtmlProps, "testId" | "translate">;
+
+const AccordionLabelContainer = styled("span", {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "isIconVisible",
+})<{
+  odysseyDesignTokens: DesignTokens;
+  isIconVisible: boolean;
+}>(({ odysseyDesignTokens, isIconVisible }) => ({
+  width: "100%",
+  marginLeft: isIconVisible ? odysseyDesignTokens.Spacing2 : 0,
+  fontSize: odysseyDesignTokens.TypographyScale0,
+  fontWeight: odysseyDesignTokens.TypographyWeightHeading,
+  color: odysseyDesignTokens.TypographyColorHeading,
+}));
+
+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}
+      className="nav-accordion"
+    >
+      <MuiAccordionSummary
+        className="nav-accordion-summary"
+        aria-controls={contentId}
+        expandIcon={<ChevronRightIcon />}
+        id={headerId}
+      >
+        <Support component="div" translate={translate}>
+          {startIcon && startIcon}
+          <AccordionLabelContainer
+            odysseyDesignTokens={odysseyDesignTokens}
+            isIconVisible={Boolean(startIcon)}
+          >
+            {label}
+          </AccordionLabelContainer>
+        </Support>
+      </MuiAccordionSummary>
+      <MuiAccordionDetails
+        className="nav-accordion-details"
+        aria-labelledby={headerId}
+      >
+        {children}
+      </MuiAccordionDetails>
+    </MuiAccordion>
+  );
+};
+
+const MemoizedNavAccordion = memo(NavAccordion);
+MemoizedNavAccordion.displayName = "NavAccordion";
+
+export { MemoizedNavAccordion as NavAccordion };

package/src/labs/PageTemplate.tsx

@@ -0,0 +1,225 @@
+/*!
+ * 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, ReactElement, ReactNode } from "react";
+import styled from "@emotion/styled";
+
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from "../OdysseyDesignTokensContext";
+import { DocumentationIcon } from "../icons.generated";
+import { Heading4, Subordinate } from "../Typography";
+import { Link } from "../Link";
+
+export type PageTemplateProps = {
+  /**
+   * The title of the layout to be situated in the layout header
+   */
+  title?: string;
+  /**
+   * A supplementary description to be situated in the layout header
+   */
+  description?: string;
+  /**
+   * The destination for a documentation `Link` to be situated in the layout header
+   */
+  documentationLink?: string;
+  /**
+   * The text for a documentation `Link` to be situated in the layout header
+   */
+  documentationText?: string;
+  /**
+   * An optional `Drawer` object. Can be of variant 'temporary' or 'persistent'.
+   */
+  drawer?: ReactElement;
+  /**
+   * An optional `Button` object to be situated in the layout header. Should almost always be of variant `primary`.
+   */
+  primaryCallToActionComponent?: ReactElement;
+  /**
+   * An optional `Button` object to be situated in the layout header, alongside the `callToActionPrimaryComponent`.
+   */
+  secondaryCallToActionComponent?: ReactElement;
+  /**
+   * An optional `Button` object to be situated in the layout header, alongside the other two `callToAction` components.
+   */
+  tertiaryCallToActionComponent?: ReactElement;
+  /**
+   * The content of the layout. May be a `string` or any other `ReactNode` or array of `ReactNode`s. Will often be `Grid` objects.
+   */
+  children?: ReactNode;
+  /**
+   * When set to `true`, the layout expands past its max width of 1440px and spans the entire available screen width.
+   */
+  isFullWidth?: boolean;
+};
+
+type TemplateContentProps = {
+  odysseyDesignTokens: DesignTokens;
+  isDrawerOpen?: boolean;
+  drawerVariant?: string;
+};
+
+const TemplateContainer = styled("div", {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "isFullWidth",
+})<{
+  odysseyDesignTokens: DesignTokens;
+  isFullWidth: boolean;
+}>(({ odysseyDesignTokens, isFullWidth }) => ({
+  maxWidth: isFullWidth
+    ? "100%"
+    : `calc(1440px + ${odysseyDesignTokens.Spacing6} + ${odysseyDesignTokens.Spacing6})`,
+  marginInline: isFullWidth ? odysseyDesignTokens.Spacing6 : "auto",
+  padding: odysseyDesignTokens.Spacing6,
+}));
+
+const TemplateHeader = styled("div")(() => ({
+  display: "flex",
+  alignItems: "flex-end",
+  justifyContent: "space-between",
+}));
+
+const TemplateHeaderPrimaryContent = styled("div")(() => ({
+  [".MuiTypography-root:last-child"]: {
+    marginBlockEnd: "0",
+  },
+}));
+
+const TemplateHeaderSecondaryContent = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{
+  odysseyDesignTokens: DesignTokens;
+}>(({ odysseyDesignTokens }) => ({
+  alignItems: "flex-end",
+  display: "flex",
+  flexDirection: "column",
+  gap: odysseyDesignTokens.Spacing2,
+  minHeight: odysseyDesignTokens.Spacing7,
+  justifyContent: "center",
+}));
+
+const TemplateHeaderButtons = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{
+  odysseyDesignTokens: DesignTokens;
+}>(({ odysseyDesignTokens }) => ({
+  display: "flex",
+  gap: odysseyDesignTokens.Spacing2,
+}));
+
+const TemplateContent = styled("div", {
+  shouldForwardProp: (prop) =>
+    !["odysseyDesignTokens", "isDrawerOpen", "drawerVariant"].includes(prop),
+})<TemplateContentProps>(
+  ({ odysseyDesignTokens, isDrawerOpen, drawerVariant }) => ({
+    "@keyframes animate-drawer-open": {
+      "0%": {
+        gridTemplateColumns: "minmax(0, 1fr) 0",
+      },
+      "100%": {
+        gridTemplateColumns: "minmax(0, 1fr) 360px",
+      },
+    },
+    "@keyframes animate-drawer-close": {
+      "0%": {
+        gridTemplateColumns: "minmax(0, 1fr) 360px",
+      },
+      "100%": {
+        gridTemplateColumns: "minmax(0, 1fr) 0",
+      },
+    },
+    display: "grid",
+    gridGap:
+      drawerVariant === "persistent" && !isDrawerOpen
+        ? 0
+        : odysseyDesignTokens.Spacing4,
+    gap:
+      drawerVariant === "persistent" && !isDrawerOpen
+        ? 0
+        : odysseyDesignTokens.Spacing4,
+    marginBlock: odysseyDesignTokens.Spacing4,
+    gridTemplateColumns:
+      drawerVariant === "persistent"
+        ? isDrawerOpen
+          ? "minmax(0, 1fr) 360px"
+          : "minmax(0, 1fr) 0"
+        : "minmax(0, 1fr)",
+    animation:
+      drawerVariant === "persistent" && isDrawerOpen
+        ? "animate-drawer-open 225ms cubic-bezier(0, 0, 0.2, 1)"
+        : "animate-drawer-close 225ms cubic-bezier(0, 0, 0.2, 1)",
+  }),
+);
+
+const PageTemplate = ({
+  title,
+  description,
+  documentationLink,
+  documentationText,
+  primaryCallToActionComponent,
+  secondaryCallToActionComponent,
+  tertiaryCallToActionComponent,
+  children,
+  drawer,
+  isFullWidth = false,
+}: PageTemplateProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const { isOpen: isDrawerOpen, variant: drawerVariant } = drawer?.props ?? {};
+
+  return (
+    <TemplateContainer
+      odysseyDesignTokens={odysseyDesignTokens}
+      isFullWidth={isFullWidth}
+    >
+      <TemplateHeader>
+        <TemplateHeaderPrimaryContent>
+          {title && <Heading4>{title}</Heading4>}
+          {description && <Subordinate>{description}</Subordinate>}
+        </TemplateHeaderPrimaryContent>
+
+        <TemplateHeaderSecondaryContent
+          odysseyDesignTokens={odysseyDesignTokens}
+        >
+          {documentationLink && (
+            <Link href={documentationLink} icon={<DocumentationIcon />}>
+              {documentationText}
+            </Link>
+          )}
+          {(primaryCallToActionComponent ||
+            secondaryCallToActionComponent ||
+            tertiaryCallToActionComponent) && (
+            <TemplateHeaderButtons odysseyDesignTokens={odysseyDesignTokens}>
+              {tertiaryCallToActionComponent}
+              {secondaryCallToActionComponent}
+              {primaryCallToActionComponent}
+            </TemplateHeaderButtons>
+          )}
+        </TemplateHeaderSecondaryContent>
+      </TemplateHeader>
+      <TemplateContent
+        odysseyDesignTokens={odysseyDesignTokens}
+        isDrawerOpen={isDrawerOpen}
+        drawerVariant={drawerVariant}
+      >
+        {children}
+        {drawer}
+      </TemplateContent>
+    </TemplateContainer>
+  );
+};
+
+const MemoizedPageTemplate = memo(PageTemplate);
+MemoizedPageTemplate.displayName = "PageTemplate";
+
+export { MemoizedPageTemplate as PageTemplate };