docs(button): remove extra stories, add playground

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

@@ -8,15 +8,12 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
-import { settings } from 'carbon-components';
 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 mdx from './Button.mdx';
 
-const { prefix } = settings;
-
 const icons = {
   None: 'None',
   'Add (Add16 from `@carbon/icons-react`)': 'Add16',
@@ -104,31 +101,8 @@ const props = {
       onFocus: action('onFocus'),
     };
   },
-  set: () => {
-    const iconToUse = iconMap[select('Icon (icon)', icons, 'none')];
-    return {
-      className: 'some-class',
-      disabled: boolean('Disabled (disabled)', false),
-      size: select('Button size (size)', sizes, 'default'),
-      renderIcon: !iconToUse || iconToUse.svgData ? undefined : iconToUse,
-      iconDescription: text(
-        'Icon description (iconDescription)',
-        'Button icon'
-      ),
-      onClick: action('onClick'),
-      onFocus: action('onFocus'),
-    };
-  },
 };
 
-Button.displayName = 'Button';
-
-const CustomLink = ({ children, href, ...other }) => (
-  <a href={href} {...other}>
-    {children}
-  </a>
-);
-
 export default {
   title: 'Button',
   decorators: [withKnobs],
@@ -144,114 +118,56 @@ export default {
 };
 
 export const _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>
-  );
+  return <Button>Button</Button>;
 };
 
 _Default.story = {
-  parameters: {
-    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.
-
-        Secondary buttons should be used for secondary actions on each page.
-
-        Danger buttons should be used for a negative action (such as Delete) on the page.
-
-        Modify the behavior of the button by changing its event properties.
-
-        Field buttons may be use directly next to an input element, to visually align their heights.
+  name: '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 Secondary = () => {
+  return <Button kind="secondary">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.
-      `,
-    },
-  },
+export const Tertiary = () => {
+  return <Button kind="tertiary">Button</Button>;
 };
 
-export const IconButton = () => <Button {...props.iconOnly()} hasIconOnly />;
+export const Danger = () => {
+  return <Button kind="danger">Button</Button>;
+};
 
-IconButton.story = {
-  name: 'Icon button',
+export const Ghost = () => {
+  return <Button kind="ghost">Button</Button>;
 };
 
-export const SetOfButtons = () => {
-  const setProps = props.set();
+export const Playground = () => {
+  const regularProps = props.regular();
+  const iconOnly = props.iconOnly();
   return (
-    <div className={`${prefix}--btn-set`}>
-      <Button kind="secondary" {...setProps}>
-        Secondary button
-      </Button>
-      <Button kind="primary" {...setProps}>
-        Primary button
-      </Button>
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+      }}>
+      <Button {...regularProps}>Button</Button>
+      &nbsp;
+      <Button hasIconOnly {...iconOnly}></Button>
     </div>
   );
 };
 
-SetOfButtons.story = {
-  name: 'Set of buttons',
+export const IconButton = () => <Button {...props.iconOnly()} hasIconOnly />;
 
-  parameters: {
-    info: {
-      text: `
-        When an action required by the user has more than one option, always use a 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.
-      `,
-    },
-  },
+IconButton.story = {
+  name: 'Icon Button',
 };
 
 export const Skeleton = () => (
   <div>
     <ButtonSkeleton />
     &nbsp;
-    <ButtonSkeleton href="#" />
-    &nbsp;
-    <ButtonSkeleton size="small" />
+    <ButtonSkeleton small />
   </div>
 );
-
-Skeleton.story = {
-  name: 'Skeleton',
-
-  parameters: {
-    info: {
-      text: `
-        Placeholder skeleton state to use when content is loading.
-      `,
-    },
-  },
-};

packages/react/src/components/Button/Button.mdx

@@ -28,6 +28,10 @@ user interacts with it.
 
 <Preview>
   <Story id="button--default" />
+  <Story id="button--secondary" />
+  <Story id="button--tertiary" />
+  <Story id="button--danger" />
+  <Story id="button--ghost" />
 </Preview>
 
 ## Icon-only Buttons
@@ -41,17 +45,6 @@ buttons.
   <Story id="button--icon-button" />
 </Preview>
 
-## Set of Buttons
-
-When an action required by the user has more than one option, always use a 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.
-
-<Preview>
-  <Story id="button--set-of-buttons" />
-</Preview>
-
 ## Skeleton state
 
 You can use the `ButtonSkeleton` component to render a skeleton variant of a