Skip to content

Commit 66f4db7

Browse files
arifulbgt4arifulbgt4
authored
Merge pull request #14 from arifulbgt4/sb-c12
Sb c12
2 parents 12b4cb9 + b97236a commit 66f4db7

File tree

4 files changed

+241
-1
lines changed

4 files changed

+241
-1
lines changed

‎docs/Card.stories.tsx

+119
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
import type { Meta, StoryObj, StoryContext } from "@storybook/react";
2+
import Card from "@mui/material/Card";
3+
import CardActions from "@mui/material/CardActions";
4+
import CardContent from "@mui/material/CardContent";
5+
import Button from "@mui/material/Button";
6+
import Typography from "@mui/material/Typography";
7+
import Box from "@mui/material/Box";
8+
import { argChildren, argProps } from "./utils/formatArgs";
9+
10+
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
11+
const meta: Meta<typeof Card> = {
12+
title: "SURFACES/Card",
13+
component: Card,
14+
parameters: {
15+
docs: {
16+
source: { language: "tsx", format: true, type: "dynamic" },
17+
description: {
18+
component:
19+
"The value must be chosen from a predefined set of allowed values.",
20+
},
21+
canvas: { sourceState: "shown" },
22+
},
23+
layout: "centered",
24+
},
25+
tags: ["autodocs"],
26+
argTypes: {
27+
raised: {
28+
control: { type: "boolean" },
29+
description: "If `true`, the card will use raised styling.",
30+
defaultValue: false,
31+
},
32+
},
33+
};
34+
35+
export default meta;
36+
type Story = StoryObj<typeof Card>;
37+
38+
const bull = (
39+
<Box
40+
component="span"
41+
sx={{ display: "inline-block", mx: "2px", transform: "scale(0.8)" }}
42+
>
43+
•
44+
</Box>
45+
);
46+
47+
// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
48+
export const Cards: Story = {
49+
args: {
50+
children: (
51+
<>
52+
<CardContent>
53+
<Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
54+
Word of the Day
55+
</Typography>
56+
<Typography variant="h5" component="div">
57+
be{bull}nev{bull}o{bull}lent
58+
</Typography>
59+
<Typography sx={{ mb: 1.5 }} color="text.secondary">
60+
adjective
61+
</Typography>
62+
<Typography variant="body2">
63+
well meaning and kindly.
64+
<br />
65+
{'"a benevolent smile"'}
66+
</Typography>
67+
</CardContent>
68+
<CardActions>
69+
<Button size="small">Learn More</Button>
70+
</CardActions>
71+
</>
72+
),
73+
},
74+
parameters: {
75+
docs: {
76+
source: {
77+
transform: (code: string, storyContext: StoryContext): string => `
78+
import Card from '@mui/material/Card';
79+
import CardActions from '@mui/material/CardActions';
80+
import CardContent from '@mui/material/CardContent';
81+
import Button from '@mui/material/Button';
82+
import Typography from '@mui/material/Typography';
83+
import Box from '@mui/material/Box';
84+
85+
const bull = (
86+
<Box
87+
component="span"
88+
sx={{ display: "inline-block", mx: "2px", transform: "scale(0.8)" }}
89+
>
90+
•
91+
</Box>
92+
);
93+
94+
<Card ${argProps(storyContext)}>
95+
<CardContent>
96+
<Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
97+
Word of the Day
98+
</Typography>
99+
<Typography variant="h5" component="div">
100+
be{bull}nev{bull}o{bull}lent
101+
</Typography>
102+
<Typography sx={{ mb: 1.5 }} color="text.secondary">
103+
adjective
104+
</Typography>
105+
<Typography variant="body2">
106+
well meaning and kindly.
107+
<br />
108+
{'"a benevolent smile"'}
109+
</Typography>
110+
</CardContent>
111+
<CardActions>
112+
<Button size="small">Learn More</Button>
113+
</CardActions>
114+
</Card>
115+
`,
116+
},
117+
},
118+
},
119+
};

‎docs/Paper.stories.tsx

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import type { Meta, StoryObj, StoryContext } from "@storybook/react";
2+
import Paper from "@mui/material/Paper";
3+
import { argChildren, argProps } from "./utils/formatArgs";
4+
5+
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
6+
const meta: Meta<typeof Paper> = {
7+
title: "SURFACES/Paper",
8+
component: Paper,
9+
parameters: {
10+
docs: {
11+
source: { language: "tsx", format: true, type: "dynamic" },
12+
description: {
13+
component:
14+
"The value must be chosen from a predefined set of allowed values.",
15+
},
16+
canvas: { sourceState: "shown" },
17+
},
18+
layout: "centered",
19+
},
20+
tags: ["autodocs"],
21+
argTypes: {
22+
elevation: {
23+
control: { type: "select" },
24+
options: [
25+
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
26+
20, 21, 22, 23, 24,
27+
],
28+
29+
description:
30+
"Shadow depth, corresponds to `dp` in the spec. It accepts values between 0 and 24 inclusive.",
31+
defaultValue: 1,
32+
},
33+
square: {
34+
control: { type: "boolean" },
35+
description: "If `true`, the card will use raised styling.",
36+
defaultValue: false,
37+
},
38+
variant: {
39+
control: { type: "select" },
40+
options: ["elevation", "outlined"],
41+
42+
description: "The variant to use.",
43+
defaultValue: "elevation",
44+
},
45+
},
46+
};
47+
48+
export default meta;
49+
type Story = StoryObj<typeof Paper>;
50+
51+
// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
52+
export const Papers: Story = {
53+
args: {
54+
elevation: 5,
55+
sx: {
56+
height: "200px",
57+
width: "200px",
58+
},
59+
},
60+
parameters: {
61+
docs: {
62+
source: {
63+
transform: (code: string, storyContext: StoryContext): string => `
64+
import Paper from '@mui/material/Paper';
65+
66+
${code}
67+
`,
68+
},
69+
},
70+
},
71+
};

‎src/theme/overrides/Card.ts

+38-1
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,41 @@ const MuiCard: Components<Theme>["MuiCard"] = {
66
},
77
};
88

9-
export default { MuiCard };
9+
const CardActionArea: Components<Theme>["MuiCardActionArea"] = {
10+
styleOverrides: {
11+
root: ({ theme, ownerState }) => ({}),
12+
},
13+
};
14+
15+
const CardActions: Components<Theme>["MuiCardActions"] = {
16+
styleOverrides: {
17+
root: ({ theme, ownerState }) => ({}),
18+
},
19+
};
20+
21+
const CardContent: Components<Theme>["MuiCardContent"] = {
22+
styleOverrides: {
23+
root: ({ theme, ownerState }) => ({}),
24+
},
25+
};
26+
27+
const CardHeader: Components<Theme>["MuiCardHeader"] = {
28+
styleOverrides: {
29+
root: ({ theme, ownerState }) => ({}),
30+
},
31+
};
32+
33+
const CardMedia: Components<Theme>["MuiCardMedia"] = {
34+
styleOverrides: {
35+
root: ({ theme, ownerState }) => ({}),
36+
},
37+
};
38+
39+
export default {
40+
MuiCard,
41+
CardActionArea,
42+
CardActions,
43+
CardContent,
44+
CardHeader,
45+
CardMedia,
46+
};

‎src/theme/overrides/Paper.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Theme, Components } from "@mui/material/styles";
2+
3+
declare module "@mui/material/Paper" {
4+
interface PaperPropsVariantOverrides {}
5+
}
6+
7+
const Paper: Components<Theme>["MuiPaper"] = {
8+
styleOverrides: {
9+
root: ({ theme, ownerState }) => ({}),
10+
},
11+
};
12+
13+
export default { Paper };

0 commit comments

Comments
 (0)