Storybook: Apply a set of enhancements to the existing stories (#18030)

* Storybook: Apply a set of enhancements to the existing stories

* Add basic knobs integration to all Button stories

packages/components/src/button-group/stories/index.js

@@ -4,7 +4,7 @@
 import Button from '../../button';
 import ButtonGroup from '../';
 
-export default { title: 'Button Group', component: ButtonGroup };
+export default { title: 'ButtonGroup', component: ButtonGroup };
 
 export const _default = () => {
 	const style = { margin: '0 4px' };

packages/components/src/button/stories/index.js

@@ -1,36 +1,87 @@
+/**
+ * External dependencies
+ */
+import { text } from '@storybook/addon-knobs';
+
 /**
  * Internal dependencies
  */
 import Button from '../';
 
 export default { title: 'Button', component: Button };
 
-export const _default = () => <Button>Hello Button</Button>;
+export const _default = () => {
+	const label = text( 'Label', 'Default Button' );
+
+	return (
+		<Button>{ label }</Button>
+	);
+};
+
+export const primary = () => {
+	const label = text( 'Label', 'Primary Button' );
+
+	return (
+		<Button isPrimary>{ label }</Button>
+	);
+};
+
+export const large = () => {
+	const label = text( 'Label', 'Large Button' );
+
+	return (
+		<Button isLarge>{ label }</Button>
+	);
+};
+
+export const largePrimary = () => {
+	const label = text( 'Label', 'Large Primary Button' );
+
+	return (
+		<Button isPrimary isLarge>{ label }</Button>
+	);
+};
+
+export const small = () => {
+	const label = text( 'Label', 'Small Button' );
+
+	return (
+		<Button isSmall>{ label }</Button>
+	);
+};
 
-export const primary = () => <Button isPrimary>Hello Button</Button>;
+export const toggled = () => {
+	const label = text( 'Label', 'Toggled Button' );
 
-export const large = () => <Button isLarge>Hello Button</Button>;
+	return (
+		<Button isToggled>{ label }</Button>
+	);
+};
 
-export const largePrimary = () => (
-	<Button isPrimary isLarge>
-		Hello Button
-	</Button>
-);
+export const disabled = () => {
+	const label = text( 'Label', 'Disabled Button' );
 
-export const small = () => <Button isSmall>Hello Button</Button>;
+	return (
+		<Button disabled>{ label }</Button>
+	);
+};
 
-export const toggled = () => <Button isToggled>Hello Button</Button>;
+export const link = () => {
+	const label = text( 'Label', 'Link Button' );
 
-export const disabled = () => <Button disabled>Hello Button</Button>;
+	return (
+		<Button href="https://wordpress.org/" target="_blank">
+			{ label }
+		</Button>
+	);
+};
 
-export const link = () => (
-	<Button href="https://wordpress.org/" target="_blank">
-		Hello Button
-	</Button>
-);
+export const disabledLink = () => {
+	const label = text( 'Label', 'Disabled Link Button' );
 
-export const disabledLink = () => (
-	<Button href="https://wordpress.org/" target="_blank" disabled>
-		Hello Button
-	</Button>
-);
+	return (
+		<Button href="https://wordpress.org/" target="_blank" disabled>
+			{ label }
+		</Button>
+	);
+};

packages/components/src/checkbox-control/stories/index.js

@@ -13,31 +13,42 @@ import { useState } from '@wordpress/element';
  */
 import CheckboxControl from '../';
 
-export default { title: 'Checkbox Control', component: CheckboxControl };
+export default { title: 'CheckboxControl', component: CheckboxControl };
+
+const CheckboxControlWithState = ( { checked, ...props } ) => {
+	const [ isChecked, setChecked ] = useState( checked );
 
-export const _default = () => {
-	const [ isChecked, setChecked ] = useState( true );
 	return (
 		<CheckboxControl
-			label="Is author"
+			{ ...props }
 			checked={ isChecked }
 			onChange={ setChecked }
 		/>
 	);
 };
 
-export const All = () => {
-	const [ isChecked, setChecked ] = useState( true );
+export const _default = () => {
+	const label = text( 'Label', 'Is author' );
+
+	return (
+		<CheckboxControlWithState
+			label={ label }
+			checked
+		/>
+	);
+};
+
+export const all = () => {
 	const heading = text( 'Heading', 'User' );
 	const label = text( 'Label', 'Is author' );
 	const help = text( 'Help', 'Is the user an author or not?' );
+
 	return (
-		<CheckboxControl
+		<CheckboxControlWithState
 			heading={ heading }
 			label={ label }
 			help={ help }
-			checked={ isChecked }
-			onChange={ setChecked }
+			checked
 		/>
 	);
 };

packages/components/src/clipboard-button/stories/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { boolean, text } from '@storybook/addon-knobs';
+
 /**
  * WordPress dependencies
  */
@@ -8,18 +13,30 @@ import { useState } from '@wordpress/element';
  */
 import ClipboardButton from '../';
 
-export default { title: 'Clipboard Button', component: ClipboardButton };
+export default { title: 'ClipboardButton', component: ClipboardButton };
+
+const ClipboardButtonWithState = ( { copied, ...props } ) => {
+	const [ isCopied, setCopied ] = useState( copied );
 
-export const _default = () => {
-	const [ copied, setCopied ] = useState( false );
 	return (
 		<ClipboardButton
-			isPrimary
-			text="Text"
+			{ ...props }
 			onCopy={ () => setCopied( true ) }
 			onFinishCopy={ () => setCopied( false ) }
 		>
-			{ copied ? 'Copied!' : 'Copy "Text"' }
+			{ isCopied ? 'Copied!' : `Copy "${ props.text }"` }
 		</ClipboardButton>
 	);
 };
+
+export const _default = () => {
+	const isPrimary = boolean( 'Is primary', true );
+	const copyText = text( 'Text', 'Text' );
+
+	return (
+		<ClipboardButtonWithState
+			isPrimary={ isPrimary }
+			text={ copyText }
+		/>
+	);
+};

packages/components/src/icon-button/stories/index.js

@@ -1,11 +1,26 @@
+/**
+ * External dependencies
+ */
+import { text } from '@storybook/addon-knobs';
+
 /**
  * Internal dependencies
  */
 import IconButton from '../';
 
 export default { title: 'IconButton', component: IconButton };
 
-export const _default = () => <IconButton icon="ellipsis" label="More" />;
+export const _default = () => {
+	const icon = text( 'Icon', 'ellipsis' );
+	const label = text( 'Label', 'More' );
+
+	return (
+		<IconButton
+			icon={ icon }
+			label={ label }
+		/>
+	);
+};
 
 export const grouped = () => {
 	const GroupContainer = ( { children } ) => (

packages/components/src/icon/stories/index.js

@@ -1,19 +1,29 @@
+/**
+ * External dependencies
+ */
+import { number, text } from '@storybook/addon-knobs';
+
 /**
  * Internal dependencies
  */
 import Icon from '../';
-import { SVG, Path } from '../../';
+import { SVG, Path } from '../../primitives/svg';
 
 export default { title: 'Icon', component: Icon };
 
 const IconSizeLabel = ( { size } ) => <div style={ { fontSize: 12 } }>{ size }px</div>;
 
-export const _default = () => (
-	<div>
-		<Icon icon="screenoptions" />
-		<IconSizeLabel size={ 24 } />
-	</div>
-);
+export const _default = () => {
+	const icon = text( 'Icon', 'screenoptions' );
+	const size = number( 'Size', '24' );
+
+	return (
+		<div>
+			<Icon icon={ icon } size={ size } />
+			<IconSizeLabel size={ size } />
+		</div>
+	);
+};
 
 export const sizes = () => {
 	const iconSizes = [ 14, 16, 20, 24, 28, 32, 40, 48, 56 ];

packages/components/src/scroll-lock/stories/index.js

@@ -6,7 +6,7 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { Button } from '../../';
+import Button from '../../button';
 import ScrollLock from '../';
 
 export default { title: 'ScrollLock', component: ScrollLock };