From 31625043793f239383ecd786fee4708d0efe3304 Mon Sep 17 00:00:00 2001
From: Brent Swisher <brent@brentswisher.com>
Date: Thu, 7 Nov 2019 18:53:48 -0500
Subject: [PATCH] Add toggle control component to storybook

---
 .../src/toggle-control/stories/index.js       | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 packages/components/src/toggle-control/stories/index.js

diff --git a/packages/components/src/toggle-control/stories/index.js b/packages/components/src/toggle-control/stories/index.js
new file mode 100644
index 00000000000000..fbf22adf3eeac3
--- /dev/null
+++ b/packages/components/src/toggle-control/stories/index.js
@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import { text } from '@storybook/addon-knobs';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ToggleControl from '../';
+
+export default { title: 'ToggleControl', component: ToggleControl };
+
+const ToggleControlWithState = ( { helpTextChecked, helpTextUnchecked, ...props } ) => {
+	const [ hasFixedBackground, setHasFixedBackground ] = useState( true );
+	return (
+		<ToggleControl
+			{ ...props }
+			help={ hasFixedBackground ? helpTextChecked : helpTextUnchecked }
+			checked={ hasFixedBackground }
+			onChange={ setHasFixedBackground }
+		/>
+	);
+};
+
+export const _default = () => {
+	const label = text( 'Label', 'Does this have a fixed background?' );
+
+	return (
+		<ToggleControlWithState
+			label={ label }
+		/>
+	);
+};
+
+export const withHelpText = () => {
+	const label = text( 'Label', 'Does this have a fixed background?' );
+	const helpTextChecked = text( 'Help When Checked', 'Has fixed background.' );
+	const helpTextUnchecked = text( 'Help When Unchecked', 'No fixed background.' );
+
+	return (
+		<ToggleControlWithState
+			label={ label }
+			helpTextChecked={ helpTextChecked }
+			helpTextUnchecked={ helpTextUnchecked }
+		/>
+	);
+};