From c3b87b4fca9bb43043e86f2803a06235071d3ea5 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Fri, 14 Aug 2020 00:24:11 +0530
Subject: [PATCH] [Playground] EuiHighlight , EuiMark (#3902)

---
 .../highlight_and_mark_example.js             |  3 +
 .../views/highlight_and_mark/playground.js    | 62 +++++++++++++++++++
 2 files changed, 65 insertions(+)
 create mode 100644 src-docs/src/views/highlight_and_mark/playground.js

diff --git a/src-docs/src/views/highlight_and_mark/highlight_and_mark_example.js b/src-docs/src/views/highlight_and_mark/highlight_and_mark_example.js
index 3a9874eb10a8..514843523b22 100644
--- a/src-docs/src/views/highlight_and_mark/highlight_and_mark_example.js
+++ b/src-docs/src/views/highlight_and_mark/highlight_and_mark_example.js
@@ -6,6 +6,8 @@ import { GuideSectionTypes } from '../../components';
 
 import { EuiCode, EuiHighlight, EuiMark } from '../../../../src/components';
 
+import { highlightConfig, markConfig } from './playground';
+
 import { Highlight } from './highlight';
 import { Mark } from './mark';
 
@@ -69,4 +71,5 @@ export const HighlightAndMarkExample = {
       demo: <Mark />,
     },
   ],
+  playground: [highlightConfig, markConfig],
 };
diff --git a/src-docs/src/views/highlight_and_mark/playground.js b/src-docs/src/views/highlight_and_mark/playground.js
new file mode 100644
index 000000000000..b1ac223950cf
--- /dev/null
+++ b/src-docs/src/views/highlight_and_mark/playground.js
@@ -0,0 +1,62 @@
+import { PropTypes } from 'react-view';
+import { EuiHighlight, EuiMark } from '../../../../src/components/';
+import { propUtilityForPlayground } from '../../services/playground';
+
+export const highlightConfig = () => {
+  const docgenInfo = Array.isArray(EuiHighlight.__docgenInfo)
+    ? EuiHighlight.__docgenInfo[0]
+    : EuiHighlight.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.children = {
+    ...propsToUse.children,
+    type: PropTypes.String,
+    hidden: false,
+    value: 'The quick brown fox jumped over the lazy dog',
+  };
+
+  propsToUse.search = {
+    ...propsToUse.search,
+    type: PropTypes.String,
+    hidden: false,
+  };
+
+  return {
+    config: {
+      componentName: 'EuiHighlight',
+      props: propsToUse,
+      scope: {
+        EuiHighlight,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiHighlight'],
+        },
+      },
+    },
+  };
+};
+
+export const markConfig = () => {
+  const docgenInfo = Array.isArray(EuiMark.__docgenInfo)
+    ? EuiMark.__docgenInfo[0]
+    : EuiMark.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.children.value = 'mark';
+
+  return {
+    config: {
+      componentName: 'EuiMark',
+      props: propsToUse,
+      scope: {
+        EuiMark,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiMark'],
+        },
+      },
+    },
+  };
+};