@patternfly/documentation-framework 1.2.6 → 1.2.9

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.2.9 (2022-08-29)
+
+
+### Bug Fixes
+
+* **example:** increase code editor button tooltip size, other cleanup ([#3162](https://github.com/patternfly/patternfly-org/issues/3162)) ([fab30f5](https://github.com/patternfly/patternfly-org/commit/fab30f5b94b648605fd9efb980fc6eea2e772a79))
+
+
+
+
+
+## 1.2.8 (2022-08-26)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
+## 1.2.7 (2022-08-24)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
 ## 1.2.6 (2022-08-23)
 
 **Note:** Version bump only for package @patternfly/documentation-framework

package/app.js

@@ -38,12 +38,13 @@ const AppRoute = ({ child, katacodaLayout, title, path }) => {
 
 const SideNavRouter = () => {
   const pathname = useLocation().pathname.replace(process.env.pathPrefix, '');
+  const componentsData = process?.env?.componentsData;
   const navOpen = !routes[pathname] || !routes[pathname].katacodaLayout;
   return (
     <SideNavLayout groupedRoutes={groupedRoutes} navOpen={navOpen} >
       <Router id="ws-page-content-router">
         {Object.entries(routes)
-          .map(([path, { Component, title, sources, katacodaLayout }]) => Component
+          .map(([path, { Component, title, sources, katacodaLayout, id }]) => Component
             ? <AppRoute
                 key={path}
                 path={path}
@@ -60,6 +61,8 @@ const SideNavRouter = () => {
                     path={path}
                     title={title}
                     sources={sources}
+                    id={id}
+                    componentsData={componentsData}
                   />
                 }
                 katacodaLayout={katacodaLayout}

package/components/example/example.css

@@ -1,3 +1,7 @@
+:root {
+  --ws-code-editor--tooltip--MaxWidth: 16ch;
+}
+
 .ws-example {
   margin-top: var(--pf-global--spacer--lg);
   margin-bottom: var(--pf-global--spacer--lg);
@@ -128,4 +132,4 @@
 
 .pf-theme-dark .ws-theme-switch-full-page::before {
   background-color: var(--pf-global--BackgroundColor--300);
-}
+}

package/components/example/exampleToolbar.js

@@ -42,16 +42,6 @@ export const ExampleToolbar = ({
   const [isEditorOpen, setIsEditorOpen] = React.useState(false);
   const [isCopied, setCopied] = React.useState(false);
 
-  const copyCode = () => {
-    copy(code);
-
-    setCopied(true);
-    // Reset isCopied after Tooltip fades out
-    setTimeout(() => {
-      setCopied(false);
-    }, 2500);
-  };
-
   const copyLabel = 'Copy code to clipboard';
   const languageLabel = `Toggle ${lang.toUpperCase()} code`;
   const codesandboxLabel = 'Open example in CodeSandbox';
@@ -66,6 +56,22 @@ export const ExampleToolbar = ({
   const convertAriaLabel = `Convert ${exampleTitle} example from Typescript to JavaScript`;
   const undoAllAriaLabel = `Undo all changes to ${exampleTitle}`;
 
+  const editorControlProps = {
+    maxWidth: 'var(--ws-code-editor--tooltip--MaxWidth)',
+    className: "ws-code-editor-control",
+    exitDelay: 300
+  };
+
+  const copyCode = () => {
+    copy(code);
+
+    setCopied(true);
+    // Reset isCopied after Tooltip fades out
+    setTimeout(() => {
+      setCopied(false);
+    }, 2500);
+  };
+
   const customControls = (
     <React.Fragment>
       <CodeEditorControl
@@ -83,38 +89,37 @@ export const ExampleToolbar = ({
         aria-label={languageAriaLabel}
         toolTipText={languageLabel}
         aria-expanded={isEditorOpen}
-        className="ws-code-editor-control"
+        {...editorControlProps}
       />
       <Tooltip
         trigger="mouseenter"
         content={<div>{isCopied ? 'Code copied' : copyLabel}</div>}
-        exitDelay={isCopied ? 1600 : 300}
-        entryDelay={300}
-        maxWidth="100px"
-        position="top"
+        {...(isCopied && {exitDelay: 1600})}
+        maxWidth={editorControlProps.maxWidth}
       >
-        <Button onClick={() => {
-          copyCode();
-          trackEvent('code_editor_control_click', 'click_event', 'COPY_CODE');
-        }} variant="control" aria-label={copyAriaLabel} className="ws-code-editor-control">
+        <Button
+          onClick={() => {
+            copyCode();
+            trackEvent('code_editor_control_click', 'click_event', 'COPY_CODE');
+          }}
+          variant="control"
+          aria-label={copyAriaLabel}
+          className={editorControlProps.className}
+        >
           <CopyIcon />
         </Button>
       </Tooltip>
       {codeBoxParams &&
-        <Tooltip
-          trigger="mouseenter"
-          content={codesandboxLabel}
-          exitDelay={300}
-          entryDelay={300}
-          maxWidth="100px"
-          position="top"
+        <Form
+          aria-label={`${codesandboxAriaLabel} form` }
+          action="https://codesandbox.io/api/v1/sandboxes/define"
+          method="POST"
+          target="_blank"
+          style={{ display: "inline-block" }}
         >
-          <Form
-            aria-label={`${codesandboxAriaLabel} form` }
-            action="https://codesandbox.io/api/v1/sandboxes/define"
-            method="POST"
-            target="_blank"
-            style={{ display: "inline-block" }}
+          <Tooltip
+            content={codesandboxLabel}
+            maxWidth={editorControlProps.maxWidth}
           >
             <Button
               aria-label={codesandboxAriaLabel}
@@ -123,13 +128,13 @@ export const ExampleToolbar = ({
               onClick={() => {
                 trackEvent('code_editor_control_click', 'click_event', 'CODESANDBOX_LINK');
               }}
-              className="ws-code-editor-control"
+              className={editorControlProps.className}
             >
-              <input type="hidden" name="parameters" value={codeBoxParams} />
               <CodepenIcon />
             </Button>
-          </Form>
-        </Tooltip>
+          </Tooltip>
+          <input type="hidden" name="parameters" value={codeBoxParams} />
+        </Form>
       }
       {fullscreenLink && 
         <CodeEditorControl
@@ -143,7 +148,7 @@ export const ExampleToolbar = ({
           onClick={() => {
             trackEvent('code_editor_control_click', 'click_event', 'FULLSCREEN_LINK');
           }}
-          className="ws-code-editor-control"
+          {...editorControlProps}
         />
       }
       {isEditorOpen && lang === 'ts' &&
@@ -159,7 +164,7 @@ export const ExampleToolbar = ({
             setCode(convertToJSX(code).code);
             trackEvent('code_editor_control_click', 'click_event', 'TS_TO_JS');
           }}
-          className="ws-code-editor-control"
+          {...editorControlProps}
         />
       }
       {code !== originalCode &&
@@ -171,7 +176,7 @@ export const ExampleToolbar = ({
             setCode(originalCode);
             trackEvent('code_editor_control_click', 'click_event', 'RESET_CODE');
           }}
-          className="ws-code-editor-control"
+          {...editorControlProps}
         />
       }
     </React.Fragment>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "1.2.6",
+  "version": "1.2.9",
   "author": "Red Hat",
   "license": "MIT",
   "private": false,
@@ -84,5 +84,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "6350d4fcf869c7f81c4189ba53b65cdf2c4f1e28"
+  "gitHead": "d57187e286ba282527a77a189f47319f0fc3afd2"
 }

package/routes.js

@@ -93,14 +93,6 @@ Object.entries(groupedRoutes)
       pageData.sources.forEach(({ slug }) => {
         delete routes[slug];
       });
-      // Add design guidelines if doesn't exist
-      if (
-        ['components', 'charts', 'layouts', 'demos'].includes(section) &&
-        !pageData.sources.map(({ source }) => source).includes('design-guidelines') &&
-        process.env.hasDesignGuidelines
-      ) {
-        pageData.sources.push(getDefaultDesignGuidelines(pageData));
-      }
       // Sort sources for tabs
       pageData.sources = pageData.sources.sort(sortSources);
       // Add grouped route

package/scripts/webpack/webpack.base.config.js

@@ -14,6 +14,7 @@ module.exports = (_env, argv) => {
     hasVersionSwitcher = false,
     hasDesignGuidelines = false,
     hasDarkThemeSwitcher = false,
+    componentsData = {},
     sideNavItems = [],
     topNavItems = [],
     includePaths = []
@@ -139,6 +140,7 @@ module.exports = (_env, argv) => {
         'process.env.hasVersionSwitcher': JSON.stringify(hasVersionSwitcher),
         'process.env.hasDesignGuidelines': JSON.stringify(hasDesignGuidelines),
         'process.env.hasDarkThemeSwitcher': JSON.stringify(hasDarkThemeSwitcher),
+        'process.env.componentsData': JSON.stringify(componentsData),
         'process.env.sideNavItems': JSON.stringify(sideNavItems),
         'process.env.topNavItems': JSON.stringify(topNavItems),
         'process.env.prnum': JSON.stringify(process.env.CIRCLE_PR_NUMBER || process.env.PR_NUMBER || ''),

package/templates/mdx.js

@@ -6,6 +6,7 @@ import { Router, useLocation } from '@reach/router';
 import { CSSVariables, PropsTable, TableOfContents, Link, AutoLinkHeader, InlineAlert } from '../components';
 import { capitalize, getTitle, slugger, trackEvent } from '../helpers';
 import './mdx.css';
+import { convertToReactComponent } from '@patternfly/ast-helpers';
 
 const MDXChildTemplate = ({
   Component,
@@ -116,13 +117,26 @@ const MDXChildTemplate = ({
 export const MDXTemplate = ({
   title,
   sources = [],
-  path
+  path,
+  id,
+  componentsData
 }) => {
   const sourceKeys = sources.map(v => v.source);
   const isSinglePage = sourceKeys.length === 1;
+  const isComponent = sources.some(source => source.section === 'components');
   const { pathname } = useLocation();
   const { katacodaLayout } = sources[0].Component.getPageData();
   let activeSource = pathname.replace(/\/$/, '').split('/').pop();
+  // get summary text, convert to JSX to display above tabs on component pages
+  const componentDasherized = id.split(' ').join('-').toLowerCase();
+  const summary = componentsData?.[componentDasherized]?.summary;
+  let SummaryComponent;
+  if (summary) {
+    const summaryCode = convertToReactComponent(`<p>${summary}</p>`).code;
+    const getSummaryComponent = new Function('React', 'Link', summaryCode);
+    SummaryComponent = getSummaryComponent(React, Link);
+  }
+
   if (!sourceKeys.includes(activeSource)) {
     activeSource = sourceKeys[0];
   }
@@ -141,7 +155,12 @@ export const MDXTemplate = ({
           {title}
         </Title>}
       </PageSection>
-      {!isSinglePage && (
+      {isComponent && summary && (
+        <PageSection variant={PageSectionVariants.light} className="pf-u-pt-0">
+          <SummaryComponent />
+        </PageSection>
+      )}
+      {(!isSinglePage || isComponent) && (
         <PageSection type="tabs">
           <div className="pf-c-tabs pf-m-page-insets pf-m-no-border-bottom">
             <ul className="pf-c-tabs__list">