Skip to content

Commit

Permalink
Add toggle control component to storybook (#18388)
Browse files Browse the repository at this point in the history
  • Loading branch information
brentswisher authored and Soean committed Nov 8, 2019
1 parent 0868611 commit 37301b8
Showing 1 changed file with 52 additions and 0 deletions.
52 changes: 52 additions & 0 deletions packages/components/src/toggle-control/stories/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
/**
* External dependencies
*/
import { text } from '@storybook/addon-knobs';

/**
* WordPress dependencies
*/
import { useState } from '@wordpress/element';

/**
* Internal dependencies
*/
import ToggleControl from '../';

export default { title: 'ToggleControl', component: ToggleControl };

const ToggleControlWithState = ( { helpTextChecked, helpTextUnchecked, ...props } ) => {
const [ hasFixedBackground, setHasFixedBackground ] = useState( true );
return (
<ToggleControl
{ ...props }
help={ hasFixedBackground ? helpTextChecked : helpTextUnchecked }
checked={ hasFixedBackground }
onChange={ setHasFixedBackground }
/>
);
};

export const _default = () => {
const label = text( 'Label', 'Does this have a fixed background?' );

return (
<ToggleControlWithState
label={ label }
/>
);
};

export const withHelpText = () => {
const label = text( 'Label', 'Does this have a fixed background?' );
const helpTextChecked = text( 'Help When Checked', 'Has fixed background.' );
const helpTextUnchecked = text( 'Help When Unchecked', 'No fixed background.' );

return (
<ToggleControlWithState
label={ label }
helpTextChecked={ helpTextChecked }
helpTextUnchecked={ helpTextUnchecked }
/>
);
};

0 comments on commit 37301b8

Please sign in to comment.