Web: Components: added story for RequestLoader

packages/asc-web-components/.storybook/main.js

@@ -38,6 +38,7 @@ module.exports = {
     "../progress-bar/*.stories.@(js|mdx)",
     "../radio-button/*.stories.@(js|mdx)",
     "../radio-button-group/*.stories.@(js|mdx)",
+    "../request-loader/*.stories.@(js|mdx)",
   ],
   addons: [
     "@storybook/addon-links",

packages/asc-web-components/request-loader/index.js

@@ -24,15 +24,25 @@ const RequestLoader = (props) => {
 };
 
 RequestLoader.propTypes = {
+  /** Visibility */
   visible: PropTypes.bool,
+  /** CSS z-index */
   zIndex: PropTypes.number,
+  /** Svg height and width value */
   loaderSize: PropTypes.string,
+  /** Svg color */
   loaderColor: PropTypes.string,
+  /** Svg aria-label and text label */
   label: PropTypes.string,
+  /** Text label font size */
   fontSize: PropTypes.string,
+  /** Text label font color */
   fontColor: PropTypes.string,
+  /** Accepts class */
   className: PropTypes.string,
+  /** Accepts id */
   id: PropTypes.string,
+  /** Accepts css style */
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
 };
 

packages/asc-web-components/request-loader/request-loader.stories.js

@@ -1,30 +1,34 @@
 import React from "react";
-import { storiesOf } from "@storybook/react";
+import RequestLoader from "./";
-import {
-  withKnobs,
-  boolean,
-  number,
-  text,
-  color,
-} from "@storybook/addon-knobs/react";
-import withReadme from "storybook-readme/with-readme";
-import Readme from "./README.md";
-import RequestLoader from ".";
-import Section from "../../../.storybook/decorators/section";
 
-storiesOf("Components|Loaders", module)
+export default {
-  .addDecorator(withKnobs)
+  title: "Components/Loaders",
-  .addDecorator(withReadme(Readme))
+  component: RequestLoader,
-  .add("request-loader", () => (
+  parameters: {
-    <Section>
+    docs: {
-      <RequestLoader
+      description: {
-        visible={boolean("visible", true)}
+        component:
-        zIndex={number("zIndex", 256)}
+          "equestLoader component is used for displaying loading actions on a page",
-        loaderSize={text("loaderSize", "16px")}
+      },
-        loaderColor={color("loaderColor", "#999")}
+    },
-        label={text("label", "Loading... Please wait...")}
+  },
-        fontSize={text("fontSize", "12px")}
+  argTypes: {
-        fontColor={color("fontColor", "#999")}
+    loaderColor: { control: "color" },
-      />
+    fontColor: { control: "color" },
-    </Section>
+  },
-  ));
+};
+
+const Template = (args) => {
+  return <RequestLoader {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  visible: true,
+  zIndex: 256,
+  loaderSize: "16px",
+  loaderColor: "#999",
+  label: "Loading... Please wait...",
+  fontSize: "12px",
+  fontColor: "#999",
+};