feat(full-page): add functionality to show components in full page mo…

…de (#658) If the fullPageOnly property is added to any `.docs.js` file, Gatsby will render a link to show the example in full page mode, similar to patternfly-next. BackgroundImage.docs.js Example: ``` export default { title: 'Background Image', components: { BackgroundImage }, examples: [SimpleBackgroundImage], fullPageOnly: true }; ``` affects: @patternfly/react-docs
patternfly · Sep 28, 2018 · 514ce42 · 514ce42
1 parent a579fba
commit 514ce42
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 15 deletions.
diff --git a/packages/patternfly-4/react-docs/src/components/componentDocs/componentDocs.js b/packages/patternfly-4/react-docs/src/components/componentDocs/componentDocs.js
@@ -15,7 +15,8 @@ const propTypes = {
   components: PropTypes.objectOf(PropTypes.func),
   enumValues: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.any)),
   rawExamples: PropTypes.array,
-  images: PropTypes.array
+  images: PropTypes.array,
+  fullPageOnly: PropTypes.bool
 };
 
 const defaultProps = {
@@ -24,10 +25,11 @@ const defaultProps = {
   components: {},
   enumValues: {},
   rawExamples: [],
-  images: []
+  images: [],
+  fullPageOnly: false
 };
 
-const ComponentDocs = ({ title, description, examples, components, enumValues, rawExamples, images }) => (
+const ComponentDocs = ({ title, description, examples, components, enumValues, fullPageOnly, rawExamples, images }) => (
   <Content>
     <Title size="3xl">{title}</Title>
     {Boolean(description) && <p className={css(styles.description)}>{description}</p>}
@@ -38,10 +40,12 @@ const ComponentDocs = ({ title, description, examples, components, enumValues, r
         return (
           <Example
             key={i}
-            raw={rawExample && rawExample.file}
-            images={images}
             title={ComponentExample.title}
             description={ComponentExample.description}
+            raw={rawExample && rawExample.file}
+            images={images}
+            fullPageOnly={fullPageOnly}
+            name={ComponentExample.name}
             {...(ComponentExample.getContainerProps ? ComponentExample.getContainerProps() : {})}
           >
             <ComponentExample />

diff --git a/packages/patternfly-4/react-docs/src/components/example/example.js b/packages/patternfly-4/react-docs/src/components/example/example.js
@@ -4,38 +4,62 @@ import styles from './example.styles';
 import PropTypes from 'prop-types';
 import { Title } from '@patternfly/react-core';
 import LiveDemo from './liveDemo';
+import Link from 'gatsby-link';
 
 const propTypes = {
   children: PropTypes.node.isRequired,
-  title: PropTypes.string.isRequired,
+  title: PropTypes.string,
   description: PropTypes.string,
   className: PropTypes.string,
+  fullPageOnly: PropTypes.bool,
+  name: PropTypes.string,
   raw: PropTypes.string,
   images: PropTypes.array
 };
 
 const defaultProps = {
   className: '',
   description: '',
+  fullPageOnly: false,
+  title: '',
+  name: '',
   raw: '',
   images: []
 };
 
 const LIVE_EXAMPLES = /true/i.test(process.env.LIVE_EXAMPLES);
 
-const Example = ({ children, title, className, description, raw, images, ...props }) => (
-  <div>
-    <Title size="lg">{title}</Title>
-    {Boolean(description) && <p className={css(styles.description)}>{description}</p>}
-    {LIVE_EXAMPLES ? (
-      <LiveDemo raw={raw.trim()} images={images} className={className} />
-    ) : (
+const Example = ({ children, title, className, description, name, fullPageOnly, raw, images, ...props }) => {
+  // Display full page link
+  if (fullPageOnly) {
+    const pathName = typeof window !== 'undefined' ? `${window.location.pathname}` : '';
+    const exampleName = name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+    const separator = pathName.endsWith('/') ? '' : '/';
+    const path = `${pathName}${separator}examples/${exampleName}`;
+    return (
+      <div className={css(className, styles.example)} {...props}>
+        This layout can only be accessed in&nbsp;
+        <Link target="_blank" to={path}>
+          full page mode
+        </Link>
+        .
+      </div>
+    );
+  }
+  return (
+    <div>
+      <Title size="lg">{title}</Title>
+      {Boolean(description) && <p className={css(styles.description)}>{description}</p>}
+      {LIVE_EXAMPLES ? (
+        <LiveDemo raw={raw.trim()} images={images} className={className} />
+      ) : (
         <div className={css(className, styles.example)} {...props}>
           {children}
         </div>
       )}
-  </div>
-);
+    </div>
+  );
+};
 
 Example.propTypes = propTypes;
 Example.defaultProps = defaultProps;