diff --git a/src-docs/src/views/empty_prompt/empty_prompt_example.js b/src-docs/src/views/empty_prompt/empty_prompt_example.js index 83e760da1511..ad8b35cf2d85 100644 --- a/src-docs/src/views/empty_prompt/empty_prompt_example.js +++ b/src-docs/src/views/empty_prompt/empty_prompt_example.js @@ -6,6 +6,8 @@ import { GuideSectionTypes } from '../../components'; import { EuiCode, EuiEmptyPrompt } from '../../../../src/components'; +import emptyPromptConfig from './playground'; + import EmptyPrompt from './empty_prompt'; const emptyPromptSource = require('!!raw-loader!./empty_prompt'); const emptyPromptHtml = renderToHtml(EmptyPrompt); @@ -107,4 +109,5 @@ export const EmptyPromptExample = { snippet: simpleSnippet, }, ], + playground: emptyPromptConfig, }; diff --git a/src-docs/src/views/empty_prompt/playground.js b/src-docs/src/views/empty_prompt/playground.js new file mode 100644 index 000000000000..8a707f937631 --- /dev/null +++ b/src-docs/src/views/empty_prompt/playground.js @@ -0,0 +1,59 @@ +import { PropTypes } from 'react-view'; +import { EuiEmptyPrompt, EuiButton } from '../../../../src/components/'; +import { + propUtilityForPlayground, + iconValidator, +} from '../../services/playground'; + +export default () => { + const docgenInfo = Array.isArray(EuiEmptyPrompt.__docgenInfo) + ? EuiEmptyPrompt.__docgenInfo[0] + : EuiEmptyPrompt.__docgenInfo; + const propsToUse = propUtilityForPlayground(docgenInfo.props); + + propsToUse.title = { + ...propsToUse.title, + value: '<>You have no spice', + type: PropTypes.ReactNode, + }; + + propsToUse.iconColor = { + ...propsToUse.iconColor, + type: PropTypes.Enum, + defaultValue: 'subdued', + options: { + default: 'default', + subdued: 'subdued', + secondary: 'secondary', + accent: 'accent', + danger: 'danger', + warning: 'warning', + ghost: 'ghost', + }, + }; + + propsToUse.actions.type = PropTypes.String; + propsToUse.body.type = PropTypes.String; + propsToUse.body.value = `Navigators use massive amounts of spice to gain a limited form of + prescience. This allows them to safely navigate interstellar space, + enabling trade and travel throughout the galaxy. + `; + + propsToUse.iconType = iconValidator(propsToUse.iconType); + + return { + config: { + componentName: 'EuiEmptyPrompt', + props: propsToUse, + scope: { + EuiEmptyPrompt, + EuiButton, + }, + imports: { + '@elastic/eui': { + named: ['EuiEmptyPrompt', 'EuiButton'], + }, + }, + }, + }; +};