jsx import { jsx } from '@emotion/core' ; import * as React from 'react' ; import { ComponentStatesTable } from '@workday/canvas-kit-labs-react/common' ; import { withSnapshotsEnabled , customColorTheme } from '../../../../../utils/storybook' ; import { playCircleIcon } from '@workday/canvas-system-icons-web' ; import { ToolbarDropdownButton } from '@workday/canvas-kit-react/button' ; import { Container , stateTableColumnProps } from './utils' ; import { PartialEmotionCanvasTheme , StaticStates } from '@workday/canvas-kit-react/common' ; export default withSnapshotsEnabled ( { title : 'Testing/React/Buttons/Button/Toolbar Dropdown Button' , component : ToolbarDropdownButton , } ) ; const columnProps = [ ... stateTableColumnProps , { label : 'Mirrored Icon ' , props : { shouldMirrorIcon : true , disabled : false } } , ] ; export const ToolbarDropdownButtonStates = ( props ) => ( < React . Fragment > < div > < h3 > Default < /h3> < StaticStates theme = { props . theme } > < ComponentStatesTable rowProps = { [ { label : 'Default' , props : { } } ] } columnProps = { columnProps } > { props => ( < Container > < ToolbarDropdownButton icon = { playCircleIcon } aria - label = "Play" { ... props } onChange = { ( ) => { } } /> < /Container>)} < /ComponentStatesTable> < /StaticStates> < /div> < /React.Fragment>); export const ToolbarDropdownButtonThemedStates = ( ) => ( < ToolbarDropdownButtonStates theme = { { canvas : customColorTheme } } />);