import * as React from 'react' ; import { StaticStates } from '@workday/canvas-kit-react/common' ; import { ComponentStatesTable , permutateProps } from '@workday/canvas-kit-labs-react/common' ; import { withSnapshotsEnabled , customColorTheme } from '../../../../../utils/storybook' ; import { TextInput } from '../../../text-input' ; export default withSnapshotsEnabled ( { title : 'Testing/React/Inputs/Text Input' , component : TextInput , } ) ; export const TextInputStates = ( ) => ( < StaticStates > < ComponentStatesTable rowProps = { permutateProps ( { value : [ { value : 'Input value' , label : 'With Value' } , { value : '' , label : 'No Value' } , ] , placeholder : [ { value : 'Placeholder' , label : 'Placeholder' } ] , error : [ { value : undefined , label : '' } , { value : TextInput . ErrorType . Alert , label : 'Alert' } , { value : TextInput . ErrorType . Error , label : 'Error' } , ] , } , props => { if ( props . value === '' && ! props . placeholder ) { return false ; } return true ; } ) } columnProps = { permutateProps ( { className : [ { label : 'Default' , value : '' } , { label : 'Hover' , value : 'hover' } , { label : 'Focus' , value : 'focus' } , { label : 'Focus Hover' , value : 'focus hover' } , { label : 'Active' , value : 'active' } , { label : 'Active Hover' , value : 'active hover' } , ] , disabled : [ { label : '' , value : false } , { label : 'Disabled' , value : true } , ] , } , props => { if ( props . disabled && ! [ '' , 'hover' ] . includes ( props . className ) ) { return false ; } return true ; } ) } > { props => ( < TextInput { ... props } style = { { minWidth : 60 , width : 100 } } onChange = { ( ) => { } } />)} < /ComponentStatesTable> < /StaticStates>); export const TextInputThemedStates = ( ) => < TextInputStates />; TextInputThemedStates . parameters = { canvasProviderDecorator : { theme : customColorTheme , } , } ;