2019-05-20 10:30:11 +00:00
|
|
|
import React from 'react';
|
|
|
|
import { storiesOf } from '@storybook/react';
|
|
|
|
import withReadme from 'storybook-readme/with-readme';
|
|
|
|
import Readme from './README.md';
|
|
|
|
import { Button } from 'asc-web-components';
|
|
|
|
|
|
|
|
const colStyle = { margin: '0 8px 0 8px' };
|
|
|
|
|
|
|
|
const rowStyle = { margin: '4px 0 4px 0' };
|
|
|
|
|
2019-05-20 13:09:48 +00:00
|
|
|
function onClick(e) {
|
|
|
|
e = e || window.event;
|
|
|
|
var target = e.target || e.srcElement,
|
|
|
|
text = target.textContent || target.innerText;
|
|
|
|
console.log("onClick", text);
|
|
|
|
}
|
|
|
|
|
2019-05-20 10:30:11 +00:00
|
|
|
storiesOf('Components|Button', module)
|
2019-05-20 12:33:52 +00:00
|
|
|
// To set a default viewport for all the stories for this component
|
|
|
|
.addParameters({ viewport: { defaultViewport: 'responsive' }})
|
2019-05-20 10:30:11 +00:00
|
|
|
.addDecorator(withReadme(Readme))
|
|
|
|
.add('all', () => (
|
|
|
|
<>
|
|
|
|
<div>
|
2019-05-20 13:09:48 +00:00
|
|
|
<Button style={colStyle} onClick={onClick}>Base button</Button>
|
|
|
|
<Button size="middle" style={colStyle} onClick={onClick}>
|
2019-05-20 10:30:11 +00:00
|
|
|
Middle button
|
|
|
|
</Button>
|
2019-05-20 13:09:48 +00:00
|
|
|
<Button size="big" style={colStyle} onClick={onClick}>
|
2019-05-20 10:30:11 +00:00
|
|
|
Big button
|
|
|
|
</Button>
|
2019-05-20 13:09:48 +00:00
|
|
|
<Button size="huge" style={colStyle} onClick={onClick}>
|
2019-05-20 10:30:11 +00:00
|
|
|
Huge button
|
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
<div style={rowStyle}>
|
2019-05-20 13:09:48 +00:00
|
|
|
<Button disabled style={colStyle} onClick={onClick}>
|
2019-05-20 10:30:11 +00:00
|
|
|
Base button
|
|
|
|
</Button>
|
2019-05-20 13:09:48 +00:00
|
|
|
<Button disabled size="middle" style={colStyle} onClick={onClick}>
|
2019-05-20 10:30:11 +00:00
|
|
|
Middle button
|
|
|
|
</Button>
|
2019-05-20 13:09:48 +00:00
|
|
|
<Button disabled size="big" style={colStyle} onClick={onClick}>
|
2019-05-20 10:30:11 +00:00
|
|
|
Big button
|
|
|
|
</Button>
|
2019-05-20 13:09:48 +00:00
|
|
|
<Button disabled size="huge" style={colStyle} onClick={onClick}>
|
2019-05-20 10:30:11 +00:00
|
|
|
Huge button
|
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
<div style={rowStyle}>
|
2019-05-20 13:09:48 +00:00
|
|
|
<Button primary style={colStyle} onClick={onClick}>
|
2019-05-20 10:30:11 +00:00
|
|
|
Base button
|
|
|
|
</Button>
|
2019-05-20 13:09:48 +00:00
|
|
|
<Button size="middle" primary style={colStyle} onClick={onClick}>
|
2019-05-20 10:30:11 +00:00
|
|
|
Middle button
|
|
|
|
</Button>
|
2019-05-20 13:09:48 +00:00
|
|
|
<Button size="big" primary style={colStyle} onClick={onClick}>
|
2019-05-20 10:30:11 +00:00
|
|
|
Big button
|
|
|
|
</Button>
|
2019-05-20 13:09:48 +00:00
|
|
|
<Button size="huge" primary style={colStyle} onClick={onClick}>
|
2019-05-20 10:30:11 +00:00
|
|
|
Huge button
|
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
<div style={rowStyle}>
|
2019-05-20 13:09:48 +00:00
|
|
|
<Button disabled primary style={colStyle} onClick={onClick}>
|
2019-05-20 10:30:11 +00:00
|
|
|
Base button
|
|
|
|
</Button>
|
2019-05-20 13:09:48 +00:00
|
|
|
<Button disabled size="middle" primary style={colStyle} onClick={onClick}>
|
2019-05-20 10:30:11 +00:00
|
|
|
Middle button
|
|
|
|
</Button>
|
2019-05-20 13:09:48 +00:00
|
|
|
<Button disabled size="big" primary style={colStyle} onClick={onClick}>
|
2019-05-20 10:30:11 +00:00
|
|
|
Big button
|
|
|
|
</Button>
|
2019-05-20 13:09:48 +00:00
|
|
|
<Button disabled size="huge" primary style={colStyle} onClick={onClick}>
|
2019-05-20 10:30:11 +00:00
|
|
|
Huge button
|
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
));
|