From 3a963a13b9f6958489879c6ce48915678e0338a6 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Fri, 29 May 2020 22:48:27 +0530
Subject: [PATCH 01/28] Setting up basic playground, Routing, Button Example

---
 package.json                            |   3 +-
 src-docs/src/index.js                   |   2 +
 src-docs/src/playgrounds.js             |  28 +
 src-docs/src/views/app_view.js          |   2 +-
 src-docs/src/views/button/playground.js | 158 +++++
 src-docs/src/views/playground_view.js   |  47 ++
 yarn.lock                               | 756 ++++++++++++++++++++++--
 7 files changed, 932 insertions(+), 64 deletions(-)
 create mode 100644 src-docs/src/playgrounds.js
 create mode 100644 src-docs/src/views/button/playground.js
 create mode 100644 src-docs/src/views/playground_view.js

diff --git a/package.json b/package.json
index c731c751b44..ec1b5411a87 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
     "react-focus-lock": "^1.17.7",
     "react-input-autosize": "^2.2.2",
     "react-is": "~16.3.0",
+    "react-view": "^2.3.2",
     "react-virtualized": "^9.21.2",
     "resize-observer-polyfill": "^1.5.0",
     "tabbable": "^3.0.0",
@@ -90,11 +91,11 @@
     "@types/classnames": "^2.2.6",
     "@types/highlight.js": "^9.12.3",
     "@types/jest": "^24.0.6",
+    "@types/node": "10.17.5",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.6",
     "@types/react-is": "^16.7.1",
     "@types/resize-observer-browser": "^0.1.1",
-    "@types/node": "10.17.5",
     "@types/tabbable": "^3.1.0",
     "@types/uuid": "^3.4.4",
     "@typescript-eslint/eslint-plugin": "^2.27.0",
diff --git a/src-docs/src/index.js b/src-docs/src/index.js
index 28f77e69ea7..6d8ebe58e8a 100644
--- a/src-docs/src/index.js
+++ b/src-docs/src/index.js
@@ -17,6 +17,7 @@ import { NotFoundView } from './views/not_found/not_found_view';
 import { registerTheme } from './services';
 
 import Routes from './routes';
+import { playgrounds } from './playgrounds';
 import themeLight from './theme_light.scss';
 import themeDark from './theme_dark.scss';
 import themeAmsterdamLight from './theme_amsterdam_light.scss';
@@ -40,6 +41,7 @@ childRoutes.push({
 });
 
 const routes = [
+  ...playgrounds,
   {
     path: '/',
     component: AppContainer,
diff --git a/src-docs/src/playgrounds.js b/src-docs/src/playgrounds.js
new file mode 100644
index 00000000000..28cb9707651
--- /dev/null
+++ b/src-docs/src/playgrounds.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { PlaygroundView } from './views/playground_view';
+import ButtonExample from './views/button/playground';
+
+const childRoutes = [
+  {
+    path: 'button',
+    component: ButtonExample,
+    name: 'EuiButton',
+  },
+  {
+    path: '*',
+    component: () => <div>Not Found</div>,
+    name: 'Page Not Found',
+  },
+];
+
+export const playgrounds = [
+  {
+    path: '/playgrounds',
+    component: PlaygroundView,
+    indexRoute: {
+      component: () => <div>play</div>,
+      source: 'views/home/HomeView',
+    },
+    childRoutes,
+  },
+];
diff --git a/src-docs/src/views/app_view.js b/src-docs/src/views/app_view.js
index d9c93ce7a7b..13969bd4db0 100644
--- a/src-docs/src/views/app_view.js
+++ b/src-docs/src/views/app_view.js
@@ -37,7 +37,7 @@ export class AppView extends Component {
 
   renderContent() {
     const { children, currentRoute, toggleLocale, locale, routes } = this.props;
-
+    console.log('this.props', this.props);
     const { navigation } = routes;
 
     const mappingFuncs = {
diff --git a/src-docs/src/views/button/playground.js b/src-docs/src/views/button/playground.js
new file mode 100644
index 00000000000..cdecff631de
--- /dev/null
+++ b/src-docs/src/views/button/playground.js
@@ -0,0 +1,158 @@
+import React, { useState, useEffect } from 'react';
+
+import {
+  useView,
+  Compiler,
+  Knobs,
+  Editor,
+  Error,
+  ActionButtons,
+  Placeholder,
+  PropTypes,
+} from 'react-view';
+
+// import "brace/theme/github";
+
+import {
+  EuiButton,
+  EuiRadioGroup,
+  EuiCheckboxGroup,
+  EuiCodeEditor,
+  EuiCheckbox,
+  EuiSpacer,
+  EuiFieldText,
+} from '../../../../src/components/';
+
+const testProps = {
+  color: {
+    defaultValue: {
+      computed: false,
+      value: 'primary',
+    },
+    description: '`text` color is set for deprecation',
+    required: false,
+    type: {
+      name: 'enum',
+      value: [
+        { value: 'ghost', computed: false },
+        { value: 'text', computed: false },
+      ],
+    },
+  },
+  fullWidth: {
+    description: '',
+    required: false,
+    type: { name: 'bool' },
+  },
+};
+
+const modifiedProps = {
+  children: {
+    value: `<div>One</div>
+    <div>Two</div>
+    <div>Three</div>`,
+    type: PropTypes.ReactNode,
+    description: 'Visible label.',
+  },
+  color: {
+    defaultValue: 'primary',
+    description: '`text` color is set for deprecation',
+    required: false,
+    options: { ghost: 'ghost', primary: 'primary', text: 'text' },
+    type: PropTypes.Enum,
+  },
+  fullWidth: {
+    description: '',
+    value: false,
+    type: PropTypes.Boolean,
+  },
+};
+
+export default () => {
+  const params = useView({
+    componentName: 'EuiButton',
+    props: modifiedProps,
+    scope: {
+      EuiButton,
+    },
+    imports: {
+      '@elastic/eui': {
+        named: ['EuiButton'],
+      },
+    },
+  });
+
+  console.log('knobProps', params.knobProps);
+  const radios = [
+    {
+      id: `primary`,
+      label: 'primary',
+    },
+    {
+      id: `text`,
+      label: 'text',
+    },
+    {
+      id: `ghost`,
+      label: 'ghost',
+    },
+  ];
+
+  const [radioIdSelected, setRadioIdSelected] = useState(`primary`);
+  const [child, setChild] = useState(params.knobProps.state.children.value);
+
+  const onChange = optionId => {
+    // console.log(optionId);
+    params.knobProps.set(optionId, 'color');
+    setRadioIdSelected(optionId);
+  };
+
+  return (
+    <React.Fragment>
+      <Compiler
+        {...params.compilerProps}
+        minHeight={62}
+        placeholder={Placeholder}
+      />
+      <Error msg={params.errorProps.msg} isPopup />
+      <EuiCheckbox
+        id={'fullwidth'}
+        label="fullWidth"
+        checked={params.knobProps.state.fullWidth.value}
+        onChange={e => params.knobProps.set(e.target.checked, 'fullWidth')}
+      />
+      <EuiSpacer />
+      <EuiRadioGroup
+        options={radios}
+        idSelected={radioIdSelected}
+        onChange={id => onChange(id)}
+        name="radio group"
+        legend={{
+          children: <span>Select color</span>,
+        }}
+      />
+      <EuiSpacer />
+
+      <EuiSpacer />
+      <EuiCodeEditor
+        mode="javascript"
+        theme="github"
+        width="100%"
+        value={params.editorProps.code}
+        onChange={params.editorProps.onChange}
+        setOptions={{
+          fontSize: '14px',
+          enableBasicAutocompletion: true,
+          enableSnippets: true,
+          enableLiveAutocompletion: true,
+        }}
+        onBlur={() => {
+          console.log('blur');
+        }} // eslint-disable-line no-console
+        aria-label="Code Editor"
+      />
+      <Error {...params.errorProps} />
+      <ActionButtons {...params.actions} />
+    </React.Fragment>
+  );
+};
diff --git a/src-docs/src/views/playground_view.js b/src-docs/src/views/playground_view.js
new file mode 100644
index 00000000000..c9edbcc57ec
--- /dev/null
+++ b/src-docs/src/views/playground_view.js
@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+
+import { ThemeProvider, ThemeContext } from '../components';
+
+import {
+  EuiErrorBoundary,
+  EuiPage,
+  EuiPageBody,
+  EuiContext,
+} from '../../../src/components';
+
+export class PlaygroundView extends Component {
+  constructor(...args) {
+    super(...args);
+
+    // Share the router with the app without requiring React or context.
+    // See `/wiki/react-router.md`
+  }
+
+  renderContent() {
+    const { children } = this.props;
+
+    return (
+      <EuiPage restrictWidth={1240} className="guidePage">
+        <EuiPageBody>
+          <div className="guidePageContent">
+            <EuiContext i18n={'i18n'}>
+              <ThemeContext.Consumer>
+                {context =>
+                  React.cloneElement(children, { selectedTheme: context.theme })
+                }
+              </ThemeContext.Consumer>
+            </EuiContext>
+          </div>
+        </EuiPageBody>
+      </EuiPage>
+    );
+  }
+
+  render() {
+    return (
+      <ThemeProvider>
+        <div className="guide">{this.renderContent()}</div>
+      </ThemeProvider>
+    );
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index f49014e9094..53a9ab97f97 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -18,13 +18,20 @@
   optionalDependencies:
     chokidar "^2.1.8"
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.5.5":
+"@babel/code-frame@7.5.5", "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.5.5":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.5.5.tgz#bc0782f6d69f7b7d49531219699b988f669a8f9d"
   integrity sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==
   dependencies:
     "@babel/highlight" "^7.0.0"
 
+"@babel/code-frame@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.1.tgz#d5481c5095daa1c57e16e54c6f9198443afb49ff"
+  integrity sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw==
+  dependencies:
+    "@babel/highlight" "^7.10.1"
+
 "@babel/code-frame@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.8.3.tgz#33e25903d7481181534e12ec0a25f16b6fcf419e"
@@ -61,6 +68,28 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
+"@babel/core@^7.7.0":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.10.1.tgz#2a0ad0ea693601820defebad2140206503d89af3"
+  integrity sha512-u8XiZ6sMXW/gPmoP5ijonSUln4unazG291X0XAQ5h0s8qnAFr6BRRZGUEK+jtRWdmB0NTJQt7Uga25q8GetIIg==
+  dependencies:
+    "@babel/code-frame" "^7.10.1"
+    "@babel/generator" "^7.10.1"
+    "@babel/helper-module-transforms" "^7.10.1"
+    "@babel/helpers" "^7.10.1"
+    "@babel/parser" "^7.10.1"
+    "@babel/template" "^7.10.1"
+    "@babel/traverse" "^7.10.1"
+    "@babel/types" "^7.10.1"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.1"
+    json5 "^2.1.2"
+    lodash "^4.17.13"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
 "@babel/core@^7.7.5", "@babel/core@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.8.3.tgz#30b0ebb4dd1585de6923a0b4d179e0b9f5d82941"
@@ -92,6 +121,16 @@
     lodash "^4.17.13"
     source-map "^0.5.0"
 
+"@babel/generator@^7.10.1", "@babel/generator@^7.7.0":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.10.1.tgz#4d14458e539bcb04ffe34124143f5c489f2dbca9"
+  integrity sha512-AT0YPLQw9DI21tliuJIdplVfLHya6mcGa8ctkv7n4Qv+hYacJrKmNWIteAK1P9iyLikFIAkwqJ7HAOqIDLFfgA==
+  dependencies:
+    "@babel/types" "^7.10.1"
+    jsesc "^2.5.1"
+    lodash "^4.17.13"
+    source-map "^0.5.0"
+
 "@babel/generator@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.8.3.tgz#0e22c005b0a94c1c74eafe19ef78ce53a4d45c03"
@@ -102,6 +141,13 @@
     lodash "^4.17.13"
     source-map "^0.5.0"
 
+"@babel/helper-annotate-as-pure@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.1.tgz#f6d08acc6f70bbd59b436262553fb2e259a1a268"
+  integrity sha512-ewp3rvJEwLaHgyWGe4wQssC2vjks3E80WiUe2BpMb0KhreTjMROCbxXcEovTrbeGVdQct5VjQfrv9EgC+xMzCw==
+  dependencies:
+    "@babel/types" "^7.10.1"
+
 "@babel/helper-annotate-as-pure@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.8.3.tgz#60bc0bc657f63a0924ff9a4b4a0b24a13cf4deee"
@@ -117,6 +163,23 @@
     "@babel/helper-explode-assignable-expression" "^7.8.3"
     "@babel/types" "^7.8.3"
 
+"@babel/helper-builder-react-jsx-experimental@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.10.1.tgz#9a7d58ad184d3ac3bafb1a452cec2bad7e4a0bc8"
+  integrity sha512-irQJ8kpQUV3JasXPSFQ+LCCtJSc5ceZrPFVj6TElR6XCHssi3jV8ch3odIrNtjJFRZZVbrOEfJMI79TPU/h1pQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.1"
+    "@babel/helper-module-imports" "^7.10.1"
+    "@babel/types" "^7.10.1"
+
+"@babel/helper-builder-react-jsx@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.10.1.tgz#a327f0cf983af5554701b1215de54a019f09b532"
+  integrity sha512-KXzzpyWhXgzjXIlJU1ZjIXzUPdej1suE6vzqgImZ/cpAsR/CC8gUcX4EWRmDfWz/cs6HOCPMBIJ3nKoXt3BFuw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.1"
+    "@babel/types" "^7.10.1"
+
 "@babel/helper-builder-react-jsx@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.8.3.tgz#dee98d7d79cc1f003d80b76fe01c7f8945665ff6"
@@ -182,6 +245,15 @@
     "@babel/traverse" "^7.8.3"
     "@babel/types" "^7.8.3"
 
+"@babel/helper-function-name@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.10.1.tgz#92bd63829bfc9215aca9d9defa85f56b539454f4"
+  integrity sha512-fcpumwhs3YyZ/ttd5Rz0xn0TpIwVkN7X0V38B9TWNfVF42KEkhkAAuPCQ3oXmtTRtiPJrmZ0TrfS0GKF0eMaRQ==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.10.1"
+    "@babel/template" "^7.10.1"
+    "@babel/types" "^7.10.1"
+
 "@babel/helper-function-name@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.7.4.tgz#ab6e041e7135d436d8f0a3eca15de5b67a341a2e"
@@ -200,6 +272,13 @@
     "@babel/template" "^7.8.3"
     "@babel/types" "^7.8.3"
 
+"@babel/helper-get-function-arity@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.1.tgz#7303390a81ba7cb59613895a192b93850e373f7d"
+  integrity sha512-F5qdXkYGOQUb0hpRaPoetF9AnsXknKjWMZ+wmsIRsp5ge5sFh4c3h1eH2pRTTuy9KKAA2+TTYomGXAtEL2fQEw==
+  dependencies:
+    "@babel/types" "^7.10.1"
+
 "@babel/helper-get-function-arity@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.4.tgz#cb46348d2f8808e632f0ab048172130e636005f0"
@@ -221,6 +300,13 @@
   dependencies:
     "@babel/types" "^7.8.3"
 
+"@babel/helper-member-expression-to-functions@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.10.1.tgz#432967fd7e12a4afef66c4687d4ca22bc0456f15"
+  integrity sha512-u7XLXeM2n50gb6PWJ9hoO5oO7JFPaZtrh35t8RqKLT1jFKj9IWeD1zrcrYp1q1qiZTdEarfDWfTIP8nGsu0h5g==
+  dependencies:
+    "@babel/types" "^7.10.1"
+
 "@babel/helper-member-expression-to-functions@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.8.3.tgz#659b710498ea6c1d9907e0c73f206eee7dadc24c"
@@ -228,6 +314,13 @@
   dependencies:
     "@babel/types" "^7.8.3"
 
+"@babel/helper-module-imports@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.10.1.tgz#dd331bd45bccc566ce77004e9d05fe17add13876"
+  integrity sha512-SFxgwYmZ3HZPyZwJRiVNLRHWuW2OgE5k2nrVs6D9Iv4PPnXVffuEHy83Sfx/l4SqF+5kyJXjAyUmrG7tNm+qVg==
+  dependencies:
+    "@babel/types" "^7.10.1"
+
 "@babel/helper-module-imports@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz#7fe39589b39c016331b6b8c3f441e8f0b1419498"
@@ -235,6 +328,19 @@
   dependencies:
     "@babel/types" "^7.8.3"
 
+"@babel/helper-module-transforms@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.10.1.tgz#24e2f08ee6832c60b157bb0936c86bef7210c622"
+  integrity sha512-RLHRCAzyJe7Q7sF4oy2cB+kRnU4wDZY/H2xJFGof+M+SJEGhZsb+GFj5j1AD8NiSaVBJ+Pf0/WObiXu/zxWpFg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.10.1"
+    "@babel/helper-replace-supers" "^7.10.1"
+    "@babel/helper-simple-access" "^7.10.1"
+    "@babel/helper-split-export-declaration" "^7.10.1"
+    "@babel/template" "^7.10.1"
+    "@babel/types" "^7.10.1"
+    lodash "^4.17.13"
+
 "@babel/helper-module-transforms@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.8.3.tgz#d305e35d02bee720fbc2c3c3623aa0c316c01590"
@@ -247,6 +353,13 @@
     "@babel/types" "^7.8.3"
     lodash "^4.17.13"
 
+"@babel/helper-optimise-call-expression@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.1.tgz#b4a1f2561870ce1247ceddb02a3860fa96d72543"
+  integrity sha512-a0DjNS1prnBsoKx83dP2falChcs7p3i8VMzdrSbfLhuQra/2ENC4sbri34dz/rWmDADsmF1q5GbfaXydh0Jbjg==
+  dependencies:
+    "@babel/types" "^7.10.1"
+
 "@babel/helper-optimise-call-expression@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.8.3.tgz#7ed071813d09c75298ef4f208956006b6111ecb9"
@@ -259,6 +372,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250"
   integrity sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==
 
+"@babel/helper-plugin-utils@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.1.tgz#ec5a5cf0eec925b66c60580328b122c01230a127"
+  integrity sha512-fvoGeXt0bJc7VMWZGCAEBEMo/HAjW2mP8apF5eXK0wSqwLAVHAISCWRoLMBMUs2kqeaG77jltVqu4Hn8Egl3nA==
+
 "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz#9ea293be19babc0f52ff8ca88b34c3611b208670"
@@ -282,6 +400,16 @@
     "@babel/traverse" "^7.8.3"
     "@babel/types" "^7.8.3"
 
+"@babel/helper-replace-supers@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.10.1.tgz#ec6859d20c5d8087f6a2dc4e014db7228975f13d"
+  integrity sha512-SOwJzEfpuQwInzzQJGjGaiG578UYmyi2Xw668klPWV5n07B73S0a9btjLk/52Mlcxa+5AdIYqws1KyXRfMoB7A==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.10.1"
+    "@babel/helper-optimise-call-expression" "^7.10.1"
+    "@babel/traverse" "^7.10.1"
+    "@babel/types" "^7.10.1"
+
 "@babel/helper-replace-supers@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.8.3.tgz#91192d25f6abbcd41da8a989d4492574fb1530bc"
@@ -292,6 +420,14 @@
     "@babel/traverse" "^7.8.3"
     "@babel/types" "^7.8.3"
 
+"@babel/helper-simple-access@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.10.1.tgz#08fb7e22ace9eb8326f7e3920a1c2052f13d851e"
+  integrity sha512-VSWpWzRzn9VtgMJBIWTZ+GP107kZdQ4YplJlCmIrjoLVSi/0upixezHCDG8kpPVTBJpKfxTH01wDhh+jS2zKbw==
+  dependencies:
+    "@babel/template" "^7.10.1"
+    "@babel/types" "^7.10.1"
+
 "@babel/helper-simple-access@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.8.3.tgz#7f8109928b4dab4654076986af575231deb639ae"
@@ -300,6 +436,13 @@
     "@babel/template" "^7.8.3"
     "@babel/types" "^7.8.3"
 
+"@babel/helper-split-export-declaration@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.1.tgz#c6f4be1cbc15e3a868e4c64a17d5d31d754da35f"
+  integrity sha512-UQ1LVBPrYdbchNhLwj6fetj46BcFwfS4NllJo/1aJsT+1dLTEnXJL0qHqtY7gPzF8S2fXBJamf1biAXV3X077g==
+  dependencies:
+    "@babel/types" "^7.10.1"
+
 "@babel/helper-split-export-declaration@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.4.tgz#57292af60443c4a3622cf74040ddc28e68336fd8"
@@ -314,6 +457,11 @@
   dependencies:
     "@babel/types" "^7.8.3"
 
+"@babel/helper-validator-identifier@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz#5770b0c1a826c4f53f5ede5e153163e0318e94b5"
+  integrity sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==
+
 "@babel/helper-wrap-function@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.8.3.tgz#9dbdb2bb55ef14aaa01fe8c99b629bd5352d8610"
@@ -324,6 +472,15 @@
     "@babel/traverse" "^7.8.3"
     "@babel/types" "^7.8.3"
 
+"@babel/helpers@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.10.1.tgz#a6827b7cb975c9d9cef5fd61d919f60d8844a973"
+  integrity sha512-muQNHF+IdU6wGgkaJyhhEmI54MOZBKsFfsXFhboz1ybwJ1Kl7IHlbm2a++4jwrmY5UYsgitt5lfqo1wMFcHmyw==
+  dependencies:
+    "@babel/template" "^7.10.1"
+    "@babel/traverse" "^7.10.1"
+    "@babel/types" "^7.10.1"
+
 "@babel/helpers@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.7.4.tgz#62c215b9e6c712dadc15a9a0dcab76c92a940302"
@@ -351,6 +508,15 @@
     esutils "^2.0.2"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.10.1.tgz#841d098ba613ba1a427a2b383d79e35552c38ae0"
+  integrity sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.1"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
 "@babel/highlight@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.8.3.tgz#28f173d04223eaaa59bc1d439a3836e6d1265797"
@@ -365,6 +531,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.7.tgz#1b886595419cf92d811316d5b715a53ff38b4937"
   integrity sha512-WtTZMZAZLbeymhkd/sEaPD8IQyGAhmuTuvTzLiCFM7iXiVdY0gc0IaI+cW0fh1BnSMbJSzXX6/fHllgHKwHhXw==
 
+"@babel/parser@^7.10.1", "@babel/parser@^7.6.0":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.10.1.tgz#2e142c27ca58aa2c7b119d09269b702c8bbad28c"
+  integrity sha512-AUTksaz3FqugBkbTZ1i+lDLG5qy8hIzCaAxEtttU6C0BtZZU9pkNZtWSVAht4EW9kl46YBiyTGMp9xTTGqViNg==
+
 "@babel/parser@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.8.3.tgz#790874091d2001c9be6ec426c2eed47bc7679081"
@@ -464,6 +635,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
+"@babel/plugin-syntax-jsx@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.10.1.tgz#0ae371134a42b91d5418feb3c8c8d43e1565d2da"
+  integrity sha512-+OxyOArpVFXQeXKLO9o+r2I4dIoVoy6+Uu0vKELrlweDM3QJADZj+Z+5ERansZqIZBcLj42vHnDI8Rz9BnRIuQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.1"
+
 "@babel/plugin-syntax-jsx@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.8.3.tgz#521b06c83c40480f1e58b4fd33b92eceb1d6ea94"
@@ -706,6 +884,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
+"@babel/plugin-transform-react-display-name@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.10.1.tgz#e6a33f6d48dfb213dda5e007d0c7ff82b6a3d8ef"
+  integrity sha512-rBjKcVwjk26H3VX8pavMxGf33LNlbocMHdSeldIEswtQ/hrjyTG8fKKILW1cSkODyRovckN/uZlGb2+sAV9JUQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.1"
+
 "@babel/plugin-transform-react-display-name@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.8.3.tgz#70ded987c91609f78353dd76d2fb2a0bb991e8e5"
@@ -713,6 +898,23 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
+"@babel/plugin-transform-react-jsx-development@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.10.1.tgz#1ac6300d8b28ef381ee48e6fec430cc38047b7f3"
+  integrity sha512-XwDy/FFoCfw9wGFtdn5Z+dHh6HXKHkC6DwKNWpN74VWinUagZfDcEJc3Y8Dn5B3WMVnAllX8Kviaw7MtC5Epwg==
+  dependencies:
+    "@babel/helper-builder-react-jsx-experimental" "^7.10.1"
+    "@babel/helper-plugin-utils" "^7.10.1"
+    "@babel/plugin-syntax-jsx" "^7.10.1"
+
+"@babel/plugin-transform-react-jsx-self@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.10.1.tgz#22143e14388d72eb88649606bb9e46f421bc3821"
+  integrity sha512-4p+RBw9d1qV4S749J42ZooeQaBomFPrSxa9JONLHJ1TxCBo3TzJ79vtmG2S2erUT8PDDrPdw4ZbXGr2/1+dILA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.1"
+    "@babel/plugin-syntax-jsx" "^7.10.1"
+
 "@babel/plugin-transform-react-jsx-self@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.8.3.tgz#c4f178b2aa588ecfa8d077ea80d4194ee77ed702"
@@ -721,6 +923,14 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-jsx" "^7.8.3"
 
+"@babel/plugin-transform-react-jsx-source@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.10.1.tgz#30db3d4ee3cdebbb26a82a9703673714777a4273"
+  integrity sha512-neAbaKkoiL+LXYbGDvh6PjPG+YeA67OsZlE78u50xbWh2L1/C81uHiNP5d1fw+uqUIoiNdCC8ZB+G4Zh3hShJA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.1"
+    "@babel/plugin-syntax-jsx" "^7.10.1"
+
 "@babel/plugin-transform-react-jsx-source@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.8.3.tgz#951e75a8af47f9f120db731be095d2b2c34920e0"
@@ -729,6 +939,16 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-jsx" "^7.8.3"
 
+"@babel/plugin-transform-react-jsx@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.10.1.tgz#91f544248ba131486decb5d9806da6a6e19a2896"
+  integrity sha512-MBVworWiSRBap3Vs39eHt+6pJuLUAaK4oxGc8g+wY+vuSJvLiEQjW1LSTqKb8OUPtDvHCkdPhk7d6sjC19xyFw==
+  dependencies:
+    "@babel/helper-builder-react-jsx" "^7.10.1"
+    "@babel/helper-builder-react-jsx-experimental" "^7.10.1"
+    "@babel/helper-plugin-utils" "^7.10.1"
+    "@babel/plugin-syntax-jsx" "^7.10.1"
+
 "@babel/plugin-transform-react-jsx@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.8.3.tgz#4220349c0390fdefa505365f68c103562ab2fc4a"
@@ -738,6 +958,14 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-jsx" "^7.8.3"
 
+"@babel/plugin-transform-react-pure-annotations@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.10.1.tgz#f5e7c755d3e7614d4c926e144f501648a5277b70"
+  integrity sha512-mfhoiai083AkeewsBHUpaS/FM1dmUENHBMpS/tugSJ7VXqXO5dCN1Gkint2YvM1Cdv1uhmAKt1ZOuAjceKmlLA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.1"
+    "@babel/helper-plugin-utils" "^7.10.1"
+
 "@babel/plugin-transform-regenerator@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.8.3.tgz#b31031e8059c07495bf23614c97f3d9698bc6ec8"
@@ -879,6 +1107,19 @@
     levenary "^1.1.0"
     semver "^5.5.0"
 
+"@babel/preset-react@^7.7.0":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.10.1.tgz#e2ab8ae9a363ec307b936589f07ed753192de041"
+  integrity sha512-Rw0SxQ7VKhObmFjD/cUcKhPTtzpeviEFX1E6PgP+cYOhQ98icNqtINNFANlsdbQHrmeWnqdxA4Tmnl1jy5tp3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.1"
+    "@babel/plugin-transform-react-display-name" "^7.10.1"
+    "@babel/plugin-transform-react-jsx" "^7.10.1"
+    "@babel/plugin-transform-react-jsx-development" "^7.10.1"
+    "@babel/plugin-transform-react-jsx-self" "^7.10.1"
+    "@babel/plugin-transform-react-jsx-source" "^7.10.1"
+    "@babel/plugin-transform-react-pure-annotations" "^7.10.1"
+
 "@babel/preset-react@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.8.3.tgz#23dc63f1b5b0751283e04252e78cf1d6589273d2"
@@ -898,6 +1139,14 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-transform-typescript" "^7.8.3"
 
+"@babel/runtime-corejs2@7.6.0":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs2/-/runtime-corejs2-7.6.0.tgz#6fcd37c2580070817d62f219db97f67e26f50f9c"
+  integrity sha512-zbPQzlbyJab2xCYb6VaESn8Tk/XiVpQJU7WvIKiQCwlFyc2NSCzKjqtBXCvpZBbiTOHCx10s2656REVnySwb+A==
+  dependencies:
+    core-js "^2.6.5"
+    regenerator-runtime "^0.13.2"
+
 "@babel/runtime-corejs3@^7.8.3":
   version "7.9.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.9.2.tgz#26fe4aa77e9f1ecef9b776559bbb8e84d34284b7"
@@ -936,6 +1185,15 @@
     "@babel/parser" "^7.7.4"
     "@babel/types" "^7.7.4"
 
+"@babel/template@^7.10.1", "@babel/template@^7.7.0":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.1.tgz#e167154a94cb5f14b28dc58f5356d2162f539811"
+  integrity sha512-OQDg6SqvFSsc9A0ej6SKINWrpJiNonRIniYondK2ViKhB06i3c0s+76XUft71iqBEe9S1OKsHwPAjfHnuvnCig==
+  dependencies:
+    "@babel/code-frame" "^7.10.1"
+    "@babel/parser" "^7.10.1"
+    "@babel/types" "^7.10.1"
+
 "@babel/template@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.3.tgz#e02ad04fe262a657809327f578056ca15fd4d1b8"
@@ -960,6 +1218,21 @@
     globals "^11.1.0"
     lodash "^4.17.13"
 
+"@babel/traverse@^7.10.1", "@babel/traverse@^7.7.0":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.10.1.tgz#bbcef3031e4152a6c0b50147f4958df54ca0dd27"
+  integrity sha512-C/cTuXeKt85K+p08jN6vMDz8vSV0vZcI0wmQ36o6mjbuo++kPMdpOYw23W2XH04dbRt9/nMEfA4W3eR21CD+TQ==
+  dependencies:
+    "@babel/code-frame" "^7.10.1"
+    "@babel/generator" "^7.10.1"
+    "@babel/helper-function-name" "^7.10.1"
+    "@babel/helper-split-export-declaration" "^7.10.1"
+    "@babel/parser" "^7.10.1"
+    "@babel/types" "^7.10.1"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.13"
+
 "@babel/traverse@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.8.3.tgz#a826215b011c9b4f73f3a893afbc05151358bf9a"
@@ -984,6 +1257,15 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.10.1", "@babel/types@^7.7.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.10.1.tgz#6886724d31c8022160a7db895e6731ca33483921"
+  integrity sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.1"
+    lodash "^4.17.13"
+    to-fast-properties "^2.0.0"
+
 "@babel/types@^7.4.4", "@babel/types@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.3.tgz#5a383dffa5416db1b73dedffd311ffd0788fb31c"
@@ -1028,6 +1310,73 @@
   resolved "https://registry.yarnpkg.com/@elastic/eslint-config-kibana/-/eslint-config-kibana-0.15.0.tgz#a552793497cdfc1829c2f9b7cd7018eb008f1606"
   integrity sha1-pVJ5NJfN/Bgpwvm3zXAY6wCPFgY=
 
+"@iarna/toml@2.2.3":
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.3.tgz#f060bf6eaafae4d56a7dac618980838b0696e2ab"
+  integrity sha512-FmuxfCuolpLl0AnQ2NHSzoUKWEJDFl63qXjzdoWBVyFCXzMGm1spBzk7LeHNoVCiWCF7mRVms9e6jEV9+MoPbg==
+
+"@miksu/prettier@^1.18.3":
+  version "1.18.5"
+  resolved "https://registry.yarnpkg.com/@miksu/prettier/-/prettier-1.18.5.tgz#b17fc11246a2ad9cb29088c0b44deccef1ecf1bf"
+  integrity sha512-iK/TXWpsC4WMslhnlbs5A9imUa2pGTsvaBCsf6tq5AuTId2svlv9nqQf03evIh5RA+cppkydtYDx3UOCwfACeg==
+  dependencies:
+    "@babel/code-frame" "7.5.5"
+    "@babel/parser" "^7.6.0"
+    "@babel/runtime-corejs2" "7.6.0"
+    "@iarna/toml" "2.2.3"
+    "@typescript-eslint/typescript-estree" "1.11.0"
+    angular-estree-parser "1.1.5"
+    camelcase "4.1.0"
+    chalk "2.1.0"
+    dashify "0.2.2"
+    dedent "0.7.0"
+    diff "3.5.0"
+    editorconfig-to-prettier "0.1.1"
+    escape-string-regexp "1.0.5"
+    esutils "2.0.2"
+    find-cache-dir "1.0.0"
+    find-parent-dir "0.3.0"
+    find-project-root "1.1.1"
+    get-stream "4.1.0"
+    globby "6.1.0"
+    html-element-attributes "2.0.0"
+    html-styles "1.0.0"
+    html-tag-names "1.1.2"
+    ignore "4.0.6"
+    is-ci "2.0.0"
+    jest-docblock "23.2.0"
+    json-stable-stringify "1.0.1"
+    leven "2.1.0"
+    lines-and-columns "1.1.6"
+    linguist-languages "7.5.1"
+    lodash.uniqby "4.7.0"
+    mem "4.0.0"
+    minimatch "3.0.4"
+    minimist "1.2.0"
+    n-readlines "1.0.0"
+    normalize-path "3.0.0"
+    parse-srcset ikatyang/parse-srcset#54eb9c1cb21db5c62b4d0e275d7249516df6f0ee
+    postcss-media-query-parser "0.2.3"
+    postcss-selector-parser "2.2.3"
+    postcss-values-parser "1.5.0"
+    regexp-util "1.2.2"
+    remark-math "1.0.4"
+    resolve "1.5.0"
+    semver "5.4.1"
+    string-width "3.0.0"
+    unified "6.1.6"
+    vnopts "1.0.2"
+    write-file-atomic "2.3.0"
+    yaml-unist-parser "1.0.0"
+
+"@miksu/react-tiny-popover@^3.5.1":
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/@miksu/react-tiny-popover/-/react-tiny-popover-3.5.1.tgz#2113ac34b7b287ffb2d22b363788a8121cb8f243"
+  integrity sha512-YSpc7wznyAzQdkQhrLwRNTvLX96swskKvWTNGkilFB2MyC6E0xMem4EtX93DYXHK0vslhpYMtqbjcAWQcLhZeQ==
+  dependencies:
+    "@types/underscore" "^1.8.13"
+    underscore "^1.9.1"
+
 "@sentry/core@4.2.4":
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/@sentry/core/-/core-4.2.4.tgz#e4a331512a4db149f14a2976b75a5b3c8ef47f87"
@@ -1332,6 +1681,11 @@
   resolved "https://registry.yarnpkg.com/@types/tabbable/-/tabbable-3.1.0.tgz#540d4c2729872560badcc220e73c9412c1d2bffe"
   integrity sha512-LL0q/bTlzseaXQ8j91eZ+Z8FQUzo0nwkng00B8365qULvFyiSOWylxV8m31Gmee3QuidkDqR72a9NRfR8s4qTw==
 
+"@types/underscore@^1.8.13":
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/@types/underscore/-/underscore-1.10.0.tgz#5cb0dff2a5f616fc8e0c61b482bf01fa20a03cec"
+  integrity sha512-ZAbqul7QAKpM2h1PFGa5ETN27ulmqtj0QviYHasw9LffvXZvVHuraOx/FOsIPPDNGZN0Qo1nASxxSfMYOtSoCw==
+
 "@types/uuid@^3.4.4":
   version "3.4.4"
   resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-3.4.4.tgz#7af69360fa65ef0decb41fd150bf4ca5c0cefdf5"
@@ -1369,6 +1723,14 @@
     "@typescript-eslint/typescript-estree" "2.27.0"
     eslint-visitor-keys "^1.1.0"
 
+"@typescript-eslint/typescript-estree@1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-1.11.0.tgz#b7b5782aab22e4b3b6d84633652c9f41e62d37d5"
+  integrity sha512-fquUHF5tAx1sM2OeRCC7wVxFd1iMELWMGCzOSmJ3pLzArj9+kRixdlC4d5MncuzXpjEqc6045p3KwM0o/3FuUA==
+  dependencies:
+    lodash.unescape "4.0.1"
+    semver "5.5.0"
+
 "@typescript-eslint/typescript-estree@2.27.0":
   version "2.27.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.27.0.tgz#a288e54605412da8b81f1660b56c8b2e42966ce8"
@@ -1730,6 +2092,14 @@ amdefine@>=0.0.4:
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
   integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=
 
+angular-estree-parser@1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/angular-estree-parser/-/angular-estree-parser-1.1.5.tgz#f278e03e648a2bfb6c5dcdf17ba3273f3251b74a"
+  integrity sha512-M82O7HGwgS6mBfQq9ijCwuP4uYgSgycmNWQOHomToWRAdfX/c2pAwpCYdbVG9lc6Go8mr5+A2bRQnykdCVdpuA==
+  dependencies:
+    lines-and-columns "^1.1.6"
+    tslib "^1.9.3"
+
 ansi-align@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f"
@@ -2379,6 +2749,11 @@ babylon@^6.18.0:
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
   integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==
 
+bail@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"
+  integrity sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==
+
 balanced-match@^0.4.2:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
@@ -2934,6 +3309,11 @@ camelcase-keys@^2.0.0:
     camelcase "^2.0.0"
     map-obj "^1.0.0"
 
+camelcase@4.1.0, camelcase@^4.0.0, camelcase@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
+  integrity sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=
+
 camelcase@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
@@ -2944,11 +3324,6 @@ camelcase@^3.0.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
   integrity sha1-MvxLn82vhF/N9+c7uXysImHwqwo=
 
-camelcase@^4.0.0, camelcase@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
-  integrity sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=
-
 camelcase@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.0.0.tgz#03295527d58bd3cd4aa75363f35b2e8d97be2f42"
@@ -3028,6 +3403,15 @@ chai@^4.1.2:
     pathval "^1.0.0"
     type-detect "^4.0.0"
 
+chalk@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.1.0.tgz#ac5becf14fa21b99c6c92ca7a7d7cfd5b17e743e"
+  integrity sha512-LUHGS/dge4ujbXMJrnihYMcL4AoOweGnw9Tp3kQuqy1Kx5c1qKjqvMJZ6nVJPMWJtKCTN72ZogH3oeSO9g9rXQ==
+  dependencies:
+    ansi-styles "^3.1.0"
+    escape-string-regexp "^1.0.5"
+    supports-color "^4.0.0"
+
 chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -3808,6 +4192,13 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+copy-to-clipboard@^3.2.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
+  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-js-compat@^3.6.2:
   version "3.6.4"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.6.4.tgz#938476569ebb6cda80d339bcf199fae4f16fff17"
@@ -3831,6 +4222,11 @@ core-js@^2.4.0, core-js@^2.4.1, core-js@^2.5.1:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.3.tgz#8acc38345824f16d8365b7c9b4259168e8ed603e"
   integrity sha1-isw4NFgk8W2DZbfJtCWRaOjtYD4=
 
+core-js@^2.6.5:
+  version "2.6.11"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
+  integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
+
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -4402,6 +4798,11 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+dashify@0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/dashify/-/dashify-0.2.2.tgz#6a07415a01c91faf4a32e38d9dfba71f61cb20fe"
+  integrity sha1-agdBWgHJH69KMuONnfunH2HLIP4=
+
 date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
@@ -4479,7 +4880,7 @@ decompress-response@^3.2.0:
   dependencies:
     mimic-response "^1.0.0"
 
-dedent@^0.7.0:
+dedent@0.7.0, dedent@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
   integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
@@ -4917,6 +5318,11 @@ editions@^1.1.1:
   resolved "https://registry.yarnpkg.com/editions/-/editions-1.3.3.tgz#0907101bdda20fac3cbe334c27cbd0688dc99a5b"
   integrity sha1-CQcQG92iD6w8vjNMJ8vQaI3Jmls=
 
+editorconfig-to-prettier@0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/editorconfig-to-prettier/-/editorconfig-to-prettier-0.1.1.tgz#7391c7067dfd68ffee65afc2c4fbe4fba8d4219a"
+  integrity sha512-MMadSSVRDb4uKdxV6bCXXN4cTsxIsXYtV4XdPu6FOCSAw6zsCIDA+QEktEU+u6h+c/mTrul5NR+pwFpPxwetiQ==
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -5605,7 +6011,7 @@ estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0:
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
   integrity sha1-De4/7TH81GlhjOc0IJn8GvoL2xM=
 
-esutils@^2.0.0, esutils@^2.0.2:
+esutils@2.0.2, esutils@^2.0.0, esutils@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
   integrity sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=
@@ -6149,7 +6555,7 @@ finalhandler@1.1.0:
     statuses "~1.3.1"
     unpipe "~1.0.0"
 
-find-cache-dir@^1.0.0:
+find-cache-dir@1.0.0, find-cache-dir@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-1.0.0.tgz#9288e3e9e3cc3748717d39eade17cf71fc30ee6f"
   integrity sha1-kojj6ePMN0hxfTnq3hfPcfww7m8=
@@ -6176,6 +6582,16 @@ find-cache-dir@^2.1.0:
     make-dir "^2.0.0"
     pkg-dir "^3.0.0"
 
+find-parent-dir@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/find-parent-dir/-/find-parent-dir-0.3.0.tgz#33c44b429ab2b2f0646299c5f9f718f376ff8d54"
+  integrity sha1-M8RLQpqysvBkYpnF+fcY83b/jVQ=
+
+find-project-root@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/find-project-root/-/find-project-root-1.1.1.tgz#d242727a2d904725df5714f23dfdcdedda0b6ef8"
+  integrity sha1-0kJyei2QRyXfVxTyPf3N7doLbvg=
+
 find-root@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
@@ -6617,18 +7033,18 @@ get-stdin@^6.0.0:
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b"
   integrity sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==
 
-get-stream@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
-  integrity sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=
-
-get-stream@^4.0.0:
+get-stream@4.1.0, get-stream@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
   integrity sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==
   dependencies:
     pump "^3.0.0"
 
+get-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
+  integrity sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=
+
 get-value@^2.0.3, get-value@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
@@ -6781,24 +7197,24 @@ globals@^9.18.0, globals@^9.2.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
   integrity sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==
 
-globby@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d"
-  integrity sha1-69hGZ8oNuzMLmbz8aOrCvFQ3Dg0=
+globby@6.1.0, globby@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
+  integrity sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=
   dependencies:
     array-union "^1.0.1"
-    arrify "^1.0.0"
     glob "^7.0.3"
     object-assign "^4.0.1"
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
-globby@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
-  integrity sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=
+globby@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d"
+  integrity sha1-69hGZ8oNuzMLmbz8aOrCvFQ3Dg0=
   dependencies:
     array-union "^1.0.1"
+    arrify "^1.0.0"
     glob "^7.0.3"
     object-assign "^4.0.1"
     pify "^2.0.0"
@@ -7190,6 +7606,11 @@ html-comment-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e"
   integrity sha1-ZouTd26q5V696POtRkswekljYl4=
 
+html-element-attributes@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/html-element-attributes/-/html-element-attributes-2.0.0.tgz#2c9fcbd4738c560b357d0232aa3449676b10ab77"
+  integrity sha512-eZgT5wMPRqOCG9pIJ//IdX43i940XACFhKfgKUdspWUGsS/MXq+3ilrK5v6Esl/qxQpMnPt5+uVK443konZkNg==
+
 html-element-map@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/html-element-map/-/html-element-map-1.0.0.tgz#19a41940225153ecdfead74f8509154ff1cdc18b"
@@ -7223,6 +7644,16 @@ html-minifier@^3.2.3:
     relateurl "0.2.x"
     uglify-js "3.3.x"
 
+html-styles@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/html-styles/-/html-styles-1.0.0.tgz#a18061fd651f99c6b75c45c8e0549a3bc3e01a75"
+  integrity sha1-oYBh/WUfmca3XEXI4FSaO8PgGnU=
+
+html-tag-names@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/html-tag-names/-/html-tag-names-1.1.2.tgz#f65168964c5a9c82675efda882875dcb2a875c22"
+  integrity sha1-9lFolkxanIJnXv2ogoddyyqHXCI=
+
 html-webpack-plugin@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz#b01abbd723acaaa7b37b6af4492ebda03d9dd37b"
@@ -7406,16 +7837,16 @@ ignore-walk@^3.0.1:
   dependencies:
     minimatch "^3.0.4"
 
+ignore@4.0.6, ignore@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
+  integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
+
 ignore@^3.1.2:
   version "3.3.10"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
   integrity sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==
 
-ignore@^4.0.6:
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
-  integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
-
 image-size@^0.5.0:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
@@ -7759,7 +8190,7 @@ is-boolean-object@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.0.tgz#98f8b28030684219a95f375cfbd88ce3405dff93"
   integrity sha1-mPiygDBoQhmpXzdc+9iM40Bd/5M=
 
-is-buffer@^1.0.2, is-buffer@^1.1.5, is-buffer@~1.1.1:
+is-buffer@^1.0.2, is-buffer@^1.1.4, is-buffer@^1.1.5, is-buffer@~1.1.1:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
@@ -7786,7 +8217,7 @@ is-callable@^1.1.5:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
   integrity sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==
 
-is-ci@^2.0.0:
+is-ci@2.0.0, is-ci@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
   integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
@@ -8440,6 +8871,13 @@ jest-diff@^24.0.0:
     jest-get-type "^24.0.0"
     pretty-format "^24.0.0"
 
+jest-docblock@23.2.0:
+  version "23.2.0"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-23.2.0.tgz#f085e1f18548d99fdd69b20207e6fd55d91383a7"
+  integrity sha1-8IXh8YVI2Z/dabICB+b9VdkTg6c=
+  dependencies:
+    detect-newline "^2.1.0"
+
 jest-docblock@^24.0.0:
   version "24.0.0"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-24.0.0.tgz#54d77a188743e37f62181a91a01eb9222289f94e"
@@ -8837,7 +9275,7 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
 
-json-stable-stringify@^1.0.0, json-stable-stringify@^1.0.1:
+json-stable-stringify@1.0.1, json-stable-stringify@^1.0.0, json-stable-stringify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
   integrity sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=
@@ -8873,6 +9311,13 @@ json5@^2.1.0:
   dependencies:
     minimist "^1.2.0"
 
+json5@^2.1.2:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43"
+  integrity sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==
+  dependencies:
+    minimist "^1.2.5"
+
 jsonfile@^2.1.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
@@ -9035,7 +9480,7 @@ left-pad@^1.2.0:
   resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.2.0.tgz#d30a73c6b8201d8f7d8e7956ba9616087a68e0ee"
   integrity sha1-0wpzxrggHY99jnlWupYWCHpo4O4=
 
-leven@^2.1.0:
+leven@2.1.0, leven@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-2.1.0.tgz#c2e7a9f772094dee9d34202ae8acce4687875580"
   integrity sha1-wuep93IJTe6dNCAq6KzORoeHVYA=
@@ -9060,11 +9505,16 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
-lines-and-columns@^1.1.6:
+lines-and-columns@1.1.6, lines-and-columns@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
+linguist-languages@7.5.1:
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/linguist-languages/-/linguist-languages-7.5.1.tgz#458f34ac40b90b64963569de29caaa0dc9621c7b"
+  integrity sha512-kZBOK2+xcub7UIVxzpWZoWQhfJ6zrpimo+/FXn3XuLCbvdwNJ3A/GVz5AFVFVSbYRoRCGD9f9qIf7cUHDklLkA==
+
 linkify-it@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.0.3.tgz#d94a4648f9b1c179d64fa97291268bdb6ce9434f"
@@ -9292,11 +9742,21 @@ lodash.tail@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
   integrity sha1-0jM6NtnncXyK0vfKyv7HwytERmQ=
 
+lodash.unescape@4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/lodash.unescape/-/lodash.unescape-4.0.1.tgz#bf2249886ce514cda112fae9218cdc065211fc9c"
+  integrity sha1-vyJJiGzlFM2hEvrpIYzcBlIR/Jw=
+
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
+lodash.uniqby@4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz#d99c07a669e9e6d24e1362dfe266c67616af1302"
+  integrity sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI=
+
 lodash@4.11.1:
   version "4.11.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.11.1.tgz#a32106eb8e2ec8e82c241611414773c9df15f8bc"
@@ -9552,14 +10012,7 @@ mem-fs@^1.1.0:
     vinyl "^1.1.0"
     vinyl-file "^2.0.0"
 
-mem@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/mem/-/mem-1.1.0.tgz#5edd52b485ca1d900fe64895505399a0dfa45f76"
-  integrity sha1-Xt1StIXKHZAP5kiVUFOZoN+kX3Y=
-  dependencies:
-    mimic-fn "^1.0.0"
-
-mem@^4.0.0:
+mem@4.0.0, mem@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/mem/-/mem-4.0.0.tgz#6437690d9471678f6cc83659c00cbafcd6b0cdaf"
   integrity sha512-WQxG/5xYc3tMbYLXoXPm81ET2WDULiU5FxbuIoNbJqLOOI8zehXFdZuiUEgfdrU2mVB1pxBZUGlYORSrpuJreA==
@@ -9568,6 +10021,13 @@ mem@^4.0.0:
     mimic-fn "^1.0.0"
     p-is-promise "^1.1.0"
 
+mem@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mem/-/mem-1.1.0.tgz#5edd52b485ca1d900fe64895505399a0dfa45f76"
+  integrity sha1-Xt1StIXKHZAP5kiVUFOZoN+kX3Y=
+  dependencies:
+    mimic-fn "^1.0.0"
+
 memoize-one@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
@@ -9792,7 +10252,7 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
   integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
 
-"minimatch@2 || 3", minimatch@3.0.x, minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4, minimatch@~3.0.2:
+"minimatch@2 || 3", minimatch@3.0.4, minimatch@3.0.x, minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4, minimatch@~3.0.2:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
@@ -9809,7 +10269,12 @@ minimist@1.1.x:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.1.3.tgz#3bedfd91a92d39016fcfaa1c681e8faa1a1efda8"
   integrity sha1-O+39kaktOQFvz6ocaB6Pqhoe/ag=
 
-minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
+minimist@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
+  integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
+
+minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
@@ -9989,6 +10454,11 @@ mute-stream@0.0.8:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
   integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
 
+n-readlines@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/n-readlines/-/n-readlines-1.0.0.tgz#c353797f216c253fdfef7e91da4e8b17c29a91a6"
+  integrity sha512-ISDqGcspVu6U3VKqtJZG1uR55SmNNF9uK0EMq1IvNVVZOui6MW6VR0+pIZhqz85ORAGp+4zW+5fJ/SE7bwEibA==
+
 nan@^2.10.0:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.10.0.tgz#96d0cd610ebd58d4b4de9cc0c6828cda99c7548f"
@@ -10375,6 +10845,11 @@ normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
     semver "2 || 3 || 4 || 5"
     validate-npm-package-license "^3.0.1"
 
+normalize-path@3.0.0, normalize-path@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
 normalize-path@^2.0.0, normalize-path@^2.0.1, normalize-path@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
@@ -10382,11 +10857,6 @@ normalize-path@^2.0.0, normalize-path@^2.0.1, normalize-path@^2.1.1:
   dependencies:
     remove-trailing-separator "^1.0.1"
 
-normalize-path@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
-  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
-
 normalize-range@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
@@ -11101,6 +11571,10 @@ parse-json@^5.0.0:
     json-parse-better-errors "^1.0.1"
     lines-and-columns "^1.1.6"
 
+parse-srcset@ikatyang/parse-srcset#54eb9c1cb21db5c62b4d0e275d7249516df6f0ee:
+  version "1.0.2"
+  resolved "https://codeload.github.com/ikatyang/parse-srcset/tar.gz/54eb9c1cb21db5c62b4d0e275d7249516df6f0ee"
+
 parse5@^3.0.1:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-3.0.3.tgz#042f792ffdd36851551cf4e9e066b3874ab45b5c"
@@ -11561,6 +12035,11 @@ postcss-loader@^2.0.8:
     postcss-load-config "^1.2.0"
     schema-utils "^0.3.0"
 
+postcss-media-query-parser@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244"
+  integrity sha1-J7Ocb02U+Bsac7j3Y1HGCeXO8kQ=
+
 postcss-merge-idents@^2.1.5:
   version "2.1.7"
   resolved "https://registry.yarnpkg.com/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz#4c5530313c08e1d5b3bbf3d2bbc747e278eea270"
@@ -11890,7 +12369,7 @@ postcss-reporter@^5.0.0:
     log-symbols "^2.0.0"
     postcss "^6.0.8"
 
-postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2:
+postcss-selector-parser@2.2.3, postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz#f9437788606c3c9acee16ffe8d8b16297f27bb90"
   integrity sha1-+UN3iGBsPJrO4W/+jYsWKX8nu5A=
@@ -11951,6 +12430,15 @@ postcss-value-parser@^3.0.0, postcss-value-parser@^3.0.1, postcss-value-parser@^
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
   integrity sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=
 
+postcss-values-parser@1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-1.5.0.tgz#5d9fa63e2bcb0179ce48f3235303765eb89f3047"
+  integrity sha512-3M3p+2gMp0AH3da530TlX8kiO1nxdTnc3C6vr8dMxRLIlh8UYkz0/wcwptSXjhtx2Fr0TySI7a+BHDQ8NL7LaQ==
+  dependencies:
+    flatten "^1.0.2"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
 postcss-zindex@^2.0.1:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/postcss-zindex/-/postcss-zindex-2.2.0.tgz#d2109ddc055b91af67fc4cb3b025946639d2af22"
@@ -12041,6 +12529,11 @@ pretty-hrtime@^1.0.3:
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
   integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
 
+prism-react-renderer@^1.0.2:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.1.1.tgz#1c1be61b1eb9446a146ca7a50b7bcf36f2a70a44"
+  integrity sha512-MgMhSdHuHymNRqD6KM3eGS0PNqgK9q4QF5P0yoQQvpB6jNjeSAi3jcSAz0Sua/t9fa4xDOMar9HJbLa08gl9ug==
+
 private@^0.1.6, private@^0.1.8, private@~0.1.5:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
@@ -12543,6 +13036,11 @@ react-router@^3.2.5:
     react-is "^16.8.6"
     warning "^3.0.0"
 
+react-simple-code-editor@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/react-simple-code-editor/-/react-simple-code-editor-0.10.0.tgz#73e7ac550a928069715482aeb33ccba36efe2373"
+  integrity sha512-bL5W5mAxSW6+cLwqqVWY47Silqgy2DKDTR4hDBrLrUqC5BXc29YVx17l2IZk5v36VcDEq1Bszu2oHm1qBwKqBA==
+
 react-test-renderer@^16.0.0-0:
   version "16.8.2"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.2.tgz#3ce0bf12aa211116612fda01a886d6163c9c459b"
@@ -12562,6 +13060,25 @@ react-test-renderer@^16.2.0:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+react-view@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/react-view/-/react-view-2.3.2.tgz#ef6850aa5ee18d9f8a9c8ffe79da00c93db0f9fe"
+  integrity sha512-Ty5PUtPZTlDeYJKxsrh6FcMdAXde7n+rQLyrBybKi9gy6ViQKMHTiomy6lB6Vf+B6VkAcSWYL1Q0iv07ILuBWw==
+  dependencies:
+    "@babel/code-frame" "^7.5.5"
+    "@babel/core" "^7.7.0"
+    "@babel/generator" "^7.7.0"
+    "@babel/preset-react" "^7.7.0"
+    "@babel/template" "^7.7.0"
+    "@babel/traverse" "^7.7.0"
+    "@babel/types" "^7.7.1"
+    "@miksu/prettier" "^1.18.3"
+    "@miksu/react-tiny-popover" "^3.5.1"
+    copy-to-clipboard "^3.2.0"
+    lodash "^4.17.15"
+    prism-react-renderer "^1.0.2"
+    react-simple-code-editor "^0.10.0"
+
 react-virtualized@^9.21.2:
   version "9.21.2"
   resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.21.2.tgz#02e6df65c1e020c8dbf574ec4ce971652afca84e"
@@ -12934,6 +13451,13 @@ regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
+regexp-util@1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/regexp-util/-/regexp-util-1.2.2.tgz#5cf599134921eb0d776e41d41e9c0da33f0fa2fc"
+  integrity sha512-5/rl2UD18oAlLQEIuKBeiSIOp1hb5wCXcakl5yvHxlY1wyWI4D5cUKKzCibBeu741PA9JKvZhMqbkDQqPusX3w==
+  dependencies:
+    tslib "^1.9.0"
+
 regexp.prototype.flags@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
@@ -13017,6 +13541,13 @@ relateurl@0.2.x:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
+remark-math@1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/remark-math/-/remark-math-1.0.4.tgz#ced46473075ff99e4678a154a1a3d0dde403a9f2"
+  integrity sha512-aVyne6nKnlZPmCg+dmalKcUS1y+s3diWhKduV7l7sPqSeGHsncJatu/1P1U73zsNNjQZFyEJ2T4ArpjqOaEpFw==
+  dependencies:
+    trim-trailing-lines "^1.1.0"
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
@@ -13055,7 +13586,7 @@ replace-ext@0.0.1:
   resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-0.0.1.tgz#29bbd92078a739f0bcce2b4ee41e837953522924"
   integrity sha1-KbvZIHinOfC8zitO5B6DeVNSKSQ=
 
-replace-ext@^1.0.0:
+replace-ext@1.0.0, replace-ext@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
   integrity sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=
@@ -13203,7 +13734,7 @@ resolve@1.1.7:
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
   integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
 
-resolve@^1.1.6, resolve@^1.5.0:
+resolve@1.5.0, resolve@^1.1.6, resolve@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.5.0.tgz#1f09acce796c9a762579f31b2c1cc4c3cddf9f36"
   integrity sha512-hgoSGrc3pjzAPHNBg+KnFcK2HwlHTs/YrAGUr6qgTVUZmXv1UEXXl0bZNBKMA9fud6lRYFdPGz0xXxycPzmmiw==
@@ -13619,11 +14150,16 @@ semver-truncate@^1.0.0:
   dependencies:
     semver "^5.3.0"
 
-"semver@2 || 3 || 4 || 5", semver@^5.0.1, semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0:
+"semver@2 || 3 || 4 || 5", semver@5.5.0, semver@^5.0.1, semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
   integrity sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==
 
+semver@5.4.1:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
+  integrity sha512-WfG/X9+oATh81XtllIo/I8gOiY9EXRdv1cQdyykeXK17YcUW3EXUAi2To4pcH6nZtJPr7ZOpM5OMyWJZm+8Rsg==
+
 semver@7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
@@ -14216,6 +14752,15 @@ string-template@~0.2.1:
   resolved "https://registry.yarnpkg.com/string-template/-/string-template-0.2.1.tgz#42932e598a352d01fc22ec3367d9d84eec6c9add"
   integrity sha1-QpMuWYo1LQH8IuwzZ9nYTuxsmt0=
 
+string-width@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.0.0.tgz#5a1690a57cc78211fffd9bf24bbe24d090604eb1"
+  integrity sha512-rr8CUxBbvOZDUvc5lNIJ+OC1nPVpz+Siw9VBtUjB9b6jZehZLFt0JMCZzShFHIsI8cbhm0EsNIfWJMFV3cu3Ew==
+  dependencies:
+    emoji-regex "^7.0.1"
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^5.0.0"
+
 string-width@^1.0.1, string-width@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
@@ -14896,6 +15441,11 @@ to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
 topo@2.x.x:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/topo/-/topo-2.0.2.tgz#cd5615752539057c0dc0491a621c3bc6fbe1d182"
@@ -14935,11 +15485,21 @@ trim-newlines@^1.0.0:
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
   integrity sha1-WIeWa7WCpFA6QetST301ARgVphM=
 
+trim-trailing-lines@^1.1.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.3.tgz#7f0739881ff76657b7776e10874128004b625a94"
+  integrity sha512-4ku0mmjXifQcTVfYDfR5lpgV7zVqPg6zV9rdZmwOPqq0+Zq19xDqEgagqVbc4pOOShbncuAOIs59R3+3gcF3ZA==
+
 trim@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/trim/-/trim-0.0.1.tgz#5858547f6b290757ee95cccc666fb50084c460dd"
   integrity sha1-WFhUf2spB1fulczMZm+1AITEYN0=
 
+trough@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
+  integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
+
 "true-case-path@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/true-case-path/-/true-case-path-1.0.2.tgz#7ec91130924766c7f573be3020c34f8fdfd00d62"
@@ -14957,6 +15517,11 @@ tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
   integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==
 
+tslib@^1.9.1:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
+  integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
+
 tsutils@^3.17.1:
   version "3.17.1"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"
@@ -15082,6 +15647,11 @@ ultron@~1.1.0:
   resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c"
   integrity sha512-UIEXBNeYmKptWH6z8ZnqTeS8fV74zG0/eRU9VGkpzz+LIJNs8W/zM/L+7ctCkRrgbNnnR0xxw4bKOr0cW0N0Og==
 
+underscore@^1.9.1:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.10.2.tgz#73d6aa3668f3188e4adb0f1943bd12cfd7efaaaf"
+  integrity sha512-N4P+Q/BuyuEKFJ43B9gYuOj4TQUHXX+j2FqguVOpjkssLUUrnJofCcBccJSCoeturDoZU6GorDTHSvUDlSQbTg==
+
 underscore@~1.4.4:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.4.4.tgz#61a6a32010622afa07963bf325203cf12239d604"
@@ -15110,6 +15680,19 @@ unicode-property-aliases-ecmascript@^1.0.4:
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.4.tgz#5a533f31b4317ea76f17d807fa0d116546111dd0"
   integrity sha512-2WSLa6OdYd2ng8oqiGIWnJqyFArvhn+5vgx5GTxMbUYjCYKUcuKS62YLFF0R/BDGlB1yzXjQOLtPAfHsgirEpg==
 
+unified@6.1.6:
+  version "6.1.6"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-6.1.6.tgz#5ea7f807a0898f1f8acdeefe5f25faa010cc42b1"
+  integrity sha512-pW2f82bCIo2ifuIGYcV12fL96kMMYgw7JKVEgh7ODlrM9rj6vXSY3BV+H6lCcv1ksxynFf582hwWLnA1qRFy4w==
+  dependencies:
+    bail "^1.0.0"
+    extend "^3.0.0"
+    is-plain-obj "^1.1.0"
+    trough "^1.0.0"
+    vfile "^2.0.0"
+    x-is-function "^1.0.4"
+    x-is-string "^0.1.0"
+
 union-value@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847"
@@ -15158,6 +15741,11 @@ unique-string@^1.0.0:
   dependencies:
     crypto-random-string "^1.0.0"
 
+unist-util-stringify-position@^1.0.0, unist-util-stringify-position@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz#3f37fcf351279dcbca7480ab5889bb8a832ee1c6"
+  integrity sha512-pNCVrk64LZv1kElr0N1wPiHEUoXNVFERp+mlTg/s9R5Lwg87f9bM/3sQB99w+N9D/qnM9ar3+AKDBwo/gm/iQQ==
+
 universalify@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
@@ -15419,6 +16007,23 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+vfile-message@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-1.1.1.tgz#5833ae078a1dfa2d96e9647886cd32993ab313e1"
+  integrity sha512-1WmsopSGhWt5laNir+633LszXvZ+Z/lxveBf6yhGsqnQIhlhzooZae7zV6YVM1Sdkw68dtAW3ow0pOdPANugvA==
+  dependencies:
+    unist-util-stringify-position "^1.1.1"
+
+vfile@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/vfile/-/vfile-2.3.0.tgz#e62d8e72b20e83c324bc6c67278ee272488bf84a"
+  integrity sha512-ASt4mBUHcTpMKD/l5Q+WJXNtshlWxOogYyGYYrg4lt/vuRjC1EFQtlAofL5VmtVNIZJzWYFJjzGWZ0Gw8pzW1w==
+  dependencies:
+    is-buffer "^1.1.4"
+    replace-ext "1.0.0"
+    unist-util-stringify-position "^1.0.0"
+    vfile-message "^1.0.0"
+
 vinyl-file@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/vinyl-file/-/vinyl-file-2.0.0.tgz#a7ebf5ffbefda1b7d18d140fcb07b223efb6751a"
@@ -15464,6 +16069,15 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+vnopts@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/vnopts/-/vnopts-1.0.2.tgz#f6a331473de0179d1679112cc090572b695202f7"
+  integrity sha512-d2rr2EFhAGHnTlURu49G7GWmiJV80HbAnkYdD9IFAtfhmxC+kSWEaZ6ZF064DJFTv9lQZQV1vuLTntyQpoanGQ==
+  dependencies:
+    chalk "^2.4.1"
+    leven "^2.1.0"
+    tslib "^1.9.3"
+
 w3c-hr-time@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"
@@ -15916,6 +16530,15 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
+write-file-atomic@2.3.0, write-file-atomic@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.3.0.tgz#1ff61575c2e2a4e8e510d6fa4e243cce183999ab"
+  integrity sha512-xuPeK4OdjWqtfi59ylvVL0Yn35SF3zgcAcv7rBPFHVaEapaDr4GdGgm3j7ckTwH9wHL7fGmgfAnb0+THrHb8tA==
+  dependencies:
+    graceful-fs "^4.1.11"
+    imurmurhash "^0.1.4"
+    signal-exit "^3.0.2"
+
 write-file-atomic@2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.4.1.tgz#d0b05463c188ae804396fd5ab2a370062af87529"
@@ -15934,15 +16557,6 @@ write-file-atomic@^1.1.2:
     imurmurhash "^0.1.4"
     slide "^1.1.5"
 
-write-file-atomic@^2.0.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.3.0.tgz#1ff61575c2e2a4e8e510d6fa4e243cce183999ab"
-  integrity sha512-xuPeK4OdjWqtfi59ylvVL0Yn35SF3zgcAcv7rBPFHVaEapaDr4GdGgm3j7ckTwH9wHL7fGmgfAnb0+THrHb8tA==
-  dependencies:
-    graceful-fs "^4.1.11"
-    imurmurhash "^0.1.4"
-    signal-exit "^3.0.2"
-
 write@1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/write/-/write-1.0.3.tgz#0800e14523b923a387e415123c865616aae0f5c3"
@@ -15973,6 +16587,16 @@ ws@^6.1.0:
   dependencies:
     async-limiter "~1.0.0"
 
+x-is-function@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/x-is-function/-/x-is-function-1.0.4.tgz#5d294dc3d268cbdd062580e0c5df77a391d1fa1e"
+  integrity sha1-XSlNw9Joy90GJYDgxd93o5HR+h4=
+
+x-is-string@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/x-is-string/-/x-is-string-0.1.0.tgz#474b50865af3a49a9c4657f05acd145458f77d82"
+  integrity sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI=
+
 xdg-basedir@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-2.0.0.tgz#edbc903cc385fc04523d966a335504b5504d1bd2"
@@ -16060,6 +16684,14 @@ yallist@^3.0.0, yallist@^3.0.2:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.0.2.tgz#8452b4bb7e83c7c188d8041c1a837c773d6d8bb9"
   integrity sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=
 
+yaml-unist-parser@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/yaml-unist-parser/-/yaml-unist-parser-1.0.0.tgz#060def481d2319a8def3b6a06cb8ae3848b0aed3"
+  integrity sha512-DwXEmBpyopgf8YT8uOB7ry+7kuv4ECXDw2+1DipfHK29zwuUUskW+rFO7sgKULK0ddCi6TY09tFFxBc6Vftg5w==
+  dependencies:
+    lines-and-columns "^1.1.6"
+    tslib "^1.9.1"
+
 yaml@^1.7.2:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.7.2.tgz#f26aabf738590ab61efaca502358e48dc9f348b2"

From 02193dad3bb647509338933aa151908ce5908a94 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Sat, 30 May 2020 00:34:07 +0530
Subject: [PATCH 02/28] created custom knobs

---
 src-docs/src/services/playground/knobs.js | 217 ++++++++++++++++++++++
 src-docs/src/views/button/playground.js   |  26 +--
 2 files changed, 224 insertions(+), 19 deletions(-)
 create mode 100644 src-docs/src/services/playground/knobs.js

diff --git a/src-docs/src/services/playground/knobs.js b/src-docs/src/services/playground/knobs.js
new file mode 100644
index 00000000000..2e8cdd7ebc8
--- /dev/null
+++ b/src-docs/src/services/playground/knobs.js
@@ -0,0 +1,217 @@
+import React from 'react';
+import { assertUnreachable, PropTypes, useValueDebounce } from 'react-view';
+import {
+  EuiSpacer,
+  EuiCheckbox,
+  EuiRadioGroup,
+  EuiFieldText,
+  EuiTextArea,
+} from '../../../../src/components/';
+
+const getTooltip = (description, type, name) => (
+  <span>
+    <p>
+      <b>{name}</b>: <i>{type}</i>
+    </p>
+    <p>{description}</p>
+  </span>
+);
+
+const Spacing = ({ children }) => {
+  return (
+    <>
+      <>{children}</>
+      <EuiSpacer />
+    </>
+  );
+};
+
+// const Label = ({ children, tooltip }) => {
+//   return (
+//     <label>
+//       <StatefulTooltip accessibilityType="tooltip" content={tooltip}>
+//         <span>{children}</span>
+//       </StatefulTooltip>
+//     </label>
+//   );
+// };
+
+const Knob = ({
+  name,
+  error,
+  type,
+  defaultValue,
+  val: globalVal,
+  set: globalSet,
+  options = {},
+  description,
+  placeholder,
+  enumName,
+}) => {
+  const [val, set] = useValueDebounce(globalVal, globalSet);
+  switch (type) {
+    case PropTypes.Ref:
+      return (
+        <Spacing>
+          {/* <Label tooltip={getTooltip(description, type, name)}>{name}</Label> */}
+          <a
+            href="https://reactjs.org/docs/refs-and-the-dom.html"
+            target="_blank"
+            style={{
+              fontSize: '14px',
+              display: 'block',
+            }}>
+            React Ref documentation
+          </a>
+          {error && <div>error {error}</div>}
+        </Spacing>
+      );
+    case PropTypes.String:
+    case PropTypes.Date:
+    case PropTypes.Number:
+      return (
+        <Spacing>
+          {/* <Label tooltip={getTooltip(description, type, name)}>{name}</Label> */}
+
+          <EuiFieldText
+            placeholder={placeholder}
+            value={val ? val : undefined}
+            onChange={e => set(e.target.value)}
+            aria-label={description}
+          />
+
+          {error && <div>error {error}</div>}
+        </Spacing>
+      );
+    case PropTypes.Boolean:
+      //   console.log('data', { description, type, name });
+
+      return (
+        <Spacing>
+          <EuiCheckbox
+            id={'id'}
+            label={name}
+            checked={val}
+            onChange={e => {
+              globalSet(e.target.checked);
+            }}
+          />
+          {error && <div>error {error}</div>}
+        </Spacing>
+      );
+    case PropTypes.Enum:
+      const optionsKeys = Object.keys(options);
+      const numberOfOptions = optionsKeys.length;
+      const selectOptions = optionsKeys.map(key => ({
+        id: key,
+        label: options[key],
+      }));
+      const valueKey = val || defaultValue;
+      //   console.log('selectOptions', selectOptions);
+      //   console.log('valueKey', valueKey);
+      //   console.log('data', { description, type, name });
+
+      return (
+        <Spacing>
+          {/* //       <Label tooltip={getTooltip(description, type, name)}>{name}</Label> */}
+          {numberOfOptions < 7 ? (
+            <EuiRadioGroup
+              options={selectOptions}
+              idSelected={valueKey}
+              onChange={id => globalSet(id)}
+              name={`Select ${name}`}
+              legend={{
+                children: <span> {`Select ${name}`}</span>,
+              }}
+            />
+          ) : null}
+          {error && <div>error {error}</div>}
+        </Spacing>
+      );
+    //         <Select
+    //           size={SIZE.compact}
+    //           options={selectOptions}
+    //           clearable={false}
+    //           value={[{ id: valueKey || '', option: valueKey }]}
+    //           labelKey="option"
+    //           valueKey="id"
+    //           onChange={({ value }) => {
+    //             globalSet(`${enumName || name.toUpperCase()}.${value[0].id}`);
+    //           }}
+    //         />
+    //       )}
+    //       <div>error {error}</div>
+    //     </Spacing>
+    //   );
+    case PropTypes.ReactNode:
+    case PropTypes.Function:
+    case PropTypes.Array:
+    case PropTypes.Object:
+      // /*
+      return (
+        <Spacing>
+          {/* <Label tooltip={getTooltip(description, type, name)}>{name}</Label>  */}
+          <EuiTextArea
+            placeholder={placeholder}
+            value={val ? val : ''}
+            onChange={e => {
+              globalSet(e.target.value);
+            }}
+          />
+          {error && <div>error {error}</div>}
+        </Spacing>
+      );
+
+    //   */
+    case PropTypes.Custom:
+      return null;
+    default:
+      return assertUnreachable();
+  }
+};
+
+const KnobColumn = ({ state, knobNames, error, set }) => {
+  return (
+    <div>
+      {knobNames.map(name => (
+        <Knob
+          key={name}
+          name={name}
+          error={error.where === name ? error.msg : null}
+          description={state[name].description}
+          type={state[name].type}
+          val={state[name].value}
+          options={state[name].options}
+          placeholder={state[name].placeholder}
+          set={value => set(value, name)}
+          enumName={state[name].enumName}
+          defaultValue={state[name].defaultValue}
+        />
+      ))}
+    </div>
+  );
+};
+
+const Knobs = ({ state, set, error }) => {
+  const [showAllKnobs, setShowAllKnobs] = React.useState(true);
+  const allKnobNames = Object.keys(state).filter(
+    name => state[name].type !== PropTypes.Custom
+  );
+  const filteredKnobNames = allKnobNames.filter(
+    name => state[name].hidden !== true
+  );
+  const knobNames = showAllKnobs ? allKnobNames : filteredKnobNames;
+  const firstGroup = knobNames;
+  return (
+    <React.Fragment>
+      <KnobColumn
+        state={state}
+        knobNames={firstGroup}
+        set={set}
+        error={error}
+      />
+    </React.Fragment>
+  );
+};
+
+export default Knobs;
diff --git a/src-docs/src/views/button/playground.js b/src-docs/src/views/button/playground.js
index cdecff631de..e2fe93ba163 100644
--- a/src-docs/src/views/button/playground.js
+++ b/src-docs/src/views/button/playground.js
@@ -12,7 +12,6 @@ import {
 } from 'react-view';
 
 // import "brace/theme/github";
-
 import {
   EuiButton,
   EuiRadioGroup,
@@ -22,6 +21,7 @@ import {
   EuiSpacer,
   EuiFieldText,
 } from '../../../../src/components/';
+import KnobsC from '../../services/playground/knobs';
 
 const testProps = {
   color: {
@@ -61,6 +61,11 @@ const modifiedProps = {
     options: { ghost: 'ghost', primary: 'primary', text: 'text' },
     type: PropTypes.Enum,
   },
+  href: {
+    description: '`href` color is set for deprecation',
+    value: 'Jane Doe',
+    type: PropTypes.String,
+  },
   fullWidth: {
     description: '',
     value: false,
@@ -115,24 +120,7 @@ export default () => {
         placeholder={Placeholder}
       />
       <Error msg={params.errorProps.msg} isPopup />
-      <EuiCheckbox
-        id={'fullwidth'}
-        label="fullWidth"
-        checked={params.knobProps.state.fullWidth.value}
-        onChange={e => params.knobProps.set(e.target.checked, 'fullWidth')}
-      />
-      <EuiSpacer />
-      <EuiRadioGroup
-        options={radios}
-        idSelected={radioIdSelected}
-        onChange={id => onChange(id)}
-        name="radio group"
-        legend={{
-          children: <span>Select color</span>,
-        }}
-      />
-      <EuiSpacer />
-
+      <KnobsC {...params.knobProps} />
       <EuiSpacer />
       <EuiCodeEditor
         mode="javascript"

From 3eb6748a0e10578fe43ba9687d570a95bca5644b Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Sat, 30 May 2020 21:23:28 +0530
Subject: [PATCH 03/28] added routing

---
 src-docs/src/playgrounds.js           | 2 +-
 src-docs/src/views/playground_view.js | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src-docs/src/playgrounds.js b/src-docs/src/playgrounds.js
index 28cb9707651..e04a8c86695 100644
--- a/src-docs/src/playgrounds.js
+++ b/src-docs/src/playgrounds.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { PlaygroundView } from './views/playground_view';
 import ButtonExample from './views/button/playground';
 
-const childRoutes = [
+export const childRoutes = [
   {
     path: 'button',
     component: ButtonExample,
diff --git a/src-docs/src/views/playground_view.js b/src-docs/src/views/playground_view.js
index c9edbcc57ec..05f8c965362 100644
--- a/src-docs/src/views/playground_view.js
+++ b/src-docs/src/views/playground_view.js
@@ -1,7 +1,9 @@
 import React, { Component } from 'react';
 
 import { ThemeProvider, ThemeContext } from '../components';
+import { Link } from 'react-router';
 
+import { childRoutes } from '../playgrounds';
 import {
   EuiErrorBoundary,
   EuiPage,
@@ -23,6 +25,11 @@ export class PlaygroundView extends Component {
     return (
       <EuiPage restrictWidth={1240} className="guidePage">
         <EuiPageBody>
+          <EuiErrorBoundary>
+            {childRoutes.map(({ path, name }) => {
+              return <Link to={`/playgrounds/${path}`}>{name}</Link>;
+            })}
+          </EuiErrorBoundary>
           <div className="guidePageContent">
             <EuiContext i18n={'i18n'}>
               <ThemeContext.Consumer>

From afc8b37934e3a85328a636ce5cb903ac93d826b5 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Sat, 30 May 2020 21:25:02 +0530
Subject: [PATCH 04/28] removed notFound from nav

---
 src-docs/src/views/playground_view.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src-docs/src/views/playground_view.js b/src-docs/src/views/playground_view.js
index 05f8c965362..4f3c7a9b85a 100644
--- a/src-docs/src/views/playground_view.js
+++ b/src-docs/src/views/playground_view.js
@@ -27,6 +27,7 @@ export class PlaygroundView extends Component {
         <EuiPageBody>
           <EuiErrorBoundary>
             {childRoutes.map(({ path, name }) => {
+              if (path === '*') return null;
               return <Link to={`/playgrounds/${path}`}>{name}</Link>;
             })}
           </EuiErrorBoundary>

From 601b8b2e2f2b3b598757a5f25bf28ef3383ff963 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Sat, 30 May 2020 21:39:17 +0530
Subject: [PATCH 05/28] sideNav improved

---
 src-docs/src/views/playground_view.js | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src-docs/src/views/playground_view.js b/src-docs/src/views/playground_view.js
index 4f3c7a9b85a..53af1a1da0c 100644
--- a/src-docs/src/views/playground_view.js
+++ b/src-docs/src/views/playground_view.js
@@ -9,6 +9,7 @@ import {
   EuiPage,
   EuiPageBody,
   EuiContext,
+  EuiSideNav,
 } from '../../../src/components';
 
 export class PlaygroundView extends Component {
@@ -21,15 +22,32 @@ export class PlaygroundView extends Component {
 
   renderContent() {
     const { children } = this.props;
+    const navigation = childRoutes
+      .filter(({ path }) => path !== '*')
+      .map(({ path, name }, id) => {
+        if (path === '*') return null;
+        const href = `#/playgrounds/${path}`;
+        return {
+          name,
+          id,
+          href,
+        };
 
+        // <Link to={`/playgrounds/${path}`}>{name}</Link>;
+      });
     return (
       <EuiPage restrictWidth={1240} className="guidePage">
         <EuiPageBody>
           <EuiErrorBoundary>
-            {childRoutes.map(({ path, name }) => {
-              if (path === '*') return null;
-              return <Link to={`/playgrounds/${path}`}>{name}</Link>;
-            })}
+            <div className="guideSideNav">
+              <div className="guideSideNav__content">
+                <EuiSideNav
+                  mobileTitle="Navigate within $Playgrounds"
+                  items={navigation}
+                  className="guideSideNav__item"
+                />
+              </div>
+            </div>
           </EuiErrorBoundary>
           <div className="guidePageContent">
             <EuiContext i18n={'i18n'}>

From 9f16ad006daad248c1795246005c39c8706214ee Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Sat, 30 May 2020 21:42:18 +0530
Subject: [PATCH 06/28] removed circular dep

---
 src-docs/src/playground_routes.js     | 15 +++++++++++++++
 src-docs/src/playgrounds.js           | 15 +--------------
 src-docs/src/views/playground_view.js |  3 +--
 3 files changed, 17 insertions(+), 16 deletions(-)
 create mode 100644 src-docs/src/playground_routes.js

diff --git a/src-docs/src/playground_routes.js b/src-docs/src/playground_routes.js
new file mode 100644
index 00000000000..546df3f6485
--- /dev/null
+++ b/src-docs/src/playground_routes.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import ButtonExample from './views/button/playground';
+
+export const childRoutes = [
+  {
+    path: 'button',
+    component: ButtonExample,
+    name: 'EuiButton',
+  },
+  {
+    path: '*',
+    component: () => <div>Not Found</div>,
+    name: 'Page Not Found',
+  },
+];
diff --git a/src-docs/src/playgrounds.js b/src-docs/src/playgrounds.js
index e04a8c86695..4c648c967a9 100644
--- a/src-docs/src/playgrounds.js
+++ b/src-docs/src/playgrounds.js
@@ -1,19 +1,6 @@
 import React from 'react';
 import { PlaygroundView } from './views/playground_view';
-import ButtonExample from './views/button/playground';
-
-export const childRoutes = [
-  {
-    path: 'button',
-    component: ButtonExample,
-    name: 'EuiButton',
-  },
-  {
-    path: '*',
-    component: () => <div>Not Found</div>,
-    name: 'Page Not Found',
-  },
-];
+import { childRoutes } from './playground_routes';
 
 export const playgrounds = [
   {
diff --git a/src-docs/src/views/playground_view.js b/src-docs/src/views/playground_view.js
index 53af1a1da0c..860080cd9ba 100644
--- a/src-docs/src/views/playground_view.js
+++ b/src-docs/src/views/playground_view.js
@@ -1,9 +1,8 @@
 import React, { Component } from 'react';
 
 import { ThemeProvider, ThemeContext } from '../components';
-import { Link } from 'react-router';
 
-import { childRoutes } from '../playgrounds';
+import { childRoutes } from '../playground_routes';
 import {
   EuiErrorBoundary,
   EuiPage,

From bae76a937df26204c176819e968e558811d2ad1b Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Sat, 30 May 2020 21:48:41 +0530
Subject: [PATCH 07/28] removed redundant code

---
 src-docs/src/views/button/playground.js | 37 ++-----------------------
 1 file changed, 3 insertions(+), 34 deletions(-)

diff --git a/src-docs/src/views/button/playground.js b/src-docs/src/views/button/playground.js
index e2fe93ba163..5ab9957f7c8 100644
--- a/src-docs/src/views/button/playground.js
+++ b/src-docs/src/views/button/playground.js
@@ -1,10 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 
 import {
   useView,
   Compiler,
-  Knobs,
-  Editor,
   Error,
   ActionButtons,
   Placeholder,
@@ -14,14 +12,10 @@ import {
 // import "brace/theme/github";
 import {
   EuiButton,
-  EuiRadioGroup,
-  EuiCheckboxGroup,
   EuiCodeEditor,
-  EuiCheckbox,
   EuiSpacer,
-  EuiFieldText,
 } from '../../../../src/components/';
-import KnobsC from '../../services/playground/knobs';
+import Knobs from '../../services/playground/knobs';
 
 const testProps = {
   color: {
@@ -87,31 +81,6 @@ export default () => {
     },
   });
 
-  console.log('knobProps', params.knobProps);
-  const radios = [
-    {
-      id: `primary`,
-      label: 'primary',
-    },
-    {
-      id: `text`,
-      label: 'text',
-    },
-    {
-      id: `ghost`,
-      label: 'ghost',
-    },
-  ];
-
-  const [radioIdSelected, setRadioIdSelected] = useState(`primary`);
-  const [child, setChild] = useState(params.knobProps.state.children.value);
-
-  const onChange = optionId => {
-    // console.log(optionId);
-    params.knobProps.set(optionId, 'color');
-    setRadioIdSelected(optionId);
-  };
-
   return (
     <React.Fragment>
       <Compiler
@@ -120,7 +89,7 @@ export default () => {
         placeholder={Placeholder}
       />
       <Error msg={params.errorProps.msg} isPopup />
-      <KnobsC {...params.knobProps} />
+      <Knobs {...params.knobProps} />
       <EuiSpacer />
       <EuiCodeEditor
         mode="javascript"

From 3b0a24f885bebea0544b5b92f6f2f3bccbb200d8 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Mon, 1 Jun 2020 00:07:15 +0530
Subject: [PATCH 08/28] hooks within button added

---
 src-docs/src/services/playground/knobs.js | 24 ++++++++++++++++-------
 src-docs/src/views/button/playground.js   | 14 +++++++++++++
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/src-docs/src/services/playground/knobs.js b/src-docs/src/services/playground/knobs.js
index 2e8cdd7ebc8..1a20472ae7f 100644
--- a/src-docs/src/services/playground/knobs.js
+++ b/src-docs/src/services/playground/knobs.js
@@ -6,6 +6,8 @@ import {
   EuiRadioGroup,
   EuiFieldText,
   EuiTextArea,
+  EuiFlexGroup,
+  EuiFlexItem,
 } from '../../../../src/components/';
 
 const getTooltip = (description, type, name) => (
@@ -172,7 +174,7 @@ const Knob = ({
 
 const KnobColumn = ({ state, knobNames, error, set }) => {
   return (
-    <div>
+    <EuiFlexItem>
       {knobNames.map(name => (
         <Knob
           key={name}
@@ -188,29 +190,37 @@ const KnobColumn = ({ state, knobNames, error, set }) => {
           defaultValue={state[name].defaultValue}
         />
       ))}
-    </div>
+    </EuiFlexItem>
   );
 };
 
 const Knobs = ({ state, set, error }) => {
-  const [showAllKnobs, setShowAllKnobs] = React.useState(true);
   const allKnobNames = Object.keys(state).filter(
     name => state[name].type !== PropTypes.Custom
   );
   const filteredKnobNames = allKnobNames.filter(
     name => state[name].hidden !== true
   );
-  const knobNames = showAllKnobs ? allKnobNames : filteredKnobNames;
-  const firstGroup = knobNames;
+  const knobNames = filteredKnobNames;
+  // const knobNames = showAllKnobs ? allKnobNames : filteredKnobNames;
+
+  const firstGroup = knobNames.slice(0, Math.round(knobNames.length / 2));
+  const secondGroup = knobNames.slice(Math.round(knobNames.length / 2));
   return (
-    <React.Fragment>
+    <EuiFlexGroup>
       <KnobColumn
         state={state}
         knobNames={firstGroup}
         set={set}
         error={error}
       />
-    </React.Fragment>
+      <KnobColumn
+        state={state}
+        knobNames={secondGroup}
+        set={set}
+        error={error}
+      />
+    </EuiFlexGroup>
   );
 };
 
diff --git a/src-docs/src/views/button/playground.js b/src-docs/src/views/button/playground.js
index 5ab9957f7c8..81031c86a9f 100644
--- a/src-docs/src/views/button/playground.js
+++ b/src-docs/src/views/button/playground.js
@@ -47,6 +47,7 @@ const modifiedProps = {
     <div>Three</div>`,
     type: PropTypes.ReactNode,
     description: 'Visible label.',
+    hidden: true,
   },
   color: {
     defaultValue: 'primary',
@@ -64,10 +65,23 @@ const modifiedProps = {
     description: '',
     value: false,
     type: PropTypes.Boolean,
+    stateful: true,
+  },
+  setFullWidth: {
+    value: 'e => setFullWidth(e)',
+    type: PropTypes.Function,
+    description: 'Called when fullWidth value is changed.',
+    propHook: {
+      what: 'e',
+      into: 'fullWidth',
+    },
   },
 };
 
+// const checkboxProps = require('!!extract-react-types-loader!../../../../src/components/button/button.tsx');
+
 export default () => {
+  // console.log('checkboxProps', checkboxProps);
   const params = useView({
     componentName: 'EuiButton',
     props: modifiedProps,

From b583bcfb0ef3d718102c0760e96b683c29b3de24 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Mon, 1 Jun 2020 00:39:34 +0530
Subject: [PATCH 09/28] removed redundant code

---
 src-docs/src/views/button/playground.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src-docs/src/views/button/playground.js b/src-docs/src/views/button/playground.js
index 81031c86a9f..bb7a2a15af4 100644
--- a/src-docs/src/views/button/playground.js
+++ b/src-docs/src/views/button/playground.js
@@ -78,10 +78,7 @@ const modifiedProps = {
   },
 };
 
-// const checkboxProps = require('!!extract-react-types-loader!../../../../src/components/button/button.tsx');
-
 export default () => {
-  // console.log('checkboxProps', checkboxProps);
   const params = useView({
     componentName: 'EuiButton',
     props: modifiedProps,

From 39e1947552bc555caad43b813248a21f76fed527 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Mon, 1 Jun 2020 20:33:11 +0530
Subject: [PATCH 10/28] added 'fs' to webpack.config

---
 src-docs/webpack.config.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src-docs/webpack.config.js b/src-docs/webpack.config.js
index 0624e30acbc..92e42c612bc 100644
--- a/src-docs/webpack.config.js
+++ b/src-docs/webpack.config.js
@@ -105,6 +105,10 @@ const webpackConfig = {
     port: getPortSync({ port: getPort.makeRange(8030, 8130), host: '0.0.0.0' }),
     disableHostCheck: true,
   },
+
+  node: {
+    fs: 'empty',
+  },
 };
 
 // Inspired by `get-port-sync`, but propogates options

From ee8ea522432bb408efca1bbaf0a3aede30260930 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Tue, 2 Jun 2020 01:02:46 +0530
Subject: [PATCH 11/28] Props utility for string , enum, bool

---
 src-docs/src/services/playground/knobs.js |  3 +-
 src-docs/src/services/playground/props.js | 65 ++++++++++++++++++++
 src-docs/src/views/button/playground.js   | 72 ++++-------------------
 3 files changed, 80 insertions(+), 60 deletions(-)
 create mode 100644 src-docs/src/services/playground/props.js

diff --git a/src-docs/src/services/playground/knobs.js b/src-docs/src/services/playground/knobs.js
index 1a20472ae7f..3222ab66444 100644
--- a/src-docs/src/services/playground/knobs.js
+++ b/src-docs/src/services/playground/knobs.js
@@ -91,7 +91,7 @@ const Knob = ({
       return (
         <Spacing>
           <EuiCheckbox
-            id={'id'}
+            id={name}
             label={name}
             checked={val}
             onChange={e => {
@@ -168,6 +168,7 @@ const Knob = ({
     case PropTypes.Custom:
       return null;
     default:
+      console.log('name', name);
       return assertUnreachable();
   }
 };
diff --git a/src-docs/src/services/playground/props.js b/src-docs/src/services/playground/props.js
new file mode 100644
index 00000000000..ca9fe68a9d7
--- /dev/null
+++ b/src-docs/src/services/playground/props.js
@@ -0,0 +1,65 @@
+/* eslint-disable guard-for-in */
+import { PropTypes } from 'react-view';
+
+const getProp = (prop, propName) => {
+  const newProp = {};
+  switch (prop.type.name) {
+    case 'bool':
+      newProp.type = PropTypes.Boolean;
+      if (prop.description) newProp.description = prop.description;
+      if (prop.defaultValue) {
+        newProp.defaultValue = prop.defaultValue.value === 'true';
+        newProp.value = prop.defaultValue.value === 'true';
+      } else {
+        newProp.defaultValue = false;
+        newProp.value = false;
+      }
+      break;
+
+    case 'enum':
+      //   console.log('prop', prop);
+      newProp.type = PropTypes.Enum;
+      newProp.description = prop.description;
+      newProp.required = prop.required;
+      if (prop.defaultValue) {
+        newProp.defaultValue = prop.defaultValue.value;
+        newProp.value = prop.defaultValue.value;
+      } else {
+        newProp.value = undefined;
+      }
+      newProp.options = {};
+      for (const i in prop.type.value) {
+        const val = prop.type.value[i].value;
+        const key = val.substring(1, val.length - 1);
+        newProp.options[key] = key;
+      }
+      break;
+
+    case 'string':
+      newProp.type = PropTypes.String;
+      newProp.placeholder = propName;
+      if (prop.description) newProp.description = prop.description;
+      if (prop.defaultValue) newProp.value = prop.defaultValue.value;
+      else newProp.value = undefined;
+      break;
+
+    default:
+      newProp.type = PropTypes.Custom;
+      newProp.custom = {};
+      if (prop.description) newProp.description = prop.description;
+      newProp.value = undefined;
+  }
+
+  return newProp;
+};
+
+const propUtilityForPlayground = props => {
+  const modifiedProps = {};
+
+  for (const key in props) {
+    if (props[key].type) modifiedProps[key] = getProp(props[key], key);
+  }
+  return modifiedProps;
+};
+
+export default propUtilityForPlayground;
diff --git a/src-docs/src/views/button/playground.js b/src-docs/src/views/button/playground.js
index bb7a2a15af4..0ef6b80eb31 100644
--- a/src-docs/src/views/button/playground.js
+++ b/src-docs/src/views/button/playground.js
@@ -16,72 +16,26 @@ import {
   EuiSpacer,
 } from '../../../../src/components/';
 import Knobs from '../../services/playground/knobs';
+import propUtilityForPlayground from '../../services/playground/props';
 
-const testProps = {
-  color: {
-    defaultValue: {
-      computed: false,
-      value: 'primary',
-    },
-    description: '`text` color is set for deprecation',
-    required: false,
-    type: {
-      name: 'enum',
-      value: [
-        { value: 'ghost', computed: false },
-        { value: 'text', computed: false },
-      ],
-    },
-  },
-  fullWidth: {
-    description: '',
-    required: false,
-    type: { name: 'bool' },
-  },
-};
+export default () => {
+  const docgenInfo = Array.isArray(EuiButton.__docgenInfo)
+    ? EuiButton.__docgenInfo[0]
+    : EuiButton.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
 
-const modifiedProps = {
-  children: {
-    value: `<div>One</div>
-    <div>Two</div>
-    <div>Three</div>`,
+  // console.log('docgenInfo', docgenInfo.props);
+  // console.log('propsToUse', propsToUse);
+  propsToUse.children = {
+    value: 'Button',
     type: PropTypes.ReactNode,
     description: 'Visible label.',
     hidden: true,
-  },
-  color: {
-    defaultValue: 'primary',
-    description: '`text` color is set for deprecation',
-    required: false,
-    options: { ghost: 'ghost', primary: 'primary', text: 'text' },
-    type: PropTypes.Enum,
-  },
-  href: {
-    description: '`href` color is set for deprecation',
-    value: 'Jane Doe',
-    type: PropTypes.String,
-  },
-  fullWidth: {
-    description: '',
-    value: false,
-    type: PropTypes.Boolean,
-    stateful: true,
-  },
-  setFullWidth: {
-    value: 'e => setFullWidth(e)',
-    type: PropTypes.Function,
-    description: 'Called when fullWidth value is changed.',
-    propHook: {
-      what: 'e',
-      into: 'fullWidth',
-    },
-  },
-};
-
-export default () => {
+  };
+  // console.log('modifiedProps', modifiedProps);
   const params = useView({
     componentName: 'EuiButton',
-    props: modifiedProps,
+    props: propsToUse,
     scope: {
       EuiButton,
     },

From 2357d95b202cc481dbb387ab2d79cb7cae0c7060 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Tue, 2 Jun 2020 01:12:46 +0530
Subject: [PATCH 12/28] added Select as knob

---
 src-docs/src/services/playground/knobs.js | 64 +++++++++++++----------
 1 file changed, 35 insertions(+), 29 deletions(-)

diff --git a/src-docs/src/services/playground/knobs.js b/src-docs/src/services/playground/knobs.js
index 3222ab66444..70a4a74e9c4 100644
--- a/src-docs/src/services/playground/knobs.js
+++ b/src-docs/src/services/playground/knobs.js
@@ -8,6 +8,7 @@ import {
   EuiTextArea,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiSelect,
 } from '../../../../src/components/';
 
 const getTooltip = (description, type, name) => (
@@ -104,47 +105,52 @@ const Knob = ({
     case PropTypes.Enum:
       const optionsKeys = Object.keys(options);
       const numberOfOptions = optionsKeys.length;
-      const selectOptions = optionsKeys.map(key => ({
-        id: key,
-        label: options[key],
-      }));
+
       const valueKey = val || defaultValue;
       //   console.log('selectOptions', selectOptions);
       //   console.log('valueKey', valueKey);
       //   console.log('data', { description, type, name });
 
-      return (
-        <Spacing>
-          {/* //       <Label tooltip={getTooltip(description, type, name)}>{name}</Label> */}
-          {numberOfOptions < 7 ? (
+      if (numberOfOptions < 6) {
+        const flattenedOptions = optionsKeys.map(key => ({
+          id: key,
+          label: options[key],
+        }));
+
+        return (
+          <Spacing>
             <EuiRadioGroup
-              options={selectOptions}
+              options={flattenedOptions}
               idSelected={valueKey}
               onChange={id => globalSet(id)}
               name={`Select ${name}`}
               legend={{
                 children: <span> {`Select ${name}`}</span>,
               }}
-            />
-          ) : null}
-          {error && <div>error {error}</div>}
-        </Spacing>
-      );
-    //         <Select
-    //           size={SIZE.compact}
-    //           options={selectOptions}
-    //           clearable={false}
-    //           value={[{ id: valueKey || '', option: valueKey }]}
-    //           labelKey="option"
-    //           valueKey="id"
-    //           onChange={({ value }) => {
-    //             globalSet(`${enumName || name.toUpperCase()}.${value[0].id}`);
-    //           }}
-    //         />
-    //       )}
-    //       <div>error {error}</div>
-    //     </Spacing>
-    //   );
+            />{' '}
+            {error && <div>error {error}</div>}
+          </Spacing>
+        );
+      } else {
+        const flattenedOptions = optionsKeys.map(key => ({
+          value: key,
+          text: options[key],
+        }));
+
+        return (
+          <Spacing>
+            <EuiSelect
+              id={name}
+              options={flattenedOptions}
+              value={valueKey}
+              onChange={e => globalSet(e.target.value)}
+              aria-label={`Select ${name}`}
+            />{' '}
+            {error && <div>error {error}</div>}
+          </Spacing>
+        );
+      }
+
     case PropTypes.ReactNode:
     case PropTypes.Function:
     case PropTypes.Array:

From 121ae2995e3c65ffa4151456fecea2f52836ad28 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Tue, 2 Jun 2020 01:31:12 +0530
Subject: [PATCH 13/28] made code reusable

---
 src-docs/src/playground.js                | 47 +++++++++++++++++++
 src-docs/src/playground_routes.js         |  5 +-
 src-docs/src/services/playground/knobs.js |  4 +-
 src-docs/src/views/button/playground.js   | 56 ++---------------------
 4 files changed, 56 insertions(+), 56 deletions(-)
 create mode 100644 src-docs/src/playground.js

diff --git a/src-docs/src/playground.js b/src-docs/src/playground.js
new file mode 100644
index 00000000000..162a3a97e33
--- /dev/null
+++ b/src-docs/src/playground.js
@@ -0,0 +1,47 @@
+import React from 'react';
+
+import {
+  useView,
+  Compiler,
+  Error,
+  ActionButtons,
+  Placeholder,
+} from 'react-view';
+
+import { EuiCodeEditor, EuiSpacer } from '../../src/components';
+import Knobs from './services/playground/knobs';
+
+export default config => {
+  const params = useView(config);
+  return (
+    <React.Fragment>
+      <Compiler
+        {...params.compilerProps}
+        minHeight={62}
+        placeholder={Placeholder}
+      />
+      <Error msg={params.errorProps.msg} isPopup />
+      <Knobs {...params.knobProps} />
+      <EuiSpacer />
+      <EuiCodeEditor
+        mode="javascript"
+        theme="github"
+        width="100%"
+        value={params.editorProps.code}
+        onChange={params.editorProps.onChange}
+        setOptions={{
+          fontSize: '14px',
+          enableBasicAutocompletion: true,
+          enableSnippets: true,
+          enableLiveAutocompletion: true,
+        }}
+        onBlur={() => {
+          console.log('blur');
+        }} // eslint-disable-line no-console
+        aria-label="Code Editor"
+      />
+      <Error {...params.errorProps} />
+      <ActionButtons {...params.actions} />
+    </React.Fragment>
+  );
+};
diff --git a/src-docs/src/playground_routes.js b/src-docs/src/playground_routes.js
index 546df3f6485..42b4dbc9c4c 100644
--- a/src-docs/src/playground_routes.js
+++ b/src-docs/src/playground_routes.js
@@ -1,10 +1,11 @@
 import React from 'react';
-import ButtonExample from './views/button/playground';
+import buttonConfig from './views/button/playground';
+import playground from './playground';
 
 export const childRoutes = [
   {
     path: 'button',
-    component: ButtonExample,
+    component: () => playground(buttonConfig()),
     name: 'EuiButton',
   },
   {
diff --git a/src-docs/src/services/playground/knobs.js b/src-docs/src/services/playground/knobs.js
index 70a4a74e9c4..69c76f896e0 100644
--- a/src-docs/src/services/playground/knobs.js
+++ b/src-docs/src/services/playground/knobs.js
@@ -127,7 +127,7 @@ const Knob = ({
               legend={{
                 children: <span> {`Select ${name}`}</span>,
               }}
-            />{' '}
+            />
             {error && <div>error {error}</div>}
           </Spacing>
         );
@@ -145,7 +145,7 @@ const Knob = ({
               value={valueKey}
               onChange={e => globalSet(e.target.value)}
               aria-label={`Select ${name}`}
-            />{' '}
+            />
             {error && <div>error {error}</div>}
           </Spacing>
         );
diff --git a/src-docs/src/views/button/playground.js b/src-docs/src/views/button/playground.js
index 0ef6b80eb31..9c738afd19a 100644
--- a/src-docs/src/views/button/playground.js
+++ b/src-docs/src/views/button/playground.js
@@ -1,21 +1,5 @@
-import React from 'react';
-
-import {
-  useView,
-  Compiler,
-  Error,
-  ActionButtons,
-  Placeholder,
-  PropTypes,
-} from 'react-view';
-
-// import "brace/theme/github";
-import {
-  EuiButton,
-  EuiCodeEditor,
-  EuiSpacer,
-} from '../../../../src/components/';
-import Knobs from '../../services/playground/knobs';
+import { PropTypes } from 'react-view';
+import { EuiButton } from '../../../../src/components/';
 import propUtilityForPlayground from '../../services/playground/props';
 
 export default () => {
@@ -33,7 +17,7 @@ export default () => {
     hidden: true,
   };
   // console.log('modifiedProps', modifiedProps);
-  const params = useView({
+  return {
     componentName: 'EuiButton',
     props: propsToUse,
     scope: {
@@ -44,37 +28,5 @@ export default () => {
         named: ['EuiButton'],
       },
     },
-  });
-
-  return (
-    <React.Fragment>
-      <Compiler
-        {...params.compilerProps}
-        minHeight={62}
-        placeholder={Placeholder}
-      />
-      <Error msg={params.errorProps.msg} isPopup />
-      <Knobs {...params.knobProps} />
-      <EuiSpacer />
-      <EuiCodeEditor
-        mode="javascript"
-        theme="github"
-        width="100%"
-        value={params.editorProps.code}
-        onChange={params.editorProps.onChange}
-        setOptions={{
-          fontSize: '14px',
-          enableBasicAutocompletion: true,
-          enableSnippets: true,
-          enableLiveAutocompletion: true,
-        }}
-        onBlur={() => {
-          console.log('blur');
-        }} // eslint-disable-line no-console
-        aria-label="Code Editor"
-      />
-      <Error {...params.errorProps} />
-      <ActionButtons {...params.actions} />
-    </React.Fragment>
-  );
+  };
 };

From 55ced8937cd009230260310872dfdfd16c5972af Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Tue, 2 Jun 2020 02:01:46 +0530
Subject: [PATCH 14/28] Accordino example added

---
 src-docs/src/playground_routes.js          |  8 ++++-
 src-docs/src/services/playground/props.js  | 15 ++++++++
 src-docs/src/views/accordion/playground.js | 42 ++++++++++++++++++++++
 src-docs/src/views/button/playground.js    |  3 --
 4 files changed, 64 insertions(+), 4 deletions(-)
 create mode 100644 src-docs/src/views/accordion/playground.js

diff --git a/src-docs/src/playground_routes.js b/src-docs/src/playground_routes.js
index 42b4dbc9c4c..f2839ffe0d5 100644
--- a/src-docs/src/playground_routes.js
+++ b/src-docs/src/playground_routes.js
@@ -1,8 +1,14 @@
 import React from 'react';
-import buttonConfig from './views/button/playground';
 import playground from './playground';
+import buttonConfig from './views/button/playground';
+import accordionConfig from './views/accordion/playground';
 
 export const childRoutes = [
+  {
+    path: 'accordion',
+    component: () => playground(accordionConfig()),
+    name: 'EuiAccordion',
+  },
   {
     path: 'button',
     component: () => playground(buttonConfig()),
diff --git a/src-docs/src/services/playground/props.js b/src-docs/src/services/playground/props.js
index ca9fe68a9d7..345e06e596e 100644
--- a/src-docs/src/services/playground/props.js
+++ b/src-docs/src/services/playground/props.js
@@ -43,6 +43,21 @@ const getProp = (prop, propName) => {
       else newProp.value = undefined;
       break;
 
+    case 'func':
+      newProp.type = PropTypes.Function;
+      newProp.placeholder = propName;
+      if (prop.description) newProp.description = prop.description;
+
+      break;
+
+    case 'node':
+      newProp.type = PropTypes.ReactNode;
+      newProp.placeholder = propName;
+      if (prop.description) newProp.description = prop.description;
+      if (prop.defaultValue) newProp.value = prop.defaultValue.value;
+      else newProp.value = undefined;
+      break;
+
     default:
       newProp.type = PropTypes.Custom;
       newProp.custom = {};
diff --git a/src-docs/src/views/accordion/playground.js b/src-docs/src/views/accordion/playground.js
new file mode 100644
index 00000000000..c5ab129262c
--- /dev/null
+++ b/src-docs/src/views/accordion/playground.js
@@ -0,0 +1,42 @@
+import { PropTypes } from 'react-view';
+import { EuiAccordion, EuiText } from '../../../../src/components/';
+import propUtilityForPlayground from '../../services/playground/props';
+
+export default () => {
+  const docgenInfo = Array.isArray(EuiAccordion.__docgenInfo)
+    ? EuiAccordion.__docgenInfo[0]
+    : EuiAccordion.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  console.log('docgenInfo', docgenInfo.props);
+  console.log('propsToUse', propsToUse);
+
+  // propsToUse.onToggle.value = 'e => setOpen(e)';
+  // propsToUse.initialIsOpen.stateful = true;
+  // eslint-disable-next-line quotes
+  propsToUse.buttonContent.value = `<div> Click me to toggle </div>`;
+  propsToUse.children = {
+    value: `<EuiText>
+    <p>
+      Any content inside of<strong>EuiAccordion</strong> will appear here.
+    </p>
+  </EuiText>`,
+    type: PropTypes.ReactNode,
+    description: 'Visible label.',
+    hidden: true,
+  };
+
+  return {
+    componentName: 'EuiAccordion',
+    props: propsToUse,
+    scope: {
+      EuiAccordion,
+      EuiText,
+    },
+    imports: {
+      '@elastic/eui': {
+        named: ['EuiAccordion', 'EuiText'],
+      },
+    },
+  };
+};
diff --git a/src-docs/src/views/button/playground.js b/src-docs/src/views/button/playground.js
index 9c738afd19a..6e6c61e083d 100644
--- a/src-docs/src/views/button/playground.js
+++ b/src-docs/src/views/button/playground.js
@@ -8,15 +8,12 @@ export default () => {
     : EuiButton.__docgenInfo;
   const propsToUse = propUtilityForPlayground(docgenInfo.props);
 
-  // console.log('docgenInfo', docgenInfo.props);
-  // console.log('propsToUse', propsToUse);
   propsToUse.children = {
     value: 'Button',
     type: PropTypes.ReactNode,
     description: 'Visible label.',
     hidden: true,
   };
-  // console.log('modifiedProps', modifiedProps);
   return {
     componentName: 'EuiButton',
     props: propsToUse,

From 5c3945bd249d00afed2ec5c54a529ce952df495b Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Tue, 2 Jun 2020 22:01:16 +0530
Subject: [PATCH 15/28] updated according to router

---
 src-docs/src/index.js       | 25 ++++++++++++++++++-------
 src-docs/src/playgrounds.js | 14 +-------------
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/src-docs/src/index.js b/src-docs/src/index.js
index 7d805b3edf8..be5457aca74 100644
--- a/src-docs/src/index.js
+++ b/src-docs/src/index.js
@@ -13,6 +13,7 @@ import { AppContainer } from './views/app_container';
 import { HomeView } from './views/home/home_view';
 import { NotFoundView } from './views/not_found/not_found_view';
 import { registerTheme } from './services';
+import { PlaygroundView } from './views/playground_view';
 
 import Routes from './routes';
 import { playgrounds } from './playgrounds';
@@ -32,14 +33,8 @@ registerTheme('amsterdam-dark', [themeAmsterdamDark]);
 const store = configureStore();
 
 const childRoutes = [].concat(Routes.getAppRoutes());
-childRoutes.push({
-  path: '*',
-  component: NotFoundView,
-  name: 'Page Not Found',
-});
 
 const routes = [
-  ...playgrounds,
   {
     path: '/',
     component: HomeView,
@@ -64,8 +59,24 @@ ReactDOM.render(
               );
             return null;
           })}
+          {playgrounds.map(({ name, path, component }, i) => {
+            if (component)
+              return (
+                <Route key={`play__${i}`} exact path={`/playgrounds/${path}`}>
+                  <PlaygroundView currentRoute={{ name, path }}>
+                    {createElement(component, {})}
+                  </PlaygroundView>
+                </Route>
+              );
+            return null;
+          })}
+          <Route key="Page Not Found" exact path={'*'}>
+            <AppContainer currentRoute={{ name: 'Page Not Found', path: '*' }}>
+              {createElement(NotFoundView, {})}
+            </AppContainer>
+          </Route>
         </Switch>
-      </Router>{' '}
+      </Router>
     </ThemeProvider>
   </Provider>,
   document.getElementById('guide')
diff --git a/src-docs/src/playgrounds.js b/src-docs/src/playgrounds.js
index 4c648c967a9..4287397b3d4 100644
--- a/src-docs/src/playgrounds.js
+++ b/src-docs/src/playgrounds.js
@@ -1,15 +1,3 @@
-import React from 'react';
-import { PlaygroundView } from './views/playground_view';
 import { childRoutes } from './playground_routes';
 
-export const playgrounds = [
-  {
-    path: '/playgrounds',
-    component: PlaygroundView,
-    indexRoute: {
-      component: () => <div>play</div>,
-      source: 'views/home/HomeView',
-    },
-    childRoutes,
-  },
-];
+export const playgrounds = childRoutes;

From 8241cf276662830cb583a76e633f7c43e71281c8 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Tue, 2 Jun 2020 22:11:52 +0530
Subject: [PATCH 16/28] added links in docs to respective playgrounds

---
 .../src/components/guide_page/guide_page.js     |  3 ++-
 src-docs/src/routes.js                          | 17 +++++++++++++++--
 .../src/views/accordion/accordion_example.js    |  2 ++
 src-docs/src/views/app_view.js                  |  1 -
 src-docs/src/views/button/button_example.js     |  2 ++
 5 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src-docs/src/components/guide_page/guide_page.js b/src-docs/src/components/guide_page/guide_page.js
index e25720e94eb..95068b66e28 100644
--- a/src-docs/src/components/guide_page/guide_page.js
+++ b/src-docs/src/components/guide_page/guide_page.js
@@ -17,6 +17,7 @@ export const GuidePage = ({
   title,
   intro,
   componentLinkTo,
+  componentLinkToText,
   isBeta,
 }) => {
   const betaBadge = isBeta ? (
@@ -42,7 +43,7 @@ export const GuidePage = ({
           {componentLinkTo && (
             <EuiFlexItem grow={false}>
               <EuiButton href={getRouterLinkProps(componentLinkTo).href}>
-                View component code
+                {componentLinkToText || 'View component code'}
               </EuiButton>
             </EuiFlexItem>
           )}
diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index 6882010051d..70d907db228 100644
--- a/src-docs/src/routes.js
+++ b/src-docs/src/routes.js
@@ -247,7 +247,15 @@ const createExample = (example, customTitle) => {
     );
   }
 
-  const { title, intro, sections, beta, isNew } = example;
+  const {
+    title,
+    intro,
+    sections,
+    beta,
+    isNew,
+    componentLinkTo,
+    componentLinkToText,
+  } = example;
   sections.forEach(section => {
     section.id = slugify(section.title || title);
   });
@@ -261,7 +269,12 @@ const createExample = (example, customTitle) => {
 
   const component = () => (
     <EuiErrorBoundary>
-      <GuidePage title={title} intro={intro} isBeta={beta}>
+      <GuidePage
+        title={title}
+        intro={intro}
+        isBeta={beta}
+        componentLinkToText={componentLinkToText}
+        componentLinkTo={componentLinkTo}>
         {renderedSections}
       </GuidePage>
     </EuiErrorBoundary>
diff --git a/src-docs/src/views/accordion/accordion_example.js b/src-docs/src/views/accordion/accordion_example.js
index e1e19e1a241..5258b02f097 100644
--- a/src-docs/src/views/accordion/accordion_example.js
+++ b/src-docs/src/views/accordion/accordion_example.js
@@ -112,6 +112,8 @@ const accordionForceStateSnippet = `<EuiAccordion
 
 export const AccordionExample = {
   title: 'Accordion',
+  componentLinkTo: '/playgrounds/accordion',
+  componentLinkToText: 'Playground',
   intro: (
     <Fragment>
       <EuiCallOut title="Take care including flex group content within accordions">
diff --git a/src-docs/src/views/app_view.js b/src-docs/src/views/app_view.js
index b9bd484f02d..956a1fc3ca4 100644
--- a/src-docs/src/views/app_view.js
+++ b/src-docs/src/views/app_view.js
@@ -39,7 +39,6 @@ export class AppView extends Component {
 
   renderContent() {
     const { children, currentRoute, toggleLocale, locale, routes } = this.props;
-    console.log('this.props', this.props);
     const { navigation } = routes;
 
     const mappingFuncs = {
diff --git a/src-docs/src/views/button/button_example.js b/src-docs/src/views/button/button_example.js
index 9756ea8839e..35340159d79 100644
--- a/src-docs/src/views/button/button_example.js
+++ b/src-docs/src/views/button/button_example.js
@@ -109,6 +109,8 @@ const buttonGroupSnippet = [
 
 export const ButtonExample = {
   title: 'Button',
+  componentLinkTo: '/playgrounds/button',
+  componentLinkToText: 'Playground',
   intro: (
     <EuiText>
       <p>

From b710ebf877723e33dac5af803ec492139f998e62 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Tue, 2 Jun 2020 22:31:02 +0530
Subject: [PATCH 17/28] added Beacon playground

---
 src-docs/src/index.js                       |  3 +-
 src-docs/src/playground_routes.js           |  6 ++++
 src-docs/src/playgrounds.js                 |  3 --
 src-docs/src/services/playground/props.js   |  1 +
 src-docs/src/views/beacon/beacon_example.js |  2 ++
 src-docs/src/views/beacon/playground.js     | 31 +++++++++++++++++++++
 6 files changed, 42 insertions(+), 4 deletions(-)
 delete mode 100644 src-docs/src/playgrounds.js
 create mode 100644 src-docs/src/views/beacon/playground.js

diff --git a/src-docs/src/index.js b/src-docs/src/index.js
index be5457aca74..56027054e8e 100644
--- a/src-docs/src/index.js
+++ b/src-docs/src/index.js
@@ -16,7 +16,8 @@ import { registerTheme } from './services';
 import { PlaygroundView } from './views/playground_view';
 
 import Routes from './routes';
-import { playgrounds } from './playgrounds';
+import { childRoutes as playgrounds } from './playground_routes';
+
 import themeLight from './theme_light.scss';
 import themeDark from './theme_dark.scss';
 import themeAmsterdamLight from './theme_amsterdam_light.scss';
diff --git a/src-docs/src/playground_routes.js b/src-docs/src/playground_routes.js
index f2839ffe0d5..185cf2171b0 100644
--- a/src-docs/src/playground_routes.js
+++ b/src-docs/src/playground_routes.js
@@ -2,6 +2,7 @@ import React from 'react';
 import playground from './playground';
 import buttonConfig from './views/button/playground';
 import accordionConfig from './views/accordion/playground';
+import beaconConfig from './views/beacon/playground';
 
 export const childRoutes = [
   {
@@ -9,6 +10,11 @@ export const childRoutes = [
     component: () => playground(accordionConfig()),
     name: 'EuiAccordion',
   },
+  {
+    path: 'beacon',
+    component: () => playground(beaconConfig()),
+    name: 'EuiBeacon',
+  },
   {
     path: 'button',
     component: () => playground(buttonConfig()),
diff --git a/src-docs/src/playgrounds.js b/src-docs/src/playgrounds.js
deleted file mode 100644
index 4287397b3d4..00000000000
--- a/src-docs/src/playgrounds.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { childRoutes } from './playground_routes';
-
-export const playgrounds = childRoutes;
diff --git a/src-docs/src/services/playground/props.js b/src-docs/src/services/playground/props.js
index 345e06e596e..757df132f7c 100644
--- a/src-docs/src/services/playground/props.js
+++ b/src-docs/src/services/playground/props.js
@@ -35,6 +35,7 @@ const getProp = (prop, propName) => {
       }
       break;
 
+    case 'number':
     case 'string':
       newProp.type = PropTypes.String;
       newProp.placeholder = propName;
diff --git a/src-docs/src/views/beacon/beacon_example.js b/src-docs/src/views/beacon/beacon_example.js
index c7095f0cdcc..e43d19287a3 100644
--- a/src-docs/src/views/beacon/beacon_example.js
+++ b/src-docs/src/views/beacon/beacon_example.js
@@ -12,6 +12,8 @@ const beaconHtml = renderToHtml(Beacon);
 
 export const BeaconExample = {
   title: 'Beacon',
+  componentLinkTo: '/playgrounds/beacon',
+  componentLinkToText: 'Playground',
   sections: [
     {
       source: [
diff --git a/src-docs/src/views/beacon/playground.js b/src-docs/src/views/beacon/playground.js
new file mode 100644
index 00000000000..25e21bf16e9
--- /dev/null
+++ b/src-docs/src/views/beacon/playground.js
@@ -0,0 +1,31 @@
+import { PropTypes } from 'react-view';
+import { EuiBeacon } from '../../../../src/components/';
+import propUtilityForPlayground from '../../services/playground/props';
+
+export default () => {
+  const docgenInfo = Array.isArray(EuiBeacon.__docgenInfo)
+    ? EuiBeacon.__docgenInfo[0]
+    : EuiBeacon.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.size = {
+    ...propsToUse.size,
+    type: PropTypes.Number,
+    placeholder: 'size',
+    value: 12,
+  };
+  delete propsToUse.size.custom;
+
+  return {
+    componentName: 'EuiBeacon',
+    props: propsToUse,
+    scope: {
+      EuiBeacon,
+    },
+    imports: {
+      '@elastic/eui': {
+        named: ['EuiBeacon'],
+      },
+    },
+  };
+};

From 30fa2ebeab8210477883f7cfe5eabfb4b4056d29 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Tue, 2 Jun 2020 22:47:13 +0530
Subject: [PATCH 18/28] avatar playground

---
 src-docs/src/playground_routes.js          |  6 +++++
 src-docs/src/views/accordion/playground.js |  3 ---
 src-docs/src/views/avatar/playground.js    | 27 ++++++++++++++++++++++
 3 files changed, 33 insertions(+), 3 deletions(-)
 create mode 100644 src-docs/src/views/avatar/playground.js

diff --git a/src-docs/src/playground_routes.js b/src-docs/src/playground_routes.js
index 185cf2171b0..1949e3bd62d 100644
--- a/src-docs/src/playground_routes.js
+++ b/src-docs/src/playground_routes.js
@@ -2,6 +2,7 @@ import React from 'react';
 import playground from './playground';
 import buttonConfig from './views/button/playground';
 import accordionConfig from './views/accordion/playground';
+import avatarConfig from './views/avatar/playground';
 import beaconConfig from './views/beacon/playground';
 
 export const childRoutes = [
@@ -10,6 +11,11 @@ export const childRoutes = [
     component: () => playground(accordionConfig()),
     name: 'EuiAccordion',
   },
+  {
+    path: 'avatar',
+    component: () => playground(avatarConfig()),
+    name: 'EuiAvatar',
+  },
   {
     path: 'beacon',
     component: () => playground(beaconConfig()),
diff --git a/src-docs/src/views/accordion/playground.js b/src-docs/src/views/accordion/playground.js
index c5ab129262c..7ff8f49479d 100644
--- a/src-docs/src/views/accordion/playground.js
+++ b/src-docs/src/views/accordion/playground.js
@@ -8,9 +8,6 @@ export default () => {
     : EuiAccordion.__docgenInfo;
   const propsToUse = propUtilityForPlayground(docgenInfo.props);
 
-  console.log('docgenInfo', docgenInfo.props);
-  console.log('propsToUse', propsToUse);
-
   // propsToUse.onToggle.value = 'e => setOpen(e)';
   // propsToUse.initialIsOpen.stateful = true;
   // eslint-disable-next-line quotes
diff --git a/src-docs/src/views/avatar/playground.js b/src-docs/src/views/avatar/playground.js
new file mode 100644
index 00000000000..a9017525baa
--- /dev/null
+++ b/src-docs/src/views/avatar/playground.js
@@ -0,0 +1,27 @@
+import { PropTypes } from 'react-view';
+import { EuiAvatar } from '../../../../src/components/';
+import propUtilityForPlayground from '../../services/playground/props';
+
+export default () => {
+  const docgenInfo = Array.isArray(EuiAvatar.__docgenInfo)
+    ? EuiAvatar.__docgenInfo[0]
+    : EuiAvatar.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  console.log('propsToUse', propsToUse);
+  propsToUse.name.value = 'Avatar';
+  propsToUse.name.stateful = true;
+
+  return {
+    componentName: 'EuiAvatar',
+    props: propsToUse,
+    scope: {
+      EuiAvatar,
+    },
+    imports: {
+      '@elastic/eui': {
+        named: ['EuiAvatar'],
+      },
+    },
+  };
+};

From 4a716edfc3c2c60a3da5a93d899afc2d09318d89 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Tue, 2 Jun 2020 23:05:23 +0530
Subject: [PATCH 19/28] callout Playground

---
 src-docs/src/playground_routes.js         |  6 ++++
 src-docs/src/services/playground/props.js |  2 +-
 src-docs/src/views/avatar/playground.js   |  2 --
 src-docs/src/views/call_out/playground.js | 43 +++++++++++++++++++++++
 4 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 src-docs/src/views/call_out/playground.js

diff --git a/src-docs/src/playground_routes.js b/src-docs/src/playground_routes.js
index 1949e3bd62d..dbc75c65243 100644
--- a/src-docs/src/playground_routes.js
+++ b/src-docs/src/playground_routes.js
@@ -4,6 +4,7 @@ import buttonConfig from './views/button/playground';
 import accordionConfig from './views/accordion/playground';
 import avatarConfig from './views/avatar/playground';
 import beaconConfig from './views/beacon/playground';
+import calloutConfig from './views/call_out/playground';
 
 export const childRoutes = [
   {
@@ -26,6 +27,11 @@ export const childRoutes = [
     component: () => playground(buttonConfig()),
     name: 'EuiButton',
   },
+  {
+    path: 'callout',
+    component: () => playground(calloutConfig()),
+    name: 'EuiCallOut',
+  },
   {
     path: '*',
     component: () => <div>Not Found</div>,
diff --git a/src-docs/src/services/playground/props.js b/src-docs/src/services/playground/props.js
index 757df132f7c..850bf029560 100644
--- a/src-docs/src/services/playground/props.js
+++ b/src-docs/src/services/playground/props.js
@@ -41,7 +41,7 @@ const getProp = (prop, propName) => {
       newProp.placeholder = propName;
       if (prop.description) newProp.description = prop.description;
       if (prop.defaultValue) newProp.value = prop.defaultValue.value;
-      else newProp.value = undefined;
+      else newProp.value = prop.type.name === 'string' ? '' : 0;
       break;
 
     case 'func':
diff --git a/src-docs/src/views/avatar/playground.js b/src-docs/src/views/avatar/playground.js
index a9017525baa..cc0b715be8d 100644
--- a/src-docs/src/views/avatar/playground.js
+++ b/src-docs/src/views/avatar/playground.js
@@ -1,4 +1,3 @@
-import { PropTypes } from 'react-view';
 import { EuiAvatar } from '../../../../src/components/';
 import propUtilityForPlayground from '../../services/playground/props';
 
@@ -8,7 +7,6 @@ export default () => {
     : EuiAvatar.__docgenInfo;
   const propsToUse = propUtilityForPlayground(docgenInfo.props);
 
-  console.log('propsToUse', propsToUse);
   propsToUse.name.value = 'Avatar';
   propsToUse.name.stateful = true;
 
diff --git a/src-docs/src/views/call_out/playground.js b/src-docs/src/views/call_out/playground.js
new file mode 100644
index 00000000000..6a646aca352
--- /dev/null
+++ b/src-docs/src/views/call_out/playground.js
@@ -0,0 +1,43 @@
+import { PropTypes } from 'react-view';
+import { EuiCallOut, EuiText, EuiIcon } from '../../../../src/components/';
+import propUtilityForPlayground from '../../services/playground/props';
+
+export default () => {
+  const docgenInfo = Array.isArray(EuiCallOut.__docgenInfo)
+    ? EuiCallOut.__docgenInfo[0]
+    : EuiCallOut.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.iconType = {
+    type: PropTypes.ReactNode,
+    description: 'iconType label.',
+    placeholder: 'icon type',
+  };
+  propsToUse.title.value = 'Title';
+
+  propsToUse.children = {
+    value: `<EuiText>
+    <p>
+      Any content inside of<strong> EuiCallOut </strong> will appear here.
+    </p>
+  </EuiText>`,
+    type: PropTypes.ReactNode,
+    description: 'Visible label.',
+    hidden: true,
+  };
+
+  return {
+    componentName: 'EuiCallOut',
+    props: propsToUse,
+    scope: {
+      EuiCallOut,
+      EuiText,
+      EuiIcon,
+    },
+    imports: {
+      '@elastic/eui': {
+        named: ['EuiCallOut', 'EuiText'],
+      },
+    },
+  };
+};

From 993e22d23dfdefe3aae8c9358acebe4b59e1dba8 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Wed, 3 Jun 2020 02:08:36 +0530
Subject: [PATCH 20/28] default value is selected by default, used Number Field
 for number, hide unnecesary props, separated string & number in props

---
 src-docs/src/playground.js                |  7 +++++
 src-docs/src/services/playground/knobs.js | 34 +++++++++++++++++------
 src-docs/src/services/playground/props.js | 14 ++++++++--
 3 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/src-docs/src/playground.js b/src-docs/src/playground.js
index 162a3a97e33..87ddec617aa 100644
--- a/src-docs/src/playground.js
+++ b/src-docs/src/playground.js
@@ -12,6 +12,13 @@ import { EuiCodeEditor, EuiSpacer } from '../../src/components';
 import Knobs from './services/playground/knobs';
 
 export default config => {
+  if (config.props) {
+    if (config.props.className) config.props.className.hidden = true;
+    if (config.props['data-test-subj'])
+      config.props['data-test-subj'].hidden = true;
+    if (config.props['aria-label']) config.props['aria-label'].hidden = true;
+  }
+
   const params = useView(config);
   return (
     <React.Fragment>
diff --git a/src-docs/src/services/playground/knobs.js b/src-docs/src/services/playground/knobs.js
index 69c76f896e0..505e5a845d7 100644
--- a/src-docs/src/services/playground/knobs.js
+++ b/src-docs/src/services/playground/knobs.js
@@ -9,16 +9,17 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiSelect,
+  EuiFieldNumber,
 } from '../../../../src/components/';
 
-const getTooltip = (description, type, name) => (
-  <span>
-    <p>
-      <b>{name}</b>: <i>{type}</i>
-    </p>
-    <p>{description}</p>
-  </span>
-);
+// const getTooltip = (description, type, name) => (
+//   <span>
+//     <p>
+//       <b>{name}</b>: <i>{type}</i>
+//     </p>
+//     <p>{description}</p>
+//   </span>
+// );
 
 const Spacing = ({ children }) => {
   return (
@@ -69,9 +70,24 @@ const Knob = ({
           {error && <div>error {error}</div>}
         </Spacing>
       );
+
+    case PropTypes.Number:
+      return (
+        <Spacing>
+          {/* <Label tooltip={getTooltip(description, type, name)}>{name}</Label> */}
+          <EuiFieldNumber
+            placeholder={placeholder}
+            value={val ? val : undefined}
+            onChange={e => set(e.target.value)}
+            aria-label={description}
+          />
+
+          {error && <div>error {error}</div>}
+        </Spacing>
+      );
+
     case PropTypes.String:
     case PropTypes.Date:
-    case PropTypes.Number:
       return (
         <Spacing>
           {/* <Label tooltip={getTooltip(description, type, name)}>{name}</Label> */}
diff --git a/src-docs/src/services/playground/props.js b/src-docs/src/services/playground/props.js
index 850bf029560..da72d907bcc 100644
--- a/src-docs/src/services/playground/props.js
+++ b/src-docs/src/services/playground/props.js
@@ -23,7 +23,10 @@ const getProp = (prop, propName) => {
       newProp.required = prop.required;
       if (prop.defaultValue) {
         newProp.defaultValue = prop.defaultValue.value;
-        newProp.value = prop.defaultValue.value;
+        newProp.value = prop.defaultValue.value.substring(
+          1,
+          prop.defaultValue.value.length - 1
+        );
       } else {
         newProp.value = undefined;
       }
@@ -36,12 +39,19 @@ const getProp = (prop, propName) => {
       break;
 
     case 'number':
+      newProp.type = PropTypes.Number;
+      newProp.placeholder = propName;
+      if (prop.description) newProp.description = prop.description;
+      if (prop.defaultValue) newProp.value = prop.defaultValue.value;
+      else newProp.value = 0;
+      break;
+
     case 'string':
       newProp.type = PropTypes.String;
       newProp.placeholder = propName;
       if (prop.description) newProp.description = prop.description;
       if (prop.defaultValue) newProp.value = prop.defaultValue.value;
-      else newProp.value = prop.type.name === 'string' ? '' : 0;
+      else newProp.value = '';
       break;
 
     case 'func':

From 47c1e559961b3f049abd50607ed470034b0844b6 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Wed, 3 Jun 2020 22:49:32 +0530
Subject: [PATCH 21/28] health playground

---
 src-docs/src/playground_routes.js       |  6 +++++
 src-docs/src/views/health/playground.js | 30 +++++++++++++++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 src-docs/src/views/health/playground.js

diff --git a/src-docs/src/playground_routes.js b/src-docs/src/playground_routes.js
index dbc75c65243..40d5cdf20ce 100644
--- a/src-docs/src/playground_routes.js
+++ b/src-docs/src/playground_routes.js
@@ -5,6 +5,7 @@ import accordionConfig from './views/accordion/playground';
 import avatarConfig from './views/avatar/playground';
 import beaconConfig from './views/beacon/playground';
 import calloutConfig from './views/call_out/playground';
+import healthConfig from './views/health/playground';
 
 export const childRoutes = [
   {
@@ -32,6 +33,11 @@ export const childRoutes = [
     component: () => playground(calloutConfig()),
     name: 'EuiCallOut',
   },
+  {
+    path: 'health',
+    component: () => playground(healthConfig()),
+    name: 'EuiHealth',
+  },
   {
     path: '*',
     component: () => <div>Not Found</div>,
diff --git a/src-docs/src/views/health/playground.js b/src-docs/src/views/health/playground.js
new file mode 100644
index 00000000000..11b9309ccc7
--- /dev/null
+++ b/src-docs/src/views/health/playground.js
@@ -0,0 +1,30 @@
+import { PropTypes } from 'react-view';
+import { EuiHealth } from '../../../../src/components/';
+import propUtilityForPlayground from '../../services/playground/props';
+
+export default () => {
+  const docgenInfo = Array.isArray(EuiHealth.__docgenInfo)
+    ? EuiHealth.__docgenInfo[0]
+    : EuiHealth.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.color = {
+    ...propsToUse.color,
+    type: PropTypes.String,
+    value: 'default',
+    placeholder: 'color',
+  };
+
+  return {
+    componentName: 'EuiHealth',
+    props: propsToUse,
+    scope: {
+      EuiHealth,
+    },
+    imports: {
+      '@elastic/eui': {
+        named: ['EuiHealth'],
+      },
+    },
+  };
+};

From 490dee6fb7d67eae7c8a47474611bcf5edce6365 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Wed, 3 Jun 2020 23:04:42 +0530
Subject: [PATCH 22/28] stat playground

---
 src-docs/src/playground_routes.js     |  6 ++++++
 src-docs/src/views/stat/playground.js | 26 ++++++++++++++++++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 src-docs/src/views/stat/playground.js

diff --git a/src-docs/src/playground_routes.js b/src-docs/src/playground_routes.js
index 40d5cdf20ce..ef1416626ab 100644
--- a/src-docs/src/playground_routes.js
+++ b/src-docs/src/playground_routes.js
@@ -6,6 +6,7 @@ import avatarConfig from './views/avatar/playground';
 import beaconConfig from './views/beacon/playground';
 import calloutConfig from './views/call_out/playground';
 import healthConfig from './views/health/playground';
+import statConfig from './views/stat/playground';
 
 export const childRoutes = [
   {
@@ -38,6 +39,11 @@ export const childRoutes = [
     component: () => playground(healthConfig()),
     name: 'EuiHealth',
   },
+  {
+    path: 'stat',
+    component: () => playground(statConfig()),
+    name: 'EuiStat',
+  },
   {
     path: '*',
     component: () => <div>Not Found</div>,
diff --git a/src-docs/src/views/stat/playground.js b/src-docs/src/views/stat/playground.js
new file mode 100644
index 00000000000..2acbc31d644
--- /dev/null
+++ b/src-docs/src/views/stat/playground.js
@@ -0,0 +1,26 @@
+import { PropTypes } from 'react-view';
+import { EuiStat } from '../../../../src/components/';
+import propUtilityForPlayground from '../../services/playground/props';
+
+export default () => {
+  const docgenInfo = Array.isArray(EuiStat.__docgenInfo)
+    ? EuiStat.__docgenInfo[0]
+    : EuiStat.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.description.value = 'description';
+  propsToUse.title.value = 'Title';
+
+  return {
+    componentName: 'EuiStat',
+    props: propsToUse,
+    scope: {
+      EuiStat,
+    },
+    imports: {
+      '@elastic/eui': {
+        named: ['EuiStat'],
+      },
+    },
+  };
+};

From 92f800a23c620dccc9d8533ffa6196df3586975c Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Wed, 3 Jun 2020 23:19:00 +0530
Subject: [PATCH 23/28] title playground

---
 src-docs/src/playground_routes.js      |  6 ++++++
 src-docs/src/views/title/playground.js | 29 ++++++++++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 src-docs/src/views/title/playground.js

diff --git a/src-docs/src/playground_routes.js b/src-docs/src/playground_routes.js
index ef1416626ab..e8834a2020a 100644
--- a/src-docs/src/playground_routes.js
+++ b/src-docs/src/playground_routes.js
@@ -7,6 +7,7 @@ import beaconConfig from './views/beacon/playground';
 import calloutConfig from './views/call_out/playground';
 import healthConfig from './views/health/playground';
 import statConfig from './views/stat/playground';
+import titleConfig from './views/title/playground';
 
 export const childRoutes = [
   {
@@ -44,6 +45,11 @@ export const childRoutes = [
     component: () => playground(statConfig()),
     name: 'EuiStat',
   },
+  {
+    path: 'title',
+    component: () => playground(titleConfig()),
+    name: 'EuiTitle',
+  },
   {
     path: '*',
     component: () => <div>Not Found</div>,
diff --git a/src-docs/src/views/title/playground.js b/src-docs/src/views/title/playground.js
new file mode 100644
index 00000000000..e06de33127d
--- /dev/null
+++ b/src-docs/src/views/title/playground.js
@@ -0,0 +1,29 @@
+import { PropTypes } from 'react-view';
+import { EuiTitle } from '../../../../src/components/';
+import propUtilityForPlayground from '../../services/playground/props';
+
+export default () => {
+  const docgenInfo = Array.isArray(EuiTitle.__docgenInfo)
+    ? EuiTitle.__docgenInfo[0]
+    : EuiTitle.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+  propsToUse.children = {
+    ...propsToUse.children,
+    type: PropTypes.ReactNode,
+    // eslint-disable-next-line quotes
+    value: `<h2>Text content</h2>`,
+  };
+
+  return {
+    componentName: 'EuiTitle',
+    props: propsToUse,
+    scope: {
+      EuiTitle,
+    },
+    imports: {
+      '@elastic/eui': {
+        named: ['EuiTitle'],
+      },
+    },
+  };
+};

From 4dc0aa27cd5847b052546ec9bc618c60159425bf Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Thu, 4 Jun 2020 02:34:59 +0530
Subject: [PATCH 24/28] added Labels to knobs

---
 src-docs/src/playground_routes.js         |  6 +++
 src-docs/src/services/playground/knobs.js | 57 +++++++++++++----------
 src-docs/src/views/image/playground.js    | 41 ++++++++++++++++
 3 files changed, 79 insertions(+), 25 deletions(-)
 create mode 100644 src-docs/src/views/image/playground.js

diff --git a/src-docs/src/playground_routes.js b/src-docs/src/playground_routes.js
index e8834a2020a..a1ecbe84f47 100644
--- a/src-docs/src/playground_routes.js
+++ b/src-docs/src/playground_routes.js
@@ -8,6 +8,7 @@ import calloutConfig from './views/call_out/playground';
 import healthConfig from './views/health/playground';
 import statConfig from './views/stat/playground';
 import titleConfig from './views/title/playground';
+import imageConfig from './views/image/playground';
 
 export const childRoutes = [
   {
@@ -35,6 +36,11 @@ export const childRoutes = [
     component: () => playground(calloutConfig()),
     name: 'EuiCallOut',
   },
+  {
+    path: 'image',
+    component: () => playground(imageConfig()),
+    name: 'EuiImage',
+  },
   {
     path: 'health',
     component: () => playground(healthConfig()),
diff --git a/src-docs/src/services/playground/knobs.js b/src-docs/src/services/playground/knobs.js
index 505e5a845d7..9dcf243dc24 100644
--- a/src-docs/src/services/playground/knobs.js
+++ b/src-docs/src/services/playground/knobs.js
@@ -10,16 +10,17 @@ import {
   EuiFlexItem,
   EuiSelect,
   EuiFieldNumber,
+  EuiToolTip,
 } from '../../../../src/components/';
 
-// const getTooltip = (description, type, name) => (
-//   <span>
-//     <p>
-//       <b>{name}</b>: <i>{type}</i>
-//     </p>
-//     <p>{description}</p>
-//   </span>
-// );
+const getTooltip = (description, type, name) => (
+  <span>
+    <p>
+      <b>{name}</b>: <i>{type}</i>
+    </p>
+    <p>{description}</p>
+  </span>
+);
 
 const Spacing = ({ children }) => {
   return (
@@ -30,15 +31,16 @@ const Spacing = ({ children }) => {
   );
 };
 
-// const Label = ({ children, tooltip }) => {
-//   return (
-//     <label>
-//       <StatefulTooltip accessibilityType="tooltip" content={tooltip}>
-//         <span>{children}</span>
-//       </StatefulTooltip>
-//     </label>
-//   );
-// };
+const Label = ({ children, tooltip }) => {
+  return (
+    <EuiToolTip position="top" content={tooltip}>
+      <>
+        <span>{children}</span>
+        <EuiSpacer size="s" />
+      </>
+    </EuiToolTip>
+  );
+};
 
 const Knob = ({
   name,
@@ -57,7 +59,7 @@ const Knob = ({
     case PropTypes.Ref:
       return (
         <Spacing>
-          {/* <Label tooltip={getTooltip(description, type, name)}>{name}</Label> */}
+          <Label tooltip={getTooltip(description, type, name)}>{name}</Label>
           <a
             href="https://reactjs.org/docs/refs-and-the-dom.html"
             target="_blank"
@@ -74,7 +76,7 @@ const Knob = ({
     case PropTypes.Number:
       return (
         <Spacing>
-          {/* <Label tooltip={getTooltip(description, type, name)}>{name}</Label> */}
+          <Label tooltip={getTooltip(description, type, name)}>{name}</Label>
           <EuiFieldNumber
             placeholder={placeholder}
             value={val ? val : undefined}
@@ -90,12 +92,16 @@ const Knob = ({
     case PropTypes.Date:
       return (
         <Spacing>
-          {/* <Label tooltip={getTooltip(description, type, name)}>{name}</Label> */}
+          <Label tooltip={getTooltip(description, type, name)}>{name}</Label>
 
           <EuiFieldText
             placeholder={placeholder}
             value={val ? val : undefined}
-            onChange={e => set(e.target.value)}
+            onChange={e => {
+              // if (isNaN(e.target.value))
+              set(e.target.value);
+              // else set(+e.target.value);
+            }}
             aria-label={description}
           />
 
@@ -135,14 +141,13 @@ const Knob = ({
 
         return (
           <Spacing>
+            <Label tooltip={getTooltip(description, type, name)}>{name}</Label>
+
             <EuiRadioGroup
               options={flattenedOptions}
               idSelected={valueKey}
               onChange={id => globalSet(id)}
               name={`Select ${name}`}
-              legend={{
-                children: <span> {`Select ${name}`}</span>,
-              }}
             />
             {error && <div>error {error}</div>}
           </Spacing>
@@ -155,6 +160,8 @@ const Knob = ({
 
         return (
           <Spacing>
+            <Label tooltip={getTooltip(description, type, name)}>{name}</Label>
+
             <EuiSelect
               id={name}
               options={flattenedOptions}
@@ -174,7 +181,7 @@ const Knob = ({
       // /*
       return (
         <Spacing>
-          {/* <Label tooltip={getTooltip(description, type, name)}>{name}</Label>  */}
+          <Label tooltip={getTooltip(description, type, name)}>{name}</Label>
           <EuiTextArea
             placeholder={placeholder}
             value={val ? val : ''}
diff --git a/src-docs/src/views/image/playground.js b/src-docs/src/views/image/playground.js
new file mode 100644
index 00000000000..8d9e3a35196
--- /dev/null
+++ b/src-docs/src/views/image/playground.js
@@ -0,0 +1,41 @@
+import { PropTypes } from 'react-view';
+import { EuiImage } from '../../../../src/components/';
+import propUtilityForPlayground from '../../services/playground/props';
+
+export default () => {
+  const docgenInfo = Array.isArray(EuiImage.__docgenInfo)
+    ? EuiImage.__docgenInfo[0]
+    : EuiImage.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.size = {
+    ...propsToUse.size,
+    type: PropTypes.Enum,
+    value: 'original',
+    options: {
+      original: 'original',
+      s: 's',
+      m: 'm',
+      l: 'l',
+      xl: 'xl',
+      fullWidth: 'fullWidth',
+    },
+    defaultValue: 'original',
+    placeholder: 'image size',
+  };
+  propsToUse.url.value = 'https://source.unsplash.com/100x100/?Nature';
+  propsToUse.alt.value = 'image_alt';
+
+  return {
+    componentName: 'EuiImage',
+    props: propsToUse,
+    scope: {
+      EuiImage,
+    },
+    imports: {
+      '@elastic/eui': {
+        named: ['EuiImage'],
+      },
+    },
+  };
+};

From f75784cd3122dca6e562934d097507fc4643687f Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Tue, 9 Jun 2020 01:32:00 +0530
Subject: [PATCH 25/28] updated mode to JSX

---
 src-docs/src/playground.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src-docs/src/playground.js b/src-docs/src/playground.js
index 87ddec617aa..73092a12b71 100644
--- a/src-docs/src/playground.js
+++ b/src-docs/src/playground.js
@@ -7,6 +7,8 @@ import {
   ActionButtons,
   Placeholder,
 } from 'react-view';
+import 'brace/mode/jsx';
+import 'brace/theme/github';
 
 import { EuiCodeEditor, EuiSpacer } from '../../src/components';
 import Knobs from './services/playground/knobs';
@@ -31,7 +33,7 @@ export default config => {
       <Knobs {...params.knobProps} />
       <EuiSpacer />
       <EuiCodeEditor
-        mode="javascript"
+        mode="jsx"
         theme="github"
         width="100%"
         value={params.editorProps.code}

From dd496090280de46591ba3f9587bfdcf153df0377 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Fri, 12 Jun 2020 01:13:23 +0530
Subject: [PATCH 26/28] Update props.js

---
 src-docs/src/services/playground/props.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src-docs/src/services/playground/props.js b/src-docs/src/services/playground/props.js
index da72d907bcc..3b113606b31 100644
--- a/src-docs/src/services/playground/props.js
+++ b/src-docs/src/services/playground/props.js
@@ -62,6 +62,7 @@ const getProp = (prop, propName) => {
       break;
 
     case 'node':
+    case 'element':
       newProp.type = PropTypes.ReactNode;
       newProp.placeholder = propName;
       if (prop.description) newProp.description = prop.description;

From c0986d249ad65ef28276604e10400c750ba19eb3 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Sat, 13 Jun 2020 22:54:25 +0530
Subject: [PATCH 27/28] used name with id to fix props with same label

---
 src-docs/src/services/playground/knobs.js | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src-docs/src/services/playground/knobs.js b/src-docs/src/services/playground/knobs.js
index 9dcf243dc24..0074646ba88 100644
--- a/src-docs/src/services/playground/knobs.js
+++ b/src-docs/src/services/playground/knobs.js
@@ -52,7 +52,7 @@ const Knob = ({
   options = {},
   description,
   placeholder,
-  enumName,
+  // enumName,
 }) => {
   const [val, set] = useValueDebounce(globalVal, globalSet);
   switch (type) {
@@ -128,14 +128,14 @@ const Knob = ({
       const optionsKeys = Object.keys(options);
       const numberOfOptions = optionsKeys.length;
 
-      const valueKey = val || defaultValue;
-      //   console.log('selectOptions', selectOptions);
-      //   console.log('valueKey', valueKey);
-      //   console.log('data', { description, type, name });
+      let valueKey = val || defaultValue;
+      if (valueKey && !valueKey.includes('__')) {
+        valueKey = `${valueKey}__${name}`;
+      }
 
       if (numberOfOptions < 6) {
         const flattenedOptions = optionsKeys.map(key => ({
-          id: key,
+          id: `${key}__${name}`,
           label: options[key],
         }));
 
@@ -146,7 +146,11 @@ const Knob = ({
             <EuiRadioGroup
               options={flattenedOptions}
               idSelected={valueKey}
-              onChange={id => globalSet(id)}
+              onChange={id => {
+                let val = id;
+                if (val.includes('__')) val = val.split('__')[0];
+                globalSet(val);
+              }}
               name={`Select ${name}`}
             />
             {error && <div>error {error}</div>}

From cd35da54ee255a23109909aa670590dba9b767b4 Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Mon, 15 Jun 2020 23:22:29 +0530
Subject: [PATCH 28/28] use ${key}__${name} only for radio

---
 src-docs/src/services/playground/knobs.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src-docs/src/services/playground/knobs.js b/src-docs/src/services/playground/knobs.js
index 0074646ba88..5b502e606e4 100644
--- a/src-docs/src/services/playground/knobs.js
+++ b/src-docs/src/services/playground/knobs.js
@@ -129,11 +129,11 @@ const Knob = ({
       const numberOfOptions = optionsKeys.length;
 
       let valueKey = val || defaultValue;
-      if (valueKey && !valueKey.includes('__')) {
-        valueKey = `${valueKey}__${name}`;
-      }
 
       if (numberOfOptions < 6) {
+        if (valueKey && !valueKey.includes('__')) {
+          valueKey = `${valueKey}__${name}`;
+        }
         const flattenedOptions = optionsKeys.map(key => ({
           id: `${key}__${name}`,
           label: options[key],
@@ -170,7 +170,9 @@ const Knob = ({
               id={name}
               options={flattenedOptions}
               value={valueKey}
-              onChange={e => globalSet(e.target.value)}
+              onChange={e => {
+                globalSet(e.target.value);
+              }}
               aria-label={`Select ${name}`}
             />
             {error && <div>error {error}</div>}