Skip to content

Commit

Permalink
[Playground] EuiFacet (#3846)
Browse files Browse the repository at this point in the history
  • Loading branch information
anishagg17 authored and nyurik committed Aug 18, 2020
1 parent e4d9182 commit 187344d
Show file tree
Hide file tree
Showing 2 changed files with 101 additions and 0 deletions.
3 changes: 3 additions & 0 deletions src-docs/src/views/facet/facet_example.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import {
EuiCode,
} from '../../../../src/components';

import { facetButtonConfig, facetLayoutConfig } from './playground';

import Facet from './facet';
const facetSource = require('!!raw-loader!./facet');
const facetHtml = renderToHtml(Facet);
Expand Down Expand Up @@ -98,4 +100,5 @@ export const FacetExample = {
],
},
],
playground: [facetButtonConfig, facetLayoutConfig],
};
98 changes: 98 additions & 0 deletions src-docs/src/views/facet/playground.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
import { PropTypes } from 'react-view';
import { EuiFacetButton, EuiFacetGroup } from '../../../../src/components/';
import { propUtilityForPlayground } from '../../services/playground';
import * as t from '@babel/types';

export const facetButtonConfig = () => {
const docgenInfo = Array.isArray(EuiFacetButton.__docgenInfo)
? EuiFacetButton.__docgenInfo[0]
: EuiFacetButton.__docgenInfo;
const propsToUse = propUtilityForPlayground(docgenInfo.props);

propsToUse.onClick = {
...propsToUse.onClick,
type: PropTypes.Custom,
value: undefined,
custom: {
...propsToUse.onClick.custom,
use: 'switch',
label: 'Simulate',
},
};

propsToUse.children = {
type: PropTypes.String,
value: 'Facet content',
hidden: false,
};

propsToUse.quantity = {
...propsToUse.quantity,
value: 10,
};

return {
config: {
componentName: 'EuiFacetButton',
props: propsToUse,
scope: {
EuiFacetButton,
},
imports: {
'@elastic/eui': {
named: ['EuiFacetButton'],
},
},
customProps: {
onClick: {
generate: val => {
if (!val) return null;
const obj = t.arrowFunctionExpression(
[],
t.blockStatement([]),
false
);
return obj;
},
},
},
},
};
};

export const facetLayoutConfig = () => {
const docgenInfo = Array.isArray(EuiFacetGroup.__docgenInfo)
? EuiFacetGroup.__docgenInfo[0]
: EuiFacetGroup.__docgenInfo;
const propsToUse = propUtilityForPlayground(docgenInfo.props);

propsToUse.children = {
type: PropTypes.ReactNode,
value: `<EuiFacetButton quantity={6}>
Facet one
</EuiFacetButton>
<EuiFacetButton quantity={10}>
Facet two
</EuiFacetButton>
<EuiFacetButton quantity={25}>
Facet three
</EuiFacetButton>`,
hidden: false,
};

return {
config: {
componentName: 'EuiFacetGroup',
props: propsToUse,
scope: {
EuiFacetButton,
EuiFacetGroup,
},
imports: {
'@elastic/eui': {
named: ['EuiFacetButton', 'EuiFacetGroup'],
},
},
},
};
};

0 comments on commit 187344d

Please sign in to comment.