Skip to content

Commit b677f54

Browse files
author
Alessandra Davila
authored
feat(carbon-react): add layer stories (#9861)
1 parent 021df4c commit b677f54

11 files changed

Lines changed: 752 additions & 0 deletions

File tree

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

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

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

1112
export default {
1213
title: 'Components/CodeSnippet',
@@ -60,6 +61,153 @@ export const singleline = () => (
6061
</CodeSnippet>
6162
);
6263

64+
export const inlineWithLayer = () => {
65+
return (
66+
<>
67+
<CodeSnippet type="inline" feedback="Copied to clipboard">
68+
{'node -v'}
69+
</CodeSnippet>
70+
<Layer>
71+
<CodeSnippet type="inline" feedback="Copied to clipboard">
72+
{'node -v'}
73+
</CodeSnippet>
74+
<Layer>
75+
<CodeSnippet type="inline" feedback="Copied to clipboard">
76+
{'node -v'}
77+
</CodeSnippet>
78+
</Layer>
79+
</Layer>
80+
</>
81+
);
82+
};
83+
84+
export const multilineWithLayer = () => {
85+
return (
86+
<>
87+
<CodeSnippet type="multi" feedback="Copied to clipboard">
88+
{` "scripts": {
89+
"build": "lerna run build --stream --prefix --npm-client yarn",
90+
"ci-check": "carbon-cli ci-check",
91+
"clean": "lerna run clean && lerna clean --yes && rimraf node_modules",
92+
"doctoc": "doctoc --title '## Table of Contents'",
93+
"format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
94+
"format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'",
95+
"lint": "eslint actions config codemods packages",
96+
"lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables",
97+
"sync": "carbon-cli sync",
98+
"test": "cross-env BABEL_ENV=test jest",
99+
"test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'"
100+
},
101+
"resolutions": {
102+
"react": "~16.9.0",
103+
"react-dom": "~16.9.0",
104+
"react-is": "~16.9.0",
105+
"react-test-renderer": "~16.9.0"
106+
},
107+
"devDependencies": {
108+
"@babel/core": "^7.10.0",
109+
"@babel/plugin-proposal-class-properties": "^7.7.4",
110+
"@babel/plugin-proposal-export-default-from": "^7.7.4",
111+
"@babel/plugin-proposal-export-namespace-from": "^7.7.4",
112+
"@babel/plugin-transform-runtime": "^7.10.0",
113+
"@babel/preset-env": "^7.10.0",
114+
"@babel/preset-react": "^7.10.0",
115+
"@babel/runtime": "^7.10.0",
116+
"@commitlint/cli": "^8.3.5",`}
117+
</CodeSnippet>
118+
<Layer>
119+
<CodeSnippet type="multi" feedback="Copied to clipboard">
120+
{` "scripts": {
121+
"build": "lerna run build --stream --prefix --npm-client yarn",
122+
"ci-check": "carbon-cli ci-check",
123+
"clean": "lerna run clean && lerna clean --yes && rimraf node_modules",
124+
"doctoc": "doctoc --title '## Table of Contents'",
125+
"format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
126+
"format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'",
127+
"lint": "eslint actions config codemods packages",
128+
"lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables",
129+
"sync": "carbon-cli sync",
130+
"test": "cross-env BABEL_ENV=test jest",
131+
"test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'"
132+
},
133+
"resolutions": {
134+
"react": "~16.9.0",
135+
"react-dom": "~16.9.0",
136+
"react-is": "~16.9.0",
137+
"react-test-renderer": "~16.9.0"
138+
},
139+
"devDependencies": {
140+
"@babel/core": "^7.10.0",
141+
"@babel/plugin-proposal-class-properties": "^7.7.4",
142+
"@babel/plugin-proposal-export-default-from": "^7.7.4",
143+
"@babel/plugin-proposal-export-namespace-from": "^7.7.4",
144+
"@babel/plugin-transform-runtime": "^7.10.0",
145+
"@babel/preset-env": "^7.10.0",
146+
"@babel/preset-react": "^7.10.0",
147+
"@babel/runtime": "^7.10.0",
148+
"@commitlint/cli": "^8.3.5",`}
149+
</CodeSnippet>
150+
<Layer>
151+
<CodeSnippet type="multi" feedback="Copied to clipboard">
152+
{` "scripts": {
153+
"build": "lerna run build --stream --prefix --npm-client yarn",
154+
"ci-check": "carbon-cli ci-check",
155+
"clean": "lerna run clean && lerna clean --yes && rimraf node_modules",
156+
"doctoc": "doctoc --title '## Table of Contents'",
157+
"format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
158+
"format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'",
159+
"lint": "eslint actions config codemods packages",
160+
"lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables",
161+
"sync": "carbon-cli sync",
162+
"test": "cross-env BABEL_ENV=test jest",
163+
"test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'"
164+
},
165+
"resolutions": {
166+
"react": "~16.9.0",
167+
"react-dom": "~16.9.0",
168+
"react-is": "~16.9.0",
169+
"react-test-renderer": "~16.9.0"
170+
},
171+
"devDependencies": {
172+
"@babel/core": "^7.10.0",
173+
"@babel/plugin-proposal-class-properties": "^7.7.4",
174+
"@babel/plugin-proposal-export-default-from": "^7.7.4",
175+
"@babel/plugin-proposal-export-namespace-from": "^7.7.4",
176+
"@babel/plugin-transform-runtime": "^7.10.0",
177+
"@babel/preset-env": "^7.10.0",
178+
"@babel/preset-react": "^7.10.0",
179+
"@babel/runtime": "^7.10.0",
180+
"@commitlint/cli": "^8.3.5",`}
181+
</CodeSnippet>
182+
</Layer>
183+
</Layer>
184+
</>
185+
);
186+
};
187+
188+
export const singlelineWithLayer = () => {
189+
return (
190+
<>
191+
<CodeSnippet type="single" feedback="Copied to clipboard">
192+
yarn add carbon-components@latest carbon-components-react@latest
193+
@carbon/icons-react@latest carbon-icons@latest
194+
</CodeSnippet>
195+
<Layer>
196+
<CodeSnippet type="single" feedback="Copied to clipboard">
197+
yarn add carbon-components@latest carbon-components-react@latest
198+
@carbon/icons-react@latest carbon-icons@latest
199+
</CodeSnippet>
200+
<Layer>
201+
<CodeSnippet type="single" feedback="Copied to clipboard">
202+
yarn add carbon-components@latest carbon-components-react@latest
203+
@carbon/icons-react@latest carbon-icons@latest
204+
</CodeSnippet>
205+
</Layer>
206+
</Layer>
207+
</>
208+
);
209+
};
210+
63211
export const skeleton = () => (
64212
<div>
65213
<CodeSnippetSkeleton type="single" style={{ marginBottom: 8 }} />

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

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

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

1112
const items = [
1213
{
@@ -54,3 +55,39 @@ export const Combobox = () => (
5455
/>
5556
</div>
5657
);
58+
59+
export const withLayer = () => (
60+
<div style={{ width: 300 }}>
61+
<ComboBox
62+
onChange={() => {}}
63+
id="carbon-combobox"
64+
items={items}
65+
itemToString={(item) => (item ? item.text : '')}
66+
placeholder="Filter..."
67+
titleText="First Layer"
68+
helperText="Combobox helper text"
69+
/>
70+
<Layer>
71+
<ComboBox
72+
onChange={() => {}}
73+
id="carbon-combobox"
74+
items={items}
75+
itemToString={(item) => (item ? item.text : '')}
76+
placeholder="Filter..."
77+
titleText="Second Layer"
78+
helperText="Combobox helper text"
79+
/>
80+
<Layer>
81+
<ComboBox
82+
onChange={() => {}}
83+
id="carbon-combobox"
84+
items={items}
85+
itemToString={(item) => (item ? item.text : '')}
86+
placeholder="Filter..."
87+
titleText="Third Layer"
88+
helperText="Combobox helper text"
89+
/>
90+
</Layer>
91+
</Layer>
92+
</div>
93+
);

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

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

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

1112
export default {
1213
title: 'Components/ContentSwitcher',
@@ -27,3 +28,29 @@ export const Default = () => (
2728
<Switch name="three" text="Third section" />
2829
</ContentSwitcher>
2930
);
31+
32+
export const withLayer = () => {
33+
return (
34+
<>
35+
<ContentSwitcher onChange={() => {}}>
36+
<Switch name="one" text="First section" />
37+
<Switch name="two" text="Second section" />
38+
<Switch name="three" text="Third section" />
39+
</ContentSwitcher>
40+
<Layer>
41+
<ContentSwitcher onChange={() => {}}>
42+
<Switch name="one" text="First section" />
43+
<Switch name="two" text="Second section" />
44+
<Switch name="three" text="Third section" />
45+
</ContentSwitcher>
46+
<Layer>
47+
<ContentSwitcher onChange={() => {}}>
48+
<Switch name="one" text="First section" />
49+
<Switch name="two" text="Second section" />
50+
<Switch name="three" text="Third section" />
51+
</ContentSwitcher>
52+
</Layer>
53+
</Layer>
54+
</>
55+
);
56+
};

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

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

1617
// const patterns = {
1718
// 'Short (d{1,2}/d{4})': '\\d{1,2}/\\d{4}',
@@ -108,6 +109,117 @@ export const RangeWithCalendar = () => {
108109
);
109110
};
110111

112+
export const SimpleWithLayer = () => {
113+
return (
114+
<>
115+
<DatePicker datePickerType="simple">
116+
<DatePickerInput
117+
placeholder="mm/dd/yyyy"
118+
labelText="Date Picker label"
119+
id="date-picker-simple"
120+
/>
121+
</DatePicker>
122+
<Layer>
123+
<DatePicker datePickerType="simple">
124+
<DatePickerInput
125+
placeholder="mm/dd/yyyy"
126+
labelText="Date Picker label"
127+
id="date-picker-simple"
128+
/>
129+
</DatePicker>
130+
<Layer>
131+
<DatePicker datePickerType="simple">
132+
<DatePickerInput
133+
placeholder="mm/dd/yyyy"
134+
labelText="Date Picker label"
135+
id="date-picker-simple"
136+
/>
137+
</DatePicker>
138+
</Layer>
139+
</Layer>
140+
</>
141+
);
142+
};
143+
144+
export const SingleWithCalendarWithLayer = () => {
145+
return (
146+
<>
147+
<DatePicker datePickerType="single">
148+
<DatePickerInput
149+
placeholder="mm/dd/yyyy"
150+
labelText="Date Picker label"
151+
id="date-picker-single"
152+
/>
153+
</DatePicker>
154+
<Layer>
155+
<DatePicker datePickerType="single">
156+
<DatePickerInput
157+
placeholder="mm/dd/yyyy"
158+
labelText="Date Picker label"
159+
id="date-picker-single"
160+
/>
161+
</DatePicker>
162+
<Layer>
163+
<DatePicker datePickerType="single">
164+
<DatePickerInput
165+
placeholder="mm/dd/yyyy"
166+
labelText="Date Picker label"
167+
id="date-picker-single"
168+
/>
169+
</DatePicker>
170+
</Layer>
171+
</Layer>
172+
</>
173+
);
174+
};
175+
176+
export const RangeWithCalendarWithLayer = () => {
177+
return (
178+
<>
179+
<DatePicker datePickerType="range">
180+
<DatePickerInput
181+
id="date-picker-input-id-start"
182+
placeholder="mm/dd/yyyy"
183+
labelText="Start date"
184+
/>
185+
<DatePickerInput
186+
id="date-picker-input-id-finish"
187+
placeholder="mm/dd/yyyy"
188+
labelText="End date"
189+
/>
190+
</DatePicker>
191+
<Layer>
192+
<DatePicker datePickerType="range">
193+
<DatePickerInput
194+
id="date-picker-input-id-start"
195+
placeholder="mm/dd/yyyy"
196+
labelText="Start date"
197+
/>
198+
<DatePickerInput
199+
id="date-picker-input-id-finish"
200+
placeholder="mm/dd/yyyy"
201+
labelText="End date"
202+
/>
203+
</DatePicker>
204+
<Layer>
205+
<DatePicker datePickerType="range">
206+
<DatePickerInput
207+
id="date-picker-input-id-start"
208+
placeholder="mm/dd/yyyy"
209+
labelText="Start date"
210+
/>
211+
<DatePickerInput
212+
id="date-picker-input-id-finish"
213+
placeholder="mm/dd/yyyy"
214+
labelText="End date"
215+
/>
216+
</DatePicker>
217+
</Layer>
218+
</Layer>
219+
</>
220+
);
221+
};
222+
111223
/* eslint-disable react/prop-types */
112224
export const DatePickerPlayground = () => (
113225
<DatePicker {...props.datePicker()}>

0 commit comments

Comments
 (0)