2020-11-06 15:25:40 +00:00
|
|
|
import React from "react";
|
|
|
|
import { storiesOf } from "@storybook/react";
|
|
|
|
import {
|
|
|
|
withKnobs,
|
2020-11-09 13:02:08 +00:00
|
|
|
text,
|
2020-11-06 15:25:40 +00:00
|
|
|
boolean,
|
|
|
|
color,
|
|
|
|
number,
|
|
|
|
} from "@storybook/addon-knobs/react";
|
2020-11-09 09:35:48 +00:00
|
|
|
import Section from "../../../../.storybook/decorators/sectionBlue";
|
2020-11-06 15:25:40 +00:00
|
|
|
|
|
|
|
import Loaders from "..";
|
2021-02-25 21:19:45 +00:00
|
|
|
import { LoaderStyle } from "../../../constants";
|
2020-11-09 09:35:48 +00:00
|
|
|
import styled from "styled-components";
|
2020-11-09 11:45:57 +00:00
|
|
|
import withReadme from "storybook-readme/with-readme";
|
|
|
|
import Readme from "./README.md";
|
2020-11-09 09:35:48 +00:00
|
|
|
|
|
|
|
const StyledH1 = styled.h1`
|
|
|
|
padding-left: 16px;
|
|
|
|
`;
|
2020-11-06 15:25:40 +00:00
|
|
|
|
|
|
|
storiesOf("Components|Loaders", module)
|
|
|
|
.addDecorator(withKnobs)
|
2020-11-09 11:45:57 +00:00
|
|
|
.addDecorator(withReadme(Readme))
|
2020-11-06 15:25:40 +00:00
|
|
|
.add("header loader", () => (
|
|
|
|
<Section>
|
2020-11-09 09:35:48 +00:00
|
|
|
<StyledH1>Header Loader</StyledH1>
|
2020-11-06 15:25:40 +00:00
|
|
|
<Loaders.Header
|
2020-11-09 13:02:08 +00:00
|
|
|
title={text("title", LoaderStyle.title)}
|
2020-11-11 08:38:30 +00:00
|
|
|
borderRadius={text("borderRadius", "3")}
|
2020-11-06 15:25:40 +00:00
|
|
|
backgroundColor={color("backgroundColor", "#fff")}
|
|
|
|
foregroundColor={color("foregroundColor", "#fff")}
|
2020-11-09 09:35:48 +00:00
|
|
|
backgroundOpacity={number("backgroundOpacity", 0.2)}
|
|
|
|
foregroundOpacity={number("foregroundOpacity", 0.25)}
|
2020-11-06 15:25:40 +00:00
|
|
|
speed={number("speed", LoaderStyle.speed)}
|
|
|
|
animate={boolean("animate", LoaderStyle.animate)}
|
|
|
|
/>
|
|
|
|
</Section>
|
|
|
|
));
|