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