feat(react-cap-theme): add react-card components

change/@fluentui-contrib-react-cap-theme-d1f6358d-469b-439d-ab8a-a6ab68c32fa5.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "add react-card components",
+  "packageName": "@fluentui-contrib/react-cap-theme",
+  "email": "egianoglio@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-cap-theme/src/capStyleHooks.ts

@@ -33,6 +33,18 @@ import type {
   ToggleButtonState,
 } from './components/react-button';
 import type { CompoundButtonState } from '@fluentui/react-button';
+import {
+  useCardStyles,
+  useCardFooterStyles,
+  useCardHeaderStyles,
+  useCardPreviewStyles,
+} from './components/react-card';
+import type {
+  CardState,
+  CardHeaderState,
+  CardPreviewState,
+} from './components/react-card';
+import type { CardFooterState } from '@fluentui/react-components';
 import {
   useCarouselStyles,
   useCarouselAutoplayButtonStyles,
@@ -158,6 +170,18 @@ export const CAP_STYLE_HOOKS: NonNullable<
   useButtonStyles_unstable: (state) => {
     return useButtonStyles(state as ButtonState);
   },
+  useCardStyles_unstable: (state) => {
+    return useCardStyles(state as CardState);
+  },
+  useCardFooterStyles_unstable: (state) => {
+    return useCardFooterStyles(state as CardFooterState);
+  },
+  useCardHeaderStyles_unstable: (state) => {
+    return useCardHeaderStyles(state as CardHeaderState);
+  },
+  useCardPreviewStyles_unstable: (state) => {
+    return useCardPreviewStyles(state as CardPreviewState);
+  },
   useCarouselAutoplayButtonStyles_unstable: (state) => {
     return useCarouselAutoplayButtonStyles(
       state as CarouselAutoplayButtonState

packages/react-cap-theme/src/components/react-card/Card/Card.types.ts

@@ -0,0 +1,57 @@
+import type {
+  CardContextValue as BaseContextValue,
+  CardProps as BaseProps,
+  CardState as BaseState,
+} from '@fluentui/react-card';
+
+/**
+ * SP specific data shared between card components
+ * @internal
+ */
+export type CardContextValueInternal = Pick<
+  CardState,
+  'disabled' | 'orientation' | 'size'
+>;
+
+/**
+ * Data shared between card components
+ * @internal
+ */
+export type CardContextValue = CardContextValueInternal & BaseContextValue;
+
+/**
+ * Combined Fluent and SP context values for Card and its underlying components.
+ * @internal
+ */
+export type CardContextValues = {
+  /** Fluent's context values from the Card component */
+  base: BaseContextValue;
+  /** Local context values specific to this SP implementation */
+  local: CardContextValueInternal;
+};
+
+/**
+ * Props for the Card component.
+ * @alpha
+ */
+export type CardProps = Omit<BaseProps, 'appearance'> & {
+  /**
+   * Sets the appearance of the card.
+   *
+   * `filled`
+   * The card will have a shadow, border and background color.
+   *
+   * `subtle`
+   * This appearance shows no background or shadow on rest.
+   *
+   * @default 'filled'
+   */
+  appearance?: 'filled' | 'subtle';
+};
+
+/**
+ * State for rendering the Card.
+ * @alpha
+ */
+export type CardState = Omit<BaseState, 'appearance'> &
+  Required<Pick<CardProps, 'appearance'>>;

packages/react-cap-theme/src/components/react-card/Card/cssVariables.ts

@@ -0,0 +1,11 @@
+import { cardCSSVars as fluentCardCSSVars } from '@fluentui/react-card';
+
+// Declared in a separate file to avoid circular dependency.
+/**
+ * CSS variable names used internally for uniform styling in Card.
+ * @internal
+ */
+export const cardCSSVars = {
+  ...fluentCardCSSVars,
+  cardChildMarginVar: '--cap-Card--child-margin',
+};