Skip to content

Commit 22bce72

Browse files
nick-torresnick-torres
authored
Merge pull request #234 from fedspendingtransparency/mod/12273-button-examples
Mod/12273 button examples
2 parents 59f4afd + 38d486f commit 22bce72

107 files changed

Lines changed: 1651 additions & 280 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.storybook/stories/iconButtonExamples.mdx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import {Meta, Canvas, Controls, Story, Title} from '@storybook/blocks';
2+
import * as IconButtons from "./iconButtons.stories";
3+
import Buttons from "../../components/Button";
4+
import FlexGridCol from '../../components/flexGrid/FlexGridCol';
5+
import FlexGridRow from '../../components/flexGrid/FlexGridRow';
6+
7+
<Meta of={IconButtons}/>
8+
9+
# Stacked Icon Button Variants
10+
<FlexGridRow width={3} desktop={3} hasGutter gutterSize={32} style={{ marginLeft: "16px", marginBottom: "16px" }}>
11+
<Story of={IconButtons.StackedSmall} />
12+
<Story of={IconButtons.StackedMedium} />
13+
<Story of={IconButtons.StackedLarge} />
14+
</FlexGridRow>
15+
<FlexGridRow width={3} desktop={3} hasGutter gutterSize={32} style={{ marginLeft: "16px", marginBottom: "16px" }}>
16+
<Story of={IconButtons.StackedSmallDisabled} />
17+
<Story of={IconButtons.StackedMediumDisabled} />
18+
<Story of={IconButtons.StackedLargeDisabled} />
19+
</FlexGridRow>
20+
# Stacked Icon Dark Button Variants
21+
<FlexGridRow width={3} desktop={3} hasGutter gutterSize={32} style={{ marginLeft: "16px", marginBottom: "16px",backgroundColor: "#323a44" }}>
22+
<Story of={IconButtons.DarkStackedSmall} />
23+
<Story of={IconButtons.DarkStackedMedium} />
24+
<Story of={IconButtons.DarkStackedLarge} />
25+
</FlexGridRow>
26+
<FlexGridRow width={3} desktop={3} hasGutter gutterSize={32} style={{ marginLeft: "16px", marginBottom: "16px",backgroundColor: "#323a44" }}>
27+
<Story of={IconButtons.DarkStackedSmallDisabled} />
28+
<Story of={IconButtons.DarkStackedMediumDisabled} />
29+
<Story of={IconButtons.DarkStackedLargeDisabled} />
30+
</FlexGridRow>
31+
32+
# Icon Button Variants
33+
<FlexGridRow width={3} desktop={3} hasGutter gutterSize={32} style={{ marginLeft: "16px", marginBottom: "16px" }}>
34+
<Story of={IconButtons.SmallIcon} />
35+
<Story of={IconButtons.MediumIcon} />
36+
<Story of={IconButtons.LargeIcon} />
37+
</FlexGridRow>
38+
<FlexGridRow width={3} desktop={3} hasGutter gutterSize={32} style={{ marginLeft: "16px", marginBottom: "16px" }}>
39+
<Story of={IconButtons.SmallIconDisabled} />
40+
<Story of={IconButtons.MediumIconDisabled} />
41+
<Story of={IconButtons.LargeIconDisabled} />
42+
</FlexGridRow>
43+
# Icon Dark Button Variants
44+
<FlexGridRow width={3} desktop={3} hasGutter gutterSize={32} style={{ marginLeft: "16px", marginBottom: "16px",backgroundColor: "#323a44" }}>
45+
<Story of={IconButtons.DrakSmallIcon} />
46+
<Story of={IconButtons.DarkMediumIcon} />
47+
<Story of={IconButtons.DarkLargeIcon} />
48+
</FlexGridRow>
49+
<FlexGridRow width={3} desktop={3} hasGutter gutterSize={32} style={{ marginLeft: "16px", marginBottom: "16px",backgroundColor: "#323a44" }}>
50+
<Story of={IconButtons.DarkSmallIconDisabled} />
51+
<Story of={IconButtons.DarkMediumIconDisabled} />
52+
<Story of={IconButtons.DarkLargeDisabled} />
53+
</FlexGridRow>

‎.storybook/stories/iconButtons.stories.js‎

Lines changed: 287 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -2,51 +2,295 @@ import React from "react";
22
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
33
import Button from "../../components/Button";
44
export default {
5-
title: "Buttons/Stacked",
5+
title: "Buttons/Icon",
66
component: Button,
77
tags: ["autodocs"],
88
};
9+
//Stacked Icon Variants Stories
10+
export const StackedSmall = {
11+
tags: ["!dev"],
12+
args: {
13+
buttonSize: "sm",
14+
buttonTitle: "Test",
15+
copy: "sm",
16+
backgroundColor: "light",
17+
buttonType: "stacked",
18+
imageAlignment: "left",
19+
image: <FontAwesomeIcon icon="share-alt" />,
20+
},
21+
};
22+
23+
export const StackedMedium = {
24+
args: {
25+
buttonSize: "md",
26+
buttonTitle: "Test",
27+
copy: "md",
28+
backgroundColor: "light",
29+
buttonType: "stacked",
30+
imageAlignment: "left",
31+
image: <FontAwesomeIcon icon="share-alt" />,
32+
},
33+
};
34+
export const StackedLarge = {
35+
tags: ["!dev"],
36+
args: {
37+
buttonSize: "md",
38+
buttonTitle: "Test",
39+
copy: "lg",
40+
backgroundColor: "light",
41+
buttonType: "stacked",
42+
imageAlignment: "left",
43+
image: <FontAwesomeIcon icon="share-alt" />,
44+
},
45+
};
946

10-
export const StackedLight = {
11-
args : {
12-
buttonSize: 'md',
13-
buttonTitle: "Test",
14-
copy: "Test",
15-
backgroundColor: "light",
16-
buttonType: "stacked",
17-
imageAlignment: "left",
18-
image:<FontAwesomeIcon icon="share-alt"/>
19-
}
20-
}
21-
export const StackedDarkBackground = {
22-
args: {
23-
buttonSize: 'md',
24-
buttonTitle: "Test",
25-
copy: "Test",
26-
backgroundColor: "dark",
27-
buttonType: "stacked",
28-
imageAlignment: "left",
29-
image:<FontAwesomeIcon icon="share-alt"/>
30-
}
31-
}
32-
33-
34-
export const Icon = {
35-
args : {
36-
buttonSize: 'md',
37-
backgroundColor: "light",
38-
buttonType: "icon",
39-
imageAlignment: "left",
40-
image:<FontAwesomeIcon icon="share-alt"/>
41-
}}
42-
43-
export const iconButtonDarkBackground = {
44-
args : {
45-
buttonSize: 'md',
46-
backgroundColor: "dark",
47-
buttonType: "icon",
48-
imageAlignment: "left",
49-
image:<FontAwesomeIcon icon="share-alt"/>
50-
}
51-
}
47+
export const StackedSmallDisabled = {
48+
tags: ["!dev"],
49+
args: {
50+
buttonSize: "sm",
51+
buttonTitle: "Test",
52+
copy: "sm",
53+
backgroundColor: "light",
54+
buttonType: "stacked",
55+
imageAlignment: "left",
56+
image: <FontAwesomeIcon icon="share-alt" />,
57+
disabled: true,
58+
},
59+
};
5260

61+
export const StackedMediumDisabled = {
62+
args: {
63+
buttonSize: "md",
64+
buttonTitle: "Test",
65+
copy: "md",
66+
backgroundColor: "light",
67+
buttonType: "stacked",
68+
imageAlignment: "left",
69+
image: <FontAwesomeIcon icon="share-alt" />,
70+
disabled: true,
71+
},
72+
};
73+
export const StackedLargeDisabled = {
74+
tags: ["!dev"],
75+
args: {
76+
buttonSize: "md",
77+
buttonTitle: "Test",
78+
copy: "lg",
79+
backgroundColor: "light",
80+
buttonType: "stacked",
81+
imageAlignment: "left",
82+
image: <FontAwesomeIcon icon="share-alt" />,
83+
disabled: true,
84+
},
85+
};
86+
87+
export const DarkStackedSmall = {
88+
tags: ["!dev"],
89+
args: {
90+
buttonSize: "sm",
91+
buttonTitle: "Test",
92+
copy: "sm",
93+
backgroundColor: "dark",
94+
buttonType: "stacked",
95+
imageAlignment: "left",
96+
image: <FontAwesomeIcon icon="share-alt" />,
97+
},
98+
};
99+
100+
export const DarkStackedMedium = {
101+
args: {
102+
buttonSize: "md",
103+
buttonTitle: "Test",
104+
copy: "md",
105+
backgroundColor: "dark",
106+
buttonType: "stacked",
107+
imageAlignment: "left",
108+
image: <FontAwesomeIcon icon="share-alt" />,
109+
},
110+
};
111+
export const DarkStackedLarge = {
112+
tags: ["!dev"],
113+
args: {
114+
buttonSize: "md",
115+
buttonTitle: "Test",
116+
copy: "lg",
117+
backgroundColor: "dark",
118+
buttonType: "stacked",
119+
imageAlignment: "left",
120+
image: <FontAwesomeIcon icon="share-alt" />,
121+
},
122+
};
123+
124+
export const DarkStackedSmallDisabled = {
125+
tags: ["!dev"],
126+
args: {
127+
buttonSize: "sm",
128+
buttonTitle: "Test",
129+
copy: "sm",
130+
backgroundColor: "dark",
131+
buttonType: "stacked",
132+
imageAlignment: "left",
133+
image: <FontAwesomeIcon icon="share-alt" />,
134+
disabled: true,
135+
},
136+
};
137+
138+
export const DarkStackedMediumDisabled = {
139+
args: {
140+
buttonSize: "md",
141+
buttonTitle: "Test",
142+
copy: "md",
143+
backgroundColor: "dark",
144+
buttonType: "stacked",
145+
imageAlignment: "left",
146+
image: <FontAwesomeIcon icon="share-alt" />,
147+
disabled: true,
148+
},
149+
};
150+
export const DarkStackedLargeDisabled = {
151+
tags: ["!dev"],
152+
args: {
153+
buttonSize: "md",
154+
buttonTitle: "Test",
155+
copy: "lg",
156+
backgroundColor: "dark",
157+
buttonType: "stacked",
158+
imageAlignment: "left",
159+
image: <FontAwesomeIcon icon="share-alt" />,
160+
disabled: true,
161+
},
162+
};
163+
164+
//Icon variants stories
165+
export const SmallIcon = {
166+
tags: ["!dev"],
167+
args: {
168+
buttonSize: "sm",
169+
backgroundColor: "light",
170+
buttonType: "icon",
171+
imageAlignment: "left",
172+
image: <FontAwesomeIcon icon="share-alt" />,
173+
},
174+
};
175+
176+
export const MediumIcon = {
177+
args: {
178+
buttonSize: "md",
179+
backgroundColor: "light",
180+
buttonType: "icon",
181+
imageAlignment: "left",
182+
image: <FontAwesomeIcon icon="share-alt" />,
183+
},
184+
};
185+
186+
export const LargeIcon = {
187+
tags: ["!dev"],
188+
args: {
189+
buttonSize: "lg",
190+
backgroundColor: "light",
191+
buttonType: "icon",
192+
imageAlignment: "left",
193+
image: <FontAwesomeIcon icon="share-alt" />,
194+
},
195+
};
196+
197+
export const SmallIconDisabled = {
198+
tags: ["!dev"],
199+
args: {
200+
buttonSize: "sm",
201+
backgroundColor: "light",
202+
buttonType: "icon",
203+
imageAlignment: "left",
204+
image: <FontAwesomeIcon icon="share-alt" />,
205+
disabled: true,
206+
},
207+
};
208+
209+
export const MediumIconDisabled = {
210+
args: {
211+
buttonSize: "md",
212+
backgroundColor: "light",
213+
buttonType: "icon",
214+
imageAlignment: "left",
215+
image: <FontAwesomeIcon icon="share-alt" />,
216+
disabled: true,
217+
},
218+
};
219+
220+
export const LargeIconDisabled = {
221+
args: {
222+
buttonSize: "lg",
223+
backgroundColor: "light",
224+
buttonType: "icon",
225+
imageAlignment: "left",
226+
image: <FontAwesomeIcon icon="share-alt" />,
227+
disabled: true,
228+
},
229+
};
230+
231+
export const DrakSmallIcon = {
232+
tags: ["!dev"],
233+
args: {
234+
buttonSize: "sm",
235+
backgroundColor: "dark",
236+
buttonType: "icon",
237+
imageAlignment: "left",
238+
image: <FontAwesomeIcon icon="share-alt" />,
239+
},
240+
};
241+
242+
export const DarkMediumIcon = {
243+
args: {
244+
buttonSize: "md",
245+
backgroundColor: "dark",
246+
buttonType: "icon",
247+
imageAlignment: "left",
248+
image: <FontAwesomeIcon icon="share-alt" />,
249+
},
250+
};
251+
252+
export const DarkLargeIcon = {
253+
tags: ["!dev"],
254+
args: {
255+
buttonSize: "lg",
256+
backgroundColor: "dark",
257+
buttonType: "icon",
258+
imageAlignment: "left",
259+
image: <FontAwesomeIcon icon="share-alt" />,
260+
},
261+
};
262+
263+
export const DarkSmallIconDisabled = {
264+
tags: ["!dev"],
265+
args: {
266+
buttonSize: "sm",
267+
backgroundColor: "dark",
268+
buttonType: "icon",
269+
imageAlignment: "left",
270+
image: <FontAwesomeIcon icon="share-alt" />,
271+
disabled: true,
272+
},
273+
};
274+
275+
export const DarkMediumIconDisabled = {
276+
args: {
277+
buttonSize: "md",
278+
backgroundColor: "dark",
279+
buttonType: "icon",
280+
imageAlignment: "left",
281+
image: <FontAwesomeIcon icon="share-alt" />,
282+
disabled: true,
283+
},
284+
};
285+
286+
export const DarkLargeDisabled = {
287+
tags: ["!dev"],
288+
args: {
289+
buttonSize: "lg",
290+
backgroundColor: "dark",
291+
buttonType: "icon",
292+
imageAlignment: "left",
293+
image: <FontAwesomeIcon icon="share-alt" />,
294+
disabled: true,
295+
},
296+
};

0 commit comments

Comments
 (0)