@patternfly/documentation-framework 6.0.0-alpha.7 → 6.0.0-alpha.71

package/pages/404/index.js

@@ -9,12 +9,10 @@ import {
   CardHeader,
   EmptyState,
   EmptyStateBody,
-  EmptyStateIcon,
   Grid,
   GridItem,
   PageSection,
   TextInput,
-  Title
 } from '@patternfly/react-core';
 import { attachDocSearch } from '../../layouts/sideNavLayout/sideNavLayout';
 import PathMissingIcon from './404.svg';
@@ -24,31 +22,16 @@ import ComponentsIcon from './components.svg';
 import ChartIcon from './chart.svg';
 import './404.css';
 
-const Card404 = ({
-  img,
-  alt,
-  title,
-  body,
-  link: {
-    text,
-    to
-  }
-}) => (
+const Card404 = ({ img, alt, title, body, link: { text, to } }) => (
   <GridItem xl={3} md={6} xs={12}>
     <Card style={{ height: '340px' }}>
       <CardHeader className="ws-404-card-header">
         <img src={img} alt={alt} width="64px" />
       </CardHeader>
-      <CardTitle>
-        {title}
-      </CardTitle>
-      <CardBody>
-        {body}
-      </CardBody>
+      <CardTitle>{title}</CardTitle>
+      <CardBody>{body}</CardBody>
       <CardFooter>
-        <Link to={to}>
-          {text}
-        </Link>
+        <Link to={to}>{text}</Link>
       </CardFooter>
     </Card>
   </GridItem>
@@ -65,20 +48,24 @@ const Page404 = () => {
       attachDocSearch(algolia, '#ws-404-search', 1000);
     }
   });
-  
+
   return (
     <PageSection>
-      <EmptyState variant="xl">
-        <EmptyStateIcon icon={() => <img src={PathMissingIcon} alt="Missing path" width="128px" />} />
-        <Title headingLevel="h1" size="2xl">
-          404: That page no longer exists
-        </Title>
-        <p style={{ marginTop: 'var(--pf-v5-global--spacer--sm)' }}>
-          Another page might have the information you need, so try searching PatternFly.
-        </p>
+      <EmptyState
+        headingLevel="h1"
+        titleText="404: That page no longer exists"
+        variant="xl"
+        icon={() => <img src={PathMissingIcon} alt="" width="128px" />}
+      >
+        Another page might have the information you need, so try searching
+        PatternFly.
         <EmptyStateBody>
           <div id="ws-404-search-wrapper">
-            <TextInput id="ws-404-search" type="text" placeholder="Search PatternFly" />
+            <TextInput
+              id="ws-404-search"
+              type="text"
+              placeholder="Search PatternFly"
+            />
           </div>
         </EmptyStateBody>
       </EmptyState>
@@ -90,7 +77,7 @@ const Page404 = () => {
           body="Learn about designing and developing with PatternFly."
           link={{
             text: 'View getting started resources',
-            to: '/get-started/about'
+            to: '/get-started/about-patternfly',
           }}
         />
         <Card404
@@ -100,7 +87,7 @@ const Page404 = () => {
           body="Check out PatternFly's design approach to icons, colors, and more."
           link={{
             text: 'View guidelines',
-            to: '/design-foundations/colors'
+            to: '/design-foundations/colors',
           }}
         />
         <Card404
@@ -110,7 +97,7 @@ const Page404 = () => {
           body="Start creating your applications with components -- the building blocks of user interfaces."
           link={{
             text: 'View components',
-            to: '/components/about-modal'
+            to: '/components/about-modal',
           }}
         />
         <Card404
@@ -120,7 +107,7 @@ const Page404 = () => {
           body="Visualize your facts and figures by designing the right charts for your data."
           link={{
             text: 'View charts',
-            to: '/charts/about'
+            to: '/charts/about',
           }}
         />
       </Grid>
@@ -131,6 +118,6 @@ const Page404 = () => {
       </div>
     </PageSection>
   );
-}
+};
 
 export default Page404;

package/routes.js

@@ -83,7 +83,9 @@ const sourceOrder = {
   html: 3,
   'html-demos': 4,
   'design-guidelines': 99,
-  'accessibility': 100
+  'accessibility': 100,
+  'upgrade-guide': 101,
+  'release-notes': 102,
 };
 
 const sortSources = ({ source: s1 }, { source: s2 }) => {

package/scripts/md/anchor-header.js

@@ -42,7 +42,7 @@ function anchorHeader(tocCallback) {
         // Add to TOC for indexing
         addTOCItem(tocItem, node.tagName);
 
-        node.properties.size = node.tagName;
+        node.properties.headingLevel = node.tagName;
         node.properties.className = node.properties.className || '';
         node.properties.className += node.properties.className ? ' ' : '';
         node.properties.className += `ws-title ws-${node.tagName}`;

package/scripts/md/parseMD.js

@@ -105,6 +105,7 @@ function toReactComponent(mdFilePath, source, buildMode) {
         section: frontmatter.section || '',
         subsection: frontmatter.subsection || '',
         deprecated: frontmatter.deprecated || false,
+        template: frontmatter.template || false,
         beta: frontmatter.beta || false,
         demo: frontmatter.demo || false,
         newImplementationLink: frontmatter.newImplementationLink || false,
@@ -213,24 +214,24 @@ function toReactComponent(mdFilePath, source, buildMode) {
           pageData.examples.push(node.title);
         }
         // Typecheck TS examples
-        if (node.properties.lang === 'ts') {
-          const typerrors = typecheck(
-            path.join(pageData.id, node.title + '.tsx'), // Needs to be unique per-example
-            node.properties.code
-          );
-          typerrors.forEach(({ line, character, message }) => {
-            line = node.position.start.line + line + 1;
-            const column = character;
-            if (buildMode === 'start') {
-              // Don't fail to start over types
-              file.message(`\u001b[31m THIS WILL FAIL THE BUILD\u001b[0m\n  ${message}`, { line, column });
-            } else {
-              console.log('\u001b[31m');
-              file.fail(`\n  ${message}\n`, { line, column });
-              console.log('\u001b[0m');
-            }
-          });
-        }
+        // if (node.properties.lang === 'ts') {
+        //   const typerrors = typecheck(
+        //     path.join(pageData.id, node.title + '.tsx'), // Needs to be unique per-example
+        //     node.properties.code
+        //   );
+        //   typerrors.forEach(({ line, character, message }) => {
+        //     line = node.position.start.line + line + 1;
+        //     const column = character;
+        //     if (buildMode === 'start') {
+        //       // Don't fail to start over types
+        //       file.message(`\u001b[31m THIS WILL FAIL THE BUILD\u001b[0m\n  ${message}`, { line, column });
+        //     } else {
+        //       console.log('\u001b[31m');
+        //       file.fail(`\n  ${message}\n`, { line, column });
+        //       console.log('\u001b[0m');
+        //     }
+        //   });
+        // }
       });
     })
     // Add custom PatternFly doc design things
@@ -295,6 +296,7 @@ function sourceMDFile(file, source, buildMode) {
       ...(pageData.hideNavItem && { hideNavItem: pageData.hideNavItem }),
       ...(pageData.beta && { beta: pageData.beta }),
       ...(pageData.deprecated && { deprecated: pageData.deprecated }),
+      ...(pageData.template && { template: pageData.template }),
       ...(pageData.demo && { demo: pageData.demo }),
       ...(pageData.sortValue && { sortValue: pageData.sortValue }),
       ...(pageData.subsectionSortValue && { subsectionSortValue: pageData.subsectionSortValue })

package/scripts/md/styled-tags.js

@@ -1,10 +1,8 @@
 const visit = require('unist-util-visit');
 
-const styledMdTags = [
+const contentStyledMdTags = [
   'p',
   'ul',
-  'ul',
-  'ul',
   'ol',
   'li',
   'dl',
@@ -12,35 +10,45 @@ const styledMdTags = [
   'small',
   'hr',
   'dt',
+  'dd'
+];
+
+const styledMdTags = [
+  ...contentStyledMdTags,
   'code',
   'table',
   'img'
-];
+]
 
 function styledTags() {
   return tree => {
     visit(tree, 'element', node => {
+      node.properties.className = node.properties.className || '';
+      
+      if (contentStyledMdTags.includes(node.tagName)) {
+        node.properties.className += `pf-v6-c-content--${node.tagName}`;
+      }
+
       if (styledMdTags.includes(node.tagName)) {
-        node.properties.className = node.properties.className || '';
         node.properties.className += node.properties.className ? ' ' : '';
-        node.properties.className += `ws-${node.tagName}`;
-        // Match pf-v5-c-table implementation
+        node.properties.className += `ws-${node.tagName} `;
+        // Match pf-v6-c-table implementation
         // https://pf4.patternfly.org/components/table/html/basic-table/
         if (node.tagName === 'table') {
-          node.properties.className += ' pf-v5-c-table pf-m-grid-lg pf-m-compact';
+          node.properties.className += ' pf-v6-c-table pf-m-grid-lg pf-m-compact';
           node.properties.role = 'grid';
           let columnHeaders = [];
           for (let child of node.children) {
             if (child.tagName === 'thead') {
-              child.properties.className = 'pf-v5-c-table__thead';
+              child.properties.className = 'pf-v6-c-table__thead';
               // Find column headers
               const tr = child.children.find(child => child.tagName === 'tr');
               tr.properties.role = 'row';
-              tr.properties.className = 'pf-v5-c-table__tr';
+              tr.properties.className = 'pf-v6-c-table__tr';
               tr.children
                 .filter(child => child.tagName === 'th')
                 .forEach(th => {
-                  th.properties.className = `${th.properties.className} pf-v5-c-table__th pf-m-wrap`;
+                  th.properties.className = `${th.properties.className} pf-v6-c-table__th pf-m-wrap`;
                   th.properties.role = 'columnheader';
                   th.properties.scope = 'col';
                   let colName = '';
@@ -57,17 +65,17 @@ function styledTags() {
             }
             else if (child.tagName === 'tbody') {
               child.properties.role = 'rowgroup';
-              child.properties.className = 'pf-v5-c-table__tbody';
+              child.properties.className = 'pf-v6-c-table__tbody';
               child.children
                 .filter(tr => tr.tagName === 'tr')
                 .forEach(tr => {
                   tr.properties.role = 'row';
-                  tr.properties.className = 'pf-v5-c-table__tr';
+                  tr.properties.className = 'pf-v6-c-table__tr';
                   tr.children
                     .filter(td => td.tagName === 'td')
                     .forEach((td, i) => {
                       td.properties.role = 'cell';
-                      td.properties.className = 'pf-v5-c-table__td';
+                      td.properties.className = 'pf-v6-c-table__td';
                       if (columnHeaders[i]) {
                         td.properties['data-label'] = columnHeaders[i];
                       }

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

@@ -2,7 +2,6 @@ const path = require('path');
 const webpack = require('webpack');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
 module.exports = (_env, argv) => {
   const {
@@ -47,6 +46,7 @@ module.exports = (_env, argv) => {
             /react-[\w-]+\\src\\.*\\examples/, // fix for Windows
             /react-[\w-]+\/patternfly-docs\/.*\/examples/, //fixes for extensions
             /react-[\w-]+\\patternfly-docs\\.*\\examples/,
+            path.resolve(__dirname, '../../../../node_modules/@patternfly/design-tokens/patternfly-docs/content')
           ].concat(includePaths.map(path => new RegExp(path))),
           exclude: [
             path.resolve(__dirname, '../../node_modules'), // Temporarily compile theme using webpack for development
@@ -56,20 +56,12 @@ module.exports = (_env, argv) => {
             options: {
               cacheDirectory: '.cache/babel',
               cacheCompression: false,
-              presets: [['@babel/preset-env', {
-                loose: true,
-                corejs: 3,
-                useBuiltIns: 'entry',
-                exclude: ['transform-regenerator', 'transform-async-to-generator'],
-                modules: false,
-                targets: "> 0.25%, not dead"
-              }]],
-              plugins: [
-                '@babel/plugin-transform-react-jsx',
-                '@babel/plugin-proposal-class-properties',
-                '@babel/plugin-proposal-optional-chaining',
-                ["@babel/plugin-proposal-private-methods", { "loose": false }],
-                ["@babel/plugin-proposal-private-property-in-object", { "loose": false }]
+              presets: [
+                '@babel/preset-react',
+                ['@babel/preset-env', {
+                  loose: true,
+                  targets: '> 1%, not dead'
+                }],
               ],
             }
           },
@@ -155,9 +147,6 @@ module.exports = (_env, argv) => {
         patterns: [
           { from: path.join(__dirname, '../../assets'), to: 'assets' }
         ]
-      }),
-      new MonacoWebpackPlugin({
-        globalAPI: true,
       })
     ],
     stats: 'minimal'

package/scripts/writeScreenshots.js

@@ -11,7 +11,7 @@ sharp.cache(false);
 async function writeScreenshot({ page, data: { url, urlPrefix } }) {
   await page.goto(url);
   await page.addStyleTag({content: '*,*::before,*::after{animation-delay:-1ms !important;animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:0s !important;transition-delay:0s !important;}'}); // disable animations/transitions so they don't interfere with screenshot tool
-  await page.waitForSelector('.pf-v5-u-h-100');
+  await page.waitForSelector('.pf-v6-u-h-100');
   const outfile = path.join(
     screenshotBase,
     url.replace(`${urlPrefix}/`, '') + '.png'
@@ -32,7 +32,7 @@ async function writeScreenshots({ urlPrefix, allRoutes, filterTerm }) {
     concurrency: Cluster.CONCURRENCY_CONTEXT,
     maxConcurrency: os.cpus().length,
     puppeteerOptions: {
-      headless: true, // set to false for testing...
+      headless: 'new', // set to false for testing...
       args: ["--no-sandbox", "--disable-setuid-sandbox"],
       defaultViewport: {width: 1920, height: 1080}
     }