Skip to content

Commit 32b52fe

Browse files
aaronbassettaaronbassett
committed
docs: add stories for Table component
1 parent ab2bfbe commit 32b52fe

File tree

2 files changed

+969
-20
lines changed

2 files changed

+969
-20
lines changed

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

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
@use "../theme";
2+
3+
.wideTable {
4+
width: 100%;
5+
overflow-x: auto;
6+
}
7+
8+
.positive {
9+
color: theme.color("states", "success", "normal");
10+
font-weight: 500;
11+
}
12+
13+
.negative {
14+
color: theme.color("states", "error", "normal");
15+
font-weight: 500;
16+
}
17+
18+
.emptyState {
19+
display: flex;
20+
flex-direction: column;
21+
align-items: center;
22+
justify-content: center;
23+
gap: theme.spacing(4);
24+
padding: theme.spacing(12) theme.spacing(4);
25+
text-align: center;
26+
color: theme.color("muted");
27+
28+
> p {
29+
margin: 0;
30+
font-size: theme.font-size("sm");
31+
}
32+
}
33+
34+
.largeEmptyState {
35+
display: flex;
36+
flex-direction: column;
37+
align-items: center;
38+
justify-content: center;
39+
gap: theme.spacing(4);
40+
padding: theme.spacing(16) theme.spacing(4);
41+
text-align: center;
42+
43+
> h3 {
44+
margin: 0;
45+
font-size: theme.font-size("xl");
46+
font-weight: 600;
47+
color: theme.color("heading");
48+
}
49+
50+
> p {
51+
margin: 0;
52+
font-size: theme.font-size("base");
53+
color: theme.color("muted");
54+
}
55+
}
56+
57+
.userCell {
58+
display: flex;
59+
align-items: center;
60+
gap: theme.spacing(3);
61+
}
62+
63+
.avatar {
64+
width: 32px;
65+
height: 32px;
66+
border-radius: theme.border-radius("full");
67+
background-color: theme.color("states", "info", "background");
68+
color: theme.color("states", "info", "normal");
69+
display: flex;
70+
align-items: center;
71+
justify-content: center;
72+
font-size: theme.font-size("sm");
73+
font-weight: 600;
74+
flex-shrink: 0;
75+
}
76+
77+
.userName {
78+
font-weight: 500;
79+
color: theme.color("foreground");
80+
}
81+
82+
.userEmail {
83+
font-size: theme.font-size("sm");
84+
color: theme.color("muted");
85+
}
86+
87+
.actions {
88+
display: flex;
89+
gap: theme.spacing(2);
90+
}
91+
92+
.assetCell {
93+
display: flex;
94+
flex-direction: column;
95+
gap: theme.spacing(1);
96+
97+
> strong {
98+
font-weight: 600;
99+
color: theme.color("foreground");
100+
}
101+
}
102+
103+
.assetName {
104+
font-size: theme.font-size("sm");
105+
color: theme.color("muted");
106+
}
107+
108+
.userSkeleton {
109+
display: flex;
110+
align-items: center;
111+
gap: theme.spacing(3);
112+
}
113+
114+
.filterableTable {
115+
display: flex;
116+
flex-direction: column;
117+
gap: theme.spacing(4);
118+
}
119+
120+
.filterInput {
121+
padding: theme.spacing(2) theme.spacing(3);
122+
border: 1px solid theme.color("border");
123+
border-radius: theme.border-radius("md");
124+
background-color: theme.color("background", "primary");
125+
color: theme.color("foreground");
126+
font-size: theme.font-size("sm");
127+
width: 100%;
128+
max-width: 300px;
129+
130+
&:focus {
131+
outline: none;
132+
border-color: theme.color("focus");
133+
box-shadow: 0 0 0 3px theme.color("focus-dim");
134+
}
135+
136+
&::placeholder {
137+
color: theme.color("muted");
138+
}
139+
}
140+
141+
.stickyHeaderContainer {
142+
height: 400px;
143+
overflow-y: auto;
144+
border: 1px solid theme.color("border");
145+
border-radius: theme.border-radius("md");
146+
position: relative;
147+
}
148+
149+
.stickyHeaderInfo {
150+
padding: theme.spacing(3);
151+
background-color: theme.color("states", "info", "background");
152+
color: theme.color("states", "info", "normal");
153+
text-align: center;
154+
font-size: theme.font-size("sm");
155+
156+
> p {
157+
margin: 0;
158+
}
159+
}
160+
161+
.stickyColumnsWrapper {
162+
width: 100%;
163+
}
164+
165+
.stickyColumnsContainer {
166+
width: 100%;
167+
max-width: 800px;
168+
overflow-x: auto;
169+
border: 1px solid theme.color("border");
170+
border-radius: theme.border-radius("md");
171+
}
172+
173+
.stickyColumnsInfo {
174+
padding: theme.spacing(3);
175+
background-color: theme.color("states", "info", "background");
176+
color: theme.color("states", "info", "normal");
177+
text-align: center;
178+
font-size: theme.font-size("sm");
179+
position: sticky;
180+
left: 0;
181+
z-index: 10;
182+
183+
> p {
184+
margin: 0;
185+
}
186+
}

0 commit comments

Comments
 (0)