jsx import { jsx } from '@emotion/core' ; import { StaticStates } from '@workday/canvas-kit-react/common' ; import { ComponentStatesTable } from '@workday/canvas-kit-labs-react/common' ; import { withSnapshotsEnabled } from '../../../../utils/storybook' ; import { uploadCloudIcon , extLinkIcon , userIcon , taskContactIcon , } from '@workday/canvas-system-icons-web' ; import { Menu , MenuItem , MenuItemProps } from '../index' ; import testAvatar from './test-avatar.png' ; const noop = ( ) => { } ; export default withSnapshotsEnabled ( { title : 'Testing/React/Preview/Menu' , component : Menu , parameters : { chromatic : { diffThreshold : 0.3 , } , } , } ) ; interface StoryMenuItemProps extends Omit < MenuItemProps , 'role' > { text : React . ReactNode ; } const createMenuItems = ( hasIcons ? , isFocused ? ) : StoryMenuItemProps [ ] => { return [ { text : `First Item` , icon : hasIcons ? uploadCloudIcon : undefined , isFocused : isFocused , } , { text : `Second Item (with a really really really long label)` , icon : undefined , } , { text : `Third Item (with a really really really long label)` , icon : hasIcons ? uploadCloudIcon : undefined , } , { text : `Fourth Item (with a really really really long label)` , icon : hasIcons ? uploadCloudIcon : undefined , secondaryIcon : hasIcons ? taskContactIcon : undefined , } , { text : `Fifth Item (disabled)` , icon : undefined , secondaryIcon : hasIcons ? extLinkIcon : undefined , isDisabled : true , } , { text : hasIcons ? ( '' ) : ( < em > Sixth Item ( < b > with markup < /b>) < /em>), icon : hasIcons ? userIcon : undefined , 'aria-label' : hasIcons ? `I am a label for screen readers` : undefined , } , { text : `Seventh Item (with divider)` , icon : undefined , hasDivider : true , } , ] ; } ; const buildItem = ( item , index ) => ( < MenuItem key = { index } onClick = { noop } icon = { item . icon } isFocused = { item . isFocused } secondaryIcon = { item . secondaryIcon } isDisabled = { item . isDisabled } hasDivider = { item . hasDivider } aria - label = { item [ 'aria-label' ] } > { item . text } < /MenuItem>); export const MenuItemStates = ( ) => ( < StaticStates > < ComponentStatesTable rowProps = { [ { label : 'Default' , props : { } } , { label : 'With Icons' , props : { hasIcons : true } } , { label : 'With Icons and Custom Width' , props : { hasIcons : true , width : 200 } } , { label : 'With Icons and Custom Focus' , props : { hasIcons : true , initialSelectedItem : 3 } , } , ] } columnProps = { [ { label : 'Default' , props : { } } ] } > { props => ( < Menu width = { props . width } initialSelectedItem = { props . initialSelectedItem } > { createMenuItems ( props . hasIcons ) . map ( buildItem ) } < /Menu>)} < /ComponentStatesTable> < /StaticStates>);