Skip to content

Commit

Permalink
feat(carbon-react): add layer stories (#9861)
Browse files Browse the repository at this point in the history
  • Loading branch information
Alessandra Davila authored Oct 18, 2021
1 parent 021df4c commit b677f54
Show file tree
Hide file tree
Showing 11 changed files with 752 additions and 0 deletions.
148 changes: 148 additions & 0 deletions packages/carbon-react/src/components/CodeSnippet/CodeSnippet.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

import React from 'react';
import { CodeSnippet, CodeSnippetSkeleton } from 'carbon-components-react';
import { Layer } from '../Layer';

export default {
title: 'Components/CodeSnippet',
Expand Down Expand Up @@ -60,6 +61,153 @@ export const singleline = () => (
</CodeSnippet>
);

export const inlineWithLayer = () => {
return (
<>
<CodeSnippet type="inline" feedback="Copied to clipboard">
{'node -v'}
</CodeSnippet>
<Layer>
<CodeSnippet type="inline" feedback="Copied to clipboard">
{'node -v'}
</CodeSnippet>
<Layer>
<CodeSnippet type="inline" feedback="Copied to clipboard">
{'node -v'}
</CodeSnippet>
</Layer>
</Layer>
</>
);
};

export const multilineWithLayer = () => {
return (
<>
<CodeSnippet type="multi" feedback="Copied to clipboard">
{` "scripts": {
"build": "lerna run build --stream --prefix --npm-client yarn",
"ci-check": "carbon-cli ci-check",
"clean": "lerna run clean && lerna clean --yes && rimraf node_modules",
"doctoc": "doctoc --title '## Table of Contents'",
"format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
"format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'",
"lint": "eslint actions config codemods packages",
"lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables",
"sync": "carbon-cli sync",
"test": "cross-env BABEL_ENV=test jest",
"test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'"
},
"resolutions": {
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-is": "~16.9.0",
"react-test-renderer": "~16.9.0"
},
"devDependencies": {
"@babel/core": "^7.10.0",
"@babel/plugin-proposal-class-properties": "^7.7.4",
"@babel/plugin-proposal-export-default-from": "^7.7.4",
"@babel/plugin-proposal-export-namespace-from": "^7.7.4",
"@babel/plugin-transform-runtime": "^7.10.0",
"@babel/preset-env": "^7.10.0",
"@babel/preset-react": "^7.10.0",
"@babel/runtime": "^7.10.0",
"@commitlint/cli": "^8.3.5",`}
</CodeSnippet>
<Layer>
<CodeSnippet type="multi" feedback="Copied to clipboard">
{` "scripts": {
"build": "lerna run build --stream --prefix --npm-client yarn",
"ci-check": "carbon-cli ci-check",
"clean": "lerna run clean && lerna clean --yes && rimraf node_modules",
"doctoc": "doctoc --title '## Table of Contents'",
"format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
"format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'",
"lint": "eslint actions config codemods packages",
"lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables",
"sync": "carbon-cli sync",
"test": "cross-env BABEL_ENV=test jest",
"test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'"
},
"resolutions": {
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-is": "~16.9.0",
"react-test-renderer": "~16.9.0"
},
"devDependencies": {
"@babel/core": "^7.10.0",
"@babel/plugin-proposal-class-properties": "^7.7.4",
"@babel/plugin-proposal-export-default-from": "^7.7.4",
"@babel/plugin-proposal-export-namespace-from": "^7.7.4",
"@babel/plugin-transform-runtime": "^7.10.0",
"@babel/preset-env": "^7.10.0",
"@babel/preset-react": "^7.10.0",
"@babel/runtime": "^7.10.0",
"@commitlint/cli": "^8.3.5",`}
</CodeSnippet>
<Layer>
<CodeSnippet type="multi" feedback="Copied to clipboard">
{` "scripts": {
"build": "lerna run build --stream --prefix --npm-client yarn",
"ci-check": "carbon-cli ci-check",
"clean": "lerna run clean && lerna clean --yes && rimraf node_modules",
"doctoc": "doctoc --title '## Table of Contents'",
"format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
"format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'",
"lint": "eslint actions config codemods packages",
"lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables",
"sync": "carbon-cli sync",
"test": "cross-env BABEL_ENV=test jest",
"test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'"
},
"resolutions": {
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-is": "~16.9.0",
"react-test-renderer": "~16.9.0"
},
"devDependencies": {
"@babel/core": "^7.10.0",
"@babel/plugin-proposal-class-properties": "^7.7.4",
"@babel/plugin-proposal-export-default-from": "^7.7.4",
"@babel/plugin-proposal-export-namespace-from": "^7.7.4",
"@babel/plugin-transform-runtime": "^7.10.0",
"@babel/preset-env": "^7.10.0",
"@babel/preset-react": "^7.10.0",
"@babel/runtime": "^7.10.0",
"@commitlint/cli": "^8.3.5",`}
</CodeSnippet>
</Layer>
</Layer>
</>
);
};

export const singlelineWithLayer = () => {
return (
<>
<CodeSnippet type="single" feedback="Copied to clipboard">
yarn add carbon-components@latest carbon-components-react@latest
@carbon/icons-react@latest carbon-icons@latest
</CodeSnippet>
<Layer>
<CodeSnippet type="single" feedback="Copied to clipboard">
yarn add carbon-components@latest carbon-components-react@latest
@carbon/icons-react@latest carbon-icons@latest
</CodeSnippet>
<Layer>
<CodeSnippet type="single" feedback="Copied to clipboard">
yarn add carbon-components@latest carbon-components-react@latest
@carbon/icons-react@latest carbon-icons@latest
</CodeSnippet>
</Layer>
</Layer>
</>
);
};

export const skeleton = () => (
<div>
<CodeSnippetSkeleton type="single" style={{ marginBottom: 8 }} />
Expand Down
37 changes: 37 additions & 0 deletions packages/carbon-react/src/components/ComboBox/ComboBox.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

import React from 'react';
import { ComboBox } from 'carbon-components-react';
import { Layer } from '../Layer';

const items = [
{
Expand Down Expand Up @@ -54,3 +55,39 @@ export const Combobox = () => (
/>
</div>
);

export const withLayer = () => (
<div style={{ width: 300 }}>
<ComboBox
onChange={() => {}}
id="carbon-combobox"
items={items}
itemToString={(item) => (item ? item.text : '')}
placeholder="Filter..."
titleText="First Layer"
helperText="Combobox helper text"
/>
<Layer>
<ComboBox
onChange={() => {}}
id="carbon-combobox"
items={items}
itemToString={(item) => (item ? item.text : '')}
placeholder="Filter..."
titleText="Second Layer"
helperText="Combobox helper text"
/>
<Layer>
<ComboBox
onChange={() => {}}
id="carbon-combobox"
items={items}
itemToString={(item) => (item ? item.text : '')}
placeholder="Filter..."
titleText="Third Layer"
helperText="Combobox helper text"
/>
</Layer>
</Layer>
</div>
);
27 changes: 27 additions & 0 deletions packages/carbon-react/src/components/ContentSwitcher/ContentSwitcher.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

import React from 'react';
import { ContentSwitcher, Switch } from 'carbon-components-react';
import { Layer } from '../Layer';

export default {
title: 'Components/ContentSwitcher',
Expand All @@ -27,3 +28,29 @@ export const Default = () => (
<Switch name="three" text="Third section" />
</ContentSwitcher>
);

export const withLayer = () => {
return (
<>
<ContentSwitcher onChange={() => {}}>
<Switch name="one" text="First section" />
<Switch name="two" text="Second section" />
<Switch name="three" text="Third section" />
</ContentSwitcher>
<Layer>
<ContentSwitcher onChange={() => {}}>
<Switch name="one" text="First section" />
<Switch name="two" text="Second section" />
<Switch name="three" text="Third section" />
</ContentSwitcher>
<Layer>
<ContentSwitcher onChange={() => {}}>
<Switch name="one" text="First section" />
<Switch name="two" text="Second section" />
<Switch name="three" text="Third section" />
</ContentSwitcher>
</Layer>
</Layer>
</>
);
};
112 changes: 112 additions & 0 deletions packages/carbon-react/src/components/DatePicker/DatePicker.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
DatePickerInput,
DatePickerSkeleton,
} from 'carbon-components-react';
import { Layer } from '../Layer';

// const patterns = {
// 'Short (d{1,2}/d{4})': '\\d{1,2}/\\d{4}',
Expand Down Expand Up @@ -108,6 +109,117 @@ export const RangeWithCalendar = () => {
);
};

export const SimpleWithLayer = () => {
return (
<>
<DatePicker datePickerType="simple">
<DatePickerInput
placeholder="mm/dd/yyyy"
labelText="Date Picker label"
id="date-picker-simple"
/>
</DatePicker>
<Layer>
<DatePicker datePickerType="simple">
<DatePickerInput
placeholder="mm/dd/yyyy"
labelText="Date Picker label"
id="date-picker-simple"
/>
</DatePicker>
<Layer>
<DatePicker datePickerType="simple">
<DatePickerInput
placeholder="mm/dd/yyyy"
labelText="Date Picker label"
id="date-picker-simple"
/>
</DatePicker>
</Layer>
</Layer>
</>
);
};

export const SingleWithCalendarWithLayer = () => {
return (
<>
<DatePicker datePickerType="single">
<DatePickerInput
placeholder="mm/dd/yyyy"
labelText="Date Picker label"
id="date-picker-single"
/>
</DatePicker>
<Layer>
<DatePicker datePickerType="single">
<DatePickerInput
placeholder="mm/dd/yyyy"
labelText="Date Picker label"
id="date-picker-single"
/>
</DatePicker>
<Layer>
<DatePicker datePickerType="single">
<DatePickerInput
placeholder="mm/dd/yyyy"
labelText="Date Picker label"
id="date-picker-single"
/>
</DatePicker>
</Layer>
</Layer>
</>
);
};

export const RangeWithCalendarWithLayer = () => {
return (
<>
<DatePicker datePickerType="range">
<DatePickerInput
id="date-picker-input-id-start"
placeholder="mm/dd/yyyy"
labelText="Start date"
/>
<DatePickerInput
id="date-picker-input-id-finish"
placeholder="mm/dd/yyyy"
labelText="End date"
/>
</DatePicker>
<Layer>
<DatePicker datePickerType="range">
<DatePickerInput
id="date-picker-input-id-start"
placeholder="mm/dd/yyyy"
labelText="Start date"
/>
<DatePickerInput
id="date-picker-input-id-finish"
placeholder="mm/dd/yyyy"
labelText="End date"
/>
</DatePicker>
<Layer>
<DatePicker datePickerType="range">
<DatePickerInput
id="date-picker-input-id-start"
placeholder="mm/dd/yyyy"
labelText="Start date"
/>
<DatePickerInput
id="date-picker-input-id-finish"
placeholder="mm/dd/yyyy"
labelText="End date"
/>
</DatePicker>
</Layer>
</Layer>
</>
);
};

/* eslint-disable react/prop-types */
export const DatePickerPlayground = () => (
<DatePicker {...props.datePicker()}>
Expand Down
Loading

0 comments on commit b677f54

Please sign in to comment.