From b27b591df1c3cc7fdfd02f8338cdf87c0093ff3f Mon Sep 17 00:00:00 2001
From: George Marshall <georgewrmarshall@gmail.com>
Date: Wed, 13 Oct 2021 08:52:46 -0700
Subject: [PATCH] Adding story for ToggleButton (#12311)

---
 .../ui/toggle-button/toggle-button.stories.js | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 ui/components/ui/toggle-button/toggle-button.stories.js

diff --git a/ui/components/ui/toggle-button/toggle-button.stories.js b/ui/components/ui/toggle-button/toggle-button.stories.js
new file mode 100644
index 000000000..64f1a7acb
--- /dev/null
+++ b/ui/components/ui/toggle-button/toggle-button.stories.js
@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { boolean, text } from '@storybook/addon-knobs';
+
+import ToggleButton from './toggle-button.component';
+
+export default {
+  title: 'ToggleButton',
+  component: ToggleButton,
+  id: __filename,
+};
+
+export const DefaultStory = () => {
+  const [checked, setChecked] = useState(false);
+  const handleOnToggle = (e) => {
+    action('onToggle')(e);
+    setChecked(!checked);
+  };
+  return (
+    <ToggleButton
+      offLabel={text('offLabel', 'off')}
+      onLabel={text('onLabel', 'on')}
+      disabled={boolean('disabled', false)}
+      value={checked}
+      onToggle={handleOnToggle}
+    />
+  );
+};
+
+DefaultStory.story = {
+  name: 'Default',
+};