import * as React from "react";
import { storiesOf } from "@storybook/react";
import { Button, Icon } from "../src/index";

storiesOf("Button", module).add("Button", () => {
  return (
    <div id='app-wrapper'>
      <div id='app'>
      <Button.Group>
    <Button type="primary" aria-label="prompt button">
      <Icon type="prompt" />
    </Button>
    <Button type="primary" aria-label="clock button">
      <Icon type="clock" />
    </Button>
    <Button type="primary" aria-label="set button">
      <Icon type="set" />
    </Button>
  </Button.Group>

  <p>按钮类型</p>
  <Button type="normal">Normal</Button> &nbsp;&nbsp;
    <Button type="primary">Prirmary</Button> &nbsp;&nbsp;
    <Button type="secondary">Secondary</Button>&nbsp;&nbsp;
    <br />
    <br />
    <Button type="normal" text>
      Normal
    </Button>{' '}
    &nbsp;&nbsp;
    <Button type="primary" text>
      Primary
    </Button>{' '}
    &nbsp;&nbsp;
    <Button type="secondary" text>
      Secondary
    </Button>
    <br />
    <br />
    <Button type="normal" warning>
      Normal
    </Button>{' '}
    &nbsp;&nbsp;
    <Button type="primary" warning>
      Primary
    </Button>{' '}
    &nbsp;&nbsp;
    <Button type="primary" warning>
      Secondary
    </Button>{' '}
    &nbsp;&nbsp;
    <br />
    <br />
    <p>icon按钮</p>
    <Button type="normal">
      <Icon type="atm" />
    </Button>
    &nbsp;&nbsp;
    <Button type="primary">
      <Icon type="atm" />
    </Button>
    &nbsp;&nbsp;
    <Button type="third">
      <Icon type="atm" />
    </Button>
    

    <div style={{ clear: 'both' }}>
      <div className="ghost-light-background">
        <Button ghost="light">Ghost light</Button>
      </div>
      <div className="ghost-dark-background" style={{background:'#000',padding:'10px 0'}}>
        <Button ghost="dark">Ghost dark</Button>
      </div>
    </div>
      </div>
      <Button type="primary" size="large">
      Large
    </Button>
    &nbsp;&nbsp;
    <Button type="primary">Medium</Button>
    &nbsp;&nbsp;
    <Button type="primary" size="small">
      Small
    </Button>
    &nbsp;&nbsp;
    <Button type="primary" size="xs">
      按钮
    </Button>
    &nbsp;&nbsp;
    <Button type="primary" text size="large">
      Large
    </Button>
    &nbsp;&nbsp;
    <Button type="primary" text>Medium</Button>
    &nbsp;&nbsp;
    <Button type="primary"text size="small">
      Small
    </Button>
    &nbsp;&nbsp;
    <Button type="primary"text size="xs">
      按钮
    </Button>
    <br/>
    <Button>
      <Icon type="add" /> ATM
      <CustomIcon type="icon-Add-Outlined" />
    </Button>{' '}
    &nbsp;&nbsp;
    <Button text>
      <Icon type="atm" /> ATM
    </Button>{' '}
    &nbsp;&nbsp;
    <Button warning>
      <Icon type="atm" /> ATM
    </Button>{' '}
    &nbsp;&nbsp;
    <Button iconSize="xxs">
      <Icon type="arrow-left" /> ARROW
    </Button>{' '}
    &nbsp;&nbsp;
    <Button type="primary">
      <Icon type="atm" /> ATM
    </Button>{' '}
    </div>
  );
});
