@okta/odyssey-react-mui 1.25.0 → 1.26.0

package/src/labs/AppTile.tsx

@@ -21,6 +21,7 @@ import {
 import {
   Card as MuiCard,
   CardActionArea as MuiCardActionArea,
+  Skeleton as MuiSkeleton,
 } from "@mui/material";
 import styled from "@emotion/styled";
 
@@ -33,6 +34,7 @@ import { Heading5, Paragraph, Subordinate, Support } from ".././Typography";
 import { Box } from ".././Box";
 
 export const APP_TILE_IMAGE_HEIGHT = "64px";
+export const APP_TILE_PLACEHOLDER_IMAGE_WIDTH = "64px";
 
 export type AppTileProps = {
   // Text that appears in the upper right corner of the tile
@@ -43,6 +45,8 @@ export type AppTileProps = {
   description?: string;
   // An image or icon at the top of the tile
   image?: ReactElement;
+  // If true, the AppTile is loading
+  isLoading?: boolean;
   // Event handler for when the user clicks the tile
   onClick: MouseEventHandler;
   // An 'eyebrow' of text above the title
@@ -76,18 +80,29 @@ export type AppTileProps = {
     }
 );
 
+type LoadingTileProps = {
+  children: boolean;
+  description: boolean;
+  hasTopSection: boolean;
+  image: boolean;
+  overline: boolean;
+  title: boolean;
+};
+
 const ImageContainer = styled("div", {
-  shouldForwardProp: (prop) =>
-    prop !== "odysseyDesignTokens" && prop !== "hasAction",
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
 })<{
   odysseyDesignTokens: DesignTokens;
-  hasAction: boolean;
-}>(({ odysseyDesignTokens, hasAction }) => ({
+}>(({ odysseyDesignTokens }) => ({
   display: "flex",
   alignItems: "flex-start",
   maxHeight: APP_TILE_IMAGE_HEIGHT,
   marginBlockEnd: odysseyDesignTokens.Spacing5,
-  paddingRight: hasAction ? odysseyDesignTokens.Spacing5 : 0,
+
+  ["img"]: {
+    height: APP_TILE_IMAGE_HEIGHT,
+    maxWidth: "100%",
+  },
 }));
 
 const ActionContainer = styled("div", {
@@ -96,16 +111,27 @@ const ActionContainer = styled("div", {
   alignItems: "center",
   display: "flex",
   minHeight: odysseyDesignTokens.Spacing6,
-  gap: odysseyDesignTokens.Spacing1,
   position: "absolute",
-  right: odysseyDesignTokens.Spacing3,
-  top: odysseyDesignTokens.Spacing3,
-}));
+  right: odysseyDesignTokens.Spacing2,
+  top: odysseyDesignTokens.Spacing2,
+  gap: odysseyDesignTokens.Spacing1,
+  zIndex: 1,
 
-const ContentContainer = styled("div")(() => ({
-  display: "flex",
+  ["& > .MuiTypography-root:last-child"]: {
+    marginInlineEnd: odysseyDesignTokens.Spacing2,
+  },
 }));
 
+const ContentContainer = styled("div", {
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "hasTopSection",
+})<{ odysseyDesignTokens: DesignTokens; hasTopSection: boolean }>(
+  ({ odysseyDesignTokens, hasTopSection }) => ({
+    alignItems: "flex-start",
+    paddingBlockStart: hasTopSection ? odysseyDesignTokens.Spacing4 : 0,
+  }),
+);
+
 const ChildrenContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
 })<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
@@ -114,6 +140,98 @@ const ChildrenContainer = styled("div", {
   },
 }));
 
+const LoadingTile = ({
+  image,
+  overline,
+  title,
+  description,
+  children,
+  hasTopSection,
+}: LoadingTileProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  return (
+    <MuiCard className="isClickable">
+      <ContentContainer
+        odysseyDesignTokens={odysseyDesignTokens}
+        hasTopSection={hasTopSection}
+      >
+        {hasTopSection && (
+          <ActionContainer odysseyDesignTokens={odysseyDesignTokens}>
+            <Subordinate>
+              <MuiSkeleton width={50} />
+            </Subordinate>
+          </ActionContainer>
+        )}
+        <Box sx={{ width: "100%" }}>
+          {image && (
+            <ImageContainer odysseyDesignTokens={odysseyDesignTokens}>
+              <MuiSkeleton
+                height={APP_TILE_IMAGE_HEIGHT}
+                width={APP_TILE_PLACEHOLDER_IMAGE_WIDTH}
+                variant="rectangular"
+              />
+            </ImageContainer>
+          )}
+
+          {overline && (
+            <Support>
+              <MuiSkeleton />
+            </Support>
+          )}
+          {title && (
+            <Heading5>
+              <MuiSkeleton />
+            </Heading5>
+          )}
+          {description && (
+            <Paragraph>
+              <MuiSkeleton />
+            </Paragraph>
+          )}
+          {children && (
+            <ChildrenContainer odysseyDesignTokens={odysseyDesignTokens}>
+              <MuiSkeleton
+                variant="rounded"
+                width="100%"
+                height={odysseyDesignTokens.Spacing6}
+              />
+            </ChildrenContainer>
+          )}
+        </Box>
+      </ContentContainer>
+    </MuiCard>
+  );
+};
+
+const StyledMuiCard = styled(MuiCard, {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
+  position: "relative",
+  boxShadow: "none",
+  overflow: "unset",
+
+  "&::after": {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    opacity: 0,
+    boxShadow: odysseyDesignTokens.DepthMedium,
+    borderRadius: odysseyDesignTokens.BorderRadiusOuter,
+    transition: `opacity ${odysseyDesignTokens.TransitionDurationMain}`,
+    zIndex: "-1",
+    content: '""',
+  },
+
+  "&:hover": {
+    "&::after": {
+      opacity: 1,
+    },
+  },
+}));
+
 const AppTile = ({
   actionAriaControls,
   actionAriaHasPopup,
@@ -124,6 +242,7 @@ const AppTile = ({
   children,
   description,
   image,
+  isLoading,
   onActionClick,
   onClick,
   overline,
@@ -133,34 +252,33 @@ const AppTile = ({
 
   const tileContent = useMemo(
     () => (
-      <ContentContainer>
-        <Box>
-          {image && (
-            <ImageContainer
-              odysseyDesignTokens={odysseyDesignTokens}
-              hasAction={Boolean(onActionClick)}
-            >
-              {image}
-            </ImageContainer>
-          )}
+      <ContentContainer
+        odysseyDesignTokens={odysseyDesignTokens}
+        hasTopSection={typeof onActionClick === "function" || !!auxiliaryText}
+      >
+        {image && (
+          <ImageContainer odysseyDesignTokens={odysseyDesignTokens}>
+            {image}
+          </ImageContainer>
+        )}
 
-          {overline && <Support component="div">{overline}</Support>}
-          {title && <Heading5 component="div">{title}</Heading5>}
-          {description && (
-            <Paragraph color="textSecondary">{description}</Paragraph>
-          )}
-          {children && (
-            <ChildrenContainer odysseyDesignTokens={odysseyDesignTokens}>
-              {children}
-            </ChildrenContainer>
-          )}
-        </Box>
+        {overline && <Support component="div">{overline}</Support>}
+        {title && <Heading5 component="div">{title}</Heading5>}
+        {description && (
+          <Paragraph color="textSecondary">{description}</Paragraph>
+        )}
+        {children && (
+          <ChildrenContainer odysseyDesignTokens={odysseyDesignTokens}>
+            {children}
+          </ChildrenContainer>
+        )}
       </ContentContainer>
     ),
     [
       image,
-      odysseyDesignTokens,
+      auxiliaryText,
       onActionClick,
+      odysseyDesignTokens,
       overline,
       title,
       description,
@@ -168,14 +286,23 @@ const AppTile = ({
     ],
   );
 
-  return (
-    <MuiCard className="isClickable">
-      <MuiCardActionArea onClick={onClick}>{tileContent}</MuiCardActionArea>
-
+  return isLoading ? (
+    <LoadingTile
+      image={Boolean(image)}
+      overline={Boolean(overline)}
+      title={Boolean(title)}
+      description={Boolean(description)}
+      children={Boolean(children)}
+      hasTopSection={typeof onActionClick === "function" || !!auxiliaryText}
+    />
+  ) : (
+    <StyledMuiCard odysseyDesignTokens={odysseyDesignTokens}>
       {(onActionClick || auxiliaryText) && (
         <ActionContainer odysseyDesignTokens={odysseyDesignTokens}>
-          {auxiliaryText && <Subordinate>{auxiliaryText}</Subordinate>}
-          {onActionClick && (
+          {auxiliaryText && !isLoading && (
+            <Subordinate>{auxiliaryText}</Subordinate>
+          )}
+          {onActionClick && !isLoading && (
             <Button
               endIcon={actionIcon}
               ariaLabel={actionLabel}
@@ -190,7 +317,9 @@ const AppTile = ({
           )}
         </ActionContainer>
       )}
-    </MuiCard>
+
+      <MuiCardActionArea onClick={onClick}>{tileContent}</MuiCardActionArea>
+    </StyledMuiCard>
   );
 };
 

package/src/labs/DataView/CardLayoutContent.tsx

@@ -29,7 +29,6 @@ import {
 import { RowActions } from "./RowActions";
 import { DataCard } from "./DataCard";
 import { CardLayout, CardLayoutProps, UniversalProps } from "./componentTypes";
-import { DetailPanel } from "./DetailPanel";
 
 export type CardLayoutContentProps = {
   currentLayout: CardLayout;
@@ -100,7 +99,7 @@ const StackContainer = styled("div", {
 }>(({ odysseyDesignTokens, currentLayout, maxGridColumns }) => ({
   display: currentLayout === "list" ? "flex" : "grid",
   flexDirection: "column",
-  gap: odysseyDesignTokens.Spacing5,
+  columnGap: odysseyDesignTokens.Spacing5,
 
   ...(currentLayout === "grid" && {
     [`@media (max-width: 720px)`]: {
@@ -187,8 +186,14 @@ const CardLayoutContent = ({
           ) : (
             <>
               {data.map((row: MRT_RowData, index: number) => {
-                const { overline, title, description, image, children } =
-                  cardLayoutOptions.itemProps(row);
+                const {
+                  overline,
+                  title,
+                  description,
+                  image,
+                  children,
+                  variant,
+                } = cardLayoutOptions.itemProps(row);
                 const currentIndex =
                   index + (pagination.pageIndex - 1) * pagination.pageSize;
 
@@ -209,16 +214,8 @@ const CardLayoutContent = ({
                     }
                     children={children}
                     description={description}
-                    detailPanel={
-                      cardLayoutOptions.renderDetailPanel ? (
-                        <DetailPanel
-                          row={row}
-                          renderDetailPanel={
-                            cardLayoutOptions.renderDetailPanel
-                          }
-                        />
-                      ) : undefined
-                    }
+                    renderDetailPanel={cardLayoutOptions.renderDetailPanel}
+                    row={row}
                     image={image}
                     key={row.id}
                     menuButtonChildren={
@@ -242,6 +239,7 @@ const CardLayoutContent = ({
                     }
                     overline={overline}
                     title={title}
+                    variant={variant}
                   />
                 );
               })}

package/src/labs/DataView/DataCard.tsx

@@ -42,16 +42,23 @@ import {
   ChevronUpIcon,
   MoreIcon,
 } from "../../icons.generated";
+import { CardLayoutProps } from "./componentTypes";
+import { MRT_RowData } from "material-react-table";
 
-export const CARD_IMAGE_HEIGHT = "64px";
+export const CARD_IMAGE_SIZE = "64px";
+export const CARD_IMAGE_SIZE_COMPACT = "48px";
+
+export const cardVariantValues = ["tile", "stack", "compact"] as const;
 
 export type DataCardProps = {
   children?: ReactNode;
   description?: string;
-  detailPanel?: ReactNode;
   image?: ReactElement;
   overline?: string;
+  renderDetailPanel?: CardLayoutProps["renderDetailPanel"];
+  row: MRT_RowData;
   title?: string;
+  variant?: (typeof cardVariantValues)[number];
 } & (
   | {
       Accessory?: never;
@@ -68,45 +75,76 @@ export type DataCardProps = {
 );
 
 const AccessoryContainer = styled("div", {
-  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+  shouldForwardProp: (prop) =>
+    prop !== "odysseyDesignTokens" && prop !== "variant",
 })<{
   odysseyDesignTokens: DesignTokens;
-}>(({ odysseyDesignTokens }) => ({
+  variant: (typeof cardVariantValues)[number];
+}>(({ odysseyDesignTokens, variant }) => ({
   display: "flex",
-  flexDirection: "column",
+  flexDirection: variant === "compact" ? "row" : "column",
   alignItems: "center",
   gap: odysseyDesignTokens.Spacing2,
+  height: variant === "compact" ? CARD_IMAGE_SIZE_COMPACT : "auto",
 }));
 
 const ImageContainer = styled("div", {
   shouldForwardProp: (prop) =>
-    prop !== "odysseyDesignTokens" && prop !== "hasMenuButtonChildren",
+    prop !== "odysseyDesignTokens" &&
+    prop !== "hasMenuButtonChildren" &&
+    prop !== "variant",
 })<{
   odysseyDesignTokens: DesignTokens;
   hasMenuButtonChildren: boolean;
-}>(({ odysseyDesignTokens, hasMenuButtonChildren }) => ({
+  variant: (typeof cardVariantValues)[number];
+}>(({ odysseyDesignTokens, hasMenuButtonChildren, variant }) => ({
   display: "flex",
   alignItems: "flex-start",
-  maxHeight: `${CARD_IMAGE_HEIGHT}`,
-  marginBlockEnd: odysseyDesignTokens.Spacing5,
+  height: variant === "compact" ? CARD_IMAGE_SIZE_COMPACT : CARD_IMAGE_SIZE,
+  maxHeight: variant === "compact" ? CARD_IMAGE_SIZE_COMPACT : CARD_IMAGE_SIZE,
+  marginBlockEnd: variant === "tile" ? odysseyDesignTokens.Spacing5 : 0,
   paddingRight: hasMenuButtonChildren ? odysseyDesignTokens.Spacing5 : 0,
 }));
 
 const MenuButtonContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
-})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
+})<{
+  odysseyDesignTokens: DesignTokens;
+  variant: (typeof cardVariantValues)[number];
+}>(({ odysseyDesignTokens, variant }) => ({
   position: "absolute",
   right: odysseyDesignTokens.Spacing3,
   top: odysseyDesignTokens.Spacing3,
+  height: variant === "compact" ? CARD_IMAGE_SIZE_COMPACT : "auto",
+  display: "flex",
+  alignItems: "center",
 }));
 
-const CardContentContainer = styled("div", {
+const CardInnerContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
 })<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
   display: "flex",
   gap: odysseyDesignTokens.Spacing3,
 }));
 
+const CardImageAndContentContainer = styled("div", {
+  shouldForwardProp: (prop) => prop !== "variant",
+})<{ variant: (typeof cardVariantValues)[number] }>(({ variant }) => ({
+  display: "flex",
+  flexDirection: variant === "tile" ? "column" : "row",
+}));
+
+const CardContent = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{
+  odysseyDesignTokens: DesignTokens;
+  variant: (typeof cardVariantValues)[number];
+}>(({ odysseyDesignTokens, variant }) => ({
+  "& > .MuiTypography-h5": {
+    marginBlockEnd: `${variant === "compact" ? odysseyDesignTokens.Spacing1 : odysseyDesignTokens.Spacing3} !important`,
+  },
+}));
+
 const CardChildrenContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
 })<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({
@@ -115,6 +153,9 @@ const CardChildrenContainer = styled("div", {
   },
 }));
 
+const AccessoryPlaceholder = styled(MuiIconButton)(() => ({
+  visibility: "hidden",
+}));
 const buttonProviderValue = { isFullWidth: true };
 
 const DataCard = ({
@@ -122,95 +163,118 @@ const DataCard = ({
   button,
   children,
   description,
-  detailPanel,
   image,
   menuButtonChildren,
   onClick,
   overline,
+  renderDetailPanel,
+  row,
   title,
+  variant = "tile",
 }: DataCardProps) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const { t } = useTranslation();
 
   const [isDetailPanelOpen, setIsDetailPanelOpen] = useState<boolean>(false);
 
-  const Accessory = useMemo(
-    () => (
-      <AccessoryContainer odysseyDesignTokens={odysseyDesignTokens}>
+  const ExpansionToggle = useMemo(() => {
+    return renderDetailPanel?.({ row }) ? (
+      <MuiTooltip
+        title={
+          isDetailPanelOpen
+            ? t("table.rowexpansion.collapse")
+            : t("table.rowexpansion.expand")
+        }
+      >
+        <MuiIconButton
+          children={isDetailPanelOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
+          onClick={() => setIsDetailPanelOpen(!isDetailPanelOpen)}
+          aria-label={
+            isDetailPanelOpen
+              ? t("table.rowexpansion.collapse")
+              : t("table.rowexpansion.expand")
+          }
+        />
+      </MuiTooltip>
+    ) : (
+      <AccessoryPlaceholder disabled>
+        <ChevronDownIcon />
+      </AccessoryPlaceholder>
+    );
+  }, [isDetailPanelOpen, renderDetailPanel, row, t]);
+
+  const Accessory = useMemo(() => {
+    return (
+      <AccessoryContainer
+        odysseyDesignTokens={odysseyDesignTokens}
+        variant={variant}
+      >
         {AccessoryProp}
-        {detailPanel && (
-          <MuiTooltip
-            title={
-              isDetailPanelOpen
-                ? t("table.rowexpansion.collapse")
-                : t("table.rowexpansion.expand")
-            }
-          >
-            <MuiIconButton
-              children={
-                isDetailPanelOpen ? <ChevronUpIcon /> : <ChevronDownIcon />
-              }
-              onClick={() => setIsDetailPanelOpen(!isDetailPanelOpen)}
-              aria-label={
-                isDetailPanelOpen
-                  ? t("table.rowexpansion.collapse")
-                  : t("table.rowexpansion.expand")
-              }
-            />
-          </MuiTooltip>
-        )}
+        {renderDetailPanel && ExpansionToggle}
       </AccessoryContainer>
-    ),
-    [AccessoryProp, detailPanel, isDetailPanelOpen, odysseyDesignTokens, t],
-  );
+    );
+  }, [
+    AccessoryProp,
+    ExpansionToggle,
+    odysseyDesignTokens,
+    renderDetailPanel,
+    variant,
+  ]);
 
   const cardContent = useMemo(
     () => (
-      <CardContentContainer odysseyDesignTokens={odysseyDesignTokens}>
-        {(AccessoryProp || detailPanel) && <Box>{Accessory}</Box>}
-        <Box>
+      <CardInnerContainer odysseyDesignTokens={odysseyDesignTokens}>
+        {(AccessoryProp || renderDetailPanel) && <Box>{Accessory}</Box>}
+        <CardImageAndContentContainer variant={variant}>
           {image && (
             <ImageContainer
               odysseyDesignTokens={odysseyDesignTokens}
               hasMenuButtonChildren={Boolean(menuButtonChildren)}
+              variant={variant}
             >
               {image}
             </ImageContainer>
           )}
 
-          {overline && <Support component="div">{overline}</Support>}
-          {title && <Heading5 component="div">{title}</Heading5>}
-          {description && (
-            <Paragraph color="textSecondary">{description}</Paragraph>
-          )}
+          <CardContent
+            odysseyDesignTokens={odysseyDesignTokens}
+            variant={variant}
+          >
+            {overline && <Support component="div">{overline}</Support>}
+            {title && <Heading5 component="div">{title}</Heading5>}
+            {description && (
+              <Paragraph color="textSecondary">{description}</Paragraph>
+            )}
 
-          {button && (
-            <MuiCardActions>
-              <ButtonContext.Provider value={buttonProviderValue}>
-                {button}
-              </ButtonContext.Provider>
-            </MuiCardActions>
-          )}
+            {button && (
+              <MuiCardActions>
+                <ButtonContext.Provider value={buttonProviderValue}>
+                  {button}
+                </ButtonContext.Provider>
+              </MuiCardActions>
+            )}
 
-          {children && (
-            <CardChildrenContainer odysseyDesignTokens={odysseyDesignTokens}>
-              {children}
-            </CardChildrenContainer>
-          )}
+            {children && (
+              <CardChildrenContainer odysseyDesignTokens={odysseyDesignTokens}>
+                {children}
+              </CardChildrenContainer>
+            )}
 
-          {detailPanel && isDetailPanelOpen && (
-            <CardChildrenContainer odysseyDesignTokens={odysseyDesignTokens}>
-              {detailPanel}
-            </CardChildrenContainer>
-          )}
-        </Box>
-      </CardContentContainer>
+            {renderDetailPanel && isDetailPanelOpen && (
+              <CardChildrenContainer odysseyDesignTokens={odysseyDesignTokens}>
+                {renderDetailPanel({ row })}
+              </CardChildrenContainer>
+            )}
+          </CardContent>
+        </CardImageAndContentContainer>
+      </CardInnerContainer>
     ),
     [
       odysseyDesignTokens,
       AccessoryProp,
-      detailPanel,
+      renderDetailPanel,
       Accessory,
+      variant,
       image,
       menuButtonChildren,
       overline,
@@ -219,12 +283,13 @@ const DataCard = ({
       button,
       children,
       isDetailPanelOpen,
+      row,
     ],
   );
 
   return (
     <MuiCard
-      className={`${onClick ? "isClickable" : ""} ${Accessory ? "hasAccessory" : ""}`}
+      className={`${onClick ? "isClickable" : ""} ${Accessory ? "hasAccessory" : ""} ods-card-${variant}`}
     >
       {onClick ? (
         <MuiCardActionArea onClick={onClick}>{cardContent}</MuiCardActionArea>
@@ -233,7 +298,10 @@ const DataCard = ({
       )}
 
       {menuButtonChildren && (
-        <MenuButtonContainer odysseyDesignTokens={odysseyDesignTokens}>
+        <MenuButtonContainer
+          odysseyDesignTokens={odysseyDesignTokens}
+          variant={variant}
+        >
           <MenuButton
             endIcon={<MoreIcon />}
             ariaLabel={t("table.moreactions.arialabel")}