From 6fa8ae5dbd3f9985029762203ae98e6014a04189 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Fri, 14 Aug 2020 02:51:06 +0530
Subject: [PATCH] [Playground] EuiFlexGroup, EuiFlexItem (#3892)

* [Playground] EuiFlexGroup,EuiFlexItem

* used guideDemo__highlightGrid

* background fix
---
 src-docs/src/views/flex/flex_example.js |  3 +
 src-docs/src/views/flex/playground.js   | 89 +++++++++++++++++++++++++
 2 files changed, 92 insertions(+)
 create mode 100644 src-docs/src/views/flex/playground.js

diff --git a/src-docs/src/views/flex/flex_example.js b/src-docs/src/views/flex/flex_example.js
index d59f959b74b..605d8f038a5 100644
--- a/src-docs/src/views/flex/flex_example.js
+++ b/src-docs/src/views/flex/flex_example.js
@@ -16,6 +16,8 @@ import {
   EuiLink,
 } from '../../../../src/components';
 
+import { flexGroupConfig, flexGridConfig } from './playground';
+
 import FlexGroup from './flex_group';
 const flexGroupSource = require('!!raw-loader!./flex_group');
 const flexGroupHtml = renderToHtml(FlexGroup);
@@ -624,4 +626,5 @@ export const FlexExample = {
       ),
     },
   ],
+  playground: [flexGroupConfig, flexGridConfig],
 };
diff --git a/src-docs/src/views/flex/playground.js b/src-docs/src/views/flex/playground.js
new file mode 100644
index 00000000000..63ac1d64bba
--- /dev/null
+++ b/src-docs/src/views/flex/playground.js
@@ -0,0 +1,89 @@
+import { PropTypes } from 'react-view';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlexGrid,
+} from '../../../../src/components/';
+import { propUtilityForPlayground } from '../../services/playground';
+
+export const flexGroupConfig = () => {
+  const docgenInfo = Array.isArray(EuiFlexGroup.__docgenInfo)
+    ? EuiFlexGroup.__docgenInfo[0]
+    : EuiFlexGroup.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.children = {
+    type: PropTypes.ReactNode,
+    value: `<EuiFlexItem>Content grid item</EuiFlexItem>
+    <EuiFlexItem style={{ minWidth: 100 }}>Min-width 300px</EuiFlexItem>
+    <EuiFlexItem component="span">
+    This is a span component
+  </EuiFlexItem>
+    <EuiFlexItem>
+      <p>Another content grid item</p>
+      <p>
+        Note how both of these are the same width and height despite having
+        different content?
+      </p>
+    </EuiFlexItem>`,
+    hidden: false,
+  };
+
+  return {
+    config: {
+      componentName: 'EuiFlexGroup',
+      props: propsToUse,
+      scope: {
+        EuiFlexGroup,
+        EuiFlexItem,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiFlexGroup', 'EuiFlexItem'],
+        },
+      },
+    },
+    playgroundClassName: 'guideDemo__highlightGrid',
+  };
+};
+
+export const flexGridConfig = () => {
+  const docgenInfo = Array.isArray(EuiFlexGrid.__docgenInfo)
+    ? EuiFlexGrid.__docgenInfo[0]
+    : EuiFlexGrid.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.children = {
+    type: PropTypes.ReactNode,
+    value: `<EuiFlexItem>Content grid item</EuiFlexItem>
+      <EuiFlexItem style={{ minWidth: 100 }}>Min-width 300px</EuiFlexItem>
+      <EuiFlexItem component="span">
+      This is a span component
+    </EuiFlexItem>
+      <EuiFlexItem>
+        <p>Another content grid item</p>
+        <p>
+          Note how both of these are the same width and height despite having
+          different content?
+        </p>
+      </EuiFlexItem>`,
+    hidden: false,
+  };
+
+  return {
+    config: {
+      componentName: 'EuiFlexGrid',
+      props: propsToUse,
+      scope: {
+        EuiFlexGrid,
+        EuiFlexItem,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiFlexGrid', 'EuiFlexItem'],
+        },
+      },
+    },
+    playgroundClassName: 'guideDemo__highlightGrid',
+  };
+};