[Playground] EuiImage (#3806)

src-docs/src/views/image/image_example.js

@@ -5,6 +5,7 @@ import { renderToHtml } from '../../services';
 import { GuideSectionTypes } from '../../components';
 
 import { EuiCode, EuiImage } from '../../../../src/components';
+import imageConfig from './playground';
 
 import Image from './image';
 const imageSource = require('!!raw-loader!./image');
@@ -115,4 +116,5 @@ export const ImageExample = {
       snippet: imageSizesSnippet,
     },
   ],
+  playground: imageConfig,
 };

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';
+
+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,
+    options: {
+      original: 'original',
+      s: 's',
+      m: 'm',
+      l: 'l',
+      xl: 'xl',
+      fullWidth: 'fullWidth',
+    },
+    defaultValue: 'original',
+  };
+  propsToUse.url.value = 'https://source.unsplash.com/100x100/?Nature';
+  propsToUse.alt.value = 'image_alt';
+
+  return {
+    config: {
+      componentName: 'EuiImage',
+      props: propsToUse,
+      scope: {
+        EuiImage,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiImage'],
+        },
+      },
+    },
+  };
+};