Story for Card Custom Styles

packages/react-components/react-card/library/src/components/CustomHooks/index.ts

@@ -0,0 +1,6 @@
+import { type FluentProviderCustomStyleHooks } from '@fluentui/react-components';
+import { useCardStyles } from './useCardStyles';
+
+export const customStyleHooks: FluentProviderCustomStyleHooks = {
+  useCardStyles_unstable: useCardStyles,
+};

packages/react-components/react-card/library/src/components/CustomHooks/useCardStyles.ts

@@ -0,0 +1,17 @@
+import { makeStyles, mergeClasses, tokens } from '@fluentui/react-components';
+import { type CardState } from '@fluentui/react-components';
+
+const useCardStyle = makeStyles({
+  root: {
+    backgroundColor: tokens.colorNeutralBackground3,
+    width: '620px',
+    maxWidth: '100%',
+    margin: 'auto',
+  },
+});
+
+export const useCardStyles = (state: unknown) => {
+  const cardStyles = useCardStyle();
+  const componentState = state as CardState;
+  componentState.root.className = mergeClasses(componentState.root.className, cardStyles.root);
+};

packages/react-components/react-card/stories/src/Card/CardCustomStyles.stories.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { customStyleHooks } from '../../../library/src/components/CustomHooks';
+import {
+  Card,
+  CardFooter,
+  CardHeader,
+  CardPreview,
+  Body1,
+  Caption1,
+  Button,
+  FluentProvider,
+} from '@fluentui/react-components';
+import { ArrowReplyRegular, ShareRegular } from '@fluentui/react-icons';
+
+const resolveAsset = (asset: string) => {
+  const ASSET_URL =
+    'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/stories/src/assets/';
+
+  return `${ASSET_URL}${asset}`;
+};
+
+export const CardCustomStyles = () => {
+  return (
+    <FluentProvider customStyleHooks_unstable={customStyleHooks}>
+      <Card>
+        <CardHeader
+          image={<img src={resolveAsset('avatar_elvia.svg')} alt="Elvia Atkins avatar picture" />}
+          header={
+            <Body1>
+              <b>Elvia Atkins</b> mentioned you
+            </Body1>
+          }
+          description={<Caption1>5h ago · About us - Overview</Caption1>}
+        />
+
+        <CardPreview logo={<img src={resolveAsset('docx.png')} alt="Microsoft Word document" />}>
+          <img src={resolveAsset('doc_template.png')} alt="Preview of a Word document: About Us - Overview" />
+        </CardPreview>
+
+        <CardFooter>
+          <Button icon={<ArrowReplyRegular fontSize={16} />}>Reply</Button>
+          <Button icon={<ShareRegular fontSize={16} />}>Share</Button>
+        </CardFooter>
+      </Card>
+    </FluentProvider>
+  );
+};
+
+// This line is necessary to ensure full source code view in storybook.
+CardCustomStyles.parameters = { docs: { source: {} } };

packages/react-components/react-card/stories/src/Card/index.stories.tsx

@@ -11,6 +11,7 @@ export { SelectableIndicator } from './CardSelectableIndicator.stories';
 export { WithAction } from './CardAction.stories';
 export { FocusMode } from './CardFocusMode.stories';
 export { Templates } from './CardTemplates.stories';
+export { CardCustomStyles } from './CardCustomStyles.stories';
 
 export default {
   title: 'Components/Card/Card',