From cd347163707dc3f493a98e3d6fd1e94484aabc62 Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Fri, 18 Oct 2019 23:03:24 +0200
Subject: [PATCH] Storybook: Apply a set of enhancements to the existing
 stories

---
 .../components/src/animate/stories/index.js   | 17 +++++---
 .../src/button-group/stories/index.js         |  5 ++-
 .../components/src/button/stories/index.js    | 34 ++++++++++-----
 .../src/checkbox-control/stories/index.js     |  5 ++-
 .../src/clipboard-button/stories/index.js     |  5 ++-
 .../src/color-indicator/stories/index.js      |  1 +
 .../components/src/dashicon/stories/index.js  |  5 ++-
 .../src/icon-button/stories/index.js          | 24 +++++++++--
 packages/components/src/icon/stories/index.js | 39 +++++++++++------
 .../src/scroll-lock/stories/index.js          | 43 +++++++++----------
 10 files changed, 119 insertions(+), 59 deletions(-)

diff --git a/packages/components/src/animate/stories/index.js b/packages/components/src/animate/stories/index.js
index 84227837e7a3ff..7cd8d58d2cf548 100644
--- a/packages/components/src/animate/stories/index.js
+++ b/packages/components/src/animate/stories/index.js
@@ -4,7 +4,10 @@
 import Animate from '../';
 import Notice from '../../notice';
 
-export default { title: 'Animate', component: Animate };
+export default {
+	title: 'Animate',
+	component: Animate,
+};
 
 export const _default = () => (
 	<Animate>
@@ -30,12 +33,12 @@ const Appear = ( { origin } ) => (
 	</Animate>
 );
 
-export const appearTopLeft = () => <Appear origin="top left" />;
-export const appearTopRight = () => <Appear origin="top right" />;
-export const appearBottomLeft = () => <Appear origin="bottom left" />;
-export const appearBottomRight = () => <Appear origin="bottom right" />;
+export const AppearTopLeft = () => <Appear origin="top left" />;
+export const AppearTopRight = () => <Appear origin="top right" />;
+export const AppearBottomLeft = () => <Appear origin="bottom left" />;
+export const AppearBottomRight = () => <Appear origin="bottom right" />;
 
-export const loading = () => (
+export const Loading = () => (
 	<Animate type="loading">
 		{ ( { className } ) => (
 			<Notice className={ className } status="success">
@@ -45,7 +48,7 @@ export const loading = () => (
 	</Animate>
 );
 
-export const slideIn = () => (
+export const SlideIn = () => (
 	<Animate type="slide-in">
 		{ ( { className } ) => (
 			<Notice className={ className } status="success">
diff --git a/packages/components/src/button-group/stories/index.js b/packages/components/src/button-group/stories/index.js
index 1e1646e0268d15..413fea8132ecca 100644
--- a/packages/components/src/button-group/stories/index.js
+++ b/packages/components/src/button-group/stories/index.js
@@ -4,7 +4,10 @@
 import Button from '../../button';
 import ButtonGroup from '../';
 
-export default { title: 'Button Group', component: ButtonGroup };
+export default {
+	title: 'Button Group',
+	component: ButtonGroup,
+};
 
 export const _default = () => {
 	const style = { margin: '0 4px' };
diff --git a/packages/components/src/button/stories/index.js b/packages/components/src/button/stories/index.js
index ae949a1cd72906..dc86a6a3eb83b0 100644
--- a/packages/components/src/button/stories/index.js
+++ b/packages/components/src/button/stories/index.js
@@ -1,35 +1,49 @@
+/**
+ * External dependencies
+ */
+import { text } from '@storybook/addon-knobs';
+
 /**
  * Internal dependencies
  */
 import Button from '../';
 
-export default { title: 'Button', component: Button };
+export default {
+	title: 'Button',
+	component: Button,
+};
+
+export const _default = () => {
+	const label = text( 'Label', 'Hello Button' );
 
-export const _default = () => <Button>Hello Button</Button>;
+	return (
+		<Button>{ label }</Button>
+	);
+};
 
-export const primary = () => <Button isPrimary>Hello Button</Button>;
+export const Primary = () => <Button isPrimary>Hello Button</Button>;
 
-export const large = () => <Button isLarge>Hello Button</Button>;
+export const Large = () => <Button isLarge>Hello Button</Button>;
 
-export const largePrimary = () => (
+export const LargeAndPrimary = () => (
 	<Button isPrimary isLarge>
 		Hello Button
 	</Button>
 );
 
-export const small = () => <Button isSmall>Hello Button</Button>;
+export const Small = () => <Button isSmall>Hello Button</Button>;
 
-export const toggled = () => <Button isToggled>Hello Button</Button>;
+export const Toggled = () => <Button isToggled>Hello Button</Button>;
 
-export const disabled = () => <Button disabled>Hello Button</Button>;
+export const Disabled = () => <Button disabled>Hello Button</Button>;
 
-export const link = () => (
+export const Link = () => (
 	<Button href="https://wordpress.org/" target="_blank">
 		Hello Button
 	</Button>
 );
 
-export const disabledLink = () => (
+export const DisabledLink = () => (
 	<Button href="https://wordpress.org/" target="_blank" disabled>
 		Hello Button
 	</Button>
diff --git a/packages/components/src/checkbox-control/stories/index.js b/packages/components/src/checkbox-control/stories/index.js
index 184abbfe8b1614..2e9690ca4452c2 100644
--- a/packages/components/src/checkbox-control/stories/index.js
+++ b/packages/components/src/checkbox-control/stories/index.js
@@ -13,7 +13,10 @@ import { useState } from '@wordpress/element';
  */
 import CheckboxControl from '../';
 
-export default { title: 'Checkbox Control', component: CheckboxControl };
+export default {
+	title: 'CheckboxControl',
+	component: CheckboxControl,
+};
 
 export const _default = () => {
 	const [ isChecked, setChecked ] = useState( true );
diff --git a/packages/components/src/clipboard-button/stories/index.js b/packages/components/src/clipboard-button/stories/index.js
index 25632614eb249d..7fb2bbea5e8c25 100644
--- a/packages/components/src/clipboard-button/stories/index.js
+++ b/packages/components/src/clipboard-button/stories/index.js
@@ -8,7 +8,10 @@ import { useState } from '@wordpress/element';
  */
 import ClipboardButton from '../';
 
-export default { title: 'Clipboard Button', component: ClipboardButton };
+export default {
+	title: 'ClipboardButton',
+	component: ClipboardButton,
+};
 
 export const _default = () => {
 	const [ copied, setCopied ] = useState( false );
diff --git a/packages/components/src/color-indicator/stories/index.js b/packages/components/src/color-indicator/stories/index.js
index d14f180abbe25a..12f773c3eec1f1 100644
--- a/packages/components/src/color-indicator/stories/index.js
+++ b/packages/components/src/color-indicator/stories/index.js
@@ -15,6 +15,7 @@ export default {
 
 export const _default = () => {
 	const color = text( 'Color', '#0073aa' );
+
 	return (
 		<ColorIndicator colorValue={ color } />
 	);
diff --git a/packages/components/src/dashicon/stories/index.js b/packages/components/src/dashicon/stories/index.js
index 5ba7d7be98cbcb..1e557ffdb0c857 100644
--- a/packages/components/src/dashicon/stories/index.js
+++ b/packages/components/src/dashicon/stories/index.js
@@ -8,7 +8,10 @@ import { number, text } from '@storybook/addon-knobs';
  */
 import Dashicon from '../';
 
-export default { title: 'Dashicon', component: Dashicon };
+export default {
+	title: 'Dashicon',
+	component: Dashicon,
+};
 
 export const _default = () => {
 	const icon = text( 'Icon', 'wordpress' );
diff --git a/packages/components/src/icon-button/stories/index.js b/packages/components/src/icon-button/stories/index.js
index d093876a20e0a4..fc59b445d5782d 100644
--- a/packages/components/src/icon-button/stories/index.js
+++ b/packages/components/src/icon-button/stories/index.js
@@ -1,13 +1,31 @@
+/**
+ * External dependencies
+ */
+import { text } from '@storybook/addon-knobs';
+
 /**
  * Internal dependencies
  */
 import IconButton from '../';
 
-export default { title: 'IconButton', component: IconButton };
+export default {
+	title: 'IconButton',
+	component: IconButton,
+};
+
+export const _default = () => {
+	const icon = text( 'Icon', 'ellipsis' );
+	const label = text( 'Label', 'More' );
 
-export const _default = () => <IconButton icon="ellipsis" label="More" />;
+	return (
+		<IconButton
+			icon={ icon }
+			label={ label }
+		/>
+	);
+};
 
-export const grouped = () => {
+export const Grouped = () => {
 	const GroupContainer = ( { children } ) => (
 		<div style={ { display: 'inline-flex' } }>{ children }</div>
 	);
diff --git a/packages/components/src/icon/stories/index.js b/packages/components/src/icon/stories/index.js
index be4e9fed65787f..e3a5234aeba3da 100644
--- a/packages/components/src/icon/stories/index.js
+++ b/packages/components/src/icon/stories/index.js
@@ -1,21 +1,34 @@
+/**
+ * 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 };
+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 = () => {
+export const Sizes = () => {
 	const iconSizes = [ 14, 16, 20, 24, 28, 32, 40, 48, 56 ];
 
 	return (
@@ -30,7 +43,7 @@ export const sizes = () => {
 	);
 };
 
-export const colors = () => {
+export const Colors = () => {
 	const iconColors = [ 'blue', 'purple', 'green' ];
 
 	/**
@@ -52,7 +65,7 @@ export const colors = () => {
 	);
 };
 
-export const withAFunction = () => (
+export const WithAFunction = () => (
 	<Icon
 		icon={ () => (
 			<SVG>
@@ -62,7 +75,7 @@ export const withAFunction = () => (
 	/>
 );
 
-export const withAComponent = () => {
+export const WithAComponent = () => {
 	const MyIconComponent = () => (
 		<SVG>
 			<Path d="M5 4v3h5.5v12h3V7H19V4z" />
@@ -72,7 +85,7 @@ export const withAComponent = () => {
 	return <Icon icon={ MyIconComponent } />;
 };
 
-export const withAnSVG = () => {
+export const WithAnSVG = () => {
 	return (
 		<Icon
 			icon={
diff --git a/packages/components/src/scroll-lock/stories/index.js b/packages/components/src/scroll-lock/stories/index.js
index 865fb6a7e909b9..9ddde2e1108790 100644
--- a/packages/components/src/scroll-lock/stories/index.js
+++ b/packages/components/src/scroll-lock/stories/index.js
@@ -6,29 +6,12 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { Button } from '../../';
+import Button from '../../button';
 import ScrollLock from '../';
 
-export default { title: 'ScrollLock', component: ScrollLock };
-
-const Example = () => {
-	const [ isScrollLocked, setScrollLocked ] = useState( false );
-	const toggleLock = () => setScrollLocked( ! isScrollLocked );
-
-	return (
-		<StripedBackground>
-			<div>Start scrolling down...</div>
-			<ToggleContainer>
-				<Button isDefault onClick={ toggleLock }>
-					Toggle Scroll Lock
-				</Button>
-				{ isScrollLocked && <ScrollLock /> }
-				<p>
-					Scroll locked: <strong>{ isScrollLocked ? 'Yes' : 'No' }</strong>
-				</p>
-			</ToggleContainer>
-		</StripedBackground>
-	);
+export default {
+	title: 'ScrollLock',
+	component: ScrollLock,
 };
 
 function StripedBackground( props ) {
@@ -66,5 +49,21 @@ function ToggleContainer( props ) {
 }
 
 export const _default = () => {
-	return <Example />;
+	const [ isScrollLocked, setScrollLocked ] = useState( false );
+	const toggleLock = () => setScrollLocked( ! isScrollLocked );
+
+	return (
+		<StripedBackground>
+			<div>Start scrolling down...</div>
+			<ToggleContainer>
+				<Button isDefault onClick={ toggleLock }>
+					Toggle Scroll Lock
+				</Button>
+				{ isScrollLocked && <ScrollLock /> }
+				<p>
+					Scroll locked: <strong>{ isScrollLocked ? 'Yes' : 'No' }</strong>
+				</p>
+			</ToggleContainer>
+		</StripedBackground>
+	);
 };