import React , { FC , createContext , useContext , ReactNode } from 'react' ; import cn from 'classnames' ; import { Box } from '../Box/Box' ; import { Text } from '../Text/Text' ; import { Stack , StackProps } from '../Stack/Stack' ; import * as styles from './BulletList.css' ; interface BulletListContextValue { type : string ; } const BulletListContext = createContext < BulletListContextValue > ( { type : 'ul' , } ) ; export const Bullet = ( { children } ) => { const { type } = useContext ( BulletListContext ) ; return ( < Text as = "span" > < Box display = "flex" > < Box display = "flex" > < span className = { cn ( styles . bullet , { [ styles . numbered ] : type === 'ol' , } ) } > { type === 'ul' && < span className = { styles . icon } />} < /span> < /Box> < Box className = { styles . content } > { children } < /Box> < /Box> < /Text>); } ; interface BulletListProps { children : ReactNode ; space ? : StackProps [ 'space' ] ; type ? : 'ul' | 'ol' ; } export const BulletList = ( { children , space = 1 , type = 'ul' , } ) => { return ( < div className = { styles . container } > < BulletListContext . Provider value = { { type } } > < Stack component = { type } space = { space } > { children } < /Stack> < /BulletListContext.Provider> < /div>); } ;