import React from 'react'; import {Grid} from '@material-ui/core'; import type {Meta} from '@storybook/react'; import type {SQFormResetButtonWithConfirmationProps} from 'components/SQForm/SQFormResetButtonWithConfirmation'; import type {CustomStory} from './types/storyHelperTypes'; import { SQFormResetButtonWithConfirmation as SQFormResetButtonWithConfirmationComponent, SQFormTextField, } from '../src'; import {SQFormStoryWrapper} from './components/SQFormStoryWrapper'; import {createDocsPage} from './utils/createDocsPage'; const meta: Meta = { title: 'Components/SQFormResetButtonWithConfirmation', component: SQFormResetButtonWithConfirmationComponent, argTypes: { onReset: {action: 'reset', table: {disable: true}}, }, parameters: { docs: { page: createDocsPage(), }, }, }; const defaultArgs = { children: 'Reset', confirmationContent: ( <img src="https://media.giphy.com/media/LMQ9c65BnD2gzMiJWg/giphy.gif" alt="press reset" /> ), }; const Template: CustomStory<SQFormResetButtonWithConfirmationProps> = ( args ) => { const {sqFormProps, ...rest} = args; return ( <SQFormStoryWrapper initialValues={{test: ''}} showSubmit={false} {...sqFormProps} > <Grid container alignItems="center" spacing={2}> <Grid item> <SQFormTextField name="test" label="Test Field" /> </Grid> <Grid item> <SQFormResetButtonWithConfirmationComponent {...rest} /> </Grid> </Grid> </SQFormStoryWrapper> ); }; export const Default = Template.bind({}); Default.args = defaultArgs; Default.storyName = 'SQFormResetButtonWithConfirmation'; export default meta;