Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(react,carbon-react): add layer stories #9838

Merged
merged 8 commits into from
Oct 21, 2021
+341 −10
Merged

feat(react,carbon-react): add layer stories #9838

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3967f65
feat(react,carbon-react): add layer stories and deprecate light prop
abbeyhrt Oct 11, 2021
7434e16
chore(react): update deprecation message for lsitbox light prop
abbeyhrt Oct 11, 2021
df41b30
Merge branch 'main' into feat/add-layer-stories
Oct 14, 2021
39338e5
chore(react): remove deprecation warning for light prop
abbeyhrt Oct 14, 2021
d26d350
Merge branch 'main' of github.com:carbon-design-system/carbon into fe…
abbeyhrt Oct 14, 2021
f9c531f
Merge branch 'feat/add-layer-stories' of github.com:abbeyhrt/my-carbo…
abbeyhrt Oct 14, 2021
445b184
chore(react): remove accidental change to content switcher
abbeyhrt Oct 14, 2021
4cf39c6
Merge branch 'main' into feat/add-layer-stories
kodiakhq[bot] Oct 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions packages/carbon-react/src/components/Select/Select.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
SelectItemGroup,
SelectSkeleton,
} from 'carbon-components-react';
import { Layer } from '../Layer';

export default {
title: 'Components/Select',
Expand Down Expand Up @@ -91,3 +92,60 @@ export const _Skeleton = () => (
<SelectSkeleton />
</div>
);

export const withLayer = () => {
return (
<>
<Select
id="select-1"
defaultValue="placeholder-item"
labelText=""
helperText="First layer">
<SelectItem
disabled
hidden
value="placeholder-item"
text="Choose an option"
/>
<SelectItem value="option-1" text="Option 1" />
<SelectItem value="option-2" text="Option 2" />
</Select>
<Layer>
<Select
id="select-1"
defaultValue="placeholder-item"
labelText=""
helperText=" Second layer">
<SelectItem
disabled
hidden
value="placeholder-item"
text="Choose an option"
/>
<SelectItem value="option-1" text="Option 1" />
<SelectItem value="option-2" text="Option 2" />
<SelectItem value="option-3" text="Option 3" />
<SelectItem value="option-4" text="Option 4" />
</Select>
<Layer>
<Select
id="select-1"
defaultValue="placeholder-item"
labelText=""
helperText="Third layer">
<SelectItem
disabled
hidden
value="placeholder-item"
text="Choose an option"
/>
<SelectItem value="option-1" text="Option 1" />
<SelectItem value="option-2" text="Option 2" />
<SelectItem value="option-3" text="Option 3" />
<SelectItem value="option-4" text="Option 4" />
</Select>
</Layer>
</Layer>
</>
);
};
36 changes: 36 additions & 0 deletions packages/carbon-react/src/components/TextArea/TextArea.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

import React from 'react';
import { TextArea, TextAreaSkeleton } from 'carbon-components-react';
import { Layer } from '../Layer';

export default {
title: 'Components/TextArea',
Expand All @@ -29,4 +30,39 @@ export const Default = () => (
/>
);

export const withLayer = () => {
return (
<>
<TextArea
labelText="First layer"
helperText="Optional helper text"
placeholder="Placeholder text"
cols={50}
rows={4}
id="text-area-1"
/>
<Layer>
<TextArea
labelText="Second layer"
helperText="Optional helper text"
placeholder="Placeholder text"
cols={50}
rows={4}
id="text-area-1"
/>
<Layer>
<TextArea
labelText="Third layer"
helperText="Optional helper text"
placeholder="Placeholder text"
cols={50}
rows={4}
id="text-area-1"
/>
</Layer>
</Layer>
</>
);
};

export const Skeleton = () => <TextAreaSkeleton />;
31 changes: 30 additions & 1 deletion packages/carbon-react/src/components/TextInput/TextInput.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

import React from 'react';
import { TextInput, TextInputSkeleton, FluidForm } from '.';

import { Layer } from '../Layer';
import mdx from './TextInput.mdx';

export default {
Expand Down Expand Up @@ -54,4 +54,33 @@ export const TogglePasswordVisibility = () => {
);
};

export const withLayer = () => {
return (
<>
<TextInput
type="text"
labelText="First layer"
defaultValue="This is not a default value"
helperText="Optional help text"
/>
<Layer>
<TextInput
type="text"
labelText="Second layer"
defaultValue="This is not a default value"
helperText="Optional help text"
/>
<Layer>
<TextInput
type="text"
labelText="Third layer"
defaultValue="This is not a default value"
helperText="Optional help text"
/>
</Layer>
</Layer>
</>
);
};

export const Skeleton = () => <TextInputSkeleton />;
156 changes: 156 additions & 0 deletions packages/carbon-react/src/components/Tile/Tile.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
TileAboveTheFoldContent,
TileBelowTheFoldContent,
} from 'carbon-components-react';
import { Layer } from '../Layer';
import './tile-story.scss';

export default {
Expand Down Expand Up @@ -47,10 +48,53 @@ export const Default = () => {
);
};

export const DefaultWithLayer = () => {
return (
<>
<Tile>
First layer
<br />
<br />
<Link href="https://www.carbondesignsystem.com">Link</Link>
</Tile>
<Layer>
<Tile>
Second layer
<br />
<br />
<Link href="https://www.carbondesignsystem.com">Link</Link>
</Tile>
<Layer>
<Tile>
Third layer
<br />
<br />
<Link href="https://www.carbondesignsystem.com">Link</Link>
</Tile>
</Layer>
</Layer>
</>
);
};

export const Clickable = () => {
return <ClickableTile>Clickable Tile</ClickableTile>;
};

export const ClickableWithLayer = () => {
return (
<>
<ClickableTile>First layer</ClickableTile>
<Layer>
<ClickableTile>Second layer</ClickableTile>
<Layer>
<ClickableTile>Third layer</ClickableTile>
</Layer>
</Layer>
</>
);
};

export const MultiSelect = () => {
return (
<div role="group" aria-label="selectable tiles">
Expand All @@ -67,6 +111,24 @@ export const MultiSelect = () => {
);
};

export const SelectableWithLayer = () => {
<>
<SelectableTile id="tile-3" name="tiles">
First layer
</SelectableTile>
<Layer>
<SelectableTile id="tile-3" name="tiles">
Second layer
</SelectableTile>
<Layer>
<SelectableTile id="tile-3" name="tiles">
Third layer
</SelectableTile>
</Layer>
</Layer>
</>;
};

export const Radio = () => {
return (
<TileGroup
Expand All @@ -86,6 +148,50 @@ export const Radio = () => {
);
};

export const RadioWithLayer = () => {
return (
<>
<TileGroup
defaultSelected="default-selected"
legend="First layer"
name="radio tile group">
<RadioTile value="standard" style={{ marginBottom: '.5rem' }}>
Option 1
</RadioTile>
<RadioTile value="default-selected" id="tile-2">
Option 2
</RadioTile>
</TileGroup>
<Layer>
<TileGroup
defaultSelected="default-selected"
legend="Second Layer"
name="radio tile group">
<RadioTile value="standard" style={{ marginBottom: '.5rem' }}>
Option 1
</RadioTile>
<RadioTile value="default-selected" id="tile-2">
Option 2
</RadioTile>
</TileGroup>
<Layer>
<TileGroup
defaultSelected="default-selected"
legend="Third Layer"
name="radio tile group">
<RadioTile value="standard" style={{ marginBottom: '.5rem' }}>
Option 1
</RadioTile>
<RadioTile value="default-selected" id="tile-2">
Option 2
</RadioTile>
</TileGroup>
</Layer>
</Layer>
</>
);
};

export const Expandable = () => (
<ExpandableTile
tileCollapsedIconText="Interact to Expand tile"
Expand All @@ -101,3 +207,53 @@ export const Expandable = () => (
</TileBelowTheFoldContent>
</ExpandableTile>
);

export const ExpandableWithLayer = () => {
return (
<>
<ExpandableTile
tileCollapsedIconText="Interact to Expand tile"
tileExpandedIconText="Interact to Collapse tile">
<TileAboveTheFoldContent>
<div style={{ height: '200px' }}>First layer</div>
</TileAboveTheFoldContent>
<TileBelowTheFoldContent>
<div style={{ height: '400px' }}>
Below the fold content here
<TextInput id="test2" invalidText="A valid value is required" />
</div>
</TileBelowTheFoldContent>
</ExpandableTile>
<Layer>
<ExpandableTile
tileCollapsedIconText="Interact to Expand tile"
tileExpandedIconText="Interact to Collapse tile">
<TileAboveTheFoldContent>
<div style={{ height: '200px' }}>Second layer</div>
</TileAboveTheFoldContent>
<TileBelowTheFoldContent>
<div style={{ height: '400px' }}>
Below the fold content here
<TextInput id="test2" invalidText="A valid value is required" />
</div>
</TileBelowTheFoldContent>
</ExpandableTile>
<Layer>
<ExpandableTile
tileCollapsedIconText="Interact to Expand tile"
tileExpandedIconText="Interact to Collapse tile">
<TileAboveTheFoldContent>
<div style={{ height: '200px' }}>Third layer</div>
</TileAboveTheFoldContent>
<TileBelowTheFoldContent>
<div style={{ height: '400px' }}>
Below the fold content here
<TextInput id="test2" invalidText="A valid value is required" />
</div>
</TileBelowTheFoldContent>
</ExpandableTile>
</Layer>
</Layer>
</>
);
};
Loading