@okta/odyssey-react-mui 1.13.9 → 1.13.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.13.9",
+  "version": "1.13.11",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -51,7 +51,7 @@
     "@mui/system": "^5.14.9",
     "@mui/utils": "^5.11.2",
     "@mui/x-date-pickers": "^5.0.15",
-    "@okta/odyssey-design-tokens": "1.13.9",
+    "@okta/odyssey-design-tokens": "1.13.11",
     "date-fns": "^2.30.0",
     "i18next": "^23.5.1",
     "material-react-table": "^2.0.2",
@@ -63,5 +63,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "c2ab862795fbdc1c11b7b3bb4118a7ed24600843"
+  "gitHead": "056c36afdaaae83d531f50b9dd04eca4b8b5fb4c"
 }

package/src/Button.tsx

@@ -19,6 +19,7 @@ import {
   ReactElement,
   useCallback,
   useImperativeHandle,
+  useMemo,
   useRef,
 } from "react";
 
@@ -26,6 +27,7 @@ import { MuiPropsContext, useMuiProps } from "./MuiPropsContext";
 import { Tooltip } from "./Tooltip";
 import type { HtmlProps } from "./HtmlProps";
 import { FocusHandle } from "./inputUtils";
+import { useButton } from "./ButtonContext";
 
 export const buttonSizeValues = ["small", "medium", "large"] as const;
 export const buttonTypeValues = ["button", "submit", "reset"] as const;
@@ -142,7 +144,7 @@ const Button = ({
   endIcon,
   id,
   isDisabled,
-  isFullWidth,
+  isFullWidth: isFullWidthProp,
   label = "",
   onClick,
   size = "medium",
@@ -160,6 +162,12 @@ const Button = ({
   // "secondary" in lieu of making a breaking change
   const variant = variantProp === "tertiary" ? "secondary" : variantProp;
   const localButtonRef = useRef<HTMLButtonElement>(null);
+  const buttonContext = useButton();
+  const isFullWidth = useMemo(
+    () =>
+      buttonContext.isFullWidth ? buttonContext.isFullWidth : isFullWidthProp,
+    [buttonContext, isFullWidthProp]
+  );
 
   useImperativeHandle(
     buttonRef,

package/src/ButtonContext.tsx

@@ -0,0 +1,23 @@
+/*!
+ * 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 { createContext, useContext } from "react";
+
+export type ButtonContextValue = {
+  isFullWidth: boolean;
+};
+
+export const ButtonContext = createContext<ButtonContextValue>({
+  isFullWidth: false,
+});
+
+export const useButton = () => useContext(ButtonContext);

package/src/Form.tsx

@@ -10,14 +10,15 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo, ReactElement } from "react";
-
+import { FormEventHandler, memo, ReactElement } from "react";
 import { Box } from "@mui/material";
+
 import { Button } from "./Button";
 import { Callout } from "./Callout";
+import { FieldComponentProps } from "./FieldComponentProps";
+import type { HtmlProps } from "./HtmlProps";
 import { Heading4, Support } from "./Typography";
 import { useUniqueId } from "./useUniqueId";
-import type { HtmlProps } from "./HtmlProps";
 
 export const formEncodingTypeValues = [
   "application/x-www-form-urlencoded",
@@ -76,6 +77,10 @@ export type FormProps = {
    * it can be overridden by a formnovalidate attribute on a <button>, <input type="submit">, or <input type="image"> element belonging to the form.
    */
   noValidate?: boolean;
+  /**
+   * Callback that passes the submit event to the consumer
+   */
+  onSubmit?: FormEventHandler<HTMLFormElement>;
   /**
    * Indicates where to display the response after submitting the form. It is a name/keyword for a browsing context (for example, tab, window, or iframe).
    * This value can be overridden by a formtarget attribute on a <button>, <input type="submit">, or <input type="image"> element.
@@ -85,7 +90,8 @@ export type FormProps = {
    * The title of the Form
    */
   title?: string;
-} & HtmlProps;
+} & Pick<FieldComponentProps, "isFullWidth"> &
+  HtmlProps;
 
 const Form = ({
   alert,
@@ -95,9 +101,11 @@ const Form = ({
   encodingType,
   formActions,
   id: idOverride,
+  isFullWidth,
   method,
   name,
   noValidate = false,
+  onSubmit,
   target,
   testId,
   title,
@@ -115,9 +123,10 @@ const Form = ({
       method={method}
       name={name}
       noValidate={noValidate}
+      onSubmit={onSubmit}
       target={target}
       sx={{
-        maxWidth: (theme) => theme.mixins.maxWidth,
+        maxWidth: (theme) => (isFullWidth ? "100%" : theme.mixins.maxWidth),
         margin: (theme) => theme.spacing(0),
         padding: (theme) => theme.spacing(0),
       }}
@@ -142,7 +151,7 @@ const Form = ({
           component="div"
           sx={{
             display: "flex",
-            justifyContent: "flex-start",
+            justifyContent: "flex-end",
             gap: (theme) => theme.spacing(1),
             marginBlockStart: (theme) => theme.spacing(7),
           }}

package/src/MenuContext.ts

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { createContext, MouseEventHandler } from "react";
+import { MouseEventHandler, createContext } from "react";
 
 export type MenuContextType = {
   closeMenu: () => void;

package/src/Tile.tsx

@@ -0,0 +1,147 @@
+/*!
+ * 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 { ReactElement, memo, useMemo } from "react";
+
+import { NullElement } from "./NullElement";
+import {
+  Card as MuiCard,
+  CardActions as MuiCardActions,
+  CardActionArea as MuiCardActionArea,
+} from "@mui/material";
+import { Button } from "./Button";
+import { ButtonContext } from "./ButtonContext";
+import { Heading5, Paragraph, Support } from "./Typography";
+import { MoreIcon } from "./icons.generated";
+import { HtmlProps } from "./HtmlProps";
+import styled from "@emotion/styled";
+import {
+  DesignTokens,
+  useOdysseyDesignTokens,
+} from "./OdysseyDesignTokensContext";
+import { MenuButton } from "./MenuButton";
+
+export type TileProps = {
+  description?: string;
+  image?: ReactElement | NullElement; // Icon or image
+  menuItems?: ReactElement;
+  overline?: string;
+  title?: string;
+} & ( // You can't have actions and onClick at the same time
+  | {
+      onClick: () => void;
+      button?: never;
+      menuItems?: never;
+    }
+  | {
+      onClick?: never;
+      button?: ReactElement<typeof Button> | NullElement;
+      menuItems?: ReactElement;
+    }
+) &
+  HtmlProps;
+
+const ImageContainer = styled.div<{
+  odysseyDesignTokens: DesignTokens;
+  hasMenuItems: boolean;
+}>`
+  display: flex;
+  align-items: flex-start;
+  max-height: 64px;
+  margin-block-end: ${(props) => props.odysseyDesignTokens.Spacing5};
+  padding-right: ${(props) =>
+    props.hasMenuItems ? props.odysseyDesignTokens.Spacing5 : 0};
+`;
+
+const MenuButtonContainer = styled.div<{ odysseyDesignTokens: DesignTokens }>`
+  position: absolute;
+  right: ${(props) => props.odysseyDesignTokens.Spacing3};
+  top: ${(props) => props.odysseyDesignTokens.Spacing3};
+`;
+
+const Tile = ({
+  button,
+  description,
+  image,
+  menuItems,
+  onClick,
+  overline,
+  title,
+}: TileProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  const cardContent = useMemo(() => {
+    return (
+      <>
+        {image && (
+          <ImageContainer
+            odysseyDesignTokens={odysseyDesignTokens}
+            hasMenuItems={Boolean(menuItems)}
+          >
+            {image}
+          </ImageContainer>
+        )}
+
+        {overline && <Support component="div">{overline}</Support>}
+        {title && <Heading5 component="div">{title}</Heading5>}
+        {description && (
+          <Paragraph color="textSecondary">{description}</Paragraph>
+        )}
+
+        {button && (
+          <MuiCardActions>
+            <ButtonContext.Provider value={{ isFullWidth: true }}>
+              {button}
+            </ButtonContext.Provider>
+          </MuiCardActions>
+        )}
+      </>
+    );
+  }, [
+    button,
+    description,
+    image,
+    menuItems,
+    overline,
+    title,
+    odysseyDesignTokens,
+  ]);
+
+  return (
+    <MuiCard className={onClick ? "isClickable" : ""}>
+      {onClick && (
+        <MuiCardActionArea onClick={onClick}>{cardContent}</MuiCardActionArea>
+      )}
+
+      {!onClick && cardContent}
+
+      {menuItems && (
+        <MenuButtonContainer odysseyDesignTokens={odysseyDesignTokens}>
+          <MenuButton
+            endIcon={<MoreIcon />}
+            ariaLabel="Tile menu"
+            buttonVariant="floating"
+            menuAlignment="right"
+            size="small"
+          >
+            {menuItems}
+          </MenuButton>
+        </MenuButtonContainer>
+      )}
+    </MuiCard>
+  );
+};
+
+const MemoizedTile = memo(Tile);
+MemoizedTile.displayName = "Tile";
+
+export { MemoizedTile as Tile };

package/src/index.ts

@@ -62,6 +62,7 @@ export * from "./Banner";
 export * from "./Box";
 export * from "./Breadcrumbs";
 export * from "./Button";
+export * from "./Tile";
 export * from "./Callout";
 export * from "./Checkbox";
 export * from "./CheckboxGroup";

package/src/theme/components.tsx

@@ -701,6 +701,70 @@ export const components = ({
         disableRipple: true,
       },
     },
+    MuiCard: {
+      styleOverrides: {
+        root: () => ({
+          backgroundColor: odysseyTokens.HueNeutralWhite,
+          borderRadius: odysseyTokens.BorderRadiusOuter,
+          boxShadow: odysseyTokens.DepthMedium,
+          padding: odysseyTokens.Spacing5,
+          position: "relative",
+          transition: `all ${odysseyTokens.TransitionDurationMain} ${odysseyTokens.TransitionTimingMain}`,
+
+          "& img": {
+            height: "64px",
+          },
+
+          "&.isClickable:hover": {
+            backgroundColor: odysseyTokens.HueNeutral50,
+            boxShadow: odysseyTokens.DepthHigh,
+          },
+
+          [`& .${typographyClasses.h5}`]: {
+            lineHeight: odysseyTokens.TypographyLineHeightHeading5,
+            marginBottom: odysseyTokens.Spacing3,
+          },
+
+          [`& .${typographyClasses.subtitle2}`]: {
+            marginBottom: odysseyTokens.Spacing1,
+            textTransform: "uppercase",
+            fontWeight: odysseyTokens.TypographyWeightBodyBold,
+            fontSize: odysseyTokens.TypographySizeOverline,
+            lineHeight: odysseyTokens.TypographyLineHeightOverline,
+            color: odysseyTokens.TypographyColorSubordinate,
+            letterSpacing: 1.3,
+          },
+
+          [`& .${typographyClasses.body1}`]: {
+            fontSize: odysseyTokens.TypographySizeSubordinate,
+            lineHeight: odysseyTokens.TypographyLineHeightBody,
+          },
+        }),
+      },
+    },
+    MuiCardActionArea: {
+      styleOverrides: {
+        root: () => ({
+          margin: `-${odysseyTokens.Spacing5}`,
+          padding: odysseyTokens.Spacing5,
+          width: `calc(100% + (${odysseyTokens.Spacing5} * 2))`,
+
+          "&:hover": {
+            "& .MuiCardActionArea-focusHighlight": {
+              display: "none",
+            },
+          },
+        }),
+      },
+    },
+    MuiCardActions: {
+      styleOverrides: {
+        root: () => ({
+          marginBlockStart: odysseyTokens.Spacing5,
+          padding: 0,
+        }),
+      },
+    },
     MuiCheckbox: {
       defaultProps: {
         size: "small",