Storybook: Apply a set of enhancements to the existing stories

WordPress · Oct 18, 2019 · cd34716 · cd34716
1 parent 2052317
commit cd34716
Show file tree

Hide file tree

Showing 10 changed files with 119 additions and 59 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
+	);
 };