Skip to content

Commit

Permalink
feat(react,carbon-react): add layer stories (#9838)
Browse files Browse the repository at this point in the history 
* 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>
  • Loading branch information
@abbeyhrt @kodiakhq
3 people authored Oct 21, 2021
1 parent 4a95fb7 commit 22cdc87
Show file tree
Hide file tree
Showing 15 changed files with 341 additions and 10 deletions.
58 changes: 58 additions & 0 deletions packages/carbon-react/src/components/Select/Select.stories.js
View file
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
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
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
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

0 comments on commit 22cdc87

Please sign in to comment.