[Playground] EuiAspectRatio (#3808)

* [Playground] EuiAspectRatio

* children node made visible

src-docs/src/views/aspect_ratio/aspect_ratio_example.js

@@ -9,6 +9,7 @@ import {
   EuiAspectRatio,
   EuiSpacer,
 } from '../../../../src/components';
+import aspectRatioConfig from './playground';
 
 import AspectRatio from './aspect_ratio';
 const aspectRatioSource = require('!!raw-loader!./aspect_ratio');
@@ -58,4 +59,5 @@ export const AspectRatioExample = {
       snippet: aspectRatioSnippet,
     },
   ],
+  playground: aspectRatioConfig,
 };

src-docs/src/views/aspect_ratio/playground.js

@@ -0,0 +1,43 @@
+import { PropTypes } from 'react-view';
+import { EuiAspectRatio } from '../../../../src/components/';
+import { propUtilityForPlayground } from '../../services/playground';
+
+export default () => {
+  const docgenInfo = Array.isArray(EuiAspectRatio.__docgenInfo)
+    ? EuiAspectRatio.__docgenInfo[0]
+    : EuiAspectRatio.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.height.value = 9;
+  propsToUse.width.value = 16;
+
+  propsToUse.children = {
+    value: `<iframe
+    title="Elastic is a search company"
+    width="560"
+    height="315"
+    src="https://www.youtube.com/embed/yJarWSLRM24"
+    frameBorder="0"
+    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+    allowFullScreen
+  />`,
+    type: PropTypes.ReactNode,
+    description: 'Visible label.',
+    hidden: false,
+  };
+
+  return {
+    config: {
+      componentName: 'EuiAspectRatio',
+      props: propsToUse,
+      scope: {
+        EuiAspectRatio,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiAspectRatio'],
+        },
+      },
+    },
+  };
+};