props/page_header

src-docs/src/services/playground/index.js

@@ -6,3 +6,4 @@ export { iconValidator } from './iconValidator';
 export { createOptionalEnum } from './createOptionalEnum';
 export { dummyFunction } from './dummyFunction';
 export { simulateFunction } from './simulateFunction';
+export { generateAst, generateCustomProps } from './utils';

src-docs/src/services/playground/knobs.js

@@ -241,11 +241,11 @@ const Knob = ({
                 <EuiSwitch
                   id={name}
                   label={custom.label || ''}
-                  checked={typeof val !== 'undefined' && val}
+                  checked={typeof val !== 'undefined' && Boolean(val)}
                   onChange={(e) => {
                     const value = e.target.checked;
 
-                    set(value ? value : undefined);
+                    set(value ? custom.value ?? e.target.checked : undefined);
                   }}
                   compressed
                 />

src-docs/src/services/playground/utils.js

@@ -0,0 +1,16 @@
+import template from '@babel/template';
+
+export const generateAst = (value) => {
+  return template.ast(String(value), { plugins: ['jsx'] }).expression;
+};
+
+export const generateCustomProps = (props) => {
+  return props.reduce((obj, item) => {
+    return {
+      ...obj,
+      [item]: {
+        generate: generateAst,
+      },
+    };
+  }, {});
+};

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

@@ -2,27 +2,28 @@
 
 import React from 'react';
 import { PropTypes } from 'react-view';
-import { EuiPageHeader, EuiButton, EuiText } from '../../../../src/components/';
+import { EuiPageHeader, EuiButton } from '../../../../src/components/';
 import {
   propUtilityForPlayground,
   iconValidator,
+  simulateFunction,
+  generateCustomProps,
 } from '../../services/playground';
 
-// HELP: Can we get a "simulate" toggle and pass ReactNodes?
-const tabs = [
+const tabs = `[
   {
     label: 'Tab 1',
     isSelected: true,
   },
   {
     label: 'Tab 2',
   },
-];
+]`;
 
-const rightSideContent = [
+const rightSideContent = `[
   <EuiButton fill>Button 1</EuiButton>,
   <EuiButton>Button 2</EuiButton>,
-];
+]`;
 
 export default () => {
   const docgenInfo = Array.isArray(EuiPageHeader.__docgenInfo)
@@ -38,16 +39,30 @@ export default () => {
     value: 'Page title',
   };
 
+  propsToUse.leftSideContent = {
+    ...propsToUse.leftSideContent,
+    type: PropTypes.String,
+  };
+
   propsToUse.description = {
     ...propsToUse.description,
     value: 'Example of a description.',
     type: PropTypes.String,
   };
 
-  propsToUse.rightSideContent = {
+  propsToUse.rightSideContent = simulateFunction({
     ...propsToUse.rightSideContent,
-    type: PropTypes.Array,
-  };
+    custom: {
+      value: rightSideContent,
+    },
+  });
+
+  propsToUse.tabs = simulateFunction({
+    ...propsToUse.tabs,
+    custom: {
+      value: tabs,
+    },
+  });
 
   propsToUse.children = {
     type: PropTypes.ReactNode,
@@ -60,13 +75,14 @@ export default () => {
       props: propsToUse,
       scope: {
         EuiPageHeader,
-        EuiText,
+        EuiButton,
       },
       imports: {
         '@elastic/eui': {
-          named: ['EuiPageHeader', 'EuiText'],
+          named: ['EuiPageHeader', 'EuiButton'],
         },
       },
+      customProps: generateCustomProps(['rightSideContent', 'tabs']),
     },
   };
 };