GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 06:01:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

migrate ListItem to csf3

Browse Source
This commit is contained in:
Jeppe Reinhold 2022-10-20 00:02:19 +02:00
parent bbd08f8773
commit e4a7020345
1 changed files with 63 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
code/ui/components/src/tooltip/ListItem.stories.tsx
View File

@ -1,11 +1,14 @@
import React from 'react'; import React from 'react';
import { storiesOf } from '@storybook/react';
import ListItem from './ListItem'; import ListItem from './ListItem';
import { Icons } from '../icon/icon'; import { Icons } from '../icon/icon';
storiesOf('basics/Tooltip/ListItem', module) export default {
.add('all', () => ( title: 'basics/Tooltip/ListItem',
component: ListItem,
};
export const All = {
render: (args) => (
<div> <div>
<ListItem loading /> <ListItem loading />
<ListItem title="Default" /> <ListItem title="Default" />
@ -21,15 +24,59 @@ storiesOf('basics/Tooltip/ListItem', module)
/> />
<ListItem disabled left="left" title="disabled" center="center" right="right" /> <ListItem disabled left="left" title="disabled" center="center" right="right" />
</div> </div>
)) ),
.add('loading', () => <ListItem loading />) };
.add('default', () => <ListItem title="Default" />)
.add('default icon', () => <ListItem title="Default icon" right={<Icons icon="eye" />} />) export const Default = {
.add('active icon', () => <ListItem active title="active icon" right={<Icons icon="eye" />} />) args: {
.add('w/positions', () => <ListItem left="left" title="title" center="center" right="right" />) title: 'Default',
.add('w/positions active', () => ( },
<ListItem active left="left" title="active" center="center" right="right" /> };
))
.add('disabled', () => ( export const Loading = {
<ListItem disabled left="left" title="disabled" center="center" right="right" /> args: {
)); loading: true,
},
};
export const DefaultIcon = {
args: {
title: 'Default icon',
right: <Icons icon="eye" />,
},
};
export const ActiveIcon = {
args: {
title: 'Active icon',
active: true,
right: <Icons icon="eye" />,
},
};
export const WPositions = {
args: {
left: 'left',
title: 'title',
center: 'center',
right: 'right',
},
};
export const WPositionsActive = {
args: {
active: true,
left: 'left',
title: 'title',
center: 'center',
right: 'right',
},
};
export const WPositionsDisabled = {
args: {
disabled: true,
left: 'left',
title: 'title',
center: 'center',
right: 'right',
},
};