Skip to content

Commit

Permalink
Components: migrate ConfirmDialog component's Stories from knobs to…
Browse files Browse the repository at this point in the history 
… controls (#40164)

ConfirmDialog Stories: simplify stories and convert from knobs to controls
  • Loading branch information
@chad1008
chad1008 authored Apr 29, 2022
1 parent 62767b0 commit 6fab3c4
Showing 1 changed file with 87 additions and 99 deletions.
186 changes: 87 additions & 99 deletions packages/components/src/confirm-dialog/stories/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
/**
* External dependencies
*/
import { text } from '@storybook/addon-knobs';

/**
* WordPress dependencies
*/
Expand All @@ -15,102 +10,42 @@ import Button from '../../button';
import { Heading } from '../../heading';
import { ConfirmDialog } from '..';

export default {
const meta = {
component: ConfirmDialog,
title: 'Components (Experimental)/ConfirmDialog',
argTypes: {
children: {
control: { type: 'text' },
},
confirmButtonText: {
control: { type: 'text' },
},
cancelButtonText: {
control: { type: 'text' },
},
isOpen: {
control: { type: null },
},
onConfirm: {
control: { type: null },
},
onCancel: {
control: { type: null },
},
},
args: {
children: 'Would you like to privately publish the post now?',
},
parameters: {
knobs: { disable: false },
docs: { source: { state: 'open' } },
},
};

const daText = () =>
text( 'message', 'Would you like to privately publish the post now?' );
const daCancelText = () => text( 'cancel button', 'No thanks' );
const daConfirmText = () => text( 'confirm button', 'Yes please!' );

// Simplest usage: just declare the component with the required `onConfirm` prop.
export const _default = () => {
const [ confirmVal, setConfirmVal ] = useState( "Hasn't confirmed yet" );

return (
<>
<ConfirmDialog onConfirm={ () => setConfirmVal( 'Confirmed!' ) }>
{ daText() }
</ConfirmDialog>
<Heading level={ 1 }>{ confirmVal }</Heading>
</>
);
};

export const WithCustomButtonLabels = () => {
const [ confirmVal, setConfirmVal ] = useState( "Hasn't confirmed yet" );

return (
<>
<ConfirmDialog
onConfirm={ () => setConfirmVal( 'Confirmed!' ) }
cancelButtonText={ daCancelText() }
confirmButtonText={ daConfirmText() }
>
{ daText() }
</ConfirmDialog>
<Heading level={ 1 }>{ confirmVal }</Heading>
</>
);
};

export const WithJSXMessage = () => {
const [ confirmVal, setConfirmVal ] = useState( "Hasn't confirmed yet" );

return (
<>
<ConfirmDialog onConfirm={ () => setConfirmVal( 'Confirmed!' ) }>
<Heading level={ 2 }>{ daText() }</Heading>
</ConfirmDialog>
<Heading level={ 1 }>{ confirmVal }</Heading>
</>
);
};

export const VeeeryLongMessage = () => {
const [ confirmVal, setConfirmVal ] = useState( "Hasn't confirmed yet" );
export default meta;

return (
<>
<ConfirmDialog onConfirm={ () => setConfirmVal( 'Confirmed!' ) }>
{ daText().repeat( 20 ) }
</ConfirmDialog>
<Heading level={ 1 }>{ confirmVal }</Heading>
</>
);
};

export const UncontrolledAndWithExplicitOnCancel = () => {
const [ confirmVal, setConfirmVal ] = useState(
"Hasn't confirmed or cancelled yet"
);

return (
<>
<ConfirmDialog
onConfirm={ () => setConfirmVal( 'Confirmed!' ) }
onCancel={ () => setConfirmVal( 'Cancelled' ) }
>
{ daText() }
</ConfirmDialog>
<Heading level={ 1 }>{ confirmVal }</Heading>
</>
);
};

// Controlled `ConfirmDialog`s require both `onConfirm` *and* `onCancel to be passed
// It's expected that the user will then use it to hide the dialog, too (see the
// `setIsOpen` calls below).
export const Controlled = () => {
const Template = ( args ) => {
const [ isOpen, setIsOpen ] = useState( false );
const [ confirmVal, setConfirmVal ] = useState(
"Hasn't confirmed or cancelled yet"
);
const [ confirmVal, setConfirmVal ] = useState( '' );

const handleConfirm = () => {
setConfirmVal( 'Confirmed!' );
Expand All @@ -121,22 +56,75 @@ export const Controlled = () => {
setConfirmVal( 'Cancelled' );
setIsOpen( false );
};

return (
<>
<Button variant="primary" onClick={ () => setIsOpen( true ) }>
Open ConfirmDialog
</Button>

<ConfirmDialog
{ ...args }
isOpen={ isOpen }
onConfirm={ handleConfirm }
onCancel={ handleCancel }
>
{ daText() }
{ args.children }
</ConfirmDialog>

<Heading level={ 1 }>{ confirmVal }</Heading>

<Button variant="primary" onClick={ () => setIsOpen( true ) }>
Open ConfirmDialog
</Button>
</>
);
};

// Simplest usage: just declare the component with the required `onConfirm` prop. Note: the `onCancel` prop is optional here, unless you'd like to render the component in Controlled mode (see below)
export const _default = Template.bind( {} );
const _defaultSnippet = `() => {
const [ isOpen, setIsOpen ] = useState( false );
const [ confirmVal, setConfirmVal ] = useState('');
const handleConfirm = () => {
setConfirmVal( 'Confirmed!' );
setIsOpen( false );
};
const handleCancel = () => {
setConfirmVal( 'Cancelled' );
setIsOpen( false );
};
return (
<>
<ConfirmDialog
isOpen={ isOpen }
onConfirm={ handleConfirm }
onCancel={ handleCancel }
>
Would you like to privately publish the post now?
</ConfirmDialog>
<Heading level={ 1 }>{ confirmVal }</Heading>
<Button variant="primary" onClick={ () => setIsOpen( true ) }>
Open ConfirmDialog
</Button>
</>
);
};`;
_default.args = {};
_default.parameters = {
docs: {
source: {
code: _defaultSnippet,
language: 'jsx',
type: 'auto',
format: 'true',
},
},
};

// To customize button text, pass the `cancelButtonText` and/or `confirmButtonText` props.
export const withCustomButtonLabels = Template.bind( {} );
withCustomButtonLabels.args = {
cancelButtonText: 'No thanks',
confirmButtonText: 'Yes please!',
};

0 comments on commit 6fab3c4

Please sign in to comment.