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

Author: Your Name

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

@@ -1,15 +1,16 @@
 import { CardProps } from "@mui/material";
 import { SdsMinimalButtonProps } from "../Button";
+import { ReactNode } from "react";
 
-interface BaseContentCardProps extends CardProps {
+export interface BaseContentCardProps extends CardProps {
   sdsType?: "wide" | "narrow";
-  overlineText?: string;
-  titleText?: string;
-  subtitleText?: string;
-  metadataText?: string;
+  overlineText?: ReactNode;
+  titleText?: ReactNode;
+  subtitleText?: ReactNode;
+  metadataText?: ReactNode;
   boundingBox?: boolean;
   decorativeBorder?: boolean;
-  children?: React.ReactNode;
+  children?: ReactNode;
   clickableCard?: boolean;
   clickableCardProps?: Partial<SdsMinimalButtonProps>;
   buttonsPosition?: "left" | "right";
@@ -29,7 +30,7 @@ interface BaseContentCardProps extends CardProps {
 
 export interface ImageContentCardProps extends BaseContentCardProps {
   visualElementType: "image";
-  image?: React.ReactNode;
+  image?: ReactNode;
   imagePosition?: "left" | "right";
   imagePadding?: boolean;
   imageSize?: number;
@@ -38,7 +39,7 @@ export interface ImageContentCardProps extends BaseContentCardProps {
 
 export interface IconContentCardProps extends BaseContentCardProps {
   visualElementType: "icon";
-  icon?: React.ReactNode;
+  icon?: ReactNode;
   image?: never;
   imageSize?: never;
   imagePosition?: never;

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

@@ -128,4 +128,13 @@ describe("ContentCard", () => {
     render(<Test sdsType="narrow" />);
     expect(screen.getByTestId(CONTENT_CARD_TEST_ID)).toBeInTheDocument();
   });
+
+  it("renders content card with ReactNode as titleText", () => {
+    const CustomTitle = () => (
+      <span data-testid="custom-title">Custom Title</span>
+    );
+    render(<Test titleText={<CustomTitle />} />);
+    expect(screen.getByTestId("custom-title")).toBeInTheDocument();
+    expect(screen.getByText("Custom Title")).toBeInTheDocument();
+  });
 });

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

@@ -1,4 +1,4 @@
-import { forwardRef } from "react";
+import { forwardRef, ReactNode } from "react";
 import {
   StyledOverlineText,
   StyledTitleText,
@@ -7,12 +7,13 @@ import {
   StyledTitleWrapper,
 } from "./style";
 import { EMPTY_OBJECT } from "src/common/utils";
+import { BaseContentCardProps } from "../../ContentCard.types";
 
-export interface ContentCardTitleProps {
-  overlineText?: string;
-  titleText?: string;
-  subtitleText?: string;
-  metadataText?: string;
+export interface ContentCardTitleProps
+  extends Pick<
+    BaseContentCardProps,
+    "overlineText" | "titleText" | "subtitleText" | "metadataText"
+  > {
   classes?: {
     cardHeader?: string;
     cardOverline?: string;
@@ -22,9 +23,35 @@ export interface ContentCardTitleProps {
   };
 }
 
-/**
- * @see https://mui.com/material-ui/react-dialog/
- */
+interface TextComponentProps {
+  text: string | ReactNode;
+  className?: string;
+}
+
+type StyledTextComponentProps = {
+  className?: string;
+  children: ReactNode;
+};
+
+const createTextComponent = (
+  StyledComponent: React.ComponentType<StyledTextComponentProps>
+) => {
+  return ({ text, className }: TextComponentProps) => {
+    if (!text) return null;
+
+    return typeof text === "string" ? (
+      <StyledComponent className={className}>{text}</StyledComponent>
+    ) : (
+      text
+    );
+  };
+};
+
+const OverlineText = createTextComponent(StyledOverlineText);
+const TitleText = createTextComponent(StyledTitleText);
+const SubtitleText = createTextComponent(StyledSubtitleText);
+const MetadataText = createTextComponent(StyledMetadataText);
+
 const ContentCardTitle = forwardRef<HTMLDivElement, ContentCardTitleProps>(
   function ContentCardTitle(props: ContentCardTitleProps, ref): JSX.Element {
     const {
@@ -46,25 +73,11 @@ const ContentCardTitle = forwardRef<HTMLDivElement, ContentCardTitleProps>(
     return (
       <div ref={ref}>
         <StyledTitleWrapper className={cardHeader}>
-          {overlineText && (
-            <StyledOverlineText className={cardOverline}>
-              {overlineText}
-            </StyledOverlineText>
-          )}
-          {titleText && (
-            <StyledTitleText className={cardTitle}>{titleText}</StyledTitleText>
-          )}
-          {subtitleText && (
-            <StyledSubtitleText className={cardSubtitle}>
-              {subtitleText}
-            </StyledSubtitleText>
-          )}
+          <OverlineText text={overlineText} className={cardOverline} />
+          <TitleText text={titleText} className={cardTitle} />
+          <SubtitleText text={subtitleText} className={cardSubtitle} />
         </StyledTitleWrapper>
-        {metadataText && (
-          <StyledMetadataText className={cardMetadata}>
-            {metadataText}
-          </StyledMetadataText>
-        )}
+        <MetadataText text={metadataText} className={cardMetadata} />
       </div>
     );
   }

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

@@ -22,11 +22,21 @@ import {
   CONTENT_CARD_WIDE_TYPE_MIN_WIDTH_LOW_BOUNDARY,
   ContentCardProps,
 } from "./ContentCard.types";
+import {
+  StyledTitleText,
+  StyledSubtitleText,
+  StyledMetadataText,
+  StyledOverlineText,
+} from "./components/ContentCardTitle/style";
 
 export {
   ContentCardActions,
   StyledContentCardBody as ContentCardBody,
   CardMedia as ContentCardMedia,
+  StyledTitleText as ContentCardTitle,
+  StyledSubtitleText as ContentCardSubtitle,
+  StyledMetadataText as ContentCardMetadata,
+  StyledOverlineText as ContentCardOverline,
 };
 
 export type {