From ee9b52c5748008b51f8beb850bd96c0e26fe093e Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Fri, 19 Feb 2021 12:01:12 -0800
Subject: [PATCH 1/2] docs(react): update docs for a few components

---
 .../components/CopyButton/CopyButton-story.js | 11 +++---
 .../src/components/CopyButton/CopyButton.mdx  | 11 ++++--
 .../components/FormLabel/FormLabel-story.js   | 30 +++++++---------
 .../src/components/FormLabel/FormLabel.mdx    | 36 +++++++++++++++++++
 .../react/src/components/Link/Link-story.js   | 17 +++++----
 packages/react/src/components/Link/Link.mdx   | 16 ++++++++-
 6 files changed, 86 insertions(+), 35 deletions(-)
 create mode 100644 packages/react/src/components/FormLabel/FormLabel.mdx

diff --git a/packages/react/src/components/CopyButton/CopyButton-story.js b/packages/react/src/components/CopyButton/CopyButton-story.js
index 1c7ca740210e..db199c4e8679 100644
--- a/packages/react/src/components/CopyButton/CopyButton-story.js
+++ b/packages/react/src/components/CopyButton/CopyButton-story.js
@@ -37,11 +37,10 @@ export default {
   },
 };
 
-export const Default = () => <CopyButton {...props()} />;
+export const _Default = () => <CopyButton />;
 
-Default.parameters = {
-  info: {
-    text:
-      'The copy button can be used when the user needs to copy information, such as a code snippet, to their clipboard.',
-  },
+_Default.story = {
+  name: 'Copy Button',
 };
+
+export const Playground = () => <CopyButton {...props()} />;
diff --git a/packages/react/src/components/CopyButton/CopyButton.mdx b/packages/react/src/components/CopyButton/CopyButton.mdx
index 020ab872221b..15a6a9acd978 100644
--- a/packages/react/src/components/CopyButton/CopyButton.mdx
+++ b/packages/react/src/components/CopyButton/CopyButton.mdx
@@ -1,4 +1,4 @@
-import { Props } from '@storybook/addon-docs/blocks';
+import { Props, Story, Preview } from '@storybook/addon-docs/blocks';
 
 # CopyButton
 
@@ -13,13 +13,20 @@ import { Props } from '@storybook/addon-docs/blocks';
 
 - [Overview](#overview)
 - [Component API](#component-api)
-- [References](#references)
 - [Feedback](#feedback)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
 ## Overview
 
+The copy button should be accompanied by a tooltip. Tooltip feedback text should
+be concise and describe the action taken when the user clicks the copy button.
+By default we display the text “Copied!”.
+
+<Preview>
+  <Story id="copybutton--default" />
+</Preview>
+
 ## Component API
 
 <Props />
diff --git a/packages/react/src/components/FormLabel/FormLabel-story.js b/packages/react/src/components/FormLabel/FormLabel-story.js
index ac68e5a2facb..77ef439261cb 100644
--- a/packages/react/src/components/FormLabel/FormLabel-story.js
+++ b/packages/react/src/components/FormLabel/FormLabel-story.js
@@ -9,37 +9,33 @@ import React from 'react';
 
 import FormLabel from './FormLabel';
 import Tooltip from '../Tooltip';
-
-const additionalProps = {
-  className: 'some-class',
-};
+import mdx from './FormLabel.mdx';
 
 export default {
   title: 'FormLabel',
 
   parameters: {
     component: FormLabel,
+    docs: {
+      page: mdx,
+    },
   },
 };
 
-export const Default = () => <FormLabel {...additionalProps}>Label</FormLabel>;
+export const _Default = () => <FormLabel>Form label</FormLabel>;
 
-Default.parameters = {
-  info: {
-    text: 'Form label.',
-  },
+_Default.story = {
+  name: 'Form Label',
 };
 
 export const WithTooltip = () => (
-  <FormLabel {...additionalProps}>
-    <Tooltip triggerText="Label">This is the content of the tooltip.</Tooltip>
+  <FormLabel>
+    <Tooltip triggerText="Form label">
+      This can be used to provide more information about a field.
+    </Tooltip>
   </FormLabel>
 );
 
-WithTooltip.storyName = 'With tooltip';
-
-WithTooltip.parameters = {
-  info: {
-    text: 'Form label with tooltip.',
-  },
+WithTooltip.story = {
+  name: 'Form Label with Tooltip',
 };
diff --git a/packages/react/src/components/FormLabel/FormLabel.mdx b/packages/react/src/components/FormLabel/FormLabel.mdx
new file mode 100644
index 000000000000..7ff3d871b434
--- /dev/null
+++ b/packages/react/src/components/FormLabel/FormLabel.mdx
@@ -0,0 +1,36 @@
+import { Props, Story, Preview } from '@storybook/addon-docs/blocks';
+import Tooltip from '../Tooltip';
+
+# FormLabel
+
+[Source code](https://github.com/carbon-design-system/carbon/tree/master/packages/react/src/components/FormLabel)
+&nbsp;|&nbsp;
+[Usage guidelines](https://www.carbondesignsystem.com/components/form/usage)
+[Accessibility](https://www.carbondesignsystem.com/components/form/accessibility)
+
+## Table of Contents
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+- [Overview](#overview)
+- [Component API](#component-api)
+- [Feedback](#feedback)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## Overview
+
+<Preview>
+  <Story id="formlabel--default" />
+</Preview>
+
+## Component API
+
+<Props />
+
+## Feedback
+
+Help us improve this component by providing feedback through, asking questions
+on Slack, or updating this file on GitHub
+[GitHub](https://github.com/carbon-design-system/carbon/edit/master/packages/react/src/components/Modal/Modal.mdx).
diff --git a/packages/react/src/components/Link/Link-story.js b/packages/react/src/components/Link/Link-story.js
index 06054f1f24af..245dd85b345e 100644
--- a/packages/react/src/components/Link/Link-story.js
+++ b/packages/react/src/components/Link/Link-story.js
@@ -42,13 +42,12 @@ export default {
   },
 };
 
-export const Default = () => <Link {...props()}>Link</Link>;
-
-Default.parameters = {
-  info: {
-    text: `
-            Links are typically used as a means of navigation either within the application, to a place outside, or to a resource.
-            For anything else, especially things that change data, you should be using a button.
-          `,
-  },
+export const _Default = () => (
+  <Link href="http://www.carbondesignsystem.com">Link</Link>
+);
+
+_Default.story = {
+  name: 'Link',
 };
+
+export const Playground = () => <Link {...props()}>Link</Link>;
diff --git a/packages/react/src/components/Link/Link.mdx b/packages/react/src/components/Link/Link.mdx
index 6ff9c69a969d..0a7ce59c5cd2 100644
--- a/packages/react/src/components/Link/Link.mdx
+++ b/packages/react/src/components/Link/Link.mdx
@@ -1,4 +1,4 @@
-import { Props } from '@storybook/addon-docs/blocks';
+import { Props, Preview, Story } from '@storybook/addon-docs/blocks';
 
 # Link
 
@@ -10,8 +10,22 @@ import { Props } from '@storybook/addon-docs/blocks';
 
 ## Table of Contents
 
+- [Overview](#overview)
+- [Component API](#component-api)
+- [Feedback](#feedback)
+
 ## Overview
 
+Links are used as navigational elements and can be used on their own or inline
+with text. They provide a lightweight option for navigation but like other
+interactive elements, too many links will clutter a page and make it difficult
+for users to identify their next steps. This is especially true for inline
+links, which should be used sparingly.
+
+<Preview>
+  <Story id="link--default" />
+</Preview>
+
 ## Component API
 
 <Props />

From 418fa5ebe95ce11d714dfdb0562e5d71ff414eb6 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Fri, 19 Feb 2021 12:35:02 -0800
Subject: [PATCH 2/2] docs(Tabs): update tab documentation

---
 .../react/src/components/Tabs/Tabs-story.js   | 118 ++++++++----------
 .../src/components/Tabs/Tabs.Skeleton.js      |   2 +-
 packages/react/src/components/Tabs/Tabs.mdx   |  56 ++++++++-
 3 files changed, 105 insertions(+), 71 deletions(-)

diff --git a/packages/react/src/components/Tabs/Tabs-story.js b/packages/react/src/components/Tabs/Tabs-story.js
index d1d9b5092787..951c84e66ab6 100644
--- a/packages/react/src/components/Tabs/Tabs-story.js
+++ b/packages/react/src/components/Tabs/Tabs-story.js
@@ -20,7 +20,6 @@ import './Tabs-story.scss';
 import CodeSnippet from '../CodeSnippet';
 import Tabs from '../Tabs';
 import Tab from '../Tab';
-import TextInput from '../TextInput';
 import TabsSkeleton from '../Tabs/Tabs.Skeleton';
 import mdx from './Tabs.mdx';
 
@@ -29,15 +28,18 @@ const selectionModes = {
   'Change selection on explicit gesture (manual)': 'manual',
 };
 
+const types = {
+  Default: '',
+  Container: 'container',
+};
+
 const { prefix } = settings;
 const props = {
   tabs: () => ({
+    type: select('Type of Tabs (type)', types, ''),
     className: 'some-class',
     light: boolean('Light variant (light)', false),
     selected: number('The index of the selected tab (selected in <Tabs>)', 1),
-    // Disabling action logger for `<Tabs onClick onKeyDown>` for now given it seems to be significantly slowing down Storybook
-    // onClick: action('onClick'),
-    // onKeyDown: action('onKeyDown'),
     onSelectionChange: action('onSelectionChange'),
     tabContentClassName: text(
       'The className for the child `<TabContent>` components',
@@ -119,7 +121,33 @@ export default {
   },
 };
 
-export const Default = () => (
+export const _Default = () => (
+  <Tabs>
+    <Tab label="Tab label 1">
+      <p>Content for first tab goes here.</p>
+    </Tab>
+    <Tab label="Tab label 2">
+      <p>Content for second tab goes here.</p>
+    </Tab>
+    <Tab label="Tab label 3" disabled>
+      <p>Content for third tab goes here.</p>
+    </Tab>
+    <Tab
+      label="Tab label 4 shows truncation"
+      title="Tab label 4 shows truncation">
+      <p>Content for fourth tab goes here.</p>
+    </Tab>
+    <Tab label={<div>Custom Label</div>}>
+      <p>Content for fifth tab goes here.</p>
+    </Tab>
+  </Tabs>
+);
+
+_Default.story = {
+  name: 'Tabs',
+};
+
+export const Playground = () => (
   <div className={props.tabs().light ? 'tabs-story-wrapper--light' : null}>
     <Tabs {...props.tabs()}>
       <Tab {...props.tab()} label="Tab label 1">
@@ -161,71 +189,23 @@ export const Default = () => (
   </div>
 );
 
-Default.parameters = {
-  info: {
-    text: `
-        Tabs are used to quickly navigate between views within the same context. Create individual
-        Tab components for each item in the Tabs list.
-      `,
-  },
-};
-
 export const Container = () => (
-  <div
-    className={
-      props.tabs().light ? 'container-tabs-story-wrapper--light' : null
-    }>
-    <Tabs type="container" {...props.tabs()}>
-      <Tab {...props.tab()} label="Tab label 1">
-        <div className="some-content">
-          <p>Content for first tab goes here.</p>
-        </div>
-      </Tab>
-      <Tab {...props.tab()} label="Tab label 2">
-        <div className="some-content">
-          <p>Content for second tab goes here.</p>
-        </div>
-      </Tab>
-      <Tab
-        {...props.tab()}
-        label="Tab label 3 renders content only when selected"
-        title="Tab label 3 renders content only when selected"
-        renderContent={TabContentRenderedOnlyWhenSelected}>
-        <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 {...props.tab()} label={<CustomLabel text="Custom Label" />}>
-        <div className="some-content">
-          <p>Content for fourth tab goes here.</p>
-          <TextInput light id="sample-input" labelText="Text Input Label" />
-        </div>
-      </Tab>
-    </Tabs>
-  </div>
+  <Tabs type="container">
+    <Tab label="Tab label 1">
+      <p>Content for first tab goes here.</p>
+    </Tab>
+    <Tab label="Tab label 2">
+      <p>Content for second tab goes here.</p>
+    </Tab>
+    <Tab
+      label="Tab label 3 shows truncation"
+      title="Tab label 3 shows truncation">
+      <p>Content for third tab goes here.</p>
+    </Tab>
+    <Tab label={<div>Custom Label</div>}>
+      <p>Content for fourth tab goes here.</p>
+    </Tab>
+  </Tabs>
 );
 
-Container.parameters = {
-  info: {
-    text: `
-        Tabs are used to quickly navigate between views within the same context. Create individual
-        Tab components for each item in the Tabs list.
-      `,
-  },
-};
-
 export const Skeleton = () => <TabsSkeleton />;
-Skeleton.storyName = 'skeleton';
-Skeleton.parameters = {
-  info: {
-    text: `
-            Placeholder skeleton state to use when content is loading.
-          `,
-  },
-};
diff --git a/packages/react/src/components/Tabs/Tabs.Skeleton.js b/packages/react/src/components/Tabs/Tabs.Skeleton.js
index bb813baf491b..d9cf4904287c 100644
--- a/packages/react/src/components/Tabs/Tabs.Skeleton.js
+++ b/packages/react/src/components/Tabs/Tabs.Skeleton.js
@@ -29,7 +29,7 @@ function TabsSkeleton({ className, ...rest }) {
           <path d="M10 0L5 5 0 0z" />
         </svg>
       </div>
-      <ul className={`${prefix}--tabs__nav ${prefix}--tabs__nav--hidden`}>
+      <ul className={`${prefix}--tabs__nav `}>
         {tab}
         {tab}
         {tab}
diff --git a/packages/react/src/components/Tabs/Tabs.mdx b/packages/react/src/components/Tabs/Tabs.mdx
index c8523a01c9b3..2ecbcb54a10a 100644
--- a/packages/react/src/components/Tabs/Tabs.mdx
+++ b/packages/react/src/components/Tabs/Tabs.mdx
@@ -1,4 +1,6 @@
-import { Props } from '@storybook/addon-docs/blocks';
+import { Props, Preview, Story } from '@storybook/addon-docs/blocks';
+import Tabs from '../Tabs';
+import Tab from '../Tab';
 
 # Tabs
 
@@ -10,12 +12,64 @@ import { Props } from '@storybook/addon-docs/blocks';
 
 ## Table of Contents
 
+- [Overview](#overview)
+  - [Default Tabs](#default-tabs)
+  - [Container Tabs](#container-tabs)
+- [Component API](#component-api)
+  - [Tab `renderContent`](#tab-rendercontent)
+- [Feedback](#feedback)
+
 ## Overview
 
+Use tabs to allow users to navigate easily between views within the same
+context.
+
+### Default Tabs
+
+<Preview>
+  <Story id="tabs--default" />
+</Preview>
+
+### Container Tabs
+
+<Preview>
+  <Story id="tabs--container" />
+</Preview>
+
 ## Component API
 
 <Props />
 
+### Tab `renderContent`
+
+You will occasionally run into a situation where you only want Tab content to be
+loaded when the Tab is clicked. To do this, you can use the `renderContent` prop
+like so:
+
+```jsx
+const TabContentRenderedOnlyWhenSelected = ({
+  selected,
+  children,
+  className,
+  ...other
+}) =>
+  !selected ? (
+    <div {...other} className={`${prefix}--visually-hidden`} />
+  ) : (
+    <div
+      {...other}
+      className={classNames(className, `${prefix}--tab-content`)}
+      role="tabpanel"
+      selected={selected}>
+      {children}
+    </div>
+  );
+
+<Tabs>
+  <Tab renderContent={TabContentRenderedOnlyWhenSelected}></Tab>
+</Tabs>;
+```
+
 ## Feedback
 
 Help us improve this component by providing feedback, asking questions on Slack,