All files / Button Button.stories.tsx

100% Statements 8/8
100% Branches 6/6
100% Functions 4/4
100% Lines 7/7

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>
);