fix(loading): updated storybook controls, mdx, default props and tests (

#12206)

* fix(loading): updated storybook controls, mdx, default props and tests

* fix(loading): made a playground

* fix(loading): added prop to the default story

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

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

@@ -3924,12 +3924,6 @@ Map {
     },
   },
   "Loading" => Object {
-    "defaultProps": Object {
-      "active": true,
-      "description": "loading",
-      "small": false,
-      "withOverlay": true,
-    },
     "propTypes": Object {
       "active": Object {
         "type": "bool",

packages/react/src/components/Loading/Loading.js

@@ -12,11 +12,11 @@ import { usePrefix } from '../../internal/usePrefix';
 import deprecate from '../../prop-types/deprecate';
 
 function Loading({
-  active,
+  active = true,
   className: customClassName,
-  withOverlay,
-  small,
-  description,
+  withOverlay = true,
+  small = false,
+  description = 'loading',
   ...rest
 }) {
   const prefix = usePrefix();
@@ -95,11 +95,4 @@ Loading.propTypes = {
   withOverlay: PropTypes.bool,
 };
 
-Loading.defaultProps = {
-  active: true,
-  withOverlay: true,
-  small: false,
-  description: 'loading',
-};
-
 export default Loading;

packages/react/src/components/Loading/Loading.mdx

@@ -1,4 +1,5 @@
-import { Props } from '@storybook/addon-docs';
+import { Props, Preview, Story } from '@storybook/addon-docs';
+import Loading from '../Loading';
 
 # Loading
 
@@ -12,6 +13,10 @@ import { Props } from '@storybook/addon-docs';
 
 ## Overview
 
+<Preview>
+  <Story id="components-loading--default" />
+</Preview>
+
 ## Component API
 
 <Props />

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

@@ -0,0 +1,71 @@
+/**
+ * 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.
+ */
+
+import React from 'react';
+import Loading from '.';
+import mdx from './Loading.mdx';
+
+export default {
+  title: 'Components/Loading',
+  component: Loading,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const Default = () => {
+  return <Loading className={'some-class'} withOverlay={false} />;
+};
+
+export const Playground = (args) => {
+  return <Loading className={'some-class'} {...args} />;
+};
+
+Playground.argTypes = {
+  children: {
+    table: {
+      disable: true,
+    },
+  },
+  className: {
+    table: {
+      disable: true,
+    },
+  },
+  // The id prop is deprecated and should be remove in the next major release
+  id: {
+    table: {
+      disable: true,
+    },
+  },
+  active: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: true,
+  },
+  withOverlay: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  small: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
+  description: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Loading',
+  },
+};