From e4acc983b46142b2fa5c272f1f750b5e1c1034c5 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Wed, 5 Aug 2020 00:06:56 +0530 Subject: [PATCH 1/4] [Playground] EuiSpacer, EuiHorizontalRule --- .../src/services/playground/playground.js | 12 ++++++--- .../horizontal_rule_example.js | 3 +++ .../src/views/horizontal_rule/playground.js | 24 ++++++++++++++++++ src-docs/src/views/spacer/playground.js | 25 +++++++++++++++++++ src-docs/src/views/spacer/spacer_example.js | 3 +++ 5 files changed, 63 insertions(+), 4 deletions(-) create mode 100644 src-docs/src/views/horizontal_rule/playground.js create mode 100644 src-docs/src/views/spacer/playground.js diff --git a/src-docs/src/services/playground/playground.js b/src-docs/src/services/playground/playground.js index 7c23dd19114..ea5857e73c9 100644 --- a/src-docs/src/services/playground/playground.js +++ b/src-docs/src/services/playground/playground.js @@ -6,7 +6,7 @@ import { useView, Compiler, Placeholder } from 'react-view'; import { EuiSpacer, EuiTitle, EuiCodeBlock } from '../../../../src/components'; import Knobs from './knobs'; -export default ({ config, setGhostBackground }) => { +export default ({ config, setGhostBackground, defaultClasses = [] }) => { const getSnippet = code => { let regex = /return \(([\S\s]*?)(;)$/gm; let newCode = code.match(regex); @@ -45,9 +45,13 @@ export default ({ config, setGhostBackground }) => { } }, [params.knobProps]); - const compilerClasses = classNames('playgroundCompiler', { - playgroundCompiler__ghostBackground: isGhost, - }); + const compilerClasses = classNames( + 'playgroundCompiler', + { + playgroundCompiler__ghostBackground: isGhost, + }, + ...defaultClasses + ); return ( diff --git a/src-docs/src/views/horizontal_rule/horizontal_rule_example.js b/src-docs/src/views/horizontal_rule/horizontal_rule_example.js index abc1e03be5b..6bfcf86cd85 100644 --- a/src-docs/src/views/horizontal_rule/horizontal_rule_example.js +++ b/src-docs/src/views/horizontal_rule/horizontal_rule_example.js @@ -6,6 +6,8 @@ import { GuideSectionTypes } from '../../components'; import { EuiHorizontalRule } from '../../../../src/components'; +import { horizontalRuleConfig } from './playground'; + import HorizontalRule from './horizontal_rule'; const horizontalRuleSource = require('!!raw-loader!./horizontal_rule'); const horizontalRuleHtml = renderToHtml(HorizontalRule); @@ -64,4 +66,5 @@ export const HorizontalRuleExample = { demo: , }, ], + playground: horizontalRuleConfig, }; diff --git a/src-docs/src/views/horizontal_rule/playground.js b/src-docs/src/views/horizontal_rule/playground.js new file mode 100644 index 00000000000..2c43bdb56f8 --- /dev/null +++ b/src-docs/src/views/horizontal_rule/playground.js @@ -0,0 +1,24 @@ +import { EuiHorizontalRule } from '../../../../src/components/'; +import { propUtilityForPlayground } from '../../services/playground'; + +export const horizontalRuleConfig = () => { + const docgenInfo = Array.isArray(EuiHorizontalRule.__docgenInfo) + ? EuiHorizontalRule.__docgenInfo[0] + : EuiHorizontalRule.__docgenInfo; + const propsToUse = propUtilityForPlayground(docgenInfo.props); + + return { + config: { + componentName: 'EuiHorizontalRule', + props: propsToUse, + scope: { + EuiHorizontalRule, + }, + imports: { + '@elastic/eui': { + named: ['EuiHorizontalRule'], + }, + }, + }, + }; +}; diff --git a/src-docs/src/views/spacer/playground.js b/src-docs/src/views/spacer/playground.js new file mode 100644 index 00000000000..6cf8fda6f1f --- /dev/null +++ b/src-docs/src/views/spacer/playground.js @@ -0,0 +1,25 @@ +import { EuiSpacer } from '../../../../src/components/'; +import { propUtilityForPlayground } from '../../services/playground'; + +export const spacerConfig = () => { + const docgenInfo = Array.isArray(EuiSpacer.__docgenInfo) + ? EuiSpacer.__docgenInfo[0] + : EuiSpacer.__docgenInfo; + const propsToUse = propUtilityForPlayground(docgenInfo.props); + + return { + config: { + componentName: 'EuiSpacer', + props: propsToUse, + scope: { + EuiSpacer, + }, + imports: { + '@elastic/eui': { + named: ['EuiSpacer'], + }, + }, + }, + defaultClasses: ['guideDemo__highlightSpacer'], + }; +}; diff --git a/src-docs/src/views/spacer/spacer_example.js b/src-docs/src/views/spacer/spacer_example.js index 46297dbebb3..22d225209e9 100644 --- a/src-docs/src/views/spacer/spacer_example.js +++ b/src-docs/src/views/spacer/spacer_example.js @@ -7,6 +7,8 @@ import { GuideSectionTypes } from '../../components'; import { EuiCode, EuiSpacer } from '../../../../src/components'; +import { spacerConfig } from './playground'; + import Spacer from './spacer'; const spacerSource = require('!!raw-loader!./spacer'); const spacerHtml = renderToHtml(Spacer); @@ -48,4 +50,5 @@ export const SpacerExample = { ), }, ], + playground: spacerConfig, }; From da40363c6cdef597eec9e13d93420c29820d6423 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Thu, 6 Aug 2020 20:37:16 +0530 Subject: [PATCH 2/4] Update src-docs/src/services/playground/playground.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/services/playground/playground.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/services/playground/playground.js b/src-docs/src/services/playground/playground.js index ea5857e73c9..f229b6b263b 100644 --- a/src-docs/src/services/playground/playground.js +++ b/src-docs/src/services/playground/playground.js @@ -6,7 +6,7 @@ import { useView, Compiler, Placeholder } from 'react-view'; import { EuiSpacer, EuiTitle, EuiCodeBlock } from '../../../../src/components'; import Knobs from './knobs'; -export default ({ config, setGhostBackground, defaultClasses = [] }) => { +export default ({ config, setGhostBackground, playgroundClassName }) => { const getSnippet = code => { let regex = /return \(([\S\s]*?)(;)$/gm; let newCode = code.match(regex); From 06ad8d58330ff20f403023a75ba0799de022b4dc Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Thu, 6 Aug 2020 20:38:17 +0530 Subject: [PATCH 3/4] Update playground.js --- src-docs/src/services/playground/playground.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/services/playground/playground.js b/src-docs/src/services/playground/playground.js index f229b6b263b..72882d5d8c9 100644 --- a/src-docs/src/services/playground/playground.js +++ b/src-docs/src/services/playground/playground.js @@ -50,7 +50,7 @@ export default ({ config, setGhostBackground, playgroundClassName }) => { { playgroundCompiler__ghostBackground: isGhost, }, - ...defaultClasses + playgroundClassName ); return ( From 04c16cbe12b8906fe0f9043cd650f5301e30f9b7 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Thu, 6 Aug 2020 20:39:09 +0530 Subject: [PATCH 4/4] Update playground.js --- src-docs/src/views/spacer/playground.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/spacer/playground.js b/src-docs/src/views/spacer/playground.js index 6cf8fda6f1f..48ba4c2ce67 100644 --- a/src-docs/src/views/spacer/playground.js +++ b/src-docs/src/views/spacer/playground.js @@ -20,6 +20,6 @@ export const spacerConfig = () => { }, }, }, - defaultClasses: ['guideDemo__highlightSpacer'], + playgroundClassName: 'guideDemo__highlightSpacer', }; };