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.

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

docs(tabs): add example CodeSnippet via renderContent to story #5258

Merged
merged 9 commits into from
Feb 4, 2020
73 changes: 64 additions & 9 deletions packages/react/src/components/Tabs/Tabs-story.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { withKnobs, boolean, number, text } from '@storybook/addon-knobs';
import { settings } from 'carbon-components';
import classNames from 'classnames';
import './Tabs-story.scss';
import CodeSnippet from '../CodeSnippet';
import Tabs from '../Tabs';
import Tab from '../Tab';
import TabsSkeleton from '../Tabs/Tabs.Skeleton';
Expand Down Expand Up @@ -51,6 +52,30 @@ const props = {

const CustomLabel = ({ text }) => <>{text}</>;

const CodeSnippetExample = () => (
<CodeSnippet type="multi">
{`@mixin grid-container {
width: 100%;
padding-right: padding(mobile);
padding-left: padding(mobile);
@include breakpoint(bp--xs--major) {
padding-right: padding(xs);
padding-left: padding(xs);
}
}
$z-indexes: (
modal : 9000,
overlay : 8000,
dropdown : 7000,
header : 6000,
footer : 5000,
hidden : - 1,
overflowHidden: - 1,
floating: 10000
);`}
</CodeSnippet>
);

const TabContentRenderedOnlyWhenSelected = ({
selected,
children,
Expand All @@ -75,26 +100,42 @@ storiesOf('Tabs', module)
() => (
<Tabs {...props.tabs()}>
<Tab id="tab-1" {...props.tab()} label="Tab label 1">
<div className="some-content">Content for first tab goes here.</div>
<div className="some-content">
<p>Content for first tab goes here.</p>
</div>
</Tab>
<Tab id="tab-2" {...props.tab()} label="Tab label 2">
<div className="some-content">Content for second tab goes here.</div>
<div className="some-content">
<p>Content for second tab goes here.</p>
</div>
</Tab>
<Tab id="tab-3" {...props.tab()} label="Tab label 3" disabled>
<div className="some-content">Content for third tab goes here.</div>
<div className="some-content">
<p>Content for third tab goes here.</p>
</div>
</Tab>
<Tab
id="tab-4"
{...props.tab()}
label="Tab label 4"
renderContent={TabContentRenderedOnlyWhenSelected}>
<div className="some-content">Content for fourth tab goes here.</div>
<div className="some-content">
<p>Content for fourth tab goes here.</p>
<p>
This example uses the&nbsp;
<CodeSnippet type="inline">renderContent</CodeSnippet> prop to
re-render content when the tab is selected.
</p>
<CodeSnippetExample />
</div>
</Tab>
<Tab
id="tab-5"
{...props.tab()}
label={<CustomLabel text="Custom Label" />}>
<div className="some-content">Content for fifth tab goes here.</div>
<div className="some-content">
<p>Content for fifth tab goes here.</p>
</div>
</Tab>
</Tabs>
),
Expand All @@ -112,23 +153,37 @@ storiesOf('Tabs', module)
() => (
<Tabs type="container" {...props.tabs()}>
<Tab id="tab-1" {...props.tab()} label="Tab label 1">
<div className="some-content">Content for first tab goes here.</div>
<div className="some-content">
<p>Content for first tab goes here.</p>
</div>
</Tab>
<Tab id="tab-2" {...props.tab()} label="Tab label 2">
<div className="some-content">Content for second tab goes here.</div>
<div className="some-content">
<p>Content for second tab goes here.</p>
</div>
</Tab>
<Tab
id="tab-3"
{...props.tab()}
label="Tab label 3"
renderContent={TabContentRenderedOnlyWhenSelected}>
<div className="some-content">Content for third tab goes here.</div>
<div className="some-content">
<p>Content for third tab goes here.</p>
tw15egan marked this conversation as resolved.
Show resolved Hide resolved
<p>
This example uses the&nbsp;
<CodeSnippet type="inline">renderContent</CodeSnippet> prop to
re-render content when the tab is selected.
</p>
<CodeSnippetExample />
</div>
</Tab>
<Tab
id="tab-4"
{...props.tab()}
label={<CustomLabel text="Custom Label" />}>
<div className="some-content">Content for fourth tab goes here.</div>
<div className="some-content">
<p>Content for fourth tab goes here.</p>
</div>
</Tab>
</Tabs>
),
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/Tabs/Tabs-story.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,6 @@ $css--reset: false;
@import '~carbon-components/src/globals/scss/css--helpers';

.bx--tabs--container ~ div {
height: 320px;
min-height: 320px;
background-color: $ui-01;
}