2020-10-16 13:16:01 +00:00
|
|
|
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";
|
2019-05-20 10:30:11 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
storiesOf("Components|Buttons", module)
|
2019-05-20 10:30:11 +00:00
|
|
|
.addDecorator(withKnobs)
|
|
|
|
.addDecorator(withReadme(Readme))
|
2020-10-16 13:16:01 +00:00
|
|
|
.add("base", () => {
|
|
|
|
const sizeOptions = ["base", "medium", "big", "large"];
|
|
|
|
const iconNames = orderBy(
|
|
|
|
Object.keys(Icons),
|
|
|
|
[(name) => name.toLowerCase()],
|
|
|
|
["asc"]
|
|
|
|
);
|
2019-07-02 08:04:54 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const iconName = select("icon", ["", ...iconNames], "");
|
|
|
|
const hintIcon = iconName
|
|
|
|
? React.createElement(Icons[iconName])
|
|
|
|
: undefined;
|
2019-07-02 08:04:54 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<Section>
|
|
|
|
<Button
|
2020-10-16 13:16:01 +00:00
|
|
|
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")}
|
2019-07-02 08:04:54 +00:00
|
|
|
icon={hintIcon}
|
|
|
|
/>
|
|
|
|
</Section>
|
2020-10-16 13:16:01 +00:00
|
|
|
);
|
2019-07-02 08:04:54 +00:00
|
|
|
});
|