Sb c12

docs/Card.stories.tsx

@@ -0,0 +1,119 @@
+import type { Meta, StoryObj, StoryContext } from "@storybook/react";
+import Card from "@mui/material/Card";
+import CardActions from "@mui/material/CardActions";
+import CardContent from "@mui/material/CardContent";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+import { argChildren, argProps } from "./utils/formatArgs";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof Card> = {
+  title: "SURFACES/Card",
+  component: Card,
+  parameters: {
+    docs: {
+      source: { language: "tsx", format: true, type: "dynamic" },
+      description: {
+        component:
+          "The value must be chosen from a predefined set of allowed values.",
+      },
+      canvas: { sourceState: "shown" },
+    },
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    raised: {
+      control: { type: "boolean" },
+      description: "If `true`, the card will use raised styling.",
+      defaultValue: false,
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Card>;
+
+const bull = (
+  <Box
+    component="span"
+    sx={{ display: "inline-block", mx: "2px", transform: "scale(0.8)" }}
+  >
+    •
+  </Box>
+);
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Cards: Story = {
+  args: {
+    children: (
+      <>
+        <CardContent>
+          <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
+            Word of the Day
+          </Typography>
+          <Typography variant="h5" component="div">
+            be{bull}nev{bull}o{bull}lent
+          </Typography>
+          <Typography sx={{ mb: 1.5 }} color="text.secondary">
+            adjective
+          </Typography>
+          <Typography variant="body2">
+            well meaning and kindly.
+            <br />
+            {'"a benevolent smile"'}
+          </Typography>
+        </CardContent>
+        <CardActions>
+          <Button size="small">Learn More</Button>
+        </CardActions>
+      </>
+    ),
+  },
+  parameters: {
+    docs: {
+      source: {
+        transform: (code: string, storyContext: StoryContext): string => `
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+
+const bull = (
+  <Box
+    component="span"
+    sx={{ display: "inline-block", mx: "2px", transform: "scale(0.8)" }}
+  >
+    •
+  </Box>
+);
+
+<Card ${argProps(storyContext)}>
+  <CardContent>
+    <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
+      Word of the Day
+    </Typography>
+    <Typography variant="h5" component="div">
+      be{bull}nev{bull}o{bull}lent
+    </Typography>
+    <Typography sx={{ mb: 1.5 }} color="text.secondary">
+      adjective
+    </Typography>
+    <Typography variant="body2">
+      well meaning and kindly.
+      <br />
+      {'"a benevolent smile"'}
+    </Typography>
+  </CardContent>
+  <CardActions>
+    <Button size="small">Learn More</Button>
+  </CardActions>
+</Card>
+        `,
+      },
+    },
+  },
+};

docs/Paper.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj, StoryContext } from "@storybook/react";
+import Paper from "@mui/material/Paper";
+import { argChildren, argProps } from "./utils/formatArgs";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof Paper> = {
+  title: "SURFACES/Paper",
+  component: Paper,
+  parameters: {
+    docs: {
+      source: { language: "tsx", format: true, type: "dynamic" },
+      description: {
+        component:
+          "The value must be chosen from a predefined set of allowed values.",
+      },
+      canvas: { sourceState: "shown" },
+    },
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    elevation: {
+      control: { type: "select" },
+      options: [
+        0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
+        20, 21, 22, 23, 24,
+      ],
+
+      description:
+        "Shadow depth, corresponds to `dp` in the spec. It accepts values between 0 and 24 inclusive.",
+      defaultValue: 1,
+    },
+    square: {
+      control: { type: "boolean" },
+      description: "If `true`, the card will use raised styling.",
+      defaultValue: false,
+    },
+    variant: {
+      control: { type: "select" },
+      options: ["elevation", "outlined"],
+
+      description: "The variant to use.",
+      defaultValue: "elevation",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Paper>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Papers: Story = {
+  args: {
+    elevation: 5,
+    sx: {
+      height: "200px",
+      width: "200px",
+    },
+  },
+  parameters: {
+    docs: {
+      source: {
+        transform: (code: string, storyContext: StoryContext): string => `
+import Paper from '@mui/material/Paper';
+
+${code}
+        `,
+      },
+    },
+  },
+};

src/theme/overrides/Card.ts

@@ -6,4 +6,41 @@ const MuiCard: Components<Theme>["MuiCard"] = {
   },
 };
 
-export default { MuiCard };
+const CardActionArea: Components<Theme>["MuiCardActionArea"] = {
+  styleOverrides: {
+    root: ({ theme, ownerState }) => ({}),
+  },
+};
+
+const CardActions: Components<Theme>["MuiCardActions"] = {
+  styleOverrides: {
+    root: ({ theme, ownerState }) => ({}),
+  },
+};
+
+const CardContent: Components<Theme>["MuiCardContent"] = {
+  styleOverrides: {
+    root: ({ theme, ownerState }) => ({}),
+  },
+};
+
+const CardHeader: Components<Theme>["MuiCardHeader"] = {
+  styleOverrides: {
+    root: ({ theme, ownerState }) => ({}),
+  },
+};
+
+const CardMedia: Components<Theme>["MuiCardMedia"] = {
+  styleOverrides: {
+    root: ({ theme, ownerState }) => ({}),
+  },
+};
+
+export default {
+  MuiCard,
+  CardActionArea,
+  CardActions,
+  CardContent,
+  CardHeader,
+  CardMedia,
+};

src/theme/overrides/Paper.ts

@@ -0,0 +1,13 @@
+import { Theme, Components } from "@mui/material/styles";
+
+declare module "@mui/material/Paper" {
+  interface PaperPropsVariantOverrides {}
+}
+
+const Paper: Components<Theme>["MuiPaper"] = {
+  styleOverrides: {
+    root: ({ theme, ownerState }) => ({}),
+  },
+};
+
+export default { Paper };