Web: Components: added story for RequestLoader
This commit is contained in:
parent
43dc4ec3a4
commit
7bd692d239
@ -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",
|
||||
|
@ -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]),
|
||||
};
|
||||
|
||||
|
@ -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", () => (
|
||||
<Section>
|
||||
<RequestLoader
|
||||
visible={boolean("visible", true)}
|
||||
zIndex={number("zIndex", 256)}
|
||||
loaderSize={text("loaderSize", "16px")}
|
||||
loaderColor={color("loaderColor", "#999")}
|
||||
label={text("label", "Loading... Please wait...")}
|
||||
fontSize={text("fontSize", "12px")}
|
||||
fontColor={color("fontColor", "#999")}
|
||||
/>
|
||||
</Section>
|
||||
));
|
||||
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 <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",
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user