import './demo1.css';
import Box from '../../box';
import Button from '..';
import Icon from '../../icon';
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<div >
  <h3><strong>主要按钮/次级按钮/三级按钮：</strong></h3>
  <Box direction="row" className="demo1-btn-row" spacing={20}>
    <span className="demo1-btn-label">XL:</span>
    <Button type="primary" size="xl">主要按钮</Button>
    <Button type="secondary" size="xl">次级按钮</Button>
    <Button type="normal" size="xl">三级按钮</Button>
  </Box>
  <Box direction="row" className="demo1-btn-row" spacing={20}>
    <span className="demo1-btn-label">Large:</span>
    <Button type="primary" size="large">主要按钮</Button>
    <Button type="secondary" size="large">次级按钮</Button>
    <Button type="normal" size="large">三级按钮</Button>
  </Box>
  <Box direction="row" className="demo1-btn-row" spacing={20}>
    <span className="demo1-btn-label">Medium:</span>
    <Button type="primary" size="medium">主要按钮</Button>
    <Button type="secondary" size="medium">次级按钮</Button>
    <Button type="normal" size="medium">三级按钮</Button>
  </Box>
  <Box direction="row" className="demo1-btn-row" spacing={20}>
    <span className="demo1-btn-label">Small:</span>
    <Button type="primary" size="small">主要按钮</Button>
    <Button type="secondary" size="small">次级按钮</Button>
    <Button type="normal" size="small">三级按钮</Button>
  </Box>
  <Box direction="row" className="demo1-btn-row" spacing={20}>
    <span className="demo1-btn-label">XS:</span>
    <Button type="primary" size="xs">主要按钮</Button>
    <Button type="secondary" size="xs">次级按钮</Button>
    <Button type="normal" size="xs">三级按钮</Button>
  </Box>

  <h3><strong>文本按钮：</strong></h3>
  <Box direction="row" className="demo1-btn-row" spacing={20}>
    <span className="demo1-btn-label">XL:</span>
    <Button type="primary" size="xl" text>主要按钮</Button>
    <Button type="secondary" size="xl" text>次级按钮</Button>
    <Button type="normal" size="xl" text>三级按钮</Button>
  </Box>
  <Box direction="row" className="demo1-btn-row" spacing={20}>
    <span className="demo1-btn-label">Large:</span>
    <Button type="primary" size="large" text>主要按钮</Button>
    <Button type="secondary" size="large" text>次级按钮</Button>
    <Button type="normal" size="large" text>三级按钮</Button>
  </Box>
  <Box direction="row" className="demo1-btn-row" spacing={20}>
    <span className="demo1-btn-label">Medium:</span>
    <Button type="primary" size="medium" text>主要按钮</Button>
    <Button type="secondary" size="medium" text>次级按钮</Button>
    <Button type="normal" size="medium" text>三级按钮</Button>
  </Box>
  <Box direction="row" className="demo1-btn-row" spacing={20}>
    <span className="demo1-btn-label">Small:</span>
    <Button type="primary" size="small" text>主要按钮</Button>
    <Button type="secondary" size="small" text>次级按钮</Button>
    <Button type="normal" size="small" text>三级按钮</Button>
  </Box>
  <Box direction="row" className="demo1-btn-row" spacing={20}>
    <span className="demo1-btn-label">XS:</span>
    <Button type="primary" size="xs" text>主要按钮</Button>
    <Button type="secondary" size="xs" text>次级按钮</Button>
    <Button type="normal" size="xs" text>三级按钮</Button>
  </Box>

  <h3><strong>警告按钮：</strong></h3>
  <Box direction="row" className="demo1-btn-row" spacing={20}>
    <span className="demo1-btn-label">XL:</span>
    <Button type="primary" size="xl" warning>主要按钮</Button>
    <Button type="secondary" size="xl" warning>次级按钮</Button>
    <Button type="normal" size="xl" warning>三级按钮</Button>
  </Box>
  <Box direction="row" className="demo1-btn-row" spacing={20}>
    <span className="demo1-btn-label">Large:</span>
    <Button type="primary" size="large" warning>主要按钮</Button>
    <Button type="secondary" size="large" warning>次级按钮</Button>
    <Button type="normal" size="large" warning>三级按钮</Button>
  </Box>
  <Box direction="row" className="demo1-btn-row" spacing={20}>
    <span className="demo1-btn-label">Medium:</span>
    <Button type="primary" size="medium" warning>主要按钮</Button>
    <Button type="secondary" size="medium" warning>次级按钮</Button>
    <Button type="normal" size="medium" warning>三级按钮</Button>
  </Box>
  <Box direction="row" className="demo1-btn-row" spacing={20}>
    <span className="demo1-btn-label">Small:</span>
    <Button type="primary" size="small" warning>主要按钮</Button>
    <Button type="secondary" size="small" warning>次级按钮</Button>
    <Button type="normal" size="small" warning>三级按钮</Button>
  </Box>
  <Box direction="row" className="demo1-btn-row" spacing={20}>
    <span className="demo1-btn-label">XS:</span>
    <Button type="primary" size="xs" warning>主要按钮</Button>
    <Button type="secondary" size="xs" warning>次级按钮</Button>
    <Button type="normal" size="xs" warning>三级按钮</Button>
  </Box>

  <h3><strong>禁用状态：</strong></h3>
  <Box direction="row" className="demo1-btn-row" spacing={20}>
    <span className="demo1-btn-label">XL:</span>
    <Button type="primary" size="xl" disabled>主要按钮</Button>
    <Button type="secondary" size="xl" disabled>次级按钮</Button>
    <Button type="normal" size="xl" disabled>三级按钮</Button>
    <Button type="primary" size="xl" text disabled>主要文本按钮</Button>
    <Button type="secondary" size="xl" text disabled>次级文本按钮</Button>
    <Button type="normal" size="xl" text disabled>三级文本按钮</Button>
  </Box>
  <Box direction="row" className="demo1-btn-row" spacing={20}>
    <span className="demo1-btn-label">Large:</span>
    <Button type="primary" size="large" disabled>主要按钮</Button>
    <Button type="secondary" size="large" disabled>次级按钮</Button>
    <Button type="normal" size="large" disabled>三级按钮</Button>
    <Button type="primary" size="large" text disabled>主要文本按钮</Button>
    <Button type="secondary" size="large" text disabled>次级文本按钮</Button>
    <Button type="normal" size="large" text disabled>三级文本按钮</Button>
  </Box>
  <Box direction="row" className="demo1-btn-row" spacing={20}>
    <span className="demo1-btn-label">Medium:</span>
    <Button type="primary" size="medium" disabled>主要按钮</Button>
    <Button type="secondary" size="medium" disabled>次级按钮</Button>
    <Button type="normal" size="medium" disabled>三级按钮</Button>
    <Button type="primary" size="medium" text disabled>主要文本按钮</Button>
    <Button type="secondary" size="medium" text disabled>次级文本按钮</Button>
    <Button type="normal" size="medium" text disabled>三级文本按钮</Button>
  </Box>
  <Box direction="row" className="demo1-btn-row" spacing={20}>
    <span className="demo1-btn-label">Small:</span>
    <Button type="primary" size="small" disabled>主要按钮</Button>
    <Button type="secondary" size="small" disabled>次级按钮</Button>
    <Button type="normal" size="small" disabled>三级按钮</Button>
    <Button type="primary" size="small" text disabled>主要文本按钮</Button>
    <Button type="secondary" size="small" text disabled>次级文本按钮</Button>
    <Button type="normal" size="small" text disabled>三级文本按钮</Button>
  </Box>
  <Box direction="row" className="demo1-btn-row" spacing={20}>
    <span className="demo1-btn-label">XS:</span>
    <Button type="primary" size="xs" disabled>主要按钮</Button>
    <Button type="secondary" size="xs" disabled>次级按钮</Button>
    <Button type="normal" size="xs" disabled>三级按钮</Button>
    <Button type="primary" size="xs" text disabled>主要文本按钮</Button>
    <Button type="secondary" size="xs" text disabled>次级文本按钮</Button>
    <Button type="normal" size="xs" text disabled>三级文本按钮</Button>
  </Box>
  <h3><strong>icon按钮：</strong></h3>
  <Box direction="row" className="demo1-btn-row" spacing={20}>
    <span className="demo1-btn-label">Large:</span>
    <Button type="secondary" size="xl" icon><Icon type="add" /></Button>
    <Button type="normal" size="xl" icon><Icon type="add" /></Button>
    <Button type="normal" size="xl" icon disabled><Icon type="add" /></Button>
  </Box>
</div>, document.getElementById('button-demo-1'));