import * as Colors from '@brightlayer-ui/colors'; import { InfoListItem, ListItemTag } from '@brightlayer-ui/react-components'; import { StoryFnReactReturnType } from '@storybook/react/dist/client/preview/types'; import React from 'react'; import { BrightnessMedium } from '@material-ui/icons'; import List from '@material-ui/core/List'; import { useDarkMode } from 'storybook-dark-mode'; import { getDirection } from '@brightlayer-ui/storybook-rtl-addon'; import { useTheme } from '@material-ui/core'; export const inInfoListItem = (): StoryFnReactReturnType => { const direction = getDirection(); const theme = useTheme(); return ( <List style={{ width: '80%', padding: 0 }}> <InfoListItem icon={<BrightnessMedium />} title={'@brightlayer-ui/react-themes'} subtitle={'Light and dark themes supported'} backgroundColor={useDarkMode() ? Colors.black[900] : 'white'} rightComponent={ <div style={{ display: 'flex' }}> <ListItemTag label={'Build Passing'} backgroundColor={Colors.green[300]} fontColor={Colors.black[900]} style={{ marginRight: direction === 'rtl' ? 0 : theme.spacing(2), marginLeft: direction === 'rtl' ? theme.spacing(2) : 0, }} /> <ListItemTag label={'5 Bugs'} backgroundColor={Colors.red[300]} fontColor={Colors.black[900]} /> </div> } /> </List> ); }; inInfoListItem.story = { name: 'within an Info List Item' };