docs(button): update Button story and documentation (#6565)

* docs(button): update Button story and documentation

* docs(button): add mdx file template

* docs(button): add story examples, prop table, toc

* docs(button): add some descriptions

* docs(button): add more prop examples

* docs(button): reorder props alphabetically

* docs(button): add prop docs

* chore(tests): update snapshots

* docs(button): remove extra stories, add playground

* fix(eslint)L remove extra rule

* docs(button): add updated ButtonSet docs

* fix(eslint): fix lint error

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -102,6 +102,8 @@ Map {
       "kind": "primary",
       "size": "default",
       "tabIndex": 0,
+      "tooltipAlignment": "center",
+      "tooltipPosition": "top",
       "type": "button",
     },
     "displayName": "Button",

packages/react/src/components/Button/Button-story.js

@@ -6,14 +6,14 @@
  */
 
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
 import { iconAddSolid, iconSearch } from 'carbon-icons';
 import { Add16, AddFilled16, Search16 } from '@carbon/icons-react';
 import Button from '../Button';
 import ButtonSkeleton from '../Button/Button.Skeleton';
 import ButtonSet from '../ButtonSet';
+import mdx from './Button.mdx';
 
 const icons = {
   None: 'None',
@@ -62,7 +62,13 @@ const props = {
     };
   },
   iconOnly: () => {
-    const iconToUse = iconMap[select('Icon (icon)', icons, 'Add16')];
+    let iconToUse;
+
+    if (iconMap[select('Icon (icon)', icons, 'Add16')] == undefined) {
+      iconToUse = Add16;
+    } else {
+      iconToUse = iconMap[select('Icon (icon)', icons, 'Add16')];
+    }
     return {
       className: 'some-class',
       kind: select(
@@ -114,90 +120,65 @@ const props = {
   },
 };
 
-Button.displayName = 'Button';
-
-const CustomLink = ({ children, href, ...other }) => (
-  <a href={href} {...other}>
-    {children}
-  </a>
-);
-
-storiesOf('Button', module)
-  .addParameters({
+export default {
+  title: 'Button',
+  decorators: [withKnobs],
+  parameters: {
     component: Button,
     subcomponents: {
+      ButtonSet,
       ButtonSkeleton,
     },
-  })
-  .addDecorator(withKnobs)
-  .add(
-    'Default',
-    () => {
-      const regularProps = props.regular();
-      return (
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            flexWrap: 'wrap',
-          }}>
-          <Button {...regularProps} className="some-class">
-            Button
-          </Button>
-          &nbsp;
-          <Button {...regularProps} href="#" className="some-class">
-            Link
-          </Button>
-          &nbsp;
-          <Button {...regularProps} as="p" href="#" className="some-class">
-            Element
-          </Button>
-          &nbsp;
-          <Button
-            {...regularProps}
-            as={CustomLink}
-            href="#"
-            className="some-class">
-            Custom component
-          </Button>
-        </div>
-      );
+    docs: {
+      page: mdx,
     },
-    {
-      info: {
-        text: `
-          Buttons are used to initialize an action, either in the background or
-          foreground of an experience.
-
-          There are several kinds of buttons.
+  },
+};
 
-          Primary buttons should be used for the principle call to action
-          on the page.
+export const _Default = () => {
+  return <Button>Button</Button>;
+};
 
-          Secondary buttons should be used for secondary actions on each page.
+_Default.story = {
+  name: 'Button',
+};
 
-          Danger buttons should be used for a negative action (such as Delete) on the page.
+export const Secondary = () => {
+  return <Button kind="secondary">Button</Button>;
+};
 
-          Modify the behavior of the button by changing its event properties.
+export const Tertiary = () => {
+  return <Button kind="tertiary">Button</Button>;
+};
 
-          Field buttons may be use directly next to an input element, to visually align their heights.
+export const Danger = () => {
+  return <Button kind="danger">Button</Button>;
+};
 
-          Small buttons may be used when there is not enough space for a
-          regular sized button. This issue is most found in tables. Small button should have three words
-          or less.
+export const Ghost = () => {
+  return <Button kind="ghost">Button</Button>;
+};
 
-          When words are not enough, icons can be used in buttons to better communicate what the button does. Icons are
-          always paired with text.
-        `,
-      },
-    }
-  )
-  .add('Icon-only buttons', () => <Button {...props.iconOnly()} hasIconOnly />)
-  .add(
-    'Sets of Buttons',
-    () => {
-      const { stacked, ...buttonProps } = props.set();
-      return (
+export const Playground = () => {
+  const regularProps = props.regular();
+  const iconOnly = props.iconOnly();
+  const { stacked, ...buttonProps } = props.set();
+  return (
+    <>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          flexWrap: 'wrap',
+        }}>
+        <Button {...regularProps}>Button</Button>
+        &nbsp;
+        <Button hasIconOnly {...iconOnly}></Button>
+      </div>
+      <div
+        style={{
+          marginTop: '1rem',
+        }}>
         <ButtonSet stacked={stacked}>
           <Button kind="secondary" {...buttonProps}>
             Secondary button
@@ -206,32 +187,30 @@ storiesOf('Button', module)
             Primary button
           </Button>
         </ButtonSet>
-      );
-    },
-    {
-      info: {
-        text: `
-          When an action required by the user has more than one option, always use a negative action button (secondary) paired with a positive action button (primary) in that order. Negative action buttons will be on the left. Positive action buttons should be on the right. When these two types buttons are paired in the correct order, they will automatically space themselves apart.
-        `,
-      },
-    }
-  )
-  .add(
-    'skeleton',
-    () => (
-      <div>
-        <ButtonSkeleton />
-        &nbsp;
-        <ButtonSkeleton href="#" />
-        &nbsp;
-        <ButtonSkeleton size="small" />
       </div>
-    ),
-    {
-      info: {
-        text: `
-          Placeholder skeleton state to use when content is loading.
-        `,
-      },
-    }
+    </>
   );
+};
+
+export const IconButton = () => <Button {...props.iconOnly()} hasIconOnly />;
+
+IconButton.story = {
+  name: 'Icon Button',
+};
+
+export const SetOfButtons = () => {
+  return (
+    <ButtonSet>
+      <Button kind="secondary">Secondary button</Button>
+      <Button kind="primary">Primary button</Button>
+    </ButtonSet>
+  );
+};
+
+export const Skeleton = () => (
+  <div>
+    <ButtonSkeleton />
+    &nbsp;
+    <ButtonSkeleton small />
+  </div>
+);

packages/react/src/components/Button/Button.js

@@ -206,6 +206,8 @@ Button.defaultProps = {
   disabled: false,
   kind: 'primary',
   size: 'default',
+  tooltipAlignment: 'center',
+  tooltipPosition: 'top',
 };
 
 export default Button;