docs(Allowing each example to configure if it should display a live e…

…ditor): (#701) #699
patternfly · Oct 8, 2018 · 7675638 · 7675638
1 parent d290c60
commit 7675638
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 4 deletions.
diff --git a/packages/patternfly-4/react-core/src/layouts/Grid/examples/GridPlayground.js b/packages/patternfly-4/react-core/src/layouts/Grid/examples/GridPlayground.js
@@ -17,6 +17,7 @@ function createGridItem() {
 
 class GridPlayground extends React.Component {
   static title = 'Grid Playground';
+  static live = false;
 
   state = {
     gridItems: [createGridItem(), createGridItem(), createGridItem(), createGridItem()]

diff --git a/packages/patternfly-4/react-docs/src/components/componentDocs/componentDocs.js b/packages/patternfly-4/react-docs/src/components/componentDocs/componentDocs.js
@@ -49,6 +49,7 @@ class ComponentDocs extends React.PureComponent {
                 raw={rawExample && rawExample.file}
                 images={images}
                 fullPageOnly={fullPageOnly}
+                live={ComponentExample.live}
                 name={ComponentExample.name}
                 {...(ComponentExample.getContainerProps ? ComponentExample.getContainerProps() : {})}
               >

diff --git a/packages/patternfly-4/react-docs/src/components/example/example.js b/packages/patternfly-4/react-docs/src/components/example/example.js
@@ -14,7 +14,8 @@ const propTypes = {
   fullPageOnly: PropTypes.bool,
   name: PropTypes.string,
   raw: PropTypes.string,
-  images: PropTypes.array
+  images: PropTypes.array,
+  live: PropTypes.bool
 };
 
 const defaultProps = {
@@ -24,12 +25,13 @@ const defaultProps = {
   title: '',
   name: '',
   raw: '',
-  images: []
+  images: [],
+  live: true
 };
 
 const GATSBY_LIVE_EXAMPLES = process.env.GATSBY_LIVE_EXAMPLES === 'true';
 
-const Example = ({ children, title, className, description, name, fullPageOnly, raw, images, ...props }) => {
+const Example = ({ children, title, className, description, name, fullPageOnly, raw, images, live, ...props }) => {
   // Display full page link
   if (fullPageOnly) {
     const pathName = typeof window !== 'undefined' ? `${window.location.pathname}` : '';
@@ -50,7 +52,7 @@ const Example = ({ children, title, className, description, name, fullPageOnly,
     <div>
       <Title size="lg">{title}</Title>
       {Boolean(description) && <p className={css(styles.description)}>{description}</p>}
-      {GATSBY_LIVE_EXAMPLES ? (
+      {GATSBY_LIVE_EXAMPLES && live ? (
         <LiveDemo raw={raw.trim()} images={images} className={className} />
       ) : (
         <div className={css(className, styles.example)} {...props}>

diff --git a/packages/patternfly-4/react-docs/src/components/example/liveDemo.js b/packages/patternfly-4/react-docs/src/components/example/liveDemo.js
@@ -25,6 +25,7 @@ const transformCode = code => {
     // LiveEditor doesn't work properly with these so need to remove
     code = code.replace(/^\s*import.*$/gm, '');
     code = code.replace(/^\s*export default class/gm, 'class');
+    code = code.replace(/^\s*\/\/.*$/gm, '');
     code = code.replace(/extends Component/gm, 'extends React.Component');
     code = code.replace(/^\s*export.*$/gm, '');
     code = code.replace(/^\s*static.*$/gm, '');