chore(skeleton): add storybook playground story and cleanup (#12450)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/react/src/components/SkeletonIcon/SkeletonIcon-story.js → packages/react/src/components/SkeletonIcon/SkeletonIcon.stories.js

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import SkeletonIcon from '../SkeletonIcon';
+import SkeletonIcon from '.';
 
 const propsSkeleton = {
   style: {

packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.js

@@ -22,7 +22,8 @@ const SkeletonPlaceholder = ({ className, ...other }) => {
 
 SkeletonPlaceholder.propTypes = {
   /**
-   * the class to be applied to the component
+   * Add a custom class to the component
+   * to set the height and width
    */
   className: PropTypes.string,
 };

packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.mdx

@@ -1,4 +1,4 @@
-import { Props } from '@storybook/addon-docs';
+import { Story, Props, Preview } from '@storybook/addon-docs';
 
 # SkeletonPlaceholder
 
@@ -10,6 +10,10 @@ import { Props } from '@storybook/addon-docs';
 
 ## Overview
 
+<Preview>
+  <Story id="components-skeleton-skeletonplaceholder--default" />
+</Preview>
+
 ## Component API
 
 <Props />

packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.stories.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint-disable no-console */
+
+import React from 'react';
+
+import SkeletonPlaceholder from '.';
+import mdx from './SkeletonPlaceholder.mdx';
+
+export default {
+  title: 'Components/Skeleton/SkeletonPlaceholder',
+  component: SkeletonPlaceholder,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const Default = () => <SkeletonPlaceholder />;

packages/react/src/components/SkeletonText/SkeletonText.js

@@ -83,7 +83,7 @@ SkeletonText.propTypes = {
    */
   heading: PropTypes.bool,
   /**
-   * the number of lines in a paragraph
+   * the number of lines shown if paragraph is true
    */
   lineCount: PropTypes.number,
   /**

packages/react/src/components/SkeletonText/SkeletonText.mdx

@@ -1,4 +1,4 @@
-import { Props } from '@storybook/addon-docs';
+import { Story, Props, Preview } from '@storybook/addon-docs';
 
 # SkeletonText
 
@@ -10,6 +10,10 @@ import { Props } from '@storybook/addon-docs';
 
 ## Overview
 
+<Preview>
+  <Story id="components-skeleton-skeletontext--default" />
+</Preview>
+
 ## Component API
 
 <Props />

packages/react/src/components/SkeletonText/SkeletonText.stories.js

@@ -0,0 +1,57 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint-disable no-console */
+
+import React from 'react';
+
+import SkeletonText from '.';
+import mdx from './SkeletonText.mdx';
+
+export default {
+  title: 'Components/Skeleton/SkeletonText',
+  component: SkeletonText,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const Default = () => <SkeletonText />;
+
+export const Playground = (args) => <SkeletonText {...args} />;
+
+Playground.argTypes = {
+  className: {
+    control: false,
+  },
+  heading: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  paragraph: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  width: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: '100%',
+  },
+  lineCount: {
+    control: {
+      type: 'number',
+    },
+    defaultValue: 3,
+  },
+};