Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | 1x 1x 1x 1x 1x 4x 20x | import _ from 'lodash';
import React from 'react';
import CheckIcon from '../Icon/CheckIcon/CheckIcon';
import { Button } from './Button';
const kinds = [undefined, 'primary', 'link', 'danger', 'invisible'];
const sizes = [undefined, 'small', 'short', 'large'];
export default {
title: 'Controls/Button',
component: Button,
parameters: {
notes: Button.peek.description,
docs: {
inlineStories: true,
},
},
};
export const Default = (args) => <Button {...args}>Button</Button>;
export const AllTypes = () => (
<div
style={{
display: 'grid',
gridGap: '10px',
gridTemplateColumns: `repeat(${kinds.length}, auto)`,
justifyItems: 'start',
alignItems: 'center',
gridAutoFlow: 'column',
}}
>
{_.map(sizes, (size, sizeIndex) =>
_.map(kinds, (kind) => (
<React.Fragment key={`${size}-${kind}`}>
<Button
style={{ gridColumn: sizeIndex + 1 }}
size={size as any}
kind={kind as any}
>
{size ? size : 'standard'} {kind}
</Button>
<Button
style={{ gridColumn: sizeIndex + 1 }}
size={size as any}
kind={kind as any}
>
<CheckIcon />
{size ? size : 'standard'} {kind}
</Button>
<Button
isDisabled
style={{ gridColumn: sizeIndex + 1 }}
size={size as any}
kind={kind as any}
>
<CheckIcon />
disabled {size ? size : 'standard'} {kind}
</Button>
<Button
style={{ gridColumn: sizeIndex + 1 }}
size={size as any}
kind={kind as any}
hasOnlyIcon={true}
>
<CheckIcon />
</Button>
</React.Fragment>
))
)}
</div>
);
|