All files / Badge Badge.stories.tsx

100% Statements 9/9
100% Branches 0/0
100% Functions 4/4
100% Lines 8/8

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            1x 1x                             1x     1x   1x 1x   4x   8x                              
import _ from 'lodash';
import React from 'react';
import { Story, Meta } from '@storybook/react';
 
import { Badge, IBadgeProps } from './Badge';
 
const kinds = [undefined, 'primary', 'success', 'danger'];
const types = [undefined, 'stroke'];
 
export default {
	title: 'Visual Design/Badge',
	component: Badge,
	parameters: {
		docs: {
			description: {
				component: Badge.peek.description,
			},
		},
	},
} as Meta;
 
//👇 We create a “template” of how args map to rendering
const Template: Story<IBadgeProps> = (args) => <Badge {...args}>Badge</Badge>;
 
//👇 Each story then reuses that template
export const Basic: Story<IBadgeProps> = Template.bind({});
 
export const AllTypes: Story<IBadgeProps> = (args) => (
	<div>
		{_.map(kinds, (kind, idx) => (
			<div key={`${kind}-${idx}`}>
				{_.map(types, (ty) => (
					<React.Fragment key={`${kind}-${ty}`}>
						<Badge
							{...args}
							style={{ marginBottom: '10px', marginRight: '10px' }}
							kind={kind as any}
							type={ty as any}
						>
							Badge
						</Badge>
					</React.Fragment>
				))}
			</div>
		))}
	</div>
);