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 74 75 76 77 | 1x 1x 1x 1x 1x 4x 20x | import _ from 'lodash'; import React from 'react'; import { Meta } from '@storybook/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: { docs: { description: { component: Button.peek.description, }, inlineStories: true, }, }, } as Meta; export const Basic = (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> ); |