Skip to content

Commit 5bad7a3

Browse files
AFatmaasangeethababu9223heloiselui
authored
chore(Tile): add controls args to every story (#21612)
Co-authored-by: Sangeetha Babu <sangeetha9223@gmail.com> Co-authored-by: Heloise Lui <71858203+heloiselui@users.noreply.github.com>
1 parent a507191 commit 5bad7a3

1 file changed

Lines changed: 106 additions & 72 deletions

File tree

‎packages/react/src/components/Tile/Tile.stories.js‎

Lines changed: 106 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -52,15 +52,45 @@ export default {
5252
},
5353
argTypes: {
5454
light: {
55+
control: {
56+
type: 'boolean',
57+
},
58+
description: 'Light variant',
5559
table: {
56-
disable: true,
60+
defaultValue: { summary: 'false' },
5761
},
5862
},
5963
slug: {
6064
table: {
6165
disable: true,
6266
},
6367
},
68+
decorator: {
69+
table: {
70+
disable: true,
71+
},
72+
},
73+
href: {
74+
control: { type: 'text' },
75+
},
76+
clicked: {
77+
control: { type: 'boolean' },
78+
},
79+
disabled: {
80+
control: {
81+
type: 'boolean',
82+
},
83+
},
84+
selected: {
85+
control: {
86+
type: 'boolean',
87+
},
88+
},
89+
title: {
90+
control: {
91+
type: 'text',
92+
},
93+
},
6494
},
6595
parameters: {
6696
docs: {
@@ -69,9 +99,9 @@ export default {
6999
},
70100
};
71101

72-
export const Default = () => {
102+
export const Default = (args) => {
73103
return (
74-
<Tile id="tile-1">
104+
<Tile id="tile-1" {...args}>
75105
Default tile
76106
<br />
77107
<br />
@@ -80,10 +110,20 @@ export const Default = () => {
80110
);
81111
};
82112

83-
export const DefaultWithLayer = () => (
113+
Default.args = {
114+
light: false,
115+
clicked: false,
116+
disabled: false,
117+
hasRoundedCorners: false,
118+
href: '',
119+
selected: false,
120+
title: '',
121+
};
122+
123+
export const DefaultWithLayer = (args) => (
84124
<WithLayer>
85125
{(layer) => (
86-
<Tile id={`tile-${layer}`}>
126+
<Tile id={`tile-${layer}`} {...args}>
87127
Default tile
88128
<br />
89129
<br />
@@ -93,65 +133,51 @@ export const DefaultWithLayer = () => (
93133
</WithLayer>
94134
);
95135

136+
DefaultWithLayer.args = {
137+
...Default.args,
138+
};
139+
96140
export const Clickable = (args) => {
97141
return (
98-
<ClickableTile
99-
id="clickable-tile-1"
100-
href="https://www.carbondesignsystem.com/"
101-
{...args}>
142+
<ClickableTile id="clickable-tile-1" {...args}>
102143
Clickable Tile
103144
</ClickableTile>
104145
);
105146
};
106147

107148
Clickable.args = {
149+
...Default.args,
150+
href: 'https://www.carbondesignsystem.com/',
108151
disabled: false,
109-
};
110-
111-
Clickable.argTypes = {
112-
disabled: {
113-
control: {
114-
type: 'boolean',
115-
},
116-
},
152+
clicked: false,
117153
};
118154

119155
export const ClickableWithCustomIcon = (args) => {
120156
return (
121-
<ClickableTile
122-
id="clickable-tile-1"
123-
href="https://www.carbondesignsystem.com/"
124-
renderIcon={Launch}
125-
{...args}>
157+
<ClickableTile id="clickable-tile-1" renderIcon={Launch} {...args}>
126158
Clickable Tile
127159
</ClickableTile>
128160
);
129161
};
130162

131163
ClickableWithCustomIcon.args = {
132-
disabled: false,
133-
};
134-
135-
ClickableWithCustomIcon.argTypes = {
136-
disabled: {
137-
control: {
138-
type: 'boolean',
139-
},
140-
},
164+
...Clickable.args,
141165
};
142166

143-
export const ClickableWithLayer = () => (
167+
export const ClickableWithLayer = (args) => (
144168
<WithLayer>
145169
{(layer) => (
146-
<ClickableTile
147-
id={`clickable-tile-${layer}`}
148-
href="https://www.carbondesignsystem.com/">
170+
<ClickableTile id={`clickable-tile-${layer}`} {...args}>
149171
Clickable tile
150172
</ClickableTile>
151173
)}
152174
</WithLayer>
153175
);
154176

177+
ClickableWithLayer.args = {
178+
...Clickable.args,
179+
};
180+
155181
export const Selectable = (args) => {
156182
return (
157183
<SelectableTile id="selectable-tile-1" {...args}>
@@ -161,15 +187,10 @@ export const Selectable = (args) => {
161187
};
162188

163189
Selectable.args = {
190+
...Default.args,
191+
selected: false,
164192
disabled: false,
165-
};
166-
167-
Selectable.argTypes = {
168-
disabled: {
169-
control: {
170-
type: 'boolean',
171-
},
172-
},
193+
title: 'title',
173194
};
174195

175196
export const MultiSelect = (args) => {
@@ -189,15 +210,7 @@ export const MultiSelect = (args) => {
189210
};
190211

191212
MultiSelect.args = {
192-
disabled: false,
193-
};
194-
195-
MultiSelect.argTypes = {
196-
disabled: {
197-
control: {
198-
type: 'boolean',
199-
},
200-
},
213+
...Selectable.args,
201214
};
202215

203216
export const Radio = (args) => {
@@ -210,18 +223,16 @@ export const Radio = (args) => {
210223
<RadioTile
211224
id="radio-tile-1"
212225
value="standard"
213-
style={{ marginBottom: '.5rem' }}
214-
{...args}>
226+
style={{ marginBottom: '.5rem' }}>
215227
Option 1
216228
</RadioTile>
217229
<RadioTile
218230
id="radio-tile-2"
219231
value="default-selected"
220-
style={{ marginBottom: '.5rem' }}
221-
{...args}>
232+
style={{ marginBottom: '.5rem' }}>
222233
Option 2
223234
</RadioTile>
224-
<RadioTile id="radio-tile-3" value="selected" {...args}>
235+
<RadioTile id="radio-tile-3" value="selected">
225236
Option 3
226237
</RadioTile>
227238
</TileGroup>
@@ -240,13 +251,14 @@ Radio.argTypes = {
240251
},
241252
};
242253

243-
export const RadioWithLayer = () => (
254+
export const RadioWithLayer = (args) => (
244255
<WithLayer>
245256
{(layer) => (
246257
<TileGroup
247258
defaultSelected="default-selected"
248259
legend="Radio Tile Group"
249-
name={`radio tile group ${layer}`}>
260+
name={`radio tile group ${layer}`}
261+
{...args}>
250262
<RadioTile
251263
id={`radio-tile-${layer}-1`}
252264
value="standard"
@@ -261,13 +273,14 @@ export const RadioWithLayer = () => (
261273
</WithLayer>
262274
);
263275

264-
export const Expandable = () => {
276+
RadioWithLayer.args = {
277+
disabled: false,
278+
};
279+
280+
export const Expandable = (args) => {
265281
return (
266282
<div style={{ width: '400px' }}>
267-
<ExpandableTile
268-
id="expandable-tile-1"
269-
tileCollapsedIconText="Interact to Expand tile"
270-
tileExpandedIconText="Interact to Collapse tile">
283+
<ExpandableTile id="expandable-tile-1" {...args}>
271284
<TileAboveTheFoldContent>
272285
<div style={{ height: '200px' }}>Above the fold content here</div>
273286
</TileAboveTheFoldContent>
@@ -279,14 +292,26 @@ export const Expandable = () => {
279292
);
280293
};
281294

282-
export const ExpandableWithInteractive = () => {
295+
Expandable.args = {
296+
...Default.args,
297+
expanded: false,
298+
tileCollapsedIconText: 'Interact to Expand tile',
299+
tileExpandedIconText: 'Interact to Collapse tile',
300+
};
301+
302+
Expandable.argTypes = {
303+
expanded: { control: 'boolean' },
304+
tileCollapsedIconText: { control: 'text' },
305+
tileExpandedIconText: { control: 'text' },
306+
};
307+
308+
export const ExpandableWithInteractive = (args) => {
283309
return (
284310
<div style={{ width: '400px' }}>
285311
<ExpandableTile
286312
onClick={() => console.log('click')}
287313
id="expandable-tile-1"
288-
tileCollapsedIconText="Interact to Expand tile"
289-
tileExpandedIconText="Interact to Collapse tile">
314+
{...args}>
290315
<TileAboveTheFoldContent>
291316
<div style={{ height: '200px', width: '200px' }}>
292317
Above the fold content here
@@ -306,15 +331,20 @@ export const ExpandableWithInteractive = () => {
306331
);
307332
};
308333

309-
export const ExpandableWithLayer = () => {
334+
ExpandableWithInteractive.args = {
335+
...Expandable.args,
336+
};
337+
338+
ExpandableWithInteractive.argTypes = {
339+
...Expandable.argTypes,
340+
};
341+
342+
export const ExpandableWithLayer = (args) => {
310343
return (
311344
<WithLayer>
312345
{(layer) => (
313346
<div style={{ width: '400px' }}>
314-
<ExpandableTile
315-
id={`expandable-tile-${layer}`}
316-
tileCollapsedIconText="Interact to Expand tile"
317-
tileExpandedIconText="Interact to Collapse tile">
347+
<ExpandableTile id={`expandable-tile-${layer}`} {...args}>
318348
<TileAboveTheFoldContent>
319349
<div style={{ height: '100px' }}>Above the fold content here</div>
320350
</TileAboveTheFoldContent>
@@ -328,6 +358,10 @@ export const ExpandableWithLayer = () => {
328358
);
329359
};
330360

361+
ExpandableWithLayer.args = {
362+
...Expandable.args,
363+
};
364+
331365
const aiLabel = (
332366
<AILabel className="ai-label-container">
333367
<AILabelContent>

0 commit comments

Comments
 (0)