diff --git a/src-docs/src/views/link/link_example.js b/src-docs/src/views/link/link_example.js index fd2d1daa761..62ca51cf845 100644 --- a/src-docs/src/views/link/link_example.js +++ b/src-docs/src/views/link/link_example.js @@ -6,6 +6,8 @@ import { GuideSectionTypes } from '../../components'; import { EuiCode, EuiLink } from '../../../../src/components'; +import linkConfig from './playground'; + import Link from './link'; import { LinkDisable } from './link_disable'; @@ -76,4 +78,5 @@ export const LinkExample = { demo: , }, ], + playground: linkConfig, }; diff --git a/src-docs/src/views/link/playground.js b/src-docs/src/views/link/playground.js new file mode 100644 index 00000000000..8aa286ecd55 --- /dev/null +++ b/src-docs/src/views/link/playground.js @@ -0,0 +1,70 @@ +import { PropTypes } from 'react-view'; +import { EuiLink } from '../../../../src/components/'; +import { propUtilityForPlayground } from '../../services/playground'; +import * as t from '@babel/types'; + +export default () => { + const docgenInfo = Array.isArray(EuiLink.__docgenInfo) + ? EuiLink.__docgenInfo[0] + : EuiLink.__docgenInfo; + const propsToUse = propUtilityForPlayground(docgenInfo.props); + + propsToUse.href = { + type: PropTypes.String, + value: 'http://www.elastic.co', + }; + propsToUse.target = { + type: PropTypes.String, + value: '_blank', + }; + + propsToUse.children = { + value: 'Link to our website', + type: PropTypes.String, + hidden: false, + }; + + propsToUse.onClick = { + ...propsToUse.onClick, + type: PropTypes.Custom, + value: undefined, + custom: { + ...propsToUse.onClick.custom, + use: 'switch', + label: 'Simulate', + }, + }; + + const setGhostBackground = { + color: 'ghost', + }; + + return { + setGhostBackground, + config: { + componentName: 'EuiLink', + props: propsToUse, + scope: { + EuiLink, + }, + imports: { + '@elastic/eui': { + named: ['EuiLink'], + }, + }, + customProps: { + onClick: { + generate: val => { + if (!val) return null; + const obj = t.arrowFunctionExpression( + [], + t.blockStatement([]), + false + ); + return obj; + }, + }, + }, + }, + }; +};