Skip to content

Commit f981f6f

Browse files
aaronbassettaaronbassett
committed
fix: move inline styles into SCSS modules
1 parent 87ea561 commit f981f6f

File tree

4 files changed

+236
-2
lines changed

4 files changed

+236
-2
lines changed

‎packages/component-library/src/Badge/index.stories.module.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@use "../theme";
2+
3+
.variantsContainer {
4+
display: flex;
5+
gap: theme.spacing(2);
6+
flex-wrap: wrap;
7+
align-items: center;
8+
}

‎packages/component-library/src/Badge/index.stories.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { Meta, StoryObj } from "@storybook/react";
22

33
import { Badge as BadgeComponent, SIZES, STYLES, VARIANTS } from "./index.jsx";
4+
import styles from "./index.stories.module.scss";
45

56
const meta = {
67
component: BadgeComponent,
@@ -49,7 +50,7 @@ export const Badge = {
4950
type Story = StoryObj<typeof BadgeComponent>;
5051

5152
const renderAllVariants = (style: typeof STYLES[number], size: typeof SIZES[number], children: React.ReactNode) => (
52-
<div style={{ display: "flex", gap: "8px", flexWrap: "wrap", alignItems: "center" }}>
53+
<div className={styles.variantsContainer}>
5354
{VARIANTS.map((variant) => (
5455
<BadgeComponent key={variant} variant={variant} style={style} size={size}>
5556
{children}

‎packages/component-library/src/Card/index.stories.module.scss

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
@use "../theme";
2+
3+
// WithFooter story styles
4+
.footerContent {
5+
display: flex;
6+
justify-content: space-between;
7+
align-items: center;
8+
}
9+
10+
.footerText {
11+
font-size: theme.font-size("sm");
12+
opacity: 0.7;
13+
}
14+
15+
.activityList {
16+
margin: 0;
17+
padding-left: theme.spacing(6);
18+
}
19+
20+
// CompleteExample story styles
21+
.revenueContent {
22+
margin-bottom: theme.spacing(4);
23+
}
24+
25+
.revenueHeading {
26+
margin: 0 0 theme.spacing(2) 0;
27+
font-size: theme.font-size("4xl");
28+
}
29+
30+
.revenueSubtext {
31+
margin: 0;
32+
opacity: 0.7;
33+
}
34+
35+
.statsGrid {
36+
display: grid;
37+
grid-template-columns: 1fr 1fr;
38+
gap: theme.spacing(4);
39+
}
40+
41+
.statLabel {
42+
margin: 0;
43+
font-size: theme.font-size("sm");
44+
opacity: 0.7;
45+
}
46+
47+
.statValue {
48+
margin: 0;
49+
font-size: theme.font-size("xl");
50+
font-weight: theme.font-weight("semibold");
51+
}
52+
53+
// AllVariants story styles
54+
.variantsContainer {
55+
display: flex;
56+
flex-direction: column;
57+
gap: theme.spacing(4);
58+
}

‎packages/component-library/src/Card/index.stories.tsx

Lines changed: 168 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1+
import * as icons from "@phosphor-icons/react/dist/ssr";
12
import type { Meta, StoryObj } from "@storybook/react";
23

3-
import { Card as CardComponent, VARIANTS } from "./index.jsx";
4+
import { Badge } from "../Badge/index.jsx";
5+
import { Button } from "../Button/index.jsx";
46
import { iconControl } from "../icon-control.jsx";
7+
import { Card as CardComponent, VARIANTS } from "./index.jsx";
8+
import styles from "./index.stories.module.scss";
59

610
const meta = {
711
component: CardComponent,
@@ -62,6 +66,7 @@ const meta = {
6266
},
6367
},
6468
},
69+
tags: ["autodocs"],
6570
} satisfies Meta<typeof CardComponent>;
6671
export default meta;
6772

@@ -74,3 +79,165 @@ export const Card = {
7479
footer: "",
7580
},
7681
} satisfies StoryObj<typeof CardComponent>;
82+
83+
type Story = StoryObj<typeof CardComponent>;
84+
85+
export const BasicCard: Story = {
86+
args: {
87+
children: (
88+
<p>
89+
This is a basic card with just content. It can contain any React elements
90+
and will display them with appropriate styling.
91+
</p>
92+
),
93+
variant: "secondary",
94+
},
95+
};
96+
97+
export const WithTitleAndIcon: Story = {
98+
args: {
99+
icon: <icons.Package />,
100+
title: "Product Details",
101+
children: (
102+
<div>
103+
<p>This card has a title and an icon in the header.</p>
104+
<p>Icons help users quickly identify the card's purpose.</p>
105+
</div>
106+
),
107+
variant: "secondary",
108+
},
109+
};
110+
111+
export const WithToolbar: Story = {
112+
args: {
113+
title: "User Statistics",
114+
toolbar: (
115+
<>
116+
<Button size="sm" variant="outline">
117+
<icons.DownloadSimple />
118+
Export
119+
</Button>
120+
<Button size="sm" variant="outline">
121+
<icons.ArrowsClockwise />
122+
</Button>
123+
</>
124+
),
125+
children: (
126+
<div>
127+
<p>Total Users: 1,234</p>
128+
<p>Active Today: 567</p>
129+
<p>New This Week: 89</p>
130+
</div>
131+
),
132+
variant: "secondary",
133+
},
134+
};
135+
136+
export const WithFooter: Story = {
137+
args: {
138+
title: "Latest Activity",
139+
children: (
140+
<ul className={styles.activityList}>
141+
<li>User login at 10:30 AM</li>
142+
<li>Data sync completed at 10:15 AM</li>
143+
<li>Backup finished at 9:45 AM</li>
144+
</ul>
145+
),
146+
footer: (
147+
<div className={styles.footerContent}>
148+
<span className={styles.footerText}>
149+
Last updated 5 minutes ago
150+
</span>
151+
<Button size="sm" variant="link">
152+
View All
153+
</Button>
154+
</div>
155+
),
156+
variant: "secondary",
157+
},
158+
};
159+
160+
export const AsLink: Story = {
161+
args: {
162+
href: "#",
163+
icon: <icons.Link />,
164+
title: "Clickable Card",
165+
children: (
166+
<p>
167+
This entire card is clickable and will navigate to the specified URL.
168+
Hover over it to see the interactive state.
169+
</p>
170+
),
171+
variant: "secondary",
172+
},
173+
};
174+
175+
export const AsButton: Story = {
176+
args: {
177+
onPress: () => alert("Card clicked!"),
178+
icon: <icons.CursorClick />,
179+
title: "Interactive Card",
180+
children: (
181+
<p>
182+
This card acts as a button. Click anywhere on it to trigger an action.
183+
</p>
184+
),
185+
variant: "secondary",
186+
},
187+
};
188+
189+
export const CompleteExample: Story = {
190+
args: {
191+
icon: <icons.ChartBar />,
192+
title: "Revenue Dashboard",
193+
toolbar: (
194+
<>
195+
<Badge variant="success">Live</Badge>
196+
<Button size="sm" variant="ghost">
197+
<icons.DotsThree />
198+
</Button>
199+
</>
200+
),
201+
children: (
202+
<div>
203+
<div className={styles.revenueContent}>
204+
<h3 className={styles.revenueHeading}>$45,234</h3>
205+
<p className={styles.revenueSubtext}>Total Revenue This Month</p>
206+
</div>
207+
<div className={styles.statsGrid}>
208+
<div>
209+
<p className={styles.statLabel}>Orders</p>
210+
<p className={styles.statValue}>152</p>
211+
</div>
212+
<div>
213+
<p className={styles.statLabel}>Avg. Value</p>
214+
<p className={styles.statValue}>$297.59</p>
215+
</div>
216+
</div>
217+
</div>
218+
),
219+
footer: (
220+
<Button variant="primary" fullWidth>
221+
View Detailed Report
222+
</Button>
223+
),
224+
variant: "primary",
225+
},
226+
};
227+
228+
export const AllVariants: Story = {
229+
render: () => (
230+
<div className={styles.variantsContainer}>
231+
{VARIANTS.map((variant) => (
232+
<CardComponent
233+
key={variant}
234+
variant={variant}
235+
title={`${variant.charAt(0).toUpperCase() + variant.slice(1)} Card`}
236+
icon={<icons.Info />}
237+
>
238+
<p>This is a {variant} variant card.</p>
239+
</CardComponent>
240+
))}
241+
</div>
242+
),
243+
};

0 commit comments

Comments
 (0)