feat(contentcard): first implementation

chanzuckerberg · Feb 27, 2025 · 715d3b6 · 715d3b6
1 parent 19c0a39
commit 715d3b6
Show file tree

Hide file tree

Showing 39 changed files with 1,673 additions and 133 deletions.
diff --git a/packages/components/src/common/styles-dictionary/css/variables.css b/packages/components/src/common/styles-dictionary/css/variables.css
@@ -96,16 +96,18 @@
     --sds-color-semantic-base-background-secondary: #f3f3f3;
     --sds-color-semantic-base-background-secondary-inverse: #3b3b3b;
     --sds-color-semantic-base-background-tertiary: #dfdfdf;
-    --sds-color-semantic-base-border: #6c6c6c;
-    --sds-color-semantic-base-border-disabled: #c3c3c3;
-    --sds-color-semantic-base-border-disabled-inverse: #6c6c6c;
-    --sds-color-semantic-base-border-hover: #000000;
-    --sds-color-semantic-base-border-hover-inverse: #ffffff;
-    --sds-color-semantic-base-border-inverse: #c3c3c3;
-    --sds-color-semantic-base-border-on-fill: #ffffff;
-    --sds-color-semantic-base-border-pressed: #000000;
-    --sds-color-semantic-base-border-pressed-inverse: #ffffff;
-    --sds-color-semantic-base-border-table: #c3c3c3;
+    --sds-color-semantic-base-border-primary: #6c6c6c;
+    --sds-color-semantic-base-border-primary-disabled: #c3c3c3;
+    --sds-color-semantic-base-border-primary-disabled-inverse: #6c6c6c;
+    --sds-color-semantic-base-border-primary-hover: #000000;
+    --sds-color-semantic-base-border-primary-hover-inverse: #ffffff;
+    --sds-color-semantic-base-border-primary-inverse: #c3c3c3;
+    --sds-color-semantic-base-border-primary-on-fill: #ffffff;
+    --sds-color-semantic-base-border-primary-pressed: #000000;
+    --sds-color-semantic-base-border-primary-pressed-inverse: #ffffff;
+    --sds-color-semantic-base-border-secondary: #c3c3c3;
+    --sds-color-semantic-base-border-secondary-hover: #969696;
+    --sds-color-semantic-base-border-secondary-pressed: #3b3b3b;
     --sds-color-semantic-base-divider: #dfdfdf;
     --sds-color-semantic-base-divider-inverse: #6c6c6c;
     --sds-color-semantic-base-fill-disabled: #dfdfdf;
@@ -606,16 +608,18 @@
     --sds-color-semantic-base-background-secondary: #333333;
     --sds-color-semantic-base-background-secondary-inverse: #ededed;
     --sds-color-semantic-base-background-tertiary: #494949;
-    --sds-color-semantic-base-border: #cdcdcd;
-    --sds-color-semantic-base-border-disabled: #696969;
-    --sds-color-semantic-base-border-disabled-inverse: #cdcdcd;
-    --sds-color-semantic-base-border-hover: #ffffff;
-    --sds-color-semantic-base-border-hover-inverse: #000000;
-    --sds-color-semantic-base-border-inverse: #696969;
-    --sds-color-semantic-base-border-on-fill: #000000;
-    --sds-color-semantic-base-border-pressed: #ffffff;
-    --sds-color-semantic-base-border-pressed-inverse: #000000;
-    --sds-color-semantic-base-border-table: #696969;
+    --sds-color-semantic-base-border-primary: #cdcdcd;
+    --sds-color-semantic-base-border-primary-disabled: #696969;
+    --sds-color-semantic-base-border-primary-disabled-inverse: #cdcdcd;
+    --sds-color-semantic-base-border-primary-hover: #ffffff;
+    --sds-color-semantic-base-border-primary-hover-inverse: #000000;
+    --sds-color-semantic-base-border-primary-inverse: #696969;
+    --sds-color-semantic-base-border-primary-on-fill: #000000;
+    --sds-color-semantic-base-border-primary-pressed: #ffffff;
+    --sds-color-semantic-base-border-primary-pressed-inverse: #000000;
+    --sds-color-semantic-base-border-secondary: #696969;
+    --sds-color-semantic-base-border-secondary-hover: #aaaaaa;
+    --sds-color-semantic-base-border-secondary-pressed: #ededed;
     --sds-color-semantic-base-divider: #494949;
     --sds-color-semantic-base-divider-inverse: #cdcdcd;
     --sds-color-semantic-base-fill-disabled: #494949;

diff --git a/packages/components/src/common/styles-dictionary/design-tokens/colors.json b/packages/components/src/common/styles-dictionary/design-tokens/colors.json
@@ -98,46 +98,58 @@
             "value": "{sds.color.primitive.gray.200.value}",
             "darkValue": "{sds.color.primitive.gray.200.darkValue}"
           },
-          "border": {
+          "borderPrimary": {
             "value": "{sds.color.primitive.gray.600.value}",
             "darkValue": "{sds.color.primitive.gray.600.darkValue}"
           },
-          "border-disabled": {
+          "border-primary-disabled": {
             "value": "{sds.color.primitive.gray.300.value}",
             "darkValue": "{sds.color.primitive.gray.300.darkValue}"
           },
-          "border-disabled-inverse": {
+          "border-primary-disabled-inverse": {
             "value": "{sds.color.primitive.gray.600.value}",
             "darkValue": "{sds.color.primitive.gray.600.darkValue}"
           },
-          "border-hover": {
+          "border-primary-hover": {
             "value": "{sds.color.primitive.gray.900.value}",
             "darkValue": "{sds.color.primitive.gray.900.darkValue}"
           },
-          "border-hover-inverse": {
+          "border-primary-hover-inverse": {
             "value": "{sds.color.primitive.gray.50.value}",
             "darkValue": "{sds.color.primitive.gray.50.darkValue}"
           },
-          "border-inverse": {
+          "border-primary-inverse": {
             "value": "{sds.color.primitive.gray.300.value}",
             "darkValue": "{sds.color.primitive.gray.300.darkValue}"
           },
-          "border-on-fill": {
+          "border-primary-on-fill": {
             "value": "{sds.color.primitive.gray.50.value}",
             "darkValue": "{sds.color.primitive.gray.50.darkValue}"
           },
-          "border-pressed": {
+          "border-primary-pressed": {
             "value": "{sds.color.primitive.gray.900.value}",
             "darkValue": "{sds.color.primitive.gray.900.darkValue}"
           },
-          "border-pressed-inverse": {
+          "border-primary-pressed-inverse": {
             "value": "{sds.color.primitive.gray.50.value}",
             "darkValue": "{sds.color.primitive.gray.50.darkValue}"
           },
-          "border-table": {
+          "border-secondary": {
             "value": "{sds.color.primitive.gray.300.value}",
             "darkValue": "{sds.color.primitive.gray.300.darkValue}"
           },
+          "border-secondary-hover": {
+            "value": "{sds.color.primitive.gray.500.value}",
+            "darkValue": "{sds.color.primitive.gray.500.darkValue}"
+          },
+          "border-secondary-pressed": {
+            "value": "{sds.color.primitive.gray.700.value}",
+            "darkValue": "{sds.color.primitive.gray.700.darkValue}"
+          },
+          "border-secondary-disabled": {
+            "value": "{sds.color.primitive.gray.200.value}",
+            "darkValue": "{sds.color.primitive.gray.200.darkValue}"
+          },
           "divider": {
             "value": "{sds.color.primitive.gray.200.value}",
             "darkValue": "{sds.color.primitive.gray.200.darkValue}"

diff --git a/packages/components/src/common/styles-dictionary/json/tailwind.json b/packages/components/src/common/styles-dictionary/json/tailwind.json
@@ -1163,16 +1163,18 @@
       "sds-color-semantic-base-background-secondary": "#333333",
       "sds-color-semantic-base-background-secondary-inverse": "#ededed",
       "sds-color-semantic-base-background-tertiary": "#494949",
-      "sds-color-semantic-base-border": "#cdcdcd",
-      "sds-color-semantic-base-border-disabled": "#696969",
-      "sds-color-semantic-base-border-disabled-inverse": "#cdcdcd",
-      "sds-color-semantic-base-border-hover": "#ffffff",
-      "sds-color-semantic-base-border-hover-inverse": "#000000",
-      "sds-color-semantic-base-border-inverse": "#696969",
-      "sds-color-semantic-base-border-on-fill": "#000000",
-      "sds-color-semantic-base-border-pressed": "#ffffff",
-      "sds-color-semantic-base-border-pressed-inverse": "#000000",
-      "sds-color-semantic-base-border-table": "#696969",
+      "sds-color-semantic-base-border-primary": "#cdcdcd",
+      "sds-color-semantic-base-border-primary-disabled": "#696969",
+      "sds-color-semantic-base-border-primary-disabled-inverse": "#cdcdcd",
+      "sds-color-semantic-base-border-primary-hover": "#ffffff",
+      "sds-color-semantic-base-border-primary-hover-inverse": "#000000",
+      "sds-color-semantic-base-border-primary-inverse": "#696969",
+      "sds-color-semantic-base-border-primary-on-fill": "#000000",
+      "sds-color-semantic-base-border-primary-pressed": "#ffffff",
+      "sds-color-semantic-base-border-primary-pressed-inverse": "#000000",
+      "sds-color-semantic-base-border-secondary": "#696969",
+      "sds-color-semantic-base-border-secondary-hover": "#aaaaaa",
+      "sds-color-semantic-base-border-secondary-pressed": "#ededed",
       "sds-color-semantic-base-divider": "#494949",
       "sds-color-semantic-base-divider-inverse": "#cdcdcd",
       "sds-color-semantic-base-fill-disabled": "#494949",
@@ -1332,16 +1334,18 @@
       "sds-color-semantic-base-background-secondary": "#f3f3f3",
       "sds-color-semantic-base-background-secondary-inverse": "#3b3b3b",
       "sds-color-semantic-base-background-tertiary": "#dfdfdf",
-      "sds-color-semantic-base-border": "#6c6c6c",
-      "sds-color-semantic-base-border-disabled": "#c3c3c3",
-      "sds-color-semantic-base-border-disabled-inverse": "#6c6c6c",
-      "sds-color-semantic-base-border-hover": "#000000",
-      "sds-color-semantic-base-border-hover-inverse": "#ffffff",
-      "sds-color-semantic-base-border-inverse": "#c3c3c3",
-      "sds-color-semantic-base-border-on-fill": "#ffffff",
-      "sds-color-semantic-base-border-pressed": "#000000",
-      "sds-color-semantic-base-border-pressed-inverse": "#ffffff",
-      "sds-color-semantic-base-border-table": "#c3c3c3",
+      "sds-color-semantic-base-border-primary": "#6c6c6c",
+      "sds-color-semantic-base-border-primary-disabled": "#c3c3c3",
+      "sds-color-semantic-base-border-primary-disabled-inverse": "#6c6c6c",
+      "sds-color-semantic-base-border-primary-hover": "#000000",
+      "sds-color-semantic-base-border-primary-hover-inverse": "#ffffff",
+      "sds-color-semantic-base-border-primary-inverse": "#c3c3c3",
+      "sds-color-semantic-base-border-primary-on-fill": "#ffffff",
+      "sds-color-semantic-base-border-primary-pressed": "#000000",
+      "sds-color-semantic-base-border-primary-pressed-inverse": "#ffffff",
+      "sds-color-semantic-base-border-secondary": "#c3c3c3",
+      "sds-color-semantic-base-border-secondary-hover": "#969696",
+      "sds-color-semantic-base-border-secondary-pressed": "#3b3b3b",
       "sds-color-semantic-base-divider": "#dfdfdf",
       "sds-color-semantic-base-divider-inverse": "#6c6c6c",
       "sds-color-semantic-base-fill-disabled": "#dfdfdf",

diff --git a/packages/components/src/common/styles-dictionary/scss/_variables.scss b/packages/components/src/common/styles-dictionary/scss/_variables.scss
@@ -187,26 +187,30 @@ $sds-color-semantic-base-background-secondary-inverse: #3b3b3b;
 $sds-color-semantic-base-background-secondary-inverse-dark: #ededed;
 $sds-color-semantic-base-background-tertiary: #dfdfdf;
 $sds-color-semantic-base-background-tertiary-dark: #494949;
-$sds-color-semantic-base-border: #6c6c6c;
-$sds-color-semantic-base-border-dark: #cdcdcd;
-$sds-color-semantic-base-border-disabled: #c3c3c3;
-$sds-color-semantic-base-border-disabled-dark: #696969;
-$sds-color-semantic-base-border-disabled-inverse: #6c6c6c;
-$sds-color-semantic-base-border-disabled-inverse-dark: #cdcdcd;
-$sds-color-semantic-base-border-hover: #000000;
-$sds-color-semantic-base-border-hover-dark: #ffffff;
-$sds-color-semantic-base-border-hover-inverse: #ffffff;
-$sds-color-semantic-base-border-hover-inverse-dark: #000000;
-$sds-color-semantic-base-border-inverse: #c3c3c3;
-$sds-color-semantic-base-border-inverse-dark: #696969;
-$sds-color-semantic-base-border-on-fill: #ffffff;
-$sds-color-semantic-base-border-on-fill-dark: #000000;
-$sds-color-semantic-base-border-pressed: #000000;
-$sds-color-semantic-base-border-pressed-dark: #ffffff;
-$sds-color-semantic-base-border-pressed-inverse: #ffffff;
-$sds-color-semantic-base-border-pressed-inverse-dark: #000000;
-$sds-color-semantic-base-border-table: #c3c3c3;
-$sds-color-semantic-base-border-table-dark: #696969;
+$sds-color-semantic-base-border-primary: #6c6c6c;
+$sds-color-semantic-base-border-primary-dark: #cdcdcd;
+$sds-color-semantic-base-border-primary-disabled: #c3c3c3;
+$sds-color-semantic-base-border-primary-disabled-dark: #696969;
+$sds-color-semantic-base-border-primary-disabled-inverse: #6c6c6c;
+$sds-color-semantic-base-border-primary-disabled-inverse-dark: #cdcdcd;
+$sds-color-semantic-base-border-primary-hover: #000000;
+$sds-color-semantic-base-border-primary-hover-dark: #ffffff;
+$sds-color-semantic-base-border-primary-hover-inverse: #ffffff;
+$sds-color-semantic-base-border-primary-hover-inverse-dark: #000000;
+$sds-color-semantic-base-border-primary-inverse: #c3c3c3;
+$sds-color-semantic-base-border-primary-inverse-dark: #696969;
+$sds-color-semantic-base-border-primary-on-fill: #ffffff;
+$sds-color-semantic-base-border-primary-on-fill-dark: #000000;
+$sds-color-semantic-base-border-primary-pressed: #000000;
+$sds-color-semantic-base-border-primary-pressed-dark: #ffffff;
+$sds-color-semantic-base-border-primary-pressed-inverse: #ffffff;
+$sds-color-semantic-base-border-primary-pressed-inverse-dark: #000000;
+$sds-color-semantic-base-border-secondary: #c3c3c3;
+$sds-color-semantic-base-border-secondary-dark: #696969;
+$sds-color-semantic-base-border-secondary-hover: #969696;
+$sds-color-semantic-base-border-secondary-hover-dark: #aaaaaa;
+$sds-color-semantic-base-border-secondary-pressed: #3b3b3b;
+$sds-color-semantic-base-border-secondary-pressed-dark: #ededed;
 $sds-color-semantic-base-divider: #dfdfdf;
 $sds-color-semantic-base-divider-dark: #494949;
 $sds-color-semantic-base-divider-inverse: #6c6c6c;

diff --git a/packages/components/src/common/utils.ts b/packages/components/src/common/utils.ts
@@ -22,3 +22,17 @@ export function filterProps<T extends Props, K extends keyof T>(
 
   return result;
 }
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const mergeRefs = (refs: any[]) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (element: any) => {
+    refs.forEach((ref) => {
+      if (typeof ref === "function") {
+        ref(element);
+      } else if (ref != null) {
+        ref.current = element;
+      }
+    });
+  };
+};
diff --git a/packages/components/src/common/warnings.ts b/packages/components/src/common/warnings.ts
@@ -9,6 +9,8 @@ export enum SDSWarningTypes {
   TooltipSubtitle = "tooltipSubtitle",
   TooltipWidth = "tooltipWidth",
   TooltipInvertStyle = "tooltipInvertStyle",
+  ContentCardActionsOnlyButtons = "contentCardActionsOnlyButtons",
+  ClickableContentCardNumberOfButtons = "clickableContentCardNumberOfButtons",
 }
 
 export const SDS_WARNINGS = {
@@ -58,6 +60,16 @@ export const SDS_WARNINGS = {
     message:
       "Warning: Tooltips using the inverted or sdsStyle prop will be deprecated. Please use hasInvertedStyle instead!",
   },
+  [SDSWarningTypes.ContentCardActionsOnlyButtons]: {
+    hasWarned: false,
+    message:
+      "Warning: Only SDS buttons could be used within ContentCard Actions component slot!",
+  },
+  [SDSWarningTypes.ClickableContentCardNumberOfButtons]: {
+    hasWarned: false,
+    message:
+      "Warning: Clickable Content Cards can only have one or no buttons!",
+  },
 };
 
 export const showWarningIfFirstOccurence = (warningType: SDSWarningTypes) => {

diff --git a/packages/components/src/core/Autocomplete/components/AutocompleteBase/style.ts b/packages/components/src/core/Autocomplete/components/AutocompleteBase/style.ts
@@ -51,7 +51,7 @@ export const StyledAutocompleteBase = styled(Autocomplete, {
       // look at the useDetectUserTabbing hook.
       &[data-user-is-tabbing="true"]:focus-within {
         border-radius: 4px;
-        outline: 2px solid ${semanticColors?.base?.borderHover};
+        outline: 2px solid ${semanticColors?.base?.borderPrimaryHover};
         outline-offset: 1px;
       }
 

diff --git a/packages/components/src/core/Button/style.ts b/packages/components/src/core/Button/style.ts
@@ -12,6 +12,7 @@ import {
   getShadows,
   getSpaces,
   fontBodySemiboldXxs,
+  fontBody,
 } from "src/core/styles";
 import { focusVisibleA11yStyle } from "src/core/styles/common/mixins/a11y";
 import { ButtonProps } from ".";
@@ -65,14 +66,16 @@ const ButtonStyles = (props: ButtonExtraProps): SerializedStyles => {
 
   const disabledBorder =
     variant === "outlined"
-      ? `inset 0 0 0 1px ${semanticColors?.base?.borderDisabled}`
+      ? `inset 0 0 0 1px ${semanticColors?.base?.borderPrimaryDisabled}`
       : "none";
 
   const boxshadow =
     variant === "outlined"
       ? `inset 0 0 0 1px ${semanticColors?.accent?.border}`
       : "none";
 
+  fontBody("xs", "semibold");
+
   return css`
     background-color: ${backgroundColor};
     border: none;

diff --git a/packages/components/src/core/ContentCard/ContentCard.types.ts b/packages/components/src/core/ContentCard/ContentCard.types.ts
@@ -0,0 +1,50 @@
+import { CardProps } from "@mui/material";
+
+interface BaseContentCardProps extends CardProps {
+  sdsType?: "wide" | "narrow";
+  overlineText?: string;
+  titleText?: string;
+  subtitleText?: string;
+  metadataText?: string;
+  boundingBox?: boolean;
+  decorativeBorder?: boolean;
+  children?: React.ReactNode;
+  clickableCard?: boolean;
+  buttonsPosition?: "left" | "right";
+}
+
+export interface ImageContentCardProps extends BaseContentCardProps {
+  visualElementType: "image";
+  image?: React.ReactNode;
+  imagePosition?: "left" | "right";
+  imagePadding?: boolean;
+  imageSize?: number;
+  icon?: never;
+}
+
+export interface IconContentCardProps extends BaseContentCardProps {
+  visualElementType: "icon";
+  icon?: React.ReactNode;
+  image?: never;
+  imageSize?: never;
+  imagePosition?: never;
+  imagePadding?: never;
+}
+
+export interface NoneContentCardProps extends BaseContentCardProps {
+  visualElementType: "none";
+  icon?: never;
+  image?: never;
+  imagePosition?: never;
+  imagePadding?: never;
+  imageSize?: never;
+}
+
+export type ContentCardProps =
+  | ImageContentCardProps
+  | IconContentCardProps
+  | NoneContentCardProps;
+
+export const CONTENT_CARD_DEFAULT_IMAGE_MEDIA_SIZE = 300;
+export const CONTENT_CARD_WIDE_TYPE_MIN_WIDTH_LOW_BOUNDARY = 595;
+export const CONTENT_CARD_WIDE_TYPE_MIN_WIDTH_HIGH_BOUNDARY = 605;