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 text>
      <Icon type="atm" />
      </Button>{' '}
        <Button type='primary' >normal1111</Button>
        <Button type='primary' size='large'  style={{ marginLeft: 8 }}>
        <Icon type="atm" />
        </Button>
        <Button type='primary' size='medium'  style={{ marginLeft: 8 }}>
        <Icon type="atm" />
        </Button>
        <Button type='primary' size='small'  style={{ marginLeft: 8 }}>
        <Icon type="atm" />
        </Button>
        <Button type='primary' size='xs'  style={{ marginLeft: 8 }}>
        <Icon type="atm" />
        </Button>
        <Button type='secondary' style={{ marginLeft: 8 }}>
          secondary
        </Button>
        <p>按钮尺寸</p>
        <p>可以通过设置 `size` 属性控制按钮的尺寸，可选值为 `large` `medium` `small` `xs`，其中默认值为 `medium`。</p>
        <Button size="large" >large</Button>
        <Button size="medium" style={{ marginLeft: 8 }}>
          medium
        </Button>
        <Button size="small" style={{ marginLeft: 8 }}>
          small
        </Button>
        <Button size="xs" style={{ marginLeft: 8 }}>
          xs
        </Button>
        <Button size="xs" style={{ marginLeft: 8 }} type="primary">
          xs
        </Button>
        <Button type="primary" size="large" style={{ marginLeft: 8 }}><Icon type="atm" />Large</Button>&nbsp;&nbsp;
        <Button type="normal" style={{ marginLeft: 8 }} disabled><Icon type="atm" /></Button>&nbsp;&nbsp;
        <Button type="primary" style={{ marginLeft: 8 }} size="small"><Icon type="atm" />Small</Button>
        <Button type="primary" style={{ marginLeft: 8 }} size="medium"><Icon type="atm" />Small</Button>

        <Button type="primary" style={{ marginLeft: 8 }} size="xs"><Icon type="atm" />xs</Button>
        <Button type="primary" style={{ marginLeft: 8 }} size="xs">xs</Button>
        <Button type="normal" style={{ marginLeft: 8 }} size="xs"><Icon type="atm" />xs</Button>
        <Button type="normal" style={{ marginLeft: 8 }} size="xs">xs</Button>
        <Button type="normal" text>Normal</Button>&nbsp;&nbsp;
        <Button type="normal" disabled>Normal</Button>
        <div className="ghost-light-background">
          <Button ghost="light" >
            Ghost Light
          </Button>
        </div>
        <br/>
        <br/>
        <div className="ghost-dark-background" style={{background:'#333',height:'50px'}}>
          <Button ghost="dark" >
            Ghost Dark
          </Button>
        </div>
        
        
      </div>
    </div>
  );
});
