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

* docs(tabs): add example code snippet using renderContent to story * docs(tabs): add notes about renderContent prop * chore(tabs): apply formatting to story * docs(tabs): wrap story tab content in p elements * docs(tabs): adjust indentation of code snippet example Co-authored-by: TJ Egan <tw15egan@gmail.com>
carbon-design-system · Feb 4, 2020 · d70cc4d · d70cc4d
1 parent dbce794
commit d70cc4d
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 10 deletions.
diff --git a/packages/react/src/components/Tabs/Tabs-story.js b/packages/react/src/components/Tabs/Tabs-story.js
@@ -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';
@@ -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,
@@ -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>
     ),
@@ -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>
+            <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>
     ),

diff --git a/packages/react/src/components/Tabs/Tabs-story.scss b/packages/react/src/components/Tabs/Tabs-story.scss
@@ -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;
 }