chore(inline-loading): storybook controls (#12283)

Co-authored-by: TJ Egan <tw15egan@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Oct 17, 2022 · 56921b1 · 56921b1
1 parent d98cd74
commit 56921b1
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 123 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -3738,9 +3738,6 @@ Map {
     "render": [Function],
   },
   "InlineLoading" => Object {
-    "defaultProps": Object {
-      "successDelay": 1500,
-    },
     "propTypes": Object {
       "className": Object {
         "type": "string",

diff --git a/packages/react/src/components/InlineLoading/InlineLoading-story.js b/packages/react/src/components/InlineLoading/InlineLoading-story.js
diff --git a/packages/react/src/components/InlineLoading/InlineLoading.js b/packages/react/src/components/InlineLoading/InlineLoading.js
@@ -18,7 +18,7 @@ export default function InlineLoading({
   iconDescription,
   description,
   onSuccess,
-  successDelay,
+  successDelay = 1500,
   ...other
 }) {
   const prefix = usePrefix();
@@ -110,6 +110,3 @@ InlineLoading.propTypes = {
    */
   successDelay: PropTypes.number,
 };
-InlineLoading.defaultProps = {
-  successDelay: 1500,
-};
diff --git a/packages/react/src/components/InlineLoading/InlineLoading.mdx b/packages/react/src/components/InlineLoading/InlineLoading.mdx
@@ -1,4 +1,5 @@
-import { Props } from '@storybook/addon-docs';
+import { Props, Preview, Story } from '@storybook/addon-docs';
+import InlineLoading from '../InlineLoading';
 
 # InlineLoading
 
@@ -12,6 +13,10 @@ import { Props } from '@storybook/addon-docs';
 
 ## Overview
 
+<Preview>
+  <Story id="components-inlineloading--default" />
+</Preview>
+
 ## Component API
 
 <Props />

diff --git a/...lineLoading/next/InlineLoading.stories.js → ...ts/InlineLoading/InlineLoading.stories.js b/...lineLoading/next/InlineLoading.stories.js → ...ts/InlineLoading/InlineLoading.stories.js
@@ -6,12 +6,18 @@
  */
 
 import React, { useState } from 'react';
-import Button from '../../Button';
-import InlineLoading from '../';
+import Button from '../Button';
+import InlineLoading from '.';
+import mdx from './InlineLoading.mdx';
 
 export default {
   title: 'Components/InlineLoading',
   component: InlineLoading,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
 };
 
 export const Default = () => (
@@ -78,3 +84,35 @@ export const UxExample = () => {
     </MockSubmission>
   );
 };
+
+export const Playground = (args) => <InlineLoading {...args} />;
+
+Playground.argTypes = {
+  className: {
+    table: {
+      disable: true,
+    },
+  },
+  description: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Loading',
+  },
+  iconDescription: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Loading data...',
+  },
+  onSuccess: {
+    table: {
+      disable: true,
+    },
+  },
+  successDelay: {
+    table: {
+      disable: true,
+    },
+  },
+};