Components: Modal, add story (#18083)

* Components: Modal, Add story

This update adds a story for the Modal component.
The story showcases an updated and enhanced example from the Modal
README. It also includes a series of knobs to better demonstrate the
Modal props.

* Fix useState hook rendering in Modal story

* Update example in Modal/README.md to use useState and Fragment

* Render modal as closed by default

* Refactor Fragment usage

* Update README.md

packages/components/src/modal/README.md

@@ -120,24 +120,28 @@ The following example shows you how to properly implement a modal. For the modal
 
 ```jsx
 import { Button, Modal } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
-
-const MyModal = withState( {
-	isOpen: false,
-} )( ( { isOpen, setState } ) => (
-	<div>
-		<Button isDefault onClick={ () => setState( { isOpen: true } ) }>Open Modal</Button>
-		{ isOpen && (
-			<Modal
-				title="This is my modal"
-				onRequestClose={ () => setState( { isOpen: false } ) }>
-				<Button isDefault onClick={ () => setState( { isOpen: false } ) }>
-					My custom close button
-				</Button>
-			</Modal>
-		) }
-	</div>
-) );
+import { useState } from '@wordpress/compose';
+
+const MyModal = () => {
+	const [ isOpen, setOpen ] = useState( false );
+	const openModal = () => setOpen( true );
+	const closeModal = () => setOpen( false );
+
+	return (
+		<>
+			<Button isDefault onClick={ openModal }>Open Modal</Button>
+			{ isOpen && (
+				<Modal
+					title="This is my modal"
+					onRequestClose={ closeModal ) }>
+					<Button isDefault onClick={ closeModal ) }>
+						My custom close button
+					</Button>
+				</Modal>
+			) }
+		</>
+	)
+}
 ```
 
 ### Props

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

@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import { boolean, text } from '@storybook/addon-knobs';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import Dashicon from '../../dashicon';
+import Modal from '../';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+export default { title: 'Modal', component: Modal };
+
+const ModalExample = ( props ) => {
+	const [ isOpen, setOpen ] = useState( false );
+	const openModal = () => setOpen( true );
+	const closeModal = () => setOpen( false );
+
+	return (
+		<>
+			<Button isDefault onClick={ openModal }>
+				Open Modal
+			</Button>
+			{ isOpen && (
+				<Modal { ...props } onRequestClose={ closeModal }>
+					<Button isDefault onClick={ closeModal }>
+						Close Modal
+					</Button>
+				</Modal>
+			) }
+		</>
+	);
+};
+
+export const _default = () => {
+	const title = text( 'title', 'Title' );
+	const icon = text( 'icon', '' );
+	const isDismissible = boolean( 'isDismissible', true );
+	const focusOnMount = boolean( 'focusOnMount', true );
+	const shouldCloseOnEsc = boolean( 'shouldCloseOnEsc', true );
+	const shouldCloseOnClickOutside = boolean(
+		'shouldCloseOnClickOutside',
+		true
+	);
+
+	const iconComponent = icon ? <Dashicon icon={ icon } /> : null;
+
+	const modalProps = {
+		icon: iconComponent,
+		focusOnMount,
+		isDismissible,
+		shouldCloseOnEsc,
+		shouldCloseOnClickOutside,
+		title,
+	};
+
+	return <ModalExample { ...modalProps } />;
+};