From 39c2b2fbff48dfd1e64a54cc4ee18304d559e54a Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Fri, 14 Aug 2020 21:08:15 +0530
Subject: [PATCH] [Playground] EuiToggle (#3903)

* [Playground] EuiToggle

* made value a string

* single Quotes
---
 src-docs/src/views/toggle/playground.js     | 56 +++++++++++++++++++++
 src-docs/src/views/toggle/toggle_example.js |  3 ++
 2 files changed, 59 insertions(+)
 create mode 100644 src-docs/src/views/toggle/playground.js

diff --git a/src-docs/src/views/toggle/playground.js b/src-docs/src/views/toggle/playground.js
new file mode 100644
index 00000000000..ddd2ea62980
--- /dev/null
+++ b/src-docs/src/views/toggle/playground.js
@@ -0,0 +1,56 @@
+import { PropTypes } from 'react-view';
+import { EuiToggle } from '../../../../src/components/';
+import {
+  propUtilityForPlayground,
+  dummyFunction,
+} from '../../services/playground';
+
+export const toggleConfig = () => {
+  const docgenInfo = Array.isArray(EuiToggle.__docgenInfo)
+    ? EuiToggle.__docgenInfo[0]
+    : EuiToggle.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.label.value = 'Is toggle on?';
+  propsToUse.checked.stateful = true;
+  propsToUse.children = {
+    ...propsToUse.children,
+    type: PropTypes.ReactNode,
+    value: "{checked ? 'On' : 'Off'}",
+    hidden: false,
+  };
+
+  propsToUse.value = {
+    ...propsToUse.value,
+    type: PropTypes.String,
+  };
+
+  propsToUse.onChange = {
+    ...propsToUse.onChange,
+    type: PropTypes.Custom,
+    value: undefined,
+    custom: {
+      ...propsToUse.onChange.custom,
+      use: 'switch',
+      label: 'Simulate',
+    },
+  };
+
+  return {
+    config: {
+      componentName: 'EuiToggle',
+      props: propsToUse,
+      scope: {
+        EuiToggle,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiToggle'],
+        },
+      },
+      customProps: {
+        onChange: dummyFunction,
+      },
+    },
+  };
+};
diff --git a/src-docs/src/views/toggle/toggle_example.js b/src-docs/src/views/toggle/toggle_example.js
index 5cafa091e4b..fee1d3a06a6 100644
--- a/src-docs/src/views/toggle/toggle_example.js
+++ b/src-docs/src/views/toggle/toggle_example.js
@@ -8,6 +8,8 @@ import { GuideSectionTypes } from '../../components';
 
 import { EuiCode, EuiToggle, EuiCallOut } from '../../../../src/components';
 
+import { toggleConfig } from './playground';
+
 import Toggle from './toggle';
 const toggleSource = require('!!raw-loader!./toggle');
 const toggleHtml = renderToHtml(Toggle);
@@ -70,4 +72,5 @@ export const ToggleExample = {
       props: { EuiToggle },
     },
   ],
+  playground: toggleConfig,
 };