Skip to content

Commit 22cdc87

Browse files
abbeyhrtAlessandra Davilakodiakhq[bot]
authored
feat(react,carbon-react): add layer stories (#9838)
* feat(react,carbon-react): add layer stories and deprecate light prop * chore(react): update deprecation message for lsitbox light prop * chore(react): remove deprecation warning for light prop * chore(react): remove accidental change to content switcher Co-authored-by: Alessandra Davila <aledavila@ibm.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent 4a95fb7 commit 22cdc87

File tree

15 files changed

+341
-10
lines changed

15 files changed

+341
-10
lines changed

‎packages/carbon-react/src/components/Select/Select.stories.js

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
SelectItemGroup,
1313
SelectSkeleton,
1414
} from 'carbon-components-react';
15+
import { Layer } from '../Layer';
1516

1617
export default {
1718
title: 'Components/Select',
@@ -91,3 +92,60 @@ export const _Skeleton = () => (
9192
<SelectSkeleton />
9293
</div>
9394
);
95+
96+
export const withLayer = () => {
97+
return (
98+
<>
99+
<Select
100+
id="select-1"
101+
defaultValue="placeholder-item"
102+
labelText=""
103+
helperText="First layer">
104+
<SelectItem
105+
disabled
106+
hidden
107+
value="placeholder-item"
108+
text="Choose an option"
109+
/>
110+
<SelectItem value="option-1" text="Option 1" />
111+
<SelectItem value="option-2" text="Option 2" />
112+
</Select>
113+
<Layer>
114+
<Select
115+
id="select-1"
116+
defaultValue="placeholder-item"
117+
labelText=""
118+
helperText=" Second layer">
119+
<SelectItem
120+
disabled
121+
hidden
122+
value="placeholder-item"
123+
text="Choose an option"
124+
/>
125+
<SelectItem value="option-1" text="Option 1" />
126+
<SelectItem value="option-2" text="Option 2" />
127+
<SelectItem value="option-3" text="Option 3" />
128+
<SelectItem value="option-4" text="Option 4" />
129+
</Select>
130+
<Layer>
131+
<Select
132+
id="select-1"
133+
defaultValue="placeholder-item"
134+
labelText=""
135+
helperText="Third layer">
136+
<SelectItem
137+
disabled
138+
hidden
139+
value="placeholder-item"
140+
text="Choose an option"
141+
/>
142+
<SelectItem value="option-1" text="Option 1" />
143+
<SelectItem value="option-2" text="Option 2" />
144+
<SelectItem value="option-3" text="Option 3" />
145+
<SelectItem value="option-4" text="Option 4" />
146+
</Select>
147+
</Layer>
148+
</Layer>
149+
</>
150+
);
151+
};

‎packages/carbon-react/src/components/TextArea/TextArea.stories.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77

88
import React from 'react';
99
import { TextArea, TextAreaSkeleton } from 'carbon-components-react';
10+
import { Layer } from '../Layer';
1011

1112
export default {
1213
title: 'Components/TextArea',
@@ -29,4 +30,39 @@ export const Default = () => (
2930
/>
3031
);
3132

33+
export const withLayer = () => {
34+
return (
35+
<>
36+
<TextArea
37+
labelText="First layer"
38+
helperText="Optional helper text"
39+
placeholder="Placeholder text"
40+
cols={50}
41+
rows={4}
42+
id="text-area-1"
43+
/>
44+
<Layer>
45+
<TextArea
46+
labelText="Second layer"
47+
helperText="Optional helper text"
48+
placeholder="Placeholder text"
49+
cols={50}
50+
rows={4}
51+
id="text-area-1"
52+
/>
53+
<Layer>
54+
<TextArea
55+
labelText="Third layer"
56+
helperText="Optional helper text"
57+
placeholder="Placeholder text"
58+
cols={50}
59+
rows={4}
60+
id="text-area-1"
61+
/>
62+
</Layer>
63+
</Layer>
64+
</>
65+
);
66+
};
67+
3268
export const Skeleton = () => <TextAreaSkeleton />;

‎packages/carbon-react/src/components/TextInput/TextInput.stories.js

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
import React from 'react';
99
import { TextInput, TextInputSkeleton, FluidForm } from '.';
10-
10+
import { Layer } from '../Layer';
1111
import mdx from './TextInput.mdx';
1212

1313
export default {
@@ -54,4 +54,33 @@ export const TogglePasswordVisibility = () => {
5454
);
5555
};
5656

57+
export const withLayer = () => {
58+
return (
59+
<>
60+
<TextInput
61+
type="text"
62+
labelText="First layer"
63+
defaultValue="This is not a default value"
64+
helperText="Optional help text"
65+
/>
66+
<Layer>
67+
<TextInput
68+
type="text"
69+
labelText="Second layer"
70+
defaultValue="This is not a default value"
71+
helperText="Optional help text"
72+
/>
73+
<Layer>
74+
<TextInput
75+
type="text"
76+
labelText="Third layer"
77+
defaultValue="This is not a default value"
78+
helperText="Optional help text"
79+
/>
80+
</Layer>
81+
</Layer>
82+
</>
83+
);
84+
};
85+
5786
export const Skeleton = () => <TextInputSkeleton />;

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

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
TileAboveTheFoldContent,
1919
TileBelowTheFoldContent,
2020
} from 'carbon-components-react';
21+
import { Layer } from '../Layer';
2122
import './tile-story.scss';
2223

2324
export default {
@@ -47,10 +48,53 @@ export const Default = () => {
4748
);
4849
};
4950

51+
export const DefaultWithLayer = () => {
52+
return (
53+
<>
54+
<Tile>
55+
First layer
56+
<br />
57+
<br />
58+
<Link href="https://www.carbondesignsystem.com">Link</Link>
59+
</Tile>
60+
<Layer>
61+
<Tile>
62+
Second layer
63+
<br />
64+
<br />
65+
<Link href="https://www.carbondesignsystem.com">Link</Link>
66+
</Tile>
67+
<Layer>
68+
<Tile>
69+
Third layer
70+
<br />
71+
<br />
72+
<Link href="https://www.carbondesignsystem.com">Link</Link>
73+
</Tile>
74+
</Layer>
75+
</Layer>
76+
</>
77+
);
78+
};
79+
5080
export const Clickable = () => {
5181
return <ClickableTile>Clickable Tile</ClickableTile>;
5282
};
5383

84+
export const ClickableWithLayer = () => {
85+
return (
86+
<>
87+
<ClickableTile>First layer</ClickableTile>
88+
<Layer>
89+
<ClickableTile>Second layer</ClickableTile>
90+
<Layer>
91+
<ClickableTile>Third layer</ClickableTile>
92+
</Layer>
93+
</Layer>
94+
</>
95+
);
96+
};
97+
5498
export const MultiSelect = () => {
5599
return (
56100
<div role="group" aria-label="selectable tiles">
@@ -67,6 +111,24 @@ export const MultiSelect = () => {
67111
);
68112
};
69113

114+
export const SelectableWithLayer = () => {
115+
<>
116+
<SelectableTile id="tile-3" name="tiles">
117+
First layer
118+
</SelectableTile>
119+
<Layer>
120+
<SelectableTile id="tile-3" name="tiles">
121+
Second layer
122+
</SelectableTile>
123+
<Layer>
124+
<SelectableTile id="tile-3" name="tiles">
125+
Third layer
126+
</SelectableTile>
127+
</Layer>
128+
</Layer>
129+
</>;
130+
};
131+
70132
export const Radio = () => {
71133
return (
72134
<TileGroup
@@ -86,6 +148,50 @@ export const Radio = () => {
86148
);
87149
};
88150

151+
export const RadioWithLayer = () => {
152+
return (
153+
<>
154+
<TileGroup
155+
defaultSelected="default-selected"
156+
legend="First layer"
157+
name="radio tile group">
158+
<RadioTile value="standard" style={{ marginBottom: '.5rem' }}>
159+
Option 1
160+
</RadioTile>
161+
<RadioTile value="default-selected" id="tile-2">
162+
Option 2
163+
</RadioTile>
164+
</TileGroup>
165+
<Layer>
166+
<TileGroup
167+
defaultSelected="default-selected"
168+
legend="Second Layer"
169+
name="radio tile group">
170+
<RadioTile value="standard" style={{ marginBottom: '.5rem' }}>
171+
Option 1
172+
</RadioTile>
173+
<RadioTile value="default-selected" id="tile-2">
174+
Option 2
175+
</RadioTile>
176+
</TileGroup>
177+
<Layer>
178+
<TileGroup
179+
defaultSelected="default-selected"
180+
legend="Third Layer"
181+
name="radio tile group">
182+
<RadioTile value="standard" style={{ marginBottom: '.5rem' }}>
183+
Option 1
184+
</RadioTile>
185+
<RadioTile value="default-selected" id="tile-2">
186+
Option 2
187+
</RadioTile>
188+
</TileGroup>
189+
</Layer>
190+
</Layer>
191+
</>
192+
);
193+
};
194+
89195
export const Expandable = () => (
90196
<ExpandableTile
91197
tileCollapsedIconText="Interact to Expand tile"
@@ -101,3 +207,53 @@ export const Expandable = () => (
101207
</TileBelowTheFoldContent>
102208
</ExpandableTile>
103209
);
210+
211+
export const ExpandableWithLayer = () => {
212+
return (
213+
<>
214+
<ExpandableTile
215+
tileCollapsedIconText="Interact to Expand tile"
216+
tileExpandedIconText="Interact to Collapse tile">
217+
<TileAboveTheFoldContent>
218+
<div style={{ height: '200px' }}>First layer</div>
219+
</TileAboveTheFoldContent>
220+
<TileBelowTheFoldContent>
221+
<div style={{ height: '400px' }}>
222+
Below the fold content here
223+
<TextInput id="test2" invalidText="A valid value is required" />
224+
</div>
225+
</TileBelowTheFoldContent>
226+
</ExpandableTile>
227+
<Layer>
228+
<ExpandableTile
229+
tileCollapsedIconText="Interact to Expand tile"
230+
tileExpandedIconText="Interact to Collapse tile">
231+
<TileAboveTheFoldContent>
232+
<div style={{ height: '200px' }}>Second layer</div>
233+
</TileAboveTheFoldContent>
234+
<TileBelowTheFoldContent>
235+
<div style={{ height: '400px' }}>
236+
Below the fold content here
237+
<TextInput id="test2" invalidText="A valid value is required" />
238+
</div>
239+
</TileBelowTheFoldContent>
240+
</ExpandableTile>
241+
<Layer>
242+
<ExpandableTile
243+
tileCollapsedIconText="Interact to Expand tile"
244+
tileExpandedIconText="Interact to Collapse tile">
245+
<TileAboveTheFoldContent>
246+
<div style={{ height: '200px' }}>Third layer</div>
247+
</TileAboveTheFoldContent>
248+
<TileBelowTheFoldContent>
249+
<div style={{ height: '400px' }}>
250+
Below the fold content here
251+
<TextInput id="test2" invalidText="A valid value is required" />
252+
</div>
253+
</TileBelowTheFoldContent>
254+
</ExpandableTile>
255+
</Layer>
256+
</Layer>
257+
</>
258+
);
259+
};

0 commit comments

Comments
 (0)