[Playground] EuiBadge, EuiNotificationBadge, EuiBetaBadge

src-docs/src/routes.js

@@ -263,7 +263,9 @@ const createExample = (example, customTitle) => {
 
   let playgroundComponent;
   if (playground) {
-    playgroundComponent = playgroundCreator(playground());
+    if (Array.isArray(playground)) {
+      playgroundComponent = playground.map(elm => playgroundCreator(elm()));
+    } else playgroundComponent = playgroundCreator(playground());
   }
 
   const component = () => (

src-docs/src/views/badge/badge_example.js

@@ -14,6 +14,11 @@ import {
   EuiBadgeGroup,
   EuiCallOut,
 } from '../../../../src/components';
+import {
+  badgeConfig,
+  betaBadgeConfig,
+  notificationBadgeConfig,
+} from './playground';
 
 import Badge from './badge';
 
@@ -317,4 +322,6 @@ export const BadgeExample = {
       demo: <NotificationBadge />,
     },
   ],
+  playground: [badgeConfig, betaBadgeConfig, notificationBadgeConfig],
+  // playground: badgeConfig,
 };

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

@@ -0,0 +1,118 @@
+import { PropTypes } from 'react-view';
+import {
+  EuiBadge,
+  EuiNotificationBadge,
+  EuiBetaBadge,
+} from '../../../../src/components/';
+import { propUtilityForPlayground } from '../../services/playground';
+
+export const badgeConfig = () => {
+  const docgenInfo = Array.isArray(EuiBadge.__docgenInfo)
+    ? EuiBadge.__docgenInfo[0]
+    : EuiBadge.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.onClick = {
+    ...propsToUse.onClick,
+    value: "() => console.log('Clicked')",
+  };
+
+  propsToUse.children = {
+    type: PropTypes.String,
+    value: 'badge content',
+    hidden: true,
+  };
+
+  propsToUse.iconType = {
+    ...propsToUse.iconType,
+    type: PropTypes.String,
+  };
+
+  propsToUse.color = {
+    ...propsToUse.color,
+    value: undefined,
+    type: PropTypes.String,
+    custom: {
+      ...propsToUse.color.custom,
+      // validator: val => {
+      //   const regex = /^#(?:[0-9a-fA-F]{3}){1,2}$/g;
+      //   return val.match(regex);
+      // },
+    },
+  };
+
+  return {
+    config: {
+      componentName: 'EuiBadge',
+      props: propsToUse,
+      scope: {
+        EuiBadge,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiBadge'],
+        },
+      },
+    },
+  };
+};
+
+export const betaBadgeConfig = () => {
+  const docgenInfo = Array.isArray(EuiBetaBadge.__docgenInfo)
+    ? EuiBetaBadge.__docgenInfo[0]
+    : EuiBetaBadge.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.label = {
+    ...propsToUse.label,
+    type: PropTypes.String,
+    value: 'content',
+  };
+  propsToUse.iconType = {
+    ...propsToUse.iconType,
+    type: PropTypes.String,
+  };
+
+  return {
+    config: {
+      componentName: 'EuiBetaBadge',
+      props: propsToUse,
+      scope: {
+        EuiBetaBadge,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiBetaBadge'],
+        },
+      },
+    },
+  };
+};
+
+export const notificationBadgeConfig = () => {
+  const docgenInfo = Array.isArray(EuiNotificationBadge.__docgenInfo)
+    ? EuiNotificationBadge.__docgenInfo[0]
+    : EuiNotificationBadge.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.children = {
+    type: PropTypes.String,
+    value: 'badge content',
+    hidden: true,
+  };
+
+  return {
+    config: {
+      componentName: 'EuiNotificationBadge',
+      props: propsToUse,
+      scope: {
+        EuiNotificationBadge,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiNotificationBadge'],
+        },
+      },
+    },
+  };
+};