[Playground] EuiToggle (#3903)

* [Playground] EuiToggle

* made value a string

* single Quotes

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,
+      },
+    },
+  };
+};

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,
 };