@patternfly/documentation-framework 2.0.0-alpha.7 → 2.0.0-alpha.70

package/templates/mdx.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PageSection, Title, PageSectionVariants, BackToTop, PageGroup, Page, Text, TextContent } from '@patternfly/react-core';
+import { PageSection, Title, Tooltip, PageSectionVariants, Button, BackToTop, Flex, FlexItem, PageGroup, Page, Text, TextContent, Label } from '@patternfly/react-core';
 import { css } from '@patternfly/react-styles';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import { Router, useLocation } from '@reach/router';
@@ -7,12 +7,14 @@ import { CSSVariables, PropsTable, TableOfContents, Link, AutoLinkHeader, Inline
 import { capitalize, getTitle, slugger, trackEvent } from '../helpers';
 import './mdx.css';
 import { convertToReactComponent } from '@patternfly/ast-helpers';
+import { FunctionsTable } from '../components/functionsTable/functionsTable';
 
 const MDXChildTemplate = ({
   Component,
   source,
   toc = [],
-  index = 0
+  index = 0,
+  id
 }) => {
   const {
     propComponents = [],
@@ -20,8 +22,9 @@ const MDXChildTemplate = ({
     cssPrefix = [],
     optIn,
     beta,
-    katacodaBroken,
-    katacodaLayout
+    deprecated,
+    newImplementationLink,
+    functionDocumentation = []
   } = Component.getPageData();
   const cssVarsTitle = cssPrefix.length > 0 && 'CSS variables';
   const propsTitle = propComponents.length > 0 && 'Props';
@@ -31,6 +34,9 @@ const MDXChildTemplate = ({
   }
   if (cssVarsTitle && !toc.find(item => item.text === cssVarsTitle)) {
     toc.push({ text: cssVarsTitle });
+    if (cssPrefix.length > 1) {
+      toc.push(cssPrefix.map(cssPrefix => ({ text: `Prefixed with '${cssPrefix}'` })));
+    }
   }
   // We don't add `id`s in anchor-header.js for items where id === slugger(text)
   // in order to save ~10KB bandwidth.
@@ -54,28 +60,40 @@ const MDXChildTemplate = ({
       )}
       {beta && (
         <InlineAlert title="Beta feature">
-          This beta component is currently under review and is still open for further evolution. It is available for use in product.
-          Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the <a href="https://forum.patternfly.org/">PatternFly forum</a> or via <a href="//slack.patternfly.org/" target="_blank" rel="noopener noreferrer">Slack</a>.
-          To learn more about the process, visit our <Link to="/get-started/about#beta-components">about page</Link> or our <a href="https://github.com/patternfly/patternfly-org/tree/main/beta-component-promotion">Beta components</a> page on GitHub.
+          This beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the <a href="https://forum.patternfly.org/">PatternFly forum</a> or via <a href="//slack.patternfly.org/" target="_blank" rel="noopener noreferrer">Slack</a>. To learn more about the process, visit our <Link to="/get-started/about#beta-components">about page</Link> or our <a href="https://github.com/patternfly/patternfly-org/tree/main/beta-component-promotion">Beta components</a> page on GitHub.
         </InlineAlert>
       )}
-      {katacodaBroken && (
-        <InlineAlert variant="warning" title="Down for maintenance">
-          The embedded version of our tutorials are broken, but you can still access our tutorials on <a href="https://www.katacoda.com/patternfly">Katacoda.com <ExternalLinkAltIcon /></a>.
+      {(deprecated || source === 'react-deprecated' || source === 'html-deprecated') && (
+        <InlineAlert title="Deprecated feature" variant="warning">
+          This implementation has been deprecated in favor of a newer implementation, and is no longer getting maintained or enhanced.
+          {newImplementationLink && (
+            <React.Fragment>
+              You can find the <Link to={newImplementationLink}>updated implementation here</Link>.
+            </React.Fragment>
+          )}
+          {' '}To learn more about the process, visit our <Link to="/get-started/about#major-release-cadence">about page</Link>.
         </InlineAlert>
       )}
     </React.Fragment>
   );
   // Create dynamic component for @reach/router
   const ChildComponent = () => (
-    <div className="pf-u-display-flex ws-mdx-child-template">
+    <div className="pf-v5-u-display-flex ws-mdx-child-template">
       {toc.length > 1 && (
         <TableOfContents items={toc} />
       )}
-      <div className={katacodaLayout? "ws-mdx-content-katacoda" : "ws-mdx-content"}>
-        <div className={katacodaLayout ? "" : "ws-mdx-content-content"}>
+      <div className="ws-mdx-content">
+        <div className={source === 'landing-pages' ? "ws-landing-page" : "ws-mdx-content-content"}>
           {InlineAlerts}
           <Component />
+          {functionDocumentation.length > 0 && (
+            <React.Fragment>
+              <AutoLinkHeader size="h2" className="ws-h2" id="functions">
+                Functions
+              </AutoLinkHeader>
+              <FunctionsTable functionDescriptions={functionDocumentation}/>
+            </React.Fragment>
+          )}
           {propsTitle && (
             <React.Fragment>
               <AutoLinkHeader size="h2" className="ws-h2" id="props">
@@ -92,15 +110,17 @@ const MDXChildTemplate = ({
               ))}
             </React.Fragment>
           )}
-          {cssVarsTitle && (
+          {cssPrefix.length > 0 && (
             <React.Fragment>
               <AutoLinkHeader size="h2" className="ws-h2" id="css-variables">
                 {cssVarsTitle}
               </AutoLinkHeader>
-              <CSSVariables prefix={cssPrefix} />
+              {cssPrefix.map(prefix => (
+                <CSSVariables autoLinkHeader={cssPrefix.length > 1} prefix={prefix} />
+              ))}
             </React.Fragment>
           )}
-          {!katacodaLayout && sourceLink && (
+          {sourceLink && (
             <React.Fragment>
               <br />
               <a href={sourceLink} target="_blank" onClick={() => trackEvent('view_source_click', 'click_event', source.toUpperCase())}>View source on GitHub</a>
@@ -121,10 +141,21 @@ export const MDXTemplate = ({
   id,
   componentsData
 }) => {
-  const sourceKeys = sources.map(v => v.source);
+  const isDeprecated = sources.some(source => source.source === "react-deprecated" || source.source === "html-deprecated") && !sources.some(source => source.source === "react"  || source.source === "html");
+  const isBeta = sources.some(source => source.beta)
+  const isDemo = sources.some(source => source.source === "react-demos" || source.source === "html-demos") && !sources.some(source => source.source === "react" || source.source === "html");
+  // Build obj mapping source names to text displayed on tabs
+  const tabNames = sources.reduce((acc, curSrc) => {
+    const { source, tabName } = curSrc;
+    // use tabName for tab name if present, otherwise default to source
+    const tabLinkText = tabName || capitalize(source.replace('html', 'HTML').replace(/-/g, ' '));
+    acc[source] = tabLinkText;
+    return acc;
+  }, {});
+  const sourceKeys = Object.keys(tabNames);
   const isSinglePage = sourceKeys.length === 1;
 
-  let isDevResources, isComponent, isExtension, isChart, isDemo, isLayout, isUtility;
+  let isDevResources, isComponent, isExtension, isChart, isPattern, isLayout, isUtility;
 
   const getSection = () => {
     return sources.some((source) => {
@@ -141,8 +172,8 @@ export const MDXTemplate = ({
         case "charts":
           isChart = true;
           return;
-        case "demos":
-          isDemo = true;
+        case "patterns":
+          isPattern = true;
           return;
         case "layouts":
           isLayout = true;
@@ -159,7 +190,6 @@ export const MDXTemplate = ({
     (e) => e.includes("pages") || e.includes("training")
   );
   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();
@@ -186,12 +216,19 @@ export const MDXTemplate = ({
         return "pf-m-light-100";
       }
       return "pf-m-light";
-    } else if (isUtility || isDemo || isLayout || isComponent) {
+    } else if (isUtility || isPattern || isLayout || isComponent) {
       return "pf-m-light";
     }
     return "pf-m-light-100";
   };
 
+  const showTabs = (
+    (!isSinglePage && !hideTabName) ||
+    isComponent ||
+    isUtility ||
+    isPattern
+  );
+
   return (
     <React.Fragment>
       <PageGroup>
@@ -201,40 +238,74 @@ export const MDXTemplate = ({
           isWidthLimited
         >
           <TextContent>
-          {!katacodaLayout && <Title headingLevel='h1' size='4xl' id="ws-page-title">{title}</Title>}
-          {isComponent && summary && (<SummaryComponent />)}
+            <Flex alignItems={{ default: 'alignItemsCenter'}}>
+              <FlexItem>
+                <Title headingLevel='h1' size='4xl' id="ws-page-title">
+                  {title}
+                </Title>
+              </FlexItem>
+              <FlexItem>
+                <Flex display={{ default: 'inlineFlex' }}>
+                  {isDeprecated && (
+                    <FlexItem spacer={{ default: 'spacerSm' }}>
+                      <Tooltip content="Deprecated components are available for use but are no longer being maintained or enhanced.">
+                        <Button isInline component="span" variant="link">
+                          <Label color="grey">Deprecated</Label>
+                        </Button>
+                      </Tooltip>
+                    </FlexItem>
+                  )}
+                  {isDemo && (
+                    <FlexItem spacer={{ default: 'spacerSm' }}>
+                      <Tooltip content="Demos show how multiple components can be used in a single design.">
+                        <Button isInline component="span" variant="link">
+                          <Label color="purple">Demo</Label>
+                        </Button>
+                      </Tooltip>
+                    </FlexItem>
+                  )}
+                  {isBeta && (
+                    <FlexItem spacer={{ default: 'spacerSm' }}>
+                      <Tooltip content="This beta component is currently under review and is still open for further evolution.">
+                        <Button isInline component="span" variant="link">
+                          <Label color="blue">Beta</Label>
+                        </Button>
+                      </Tooltip>
+                    </FlexItem>
+                  )}
+                </Flex>
+              </FlexItem>
+            </Flex>
+            {isComponent && summary && (<SummaryComponent />)}
           </TextContent>
         </PageSection>
-        {((!isSinglePage && !hideTabName) ||
-          isComponent ||
-          isUtility ||
-          isDemo) && (
-            <PageSection id="ws-sticky-nav-tabs" stickyOnBreakpoint={{'default':'top'}} type="tabs">
-              <div className="pf-c-tabs pf-m-page-insets pf-m-no-border-bottom">
-                <ul className="pf-c-tabs__list">
-                  {sourceKeys.map((source, index) => (
-                    <li
-                      key={source}
-                      className={css(
-                        'pf-c-tabs__item',
-                        activeSource === source && 'pf-m-current'
-                      )}
-                      // Send clicked tab name for analytics
-                      onClick={() => trackEvent('tab_click', 'click_event', source.toUpperCase())}
-                    >
-                      <Link className="pf-c-tabs__link" to={`${path}${index === 0 ? '' : '/' + source}`}>
-                        {capitalize(source.replace('html', 'HTML').replace(/-/g, ' '))}
-                      </Link>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </PageSection>
+        { showTabs && (
+          <PageSection id="ws-sticky-nav-tabs" stickyOnBreakpoint={{'default':'top'}} type="tabs">
+            <div className="pf-v5-c-tabs pf-m-page-insets pf-m-no-border-bottom">
+              <ul className="pf-v5-c-tabs__list">
+                {sourceKeys.map((source, index) => (
+                  <li
+                    key={source}
+                    className={css(
+                      'pf-v5-c-tabs__item',
+                      activeSource === source && 'pf-m-current'
+                    )}
+                    // Send clicked tab name for analytics
+                    onClick={() => trackEvent('tab_click', 'click_event', source.toUpperCase())}
+                  >
+                    <Link className="pf-v5-c-tabs__link" to={`${path}${index === 0 ? '' : '/' + source}`}>
+                      {tabNames[source]}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </PageSection>
         )}
         <PageSection id="main-content" isFilled className="pf-m-light-100">
-          {isSinglePage && <MDXChildTemplate {...sources[0]} />}
+          {isSinglePage && <MDXChildTemplate {...sources[0]} id={id}/>}
           {!isSinglePage && (
-            <Router className="pf-u-h-100" primary={false}>
+            <Router className="pf-v5-u-h-100" primary={false}>
               {sources
                 .map((source, index) => {
                   source.index = index;

package/templates/patternfly-docs/content/extensions/extension/design-guidelines/design-guidelines.md

@@ -7,6 +7,8 @@ section: extensions
 id: My extension
 # Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
 source: design-guidelines
+# Optional custom text to display in tab in place of source
+tabName: My custom tab-name
 ---
 
 Design guidelines intro

package/templates/patternfly-docs/content/extensions/extension/examples/basic.md

@@ -7,6 +7,8 @@ section: extensions
 id: My extension
 # Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
 source: react
+# Optional custom text to display in tab in place of source
+tabName: My custom tab-name
 # If you use typescript, the name of the interface to display props for
 # These are found through the sourceProps function provdided in patternfly-docs.source.js
 # Can also pass object { component: string, source: string } allowing to specify the source

package/templates/sitemap.ejs

@@ -2,7 +2,7 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <% urls.forEach(url => {%>
   <url>
-    <loc>https://www.patternfly.org/v4<%=url%></loc>
+    <loc>https://www.patternfly.org<%=url%></loc>
     <changefreq>daily</changefreq>
     <priority>0.7</priority>
   </url>

package/versions.json

@@ -5,25 +5,45 @@
       "date": "2022-02-08",
       "latest": true,
       "versions": {
-        "@patternfly/patternfly": "5.0.0-alpha.13",
+        "@patternfly/patternfly": "5.0.0-alpha.37",
+        "@patternfly/react-charts": "^7.0.0-alpha.14",
+        "@patternfly/react-code-editor": "^5.0.0-alpha.54",
+        "@patternfly/react-core": "^5.0.0-alpha.53",
+        "@patternfly/react-icons": "^5.0.0-alpha.8",
+        "@patternfly/react-styles": "^5.0.0-alpha.6",
+        "@patternfly/react-table": "^5.0.0-alpha.54",
+        "@patternfly/react-tokens": "^5.0.0-alpha.6",
         "@patternfly/react-catalog-view-extension": "4.95.1",
-        "@patternfly/react-charts": "7.0.0-alpha.3",
-        "@patternfly/react-code-editor": "5.0.0-alpha.7",
-        "@patternfly/react-core": "5.0.0-alpha.7",
-        "@patternfly/react-icons": "5.0.0-alpha.2",
+        "@patternfly/react-drag-drop": "5.0.0-alpha.0",
         "@patternfly/react-inline-edit-extension": "4.86.118",
         "@patternfly/react-log-viewer": "4.87.100",
-        "@patternfly/react-styles": "5.0.0-alpha.2",
-        "@patternfly/react-table": "5.0.0-alpha.7",
-        "@patternfly/react-tokens": "5.0.0-alpha.2",
         "@patternfly/react-topology": "4.91.27",
         "@patternfly/react-virtualized-extension": "4.88.113"
       }
     },
+    {
+      "name": "2023.02",
+      "date": "2022-03-27",
+      "versions": {
+        "@patternfly/patternfly": "4.224.4",
+        "@patternfly/react-catalog-view-extension": "4.96.0",
+        "@patternfly/react-charts": "6.94.19",
+        "@patternfly/react-code-editor": "4.82.115",
+        "@patternfly/react-console": "4.95.5",
+        "@patternfly/react-core": "4.276.8",
+        "@patternfly/react-icons": "4.93.6",
+        "@patternfly/react-inline-edit-extension": "4.86.122",
+        "@patternfly/react-log-viewer": "4.87.100",
+        "@patternfly/react-styles": "4.92.6",
+        "@patternfly/react-table": "4.113.0",
+        "@patternfly/react-tokens": "4.94.6",
+        "@patternfly/react-topology": "4.91.40",
+        "@patternfly/react-virtualized-extension": "4.88.115"
+      }
+    },
     {
       "name": "2023.01",
       "date": "2022-01-31",
-      "latest": true,
       "versions": {
         "@patternfly/patternfly": "4.224.2",
         "@patternfly/react-catalog-view-extension": "4.95.1",

package/components/topNav/topNav.css

@@ -1,30 +0,0 @@
-/* Don't bother with specifity war */
-.ws-top-nav-link.pf-c-nav__link {
-  color: var(--pf-global--BackgroundColor--light-100);
-}
-
-.ws-top-nav-link.pf-c-nav__link:active,
-.ws-top-nav-link.pf-c-nav__link:hover,
-.ws-top-nav-link.pf-c-nav__link.pf-m-current {
-  color: var(--pf-global--BackgroundColor--dark-100);
-  background-color: var(--pf-global--BackgroundColor--light-100);
-  transition: .5s;
-}
-
-/* Don't bother with specifity war */
-.ws-top-nav-link.pf-c-nav__link::before {
-  top: 0 !important;
-  bottom: auto !important;
-  right: 0 !important;
-  left: 0 !important;
-  border-color: var(--pf-global--link--Color--light--hover) !important;
-  transform: scaleX(0);
-}
-
-/* Animate bar growing outwards */
-.ws-top-nav-link.pf-c-nav__link:active::before,
-.ws-top-nav-link.pf-c-nav__link:hover::before,
-.ws-top-nav-link.pf-c-nav__link.pf-m-current::before {
-  transition: transform .5s;
-  transform: scaleX(1);
-}

package/pages/red-hat-font.md

@@ -1,40 +0,0 @@
----
-id: Red Hat font
-section: developer-resources
----
-
-PR - [https://github.com/patternfly/patternfly/pull/4476](https://github.com/patternfly/patternfly/pull/4476)
-
-Available in [v4.161.0](https://github.com/patternfly/patternfly/releases/tag/prerelease-v4.161.0)
-
-## Overview
-
-PatternFly has created opt-ins for `v4.0.2` of the [RedHatFont](https://github.com/RedHatOfficial/RedHatFont/). This is an update from `v2.x`. There are many new features in this update, including:
-
-- Variable fonts
-- New weights in Red Hat Display and Red Hat Text
-- Tabular figures (monospaced numbers) in Red Hat Display and Red Hat Text
-- Red Hat Mono typeface
-- Dropping support for IE11 (dropped the `.woff` format)
-
-### Available Opt-ins
-
-#### `.pf-m-redhat-updated-font`
-
-Updates the Red Hat Text and Red Hat Display font stacks to `v4.0.2`. This should be a safe, seamless opt-in, with small improvements to glyph shape, kerning, metadata across the entire family of fonts. Potential concerns may be that this will remove support for IE11 by removing the `.woff` format support, and small layout shifts as result of the small improvements.
-
-#### `.pf-m-redhatmono-font`
-
-Updates the monospaced font stack to use the Red Hat Mono font. This opt-in can be combined with `.pf-m-redhat-updated-font`.
-
-#### `.pf-m-redhatVF-font`
-
-Updates the Red Hat Text, Red Hat Display, and Red Hat Mono font stacks to use the variable font files.
-
-#### `.pf-m-tabular-nums`
-
-This is a global class that can be applied to any element to enable monospaced numbers on that element and its children.
-
-### Using opt-in classes
-
-To opt-in to any of the new fonts (`.pf-m-redhat-updated-font`, `.pf-m-redhatmono-font`, and `.pf-m-redhatVF-font`), add the opt-in class to the `<body>` tag of your application. To opt-in to monospaced numbers globally across your application, apply `.pf-m-tabular-nums` to any element that wraps your entire application (eg, `<body>`, `<div id="root">`, `<div class="pf-c-page">`, etc). To opt-in to monospaced numbers on a particular element and its children, add the class to that element itself.