From 0bf56738b12a797b16d22025048397d7316cc50e Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Wed, 19 Aug 2020 03:38:45 +0530
Subject: [PATCH] [Playground] EuiExpression (#3917)

Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>
---
 .../views/expression/expression_example.js    |  3 +
 src-docs/src/views/expression/playground.js   | 59 +++++++++++++++++++
 2 files changed, 62 insertions(+)
 create mode 100644 src-docs/src/views/expression/playground.js

diff --git a/src-docs/src/views/expression/expression_example.js b/src-docs/src/views/expression/expression_example.js
index 2692e707834..97f04ed79a9 100644
--- a/src-docs/src/views/expression/expression_example.js
+++ b/src-docs/src/views/expression/expression_example.js
@@ -8,6 +8,8 @@ import { EuiCode } from '../../../../src/components';
 
 import { EuiExpression } from '../../../../src/components/expression';
 
+import { expressionConfig } from './playground';
+
 import Expression from './expression';
 const expressionSource = require('!!raw-loader!./expression');
 const expressionHtml = renderToHtml(Expression);
@@ -226,4 +228,5 @@ export const ExpressionExample = {
       demo: <Truncate />,
     },
   ],
+  playground: expressionConfig,
 };
diff --git a/src-docs/src/views/expression/playground.js b/src-docs/src/views/expression/playground.js
new file mode 100644
index 00000000000..fe65c09e932
--- /dev/null
+++ b/src-docs/src/views/expression/playground.js
@@ -0,0 +1,59 @@
+import { PropTypes } from 'react-view';
+import { EuiExpression } from '../../../../src/components/';
+import {
+  propUtilityForPlayground,
+  dummyFunction,
+} from '../../services/playground';
+
+export const expressionConfig = () => {
+  const docgenInfo = Array.isArray(EuiExpression.__docgenInfo)
+    ? EuiExpression.__docgenInfo[0]
+    : EuiExpression.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.value = {
+    ...propsToUse.value,
+    type: PropTypes.String,
+    value: '100',
+  };
+
+  propsToUse.onClick = {
+    ...propsToUse.onClick,
+    type: PropTypes.Custom,
+    value: undefined,
+    custom: {
+      ...propsToUse.onClick.custom,
+      use: 'switch',
+      label: 'Simulate',
+    },
+  };
+
+  propsToUse.description = {
+    ...propsToUse.description,
+    type: PropTypes.String,
+    value: 'Is above',
+  };
+
+  propsToUse.descriptionWidth = {
+    ...propsToUse.descriptionWidth,
+    type: PropTypes.Number,
+  };
+
+  return {
+    config: {
+      componentName: 'EuiExpression',
+      props: propsToUse,
+      scope: {
+        EuiExpression,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiExpression'],
+        },
+      },
+      customProps: {
+        onClick: dummyFunction,
+      },
+    },
+  };
+};