46 lines
1.5 KiB
JavaScript
46 lines
1.5 KiB
JavaScript
import React from "react";
|
|
import { storiesOf } from "@storybook/react";
|
|
import { action } from "@storybook/addon-actions";
|
|
import { withKnobs, boolean, text, select } from "@storybook/addon-knobs/react";
|
|
import withReadme from "storybook-readme/with-readme";
|
|
import Readme from "./README.md";
|
|
import Button from ".";
|
|
import { Icons } from "../icons";
|
|
import Section from "../../../.storybook/decorators/section";
|
|
import { orderBy } from "lodash";
|
|
|
|
storiesOf("Components|Buttons", module)
|
|
.addDecorator(withKnobs)
|
|
.addDecorator(withReadme(Readme))
|
|
.add("base", () => {
|
|
const sizeOptions = ["base", "medium", "big", "large"];
|
|
const iconNames = orderBy(
|
|
Object.keys(Icons),
|
|
[(name) => name.toLowerCase()],
|
|
["asc"]
|
|
);
|
|
|
|
const iconName = select("icon", ["", ...iconNames], "");
|
|
const hintIcon = iconName
|
|
? React.createElement(Icons[iconName])
|
|
: undefined;
|
|
|
|
return (
|
|
<Section>
|
|
<Button
|
|
label={text("label", "Base button")}
|
|
primary={boolean("primary", true)}
|
|
size={select("size", sizeOptions, "big")}
|
|
scale={boolean("scale", false)}
|
|
isLoading={boolean("isLoading", false)}
|
|
isHovered={boolean("isHovered", false)}
|
|
isClicked={boolean("isClicked", false)}
|
|
isDisabled={boolean("isDisabled", false)}
|
|
minWidth={text("minWidth", "")}
|
|
onClick={action("clicked")}
|
|
icon={hintIcon}
|
|
/>
|
|
</Section>
|
|
);
|
|
});
|