diff --git a/packages/asc-web-components/.storybook/main.js b/packages/asc-web-components/.storybook/main.js
index c91fe5716c..060d29aa4d 100644
--- a/packages/asc-web-components/.storybook/main.js
+++ b/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",
diff --git a/packages/asc-web-components/request-loader/index.js b/packages/asc-web-components/request-loader/index.js
index c9e7215298..9b4df9d439 100644
--- a/packages/asc-web-components/request-loader/index.js
+++ b/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]),
};
diff --git a/packages/asc-web-components/request-loader/request-loader.stories.js b/packages/asc-web-components/request-loader/request-loader.stories.js
index 3eb439b4e0..469bf999ae 100644
--- a/packages/asc-web-components/request-loader/request-loader.stories.js
+++ b/packages/asc-web-components/request-loader/request-loader.stories.js
@@ -1,30 +1,34 @@
import React from "react";
-import { storiesOf } from "@storybook/react";
-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";
+import RequestLoader from "./";
-storiesOf("Components|Loaders", module)
- .addDecorator(withKnobs)
- .addDecorator(withReadme(Readme))
- .add("request-loader", () => (
-
- ));
+export default {
+ title: "Components/Loaders",
+ component: RequestLoader,
+ parameters: {
+ docs: {
+ description: {
+ component:
+ "equestLoader component is used for displaying loading actions on a page",
+ },
+ },
+ },
+ argTypes: {
+ loaderColor: { control: "color" },
+ fontColor: { control: "color" },
+ },
+};
+
+const Template = (args) => {
+ return ;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+ visible: true,
+ zIndex: 256,
+ loaderSize: "16px",
+ loaderColor: "#999",
+ label: "Loading... Please wait...",
+ fontSize: "12px",
+ fontColor: "#999",
+};