docs(react): update docs for a few components (#7856)

* docs(react): update docs for a few components * docs(Tabs): update tab documentation Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Feb 22, 2021 · 5769ea2 · 5769ea2
1 parent f262e39
commit 5769ea2
Show file tree

Hide file tree

Showing 9 changed files with 191 additions and 106 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 />

diff --git 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
@@ -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}