1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import React from "react";
import { withKnobs, boolean } from "@storybook/addon-knobs";

import Button from "./Button";
import Icon from "../Icon";

export default {
  title: "Components|Button",
  parameters: {
    component: Button,
    componentSubtitle: "Subtitle to our button component...",
  },
};

export const defaultButton = () => (
  <div style={{ display: "block" }}>
    <Button loading={boolean("Loading")} fullWidth={boolean("fullWidth")}>
      Test me
    </Button>
  </div>
);

export const fullWidth = () => (
  <div style={{ display: "block" }}>
    <Button fullWidth={boolean("fullWidth")}>Test me</Button>
  </div>
);

export const withIcon = () => (
  <div style={{ display: "block" }}>
    <Button icon={() => <Icon size={18} icon="search" />}>Test me</Button>
  </div>
);

export const inlineButtons = () => (
  <div style={{display: 'flex'}}>
    <Button icon={() => <Icon size={0} icon="search" />}>Test me</Button>
    <Button >Test me</Button>
    <Button >Test me</Button>
    <Button icon={() => <Icon size={18} icon="search" />}>Test me</Button>
  </div>
);

export const Loading = () => <Button loading={true}>Test me</Button>;

Loading.story = {
  parameters: { docs: { storyDescription: "4 variants are supported." } },
};