From 94d2a13dc5f515ced957f8f0b212e40198f11393 Mon Sep 17 00:00:00 2001
From: Jon Quach <hello@jonquach.com>
Date: Tue, 29 Oct 2019 04:20:53 -0400
Subject: [PATCH] Components: Draggable, add story (#18070)

* Components: Add Story for Draggable

This update adds a Storybook example for the Draggable component from `@wordpress/components`.

* Fix useState hook for Draggable story example

Solution was to create an Example component with the useState hook.
Render that Example component in the story instead.
---
 .../components/src/draggable/stories/index.js | 69 +++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 packages/components/src/draggable/stories/index.js

diff --git a/packages/components/src/draggable/stories/index.js b/packages/components/src/draggable/stories/index.js
new file mode 100644
index 00000000000000..fbe81321df7232
--- /dev/null
+++ b/packages/components/src/draggable/stories/index.js
@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Draggable from '../';
+import Dashicon from '../../dashicon';
+
+export default { title: 'Draggable', component: Draggable };
+
+const Box = ( props ) => {
+	return (
+		<div
+			{ ...props }
+			style={ {
+				alignItems: 'center',
+				display: 'flex',
+				justifyContent: 'center',
+				width: 100,
+				height: 100,
+				background: '#ddd',
+			} }
+		/>
+	);
+};
+
+const DraggalbeExample = () => {
+	const [ isDragging, setDragging ] = useState( false );
+
+	// Allow for the use of ID in the example
+	/* eslint-disable no-restricted-syntax */
+	return (
+		<div>
+			<p>Is Dragging? { isDragging ? 'Yes' : 'No' }</p>
+			<div id="draggable-example-box" style={ { display: 'inline-flex' } }>
+				<Draggable elementId="draggable-example-box">
+					{ ( { onDraggableStart, onDraggableEnd } ) => {
+						const handleOnDragStart = ( event ) => {
+							setDragging( true );
+							onDraggableStart( event );
+						};
+						const handleOnDragEnd = ( event ) => {
+							setDragging( false );
+							onDraggableEnd( event );
+						};
+
+						return (
+							<Box
+								onDragStart={ handleOnDragStart }
+								onDragEnd={ handleOnDragEnd }
+								draggable
+							>
+								<Dashicon icon="move" />
+							</Box>
+						);
+					} }
+				</Draggable>
+			</div>
+		</div>
+	);
+	/* eslint-enable no-restricted-syntax */
+};
+
+export const _default = () => {
+	return <DraggalbeExample />;
+};