Storybook: Update to latest 5.3 (#19599)

* Storybook: Update to latest 5.3 This update bumps Storybook to the latest 5.3.2 release. Some of the core `.js` files have been renamed and refactored according to their 5.2.x -> 5.3 migration guides. This update also start some Storybook theming, adding the WordPress branding logo on the top left. * Update require to use stories config in main.js * Update separator to use new Storybook standard * Update Storyshots for testing * Rebase with latest master * Fix Jest type issues This update fixes the Jest type checking issue by installing the latest @types/jest definitions as a devDependency.
WordPress · Jan 16, 2020 · 3bb8837 · 3bb8837
1 parent 2057349
commit 3bb8837
Show file tree

Hide file tree

Showing 51 changed files with 5,615 additions and 2,324 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -75,13 +75,14 @@
 		"@babel/runtime-corejs3": "7.4.5",
 		"@babel/traverse": "7.4.5",
 		"@octokit/rest": "16.26.0",
-		"@storybook/addon-a11y": "5.2.4",
-		"@storybook/addon-docs": "5.2.4",
-		"@storybook/addon-knobs": "5.2.4",
-		"@storybook/addon-storyshots": "5.2.4",
-		"@storybook/addon-storysource": "5.2.4",
-		"@storybook/addon-viewport": "5.2.4",
-		"@storybook/react": "5.2.4",
+		"@storybook/addon-a11y": "5.3.2",
+		"@storybook/addon-docs": "5.3.2",
+		"@storybook/addon-knobs": "5.3.2",
+		"@storybook/addon-storyshots": "5.3.2",
+		"@storybook/addon-storysource": "5.3.2",
+		"@storybook/addon-viewport": "5.3.2",
+		"@storybook/react": "5.3.2",
+		"@types/jest": "24.0.25",
 		"@types/requestidlecallback": "0.3.1",
 		"@wordpress/babel-plugin-import-jsx-pragma": "file:packages/babel-plugin-import-jsx-pragma",
 		"@wordpress/babel-plugin-makepot": "file:packages/babel-plugin-makepot",

diff --git a/packages/components/src/animate/stories/index.js b/packages/components/src/animate/stories/index.js
@@ -4,7 +4,7 @@
 import Animate from '../';
 import Notice from '../../notice';
 
-export default { title: 'Components|Animate', component: Animate };
+export default { title: 'Components/Animate', component: Animate };
 
 export const _default = () => (
 	<Animate>
@@ -18,10 +18,7 @@ export const _default = () => (
 
 // Unexported helper for different origins.
 const Appear = ( { origin } ) => (
-	<Animate
-		type="appear"
-		options={ { origin } }
-	>
+	<Animate type="appear" options={ { origin } }>
 		{ ( { className } ) => (
 			<Notice className={ className } status="success">
 				<p>Appear animation. Origin: { origin }.</p>

diff --git a/packages/components/src/base-control/stories/index.js b/packages/components/src/base-control/stories/index.js
@@ -8,7 +8,7 @@ import { boolean, text } from '@storybook/addon-knobs';
  */
 import BaseControl from '../';
 
-export default { title: 'Components|BaseControl', component: BaseControl };
+export default { title: 'Components/BaseControl', component: BaseControl };
 
 export const _default = () => {
 	const id = text( 'Id', 'textarea-1' );

diff --git a/packages/components/src/button-group/stories/index.js b/packages/components/src/button-group/stories/index.js
@@ -4,7 +4,7 @@
 import Button from '../../button';
 import ButtonGroup from '../';
 
-export default { title: 'Components|ButtonGroup', component: ButtonGroup };
+export default { title: 'Components/ButtonGroup', 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
@@ -9,7 +9,7 @@ import { text, number } from '@storybook/addon-knobs';
 import './style.css';
 import Button from '../';
 
-export default { title: 'Components|Button', component: Button };
+export default { title: 'Components/Button', component: Button };
 
 export const _default = () => {
 	const label = text( 'Label', 'Default Button' );

diff --git a/packages/components/src/card/stories/_index.js b/packages/components/src/card/stories/_index.js
@@ -15,7 +15,7 @@ import CardFooter from '../footer';
 import CardHeader from '../header';
 import { getCardStoryProps } from './_utils';
 
-export default { title: 'Components|Card', component: Card };
+export default { title: 'Components/Card', component: Card };
 
 export const _default = () => {
 	const props = getCardStoryProps();

diff --git a/packages/components/src/card/stories/body.js b/packages/components/src/card/stories/body.js
@@ -12,7 +12,7 @@ import Card from '../index';
 import CardBody from '../body';
 import { getCardStoryProps } from './_utils';
 
-export default { title: 'Components|Card/Body', component: CardBody };
+export default { title: 'Components/Card/Body', component: CardBody };
 
 export const _default = () => {
 	const props = getCardStoryProps();

diff --git a/packages/components/src/card/stories/divider.js b/packages/components/src/card/stories/divider.js
@@ -6,7 +6,7 @@ import CardBody from '../body';
 import CardDivider from '../divider';
 import { getCardStoryProps } from './_utils';
 
-export default { title: 'Components|Card/Divider', component: CardDivider };
+export default { title: 'Components/Card/Divider', component: CardDivider };
 
 export const _default = () => {
 	const props = getCardStoryProps();

diff --git a/packages/components/src/card/stories/footer.js b/packages/components/src/card/stories/footer.js
@@ -12,7 +12,7 @@ import Card from '../index';
 import CardFooter from '../footer';
 import { getCardStoryProps } from './_utils';
 
-export default { title: 'Components|Card/Footer', component: CardFooter };
+export default { title: 'Components/Card/Footer', component: CardFooter };
 
 export const _default = () => {
 	const props = getCardStoryProps();

diff --git a/packages/components/src/card/stories/header.js b/packages/components/src/card/stories/header.js
@@ -12,7 +12,7 @@ import Card from '../index';
 import CardHeader from '../header';
 import { getCardStoryProps } from './_utils';
 
-export default { title: 'Components|Card/Header', component: CardHeader };
+export default { title: 'Components/Card/Header', component: CardHeader };
 
 export const _default = () => {
 	const props = getCardStoryProps();

diff --git a/packages/components/src/card/stories/media.js b/packages/components/src/card/stories/media.js
@@ -16,7 +16,7 @@ import CardHeader from '../header';
 import CardMedia from '../media';
 import { getCardStoryProps } from './_utils';
 
-export default { title: 'Components|Card/Media', component: CardMedia };
+export default { title: 'Components/Card/Media', component: CardMedia };
 
 const DummyImage = () => (
 	<img

diff --git a/packages/components/src/checkbox-control/stories/index.js b/packages/components/src/checkbox-control/stories/index.js
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import CheckboxControl from '../';
 
-export default { title: 'Components|CheckboxControl', component: CheckboxControl };
+export default { title: 'Components/CheckboxControl', component: CheckboxControl };
 
 const CheckboxControlWithState = ( { checked, ...props } ) => {
 	const [ isChecked, setChecked ] = useState( checked );

diff --git a/packages/components/src/clipboard-button/stories/index.js b/packages/components/src/clipboard-button/stories/index.js
@@ -13,7 +13,10 @@ import { useState } from '@wordpress/element';
  */
 import ClipboardButton from '../';
 
-export default { title: 'Components|ClipboardButton', component: ClipboardButton };
+export default {
+	title: 'Components/ClipboardButton',
+	component: ClipboardButton,
+};
 
 const ClipboardButtonWithState = ( { copied, ...props } ) => {
 	const [ isCopied, setCopied ] = useState( copied );
@@ -33,10 +36,5 @@ export const _default = () => {
 	const isPrimary = boolean( 'Is primary', true );
 	const copyText = text( 'Text', 'Text' );
 
-	return (
-		<ClipboardButtonWithState
-			isPrimary={ isPrimary }
-			text={ copyText }
-		/>
-	);
+	return <ClipboardButtonWithState isPrimary={ isPrimary } text={ copyText } />;
 };
diff --git a/packages/components/src/color-indicator/stories/index.js b/packages/components/src/color-indicator/stories/index.js
@@ -9,7 +9,7 @@ import { text } from '@storybook/addon-knobs';
 import ColorIndicator from '../';
 
 export default {
-	title: 'Components|ColorIndicator',
+	title: 'Components/ColorIndicator',
 	component: ColorIndicator,
 };
 

diff --git a/packages/components/src/color-palette/stories/index.js b/packages/components/src/color-palette/stories/index.js
@@ -13,17 +13,11 @@ import { useState } from '@wordpress/element';
  */
 import ColorPalette from '../';
 
-export default { title: 'Components|ColorPalette', component: ColorPalette };
+export default { title: 'Components/ColorPalette', component: ColorPalette };
 
 const ColorPaletteWithState = ( props ) => {
 	const [ color, setColor ] = useState( '#F00' );
-	return (
-		<ColorPalette
-			{ ...props }
-			value={ color }
-			onChange={ setColor }
-		/>
-	);
+	return <ColorPalette { ...props } value={ color } onChange={ setColor } />;
 };
 
 export const _default = () => {
@@ -33,11 +27,7 @@ export const _default = () => {
 		{ name: 'blue', color: '#00f' },
 	];
 
-	return (
-		<ColorPaletteWithState
-			colors={ colors }
-		/>
-	);
+	return <ColorPaletteWithState colors={ colors } />;
 };
 
 export const withKnobs = () => {
@@ -47,9 +37,5 @@ export const withKnobs = () => {
 		object( 'Blue', { name: 'blue', color: '#00f' } ),
 	];
 
-	return (
-		<ColorPaletteWithState
-			colors={ colors }
-		/>
-	);
+	return <ColorPaletteWithState colors={ colors } />;
 };
diff --git a/packages/components/src/color-picker/stories/index.js b/packages/components/src/color-picker/stories/index.js
@@ -9,7 +9,7 @@ import { useState } from '@wordpress/element';
  */
 import ColorPicker from '../';
 
-export default { title: 'Components|ColorPicker', component: ColorPicker };
+export default { title: 'Components/ColorPicker', component: ColorPicker };
 
 const ColorPickerWithState = ( { ...props } ) => {
 	const [ color, setColor ] = useState( '#f00' );

diff --git a/packages/components/src/custom-select-control/stories/index.js b/packages/components/src/custom-select-control/stories/index.js
@@ -3,7 +3,7 @@
  */
 import CustomSelectControl from '../';
 
-export default { title: 'CustomSelectControl', component: CustomSelectControl };
+export default { title: 'Components/CustomSelectControl', component: CustomSelectControl };
 
 const options = [
 	{

diff --git a/packages/components/src/dashicon/stories/index.js b/packages/components/src/dashicon/stories/index.js
@@ -8,18 +8,12 @@ import { number, text } from '@storybook/addon-knobs';
  */
 import Dashicon from '../';
 
-export default { title: 'Components|Dashicon', component: Dashicon };
+export default { title: 'Components/Dashicon', component: Dashicon };
 
 export const _default = () => {
 	const icon = text( 'Icon', 'wordpress' );
 	const color = text( 'Color', '#0079AA' );
 	const size = number( 'Size', 20 );
 
-	return (
-		<Dashicon
-			icon={ icon }
-			color={ color }
-			size={ size }
-		/>
-	);
+	return <Dashicon icon={ icon } color={ color } size={ size } />;
 };
diff --git a/packages/components/src/draggable/stories/index.js b/packages/components/src/draggable/stories/index.js
@@ -9,7 +9,7 @@ import { useState } from '@wordpress/element';
 import Draggable from '../';
 import Dashicon from '../../dashicon';
 
-export default { title: 'Components|Draggable', component: Draggable };
+export default { title: 'Components/Draggable', component: Draggable };
 
 const Box = ( props ) => {
 	return (

diff --git a/packages/components/src/dropdown/stories/index.js b/packages/components/src/dropdown/stories/index.js
@@ -7,7 +7,7 @@ import MenuGroup from '../../menu-group';
 import MenuItem from '../../menu-item';
 import DropdownMenu from '../../dropdown-menu';
 
-export default { title: 'Components|Dropdown', component: Dropdown };
+export default { title: 'Components/Dropdown', component: Dropdown };
 
 const DropdownAndDropdownMenuExample = () => {
 	return (
@@ -53,26 +53,10 @@ const DropdownAndDropdownMenuExample = () => {
 					) }
 					renderContent={ () => (
 						<MenuGroup>
-							<MenuItem
-								icon="arrow-up-alt"
-							>
-							Up
-							</MenuItem>
-							<MenuItem
-								icon="arrow-down-alt"
-							>
-							Down
-							</MenuItem>
-							<MenuItem
-								icon="arrow-left-alt"
-							>
-							Left
-							</MenuItem>
-							<MenuItem
-								icon="arrow-right-alt"
-							>
-							Right
-							</MenuItem>
+							<MenuItem icon="arrow-up-alt">Up</MenuItem>
+							<MenuItem icon="arrow-down-alt">Down</MenuItem>
+							<MenuItem icon="arrow-left-alt">Left</MenuItem>
+							<MenuItem icon="arrow-right-alt">Right</MenuItem>
 						</MenuGroup>
 					) }
 				/>

diff --git a/packages/components/src/external-link/stories/index.js b/packages/components/src/external-link/stories/index.js
@@ -7,7 +7,7 @@ import { text } from '@storybook/addon-knobs';
  */
 import ExternalLink from '../';
 
-export default { title: 'Components|ExternalLink', component: ExternalLink };
+export default { title: 'Components/ExternalLink', component: ExternalLink };
 
 export const _default = () => {
 	const title = text( 'children', 'WordPress' );

diff --git a/packages/components/src/font-size-picker/stories/index.js b/packages/components/src/font-size-picker/stories/index.js
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import FontSizePicker from '../';
 
-export default { title: 'Components|FontSizePicker', component: FontSizePicker };
+export default { title: 'Components/FontSizePicker', component: FontSizePicker };
 
 const FontSizePickerWithState = ( { ...props } ) => {
 	const [ fontSize, setFontSize ] = useState( 16 );

diff --git a/packages/components/src/guide/stories/index.js b/packages/components/src/guide/stories/index.js
@@ -16,24 +16,29 @@ import Button from '../../button';
 import Guide from '../';
 import GuidePage from '../page';
 
-export default { title: 'Components|Guide', component: Guide };
+export default { title: 'Components/Guide', component: Guide };
 
 const ModalExample = ( { numberOfPages, ...props } ) => {
 	const [ isOpen, setOpen ] = useState( false );
 
 	const openGuide = () => setOpen( true );
 	const closeGuide = () => setOpen( false );
 
-	const loremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+	const loremIpsum =
+		'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
 
 	return (
 		<>
-			<Button isSecondary onClick={ openGuide }>Open Guide</Button>
+			<Button isSecondary onClick={ openGuide }>
+				Open Guide
+			</Button>
 			{ isOpen && (
 				<Guide { ...props } onFinish={ closeGuide }>
 					{ times( numberOfPages, ( page ) => (
 						<GuidePage key={ page }>
-							<h1>Page { page + 1 } of { numberOfPages }</h1>
+							<h1>
+								Page { page + 1 } of { numberOfPages }
+							</h1>
 							<p>{ loremIpsum }</p>
 						</GuidePage>
 					) ) }
@@ -46,7 +51,12 @@ const ModalExample = ( { numberOfPages, ...props } ) => {
 export const _default = () => {
 	const finishButtonText = text( 'finishButtonText', 'Finish' );
 	const contentLabel = text( 'title', 'Guide title' );
-	const numberOfPages = number( 'numberOfPages', 3, { range: true, min: 1, max: 10, step: 1 } );
+	const numberOfPages = number( 'numberOfPages', 3, {
+		range: true,
+		min: 1,
+		max: 10,
+		step: 1,
+	} );
 
 	const modalProps = {
 		finishButtonText,

diff --git a/packages/components/src/icon/stories/index.js b/packages/components/src/icon/stories/index.js
@@ -9,7 +9,7 @@ import { number, text } from '@storybook/addon-knobs';
 import Icon from '../';
 import { SVG, Path } from '../../primitives/svg';
 
-export default { title: 'Components|Icon', component: Icon };
+export default { title: 'Components/Icon', component: Icon };
 
 const IconSizeLabel = ( { size } ) => <div style={ { fontSize: 12 } }>{ size }px</div>;
 

diff --git a/packages/components/src/modal/stories/index.js b/packages/components/src/modal/stories/index.js
@@ -15,7 +15,7 @@ import Modal from '../';
  */
 import { useState } from '@wordpress/element';
 
-export default { title: 'Components|Modal', component: Modal };
+export default { title: 'Components/Modal', component: Modal };
 
 const ModalExample = ( props ) => {
 	const [ isOpen, setOpen ] = useState( false );

diff --git a/packages/components/src/popover/stories/index.js b/packages/components/src/popover/stories/index.js
@@ -9,7 +9,7 @@ import { boolean, select, text } from '@storybook/addon-knobs';
 import { DraggableWrapper } from './_utils';
 import Popover from '../';
 
-export default { title: 'Components|Popover', component: Popover };
+export default { title: 'Components/Popover', component: Popover };
 
 export const _default = () => {
 	const show = boolean( 'Example: Show', true );