Merge branch 'main' of https://github.com/chanzuckerberg/sci-components into prod

Author: Your Name

packages/components/src/common/styles-dictionary/css/variables.css

@@ -20,7 +20,7 @@ type ButtonTypeMap = {
 
 type ButtonSize = "small" | "medium" | "large";
 
-interface BaseButtonProps {
+interface BaseButtonProps extends RawButtonProps {
   children?: React.ReactNode;
   isAllCaps?: boolean;
 }
@@ -51,7 +51,7 @@ export type SdsProps =
   | SdsMinimalButtonProps
   | SdsButtonProps;
 
-export type ButtonProps = RawButtonProps & SdsProps;
+export type ButtonProps = SdsProps;
 
 /**
  * (masoudmanson): The MUI variant prop is determined by the sdsType prop.

packages/components/src/core/Button/index.tsx

@@ -1,4 +1,5 @@
 import { CardProps } from "@mui/material";
+import { ButtonProps } from "../Button";
 
 interface BaseContentCardProps extends CardProps {
   sdsType?: "wide" | "narrow";
@@ -10,7 +11,20 @@ interface BaseContentCardProps extends CardProps {
   decorativeBorder?: boolean;
   children?: React.ReactNode;
   clickableCard?: boolean;
+  clickableCardProps?: ButtonProps;
   buttonsPosition?: "left" | "right";
+  classes?: {
+    cardPaper?: string;
+    cardContent?: string;
+    cardHeader?: string;
+    cardMedia?: string;
+    cardOverline?: string;
+    cardTitle?: string;
+    cardSubtitle?: string;
+    cardMetadata?: string;
+    cardActions?: string;
+    clickableCardButton?: string;
+  };
 }
 
 export interface ImageContentCardProps extends BaseContentCardProps {

packages/components/src/core/ContentCard/ContentCard.types.ts

@@ -47,6 +47,16 @@ export default {
         defaultValue: { summary: "left" },
       },
     },
+    classes: {
+      control: {
+        type: "object",
+      },
+      description:
+        "Defines the css classes to be applied to the card components.",
+      table: {
+        type: { summary: "Experimental" },
+      },
+    },
     clickableCard: {
       control: {
         type: "boolean",
@@ -57,6 +67,16 @@ export default {
         defaultValue: { summary: "false" },
       },
     },
+    clickableCardProps: {
+      control: {
+        type: "object",
+      },
+      description:
+        "If clickableCard is set to true, this prop accepts a ButtonProps object to be passed to the button.",
+      table: {
+        type: { summary: "ButtonProps" },
+      },
+    },
     decorativeBorder: {
       control: {
         type: "boolean",
@@ -187,6 +207,10 @@ export const Default = {
     buttons: [CONTENT_CARD_BUTTONS_OPTIONS[2], CONTENT_CARD_BUTTONS_OPTIONS[5]],
     buttonsPosition: "left",
     clickableCard: false,
+    clickableCardProps: {
+      component: "a",
+      href: "https://chanzuckerberg.com",
+    },
     decorativeBorder: false,
     icon: CONTENT_CARD_ICON_OPTIONS[1],
     image: CONTENT_CARD_IMAGE_OPTIONS[4],

packages/components/src/core/ContentCard/__storybook__/index.stories.tsx

@@ -2,7 +2,7 @@
 
 exports[`ContentCard Default story renders snapshot 1`] = `
 <div
-  class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-hu9jj8-MuiPaper-root-MuiCard-root"
+  class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-ok5j5u-MuiPaper-root-MuiCard-root"
 >
   <div
     class="css-20z69m"
@@ -14,7 +14,7 @@ exports[`ContentCard Default story renders snapshot 1`] = `
     />
   </div>
   <div
-    class="css-u4mrcz"
+    class="css-15wqe76"
   >
     <div>
       <div

packages/components/src/core/ContentCard/__tests__/__snapshots__/index.test.tsx.snap

@@ -6,10 +6,14 @@ import {
   showWarningIfFirstOccurence,
 } from "src/common/warnings";
 import { ContentCardProps } from "../..";
+import { EMPTY_OBJECT } from "src/common/utils";
 
 export interface ContentCardActionsProps {
   buttonsPosition?: "left" | "right";
   clickableCard?: ContentCardProps["clickableCard"];
+  classes?: {
+    cardActions?: string;
+  };
   children:
     | React.ReactElement<ButtonProps>
     | Array<React.ReactElement<ButtonProps>>;
@@ -34,7 +38,14 @@ const ContentCardActions = forwardRef<HTMLDivElement, ContentCardActionsProps>(
     props: ContentCardActionsProps,
     ref
   ): JSX.Element | null {
-    const { buttonsPosition, clickableCard, children } = props;
+    const {
+      buttonsPosition,
+      clickableCard,
+      children,
+      classes = EMPTY_OBJECT,
+    } = props;
+
+    const { cardActions }: ContentCardActionsProps["classes"] = classes;
 
     /**
      * (masoudmanson):
@@ -72,12 +83,16 @@ const ContentCardActions = forwardRef<HTMLDivElement, ContentCardActionsProps>(
       }
 
       return (
-        <StyledCardActions ref={ref} buttonsPosition={buttonsPosition}>
+        <StyledCardActions
+          ref={ref}
+          buttonsPosition={buttonsPosition}
+          className={cardActions}
+        >
           {[
             React.cloneElement(
               clickableCardButton as React.ReactElement<ButtonProps>,
               {
-                component: "a",
+                component: "div",
                 ...(clickableCardButton?.props as ButtonProps),
               }
             ),
@@ -87,7 +102,11 @@ const ContentCardActions = forwardRef<HTMLDivElement, ContentCardActionsProps>(
     }
 
     return (
-      <StyledCardActions ref={ref} buttonsPosition={buttonsPosition}>
+      <StyledCardActions
+        ref={ref}
+        buttonsPosition={buttonsPosition}
+        className={cardActions}
+      >
         {validChildren}
       </StyledCardActions>
     );

packages/components/src/core/ContentCard/components/ContentCardActions/index.tsx

@@ -10,6 +10,7 @@ export interface ContentCardImageMediaProps {
   sdsType: ContentCardProps["sdsType"];
   imageSize: ContentCardProps["imageSize"];
   image?: ContentCardProps["image"];
+  className?: string;
 }
 
 /**
@@ -21,8 +22,8 @@ const ContentCardImageMedia = forwardRef<
 >(function ContentCardImageMedia(
   props: ContentCardImageMediaProps,
   ref
-): JSX.Element {
-  const { image, imageSize, sdsType } = props;
+): JSX.Element | null {
+  const { image, imageSize, sdsType, className } = props;
 
   /**
    * (masoudmanson): These styles makes the image responsive and
@@ -41,6 +42,8 @@ const ContentCardImageMedia = forwardRef<
    * (masoudmanson): We need to make sure the image is wrapped in a CardMedia component.
    * - If it's a string, wrap it in CardMedia with proper styles.
    * - If it's already a CardMedia component, clone it and apply the styles.
+   * - If it's a valid element, clone it and apply the styles.
+   * - If it's null, return null.
    */
   const imageElement =
     typeof image === "string" ? (
@@ -58,10 +61,18 @@ const ContentCardImageMedia = forwardRef<
           ...imageMediaStyles,
         },
       })
+    ) : React.isValidElement(image) ? (
+      React.cloneElement(image as React.ReactElement, {
+        style: {
+          ...imageMediaStyles,
+          objectFit: "cover",
+          objectPosition: "center",
+        },
+      })
     ) : null;
 
   return (
-    <StyledImageMediaWrapper ref={ref} {...props}>
+    <StyledImageMediaWrapper ref={ref} {...props} className={className}>
       {imageElement}
     </StyledImageMediaWrapper>
   );

packages/components/src/core/ContentCard/components/ContentCardImageMedia/index.tsx

@@ -6,34 +6,64 @@ import {
   StyledMetadataText,
   StyledTitleWrapper,
 } from "./style";
+import { EMPTY_OBJECT } from "src/common/utils";
 
 export interface ContentCardTitleProps {
   overlineText?: string;
   titleText?: string;
   subtitleText?: string;
   metadataText?: string;
+  classes?: {
+    cardHeader?: string;
+    cardOverline?: string;
+    cardTitle?: string;
+    cardSubtitle?: string;
+    cardMetadata?: string;
+  };
 }
 
 /**
  * @see https://mui.com/material-ui/react-dialog/
  */
 const ContentCardTitle = forwardRef<HTMLDivElement, ContentCardTitleProps>(
   function ContentCardTitle(props: ContentCardTitleProps, ref): JSX.Element {
-    const { overlineText, titleText, subtitleText, metadataText } = props;
+    const {
+      overlineText,
+      titleText,
+      subtitleText,
+      metadataText,
+      classes = EMPTY_OBJECT,
+    } = props;
+
+    const {
+      cardHeader,
+      cardOverline,
+      cardTitle,
+      cardSubtitle,
+      cardMetadata,
+    }: ContentCardTitleProps["classes"] = classes;
 
     return (
       <div ref={ref}>
-        <StyledTitleWrapper>
+        <StyledTitleWrapper className={cardHeader}>
           {overlineText && (
-            <StyledOverlineText>{overlineText}</StyledOverlineText>
+            <StyledOverlineText className={cardOverline}>
+              {overlineText}
+            </StyledOverlineText>
+          )}
+          {titleText && (
+            <StyledTitleText className={cardTitle}>{titleText}</StyledTitleText>
           )}
-          {titleText && <StyledTitleText>{titleText}</StyledTitleText>}
           {subtitleText && (
-            <StyledSubtitleText>{subtitleText}</StyledSubtitleText>
+            <StyledSubtitleText className={cardSubtitle}>
+              {subtitleText}
+            </StyledSubtitleText>
           )}
         </StyledTitleWrapper>
         {metadataText && (
-          <StyledMetadataText>{metadataText}</StyledMetadataText>
+          <StyledMetadataText className={cardMetadata}>
+            {metadataText}
+          </StyledMetadataText>
         )}
       </div>
     );