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

package/components/sectionGallery/sectionGalleryToolbar.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { Button, SearchInput, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem, Text, TextVariants, ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+import ListIcon from '@patternfly/react-icons/dist/esm/icons/list-icon';
+import ThIcon from'@patternfly/react-icons/dist/esm/icons/th-icon';
+
+export const SectionGalleryToolbar = ({
+  galleryItems,
+  searchTerm,
+  setSearchTerm,
+  layoutView,
+  setLayoutView,
+  placeholderText ="Search by name",
+  countText=" items"
+}) => (
+  <Toolbar isSticky>
+    <ToolbarContent>
+      <ToolbarItem variant="search-filter" widths={{default: '100%', md: '320px'}}>
+        <SearchInput onClear={false} value={searchTerm} placeholder={placeholderText} onChange={(_evt, val) => setSearchTerm(val)} />
+      </ToolbarItem>
+      {searchTerm && (
+        <ToolbarItem>
+          <Button variant="link" onClick={() => setSearchTerm('')}>Reset</Button>
+        </ToolbarItem>
+      )}
+      <ToolbarGroup variant="icon-button-group">
+        <ToolbarItem>
+          <ToggleGroup>
+            <ToggleGroupItem icon={<ThIcon />} aria-label="grid icon button" isSelected={layoutView === 'grid'} onChange={() => setLayoutView('grid')}></ToggleGroupItem>
+            <ToggleGroupItem icon={<ListIcon />} aria-label="list icon button" isSelected={layoutView === 'list'} onChange={() => setLayoutView('list')}></ToggleGroupItem>
+          </ToggleGroup>
+        </ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarItem variant="pagination" spacer={{default: 'spacerMd', md: 'spacerNone'}} style={{'--pf-v5-c-toolbar__item--MinWidth': "max-content"}}>
+        <Text component={TextVariants.small}>{ galleryItems.length }{ countText }</Text>
+      </ToolbarItem>
+    </ToolbarContent>
+  </Toolbar>
+);

package/components/sectionGallery/sectionGalleryWrapper.js

@@ -0,0 +1,110 @@
+import React from "react";
+import { groupedRoutes } from '../../routes';
+
+export const SectionGalleryWrapper = ({
+  section,
+  subsection,
+  galleryItemsData,
+  illustrations,
+  includeSubsections,
+  parseSubsections,
+  initialLayout,
+  isFullWidth,
+  children
+}) => {
+  let sectionRoutes = subsection ? groupedRoutes[section][subsection] : groupedRoutes[section];
+  if (!includeSubsections || parseSubsections) {
+    const sectionRoutesArr = Object.entries(sectionRoutes);
+    // loop through galleryItems object and build new object to handle subsections
+    sectionRoutes = sectionRoutesArr.reduce((acc, [navName, routeData]) => {
+      // exit immediately if current item is isSubsection flag
+      if (navName === 'isSubsection') {
+        return acc;
+      }
+      // add current item
+      if (includeSubsections || !routeData.isSubsection) {
+        acc[navName] = routeData;
+      }
+      // drill down into current item if subsection and parseSubsections === true
+      if (parseSubsections && routeData.isSubsection) {
+        // loop through each subsection item & add
+        Object.entries(routeData).map(([subitemName, subitemData]) => {
+          if (subitemName !== 'isSubsection') {
+            acc[subitemName] = subitemData;
+          }
+        })
+      }
+      return acc;
+    }, {})
+  }
+
+  const [searchTerm, setSearchTerm] = React.useState('');
+  const [layoutView, setLayoutView] = React.useState(initialLayout);
+  const filteredItems = Object.entries(sectionRoutes)
+    .filter(([itemName, { slug }]) => (
+      // exclude current gallery page from results
+      !location.pathname.endsWith(slug) &&
+      itemName
+        .toLowerCase()
+        .includes(searchTerm.toLowerCase())
+    ));
+  const sectionGalleryItems = filteredItems
+    .sort(([itemName1], [itemName2]) => itemName1.localeCompare(itemName2))
+    .map(([itemName, itemData], idx) => {
+      let illustration = null;
+      if (illustrations) {
+        // Convert to lowercase-camelcase ex: File upload - multiple ==> file_upload_multiple
+        const illustrationName = itemName
+          .replace('-', '')
+          .replace('  ',' ')
+          .split(' ')
+          .join('_')
+          .toLowerCase();
+        illustration = illustrations[illustrationName] || illustrations.default_placeholder;
+      }
+      const { sources, isSubsection = false } = itemData;
+      // Subsections don't have title or id, default to itemName aka sidenav text
+      const title = itemData.title || itemName;
+      const id = itemData.id || title;
+      // Display beta label if tab other than a '-next' tab is marked Beta
+      const isDeprecated = !isSubsection && sources && sources.some(source => source.source === "react-deprecated" || source.source === "html-deprecated") && !sources.some(source => source.source === "react"  || source.source === "html");
+      const isBeta = !isSubsection && sources && sources.some(src => src.beta && !src.source.includes('-next'));
+      const isDemo = !isSubsection && sources && sources.some(source => source.source === "react-demos" || source.source === "html-demos") && !sources.some(source => source.source === "react" || source.source === "html");
+
+      let slug = itemData.slug;
+      if (!slug && isSubsection) {
+        // Update slug to link to first page in subsection
+        const subsectionItems = Object.entries(itemData).filter(([name, _data]) => name !== 'isSubsection');
+        const sortedSubsectionItems = subsectionItems.sort((
+          [name1, {sortValue: sortValue1 = 50}],
+          [name2, {sortValue: sortValue2 = 50}]
+        ) => {
+          if (sortValue1 === sortValue2) {
+            return name1.localeCompare(name2);
+          }
+          return sortValue1 > sortValue2 ? 1 : -1;
+        });
+        const firstSubsectionItem = sortedSubsectionItems[0];
+        slug = firstSubsectionItem[1].slug;   
+      }
+
+      return {
+        idx,
+        slug,
+        itemName,
+        illustration,
+        isBeta,
+        isDeprecated,
+        isDemo,
+        title,
+        id,
+        galleryItemsData
+      };
+    });
+
+  return (
+    <div className={`ws-section-gallery${ isFullWidth ? ' ws-section-gallery-full-width' : '' }`}>
+      { children(sectionGalleryItems, searchTerm, setSearchTerm, layoutView, setLayoutView) }
+    </div>
+  )
+};

package/components/sideNav/sideNav.css

@@ -1,21 +1,21 @@
-.ws-page-sidebar .pf-c-nav {
-  --pf-c-nav__link--before--BorderBottomWidth: 0;
-  --pf-c-nav--m-light__link--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
-  --pf-c-nav--m-light__link--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
-  --pf-c-nav--m-light__link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
-  --pf-c-nav--m-light__link--active--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
-  --pf-c-nav__link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--200);
+.ws-page-sidebar .pf-v5-c-nav {
+  --pf-v5-c-nav__link--before--BorderBottomWidth: 0;
+  --pf-v5-c-nav--m-light__link--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-200);
+  --pf-v5-c-nav--m-light__link--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-200);
+  --pf-v5-c-nav--m-light__link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-200);
+  --pf-v5-c-nav--m-light__link--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-200);
+  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
 }
 
-.ws-side-nav-list .pf-c-nav__item.pf-m-expandable::before {
+.ws-side-nav-list .pf-v5-c-nav__item.pf-m-expandable::before {
   border-bottom: 0;
 }
 
-.pf-c-nav__subsection-title {
-  color: var(--ws-toc-link--Color, var(--pf-global--Color--300));
-  font-size: var(--pf-global--FontSize--sm);
+.pf-v5-c-nav__subsection-title {
+  color: var(--ws-toc-link--Color, var(--pf-v5-global--Color--300));
+  font-size: var(--pf-v5-global--FontSize--sm);
 }
 
 #ws-sticky-nav-tabs {
-  z-index: var(--pf-global--ZIndex--2xl);
+  z-index: var(--pf-v5-global--ZIndex--2xl);
 }

package/components/sideNav/sideNav.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from '../link/link';
-import { Nav, NavList, NavExpandable, PageContextConsumer, capitalize } from '@patternfly/react-core';
+import { Label, Nav, NavList, NavExpandable, PageContextConsumer, capitalize, Flex, FlexItem } from '@patternfly/react-core';
 import { css } from '@patternfly/react-styles';
 import { Location } from '@reach/router';
 import { makeSlug } from '../../helpers';
@@ -9,29 +9,42 @@ import { trackEvent } from '../../helpers';
 
 const getIsActive = (location, section, subsection = null) => {
   const slug = makeSlug(null, section, null, null, subsection);
-  return location.pathname.startsWith(`${process.env.pathPrefix}${slug}`);
+  return location.pathname.startsWith(slug);
 }
 
-const NavItem = ({ text, href }) => {
+const defaultValue = 50;
+
+const NavItem = ({ text, href, isDeprecated, isBeta, isDemo }) => {
   const isMobileView = window.innerWidth < Number.parseInt(globalBreakpointXl.value, 10);
   return (
     <PageContextConsumer key={href + text}>
-      {({onNavToggle, isNavOpen }) => (
-          <li key={href + text} className="pf-c-nav__item" onClick={() => isMobileView && onNavToggle()}>
+      {({onSidebarToggle, isSidebarOpen }) => (
+          <li key={href + text} className="pf-v5-c-nav__item" onClick={() => isMobileView && onSidebarToggle && onSidebarToggle()}>
             <Link
               to={href}
               getProps={({ isCurrent, href, location }) => {
                 const { pathname } = location;
                 return {
                   className: css(
-                    'pf-c-nav__link',
+                    'pf-v5-c-nav__link',
                     (isCurrent || pathname.startsWith(href + '/')) && 'pf-m-current'
                   )
                 }}
               }
-              tabIndex={isNavOpen ? undefined : -1}
+              tabIndex={isSidebarOpen ? undefined : -1}
             >
-              {text}
+              <Flex spaceItems={{ default: 'spaceItemsSm'}}>
+                <FlexItem>{text}</FlexItem>
+                {(isBeta || isDemo || isDeprecated) && (
+                  <FlexItem>
+                    {isBeta && (<Label color="blue" isCompact>Beta</Label>)}
+                    {!isBeta && isDeprecated && (<Label color="grey" isCompact>Deprecated</Label>)}
+                    {!isBeta && !isDeprecated && isDemo && (<Label color="purple" isCompact>Demo</Label>)}
+                  </FlexItem>
+                )}
+              </Flex>
+
+
             </Link>
           </li>
       )}
@@ -67,14 +80,29 @@ const ExpandableNav = ({groupedRoutes, location, section, subsection = null}) =>
       }}
     >
       {Object.entries(routes || {})
-        .filter(([id, { hideNavItem }]) => !Boolean(hideNavItem) && (id !== 'isSubsection'))
-        .map(([id, { slug, isSubsection = false }]) => ({ text: id, href: slug, isSubsection }))
-        .sort(({ text: text1 }, { text: text2 }) => text1.localeCompare(text2))
+        .filter(([id, navObj]) => !Boolean(navObj.hideNavItem) && (Object.entries(navObj).length > 0))
+        .map(([id, { slug, isSubsection = false, sortValue = defaultValue, subsectionSortValue = defaultValue, sources }]) => ({ text: id, href: slug, isSubsection, sortValue: (isSubsection ? subsectionSortValue : sortValue), sources }))
+        .sort(({text: text1, sortValue: sortValue1}, {text: text2, sortValue: sortValue2}) => {
+          if (sortValue1 === sortValue2) {
+            return text1.localeCompare(text2);
+          }
+          return sortValue1 > sortValue2 ? 1 : -1;
+        })
         .map(navObj => navObj.isSubsection
-          ? ExpandableNav({groupedRoutes, location, section, subsection: navObj.text})
-          : NavItem(navObj)
-        )
-      }
+            ? ExpandableNav({groupedRoutes, location, section, subsection: navObj.text})
+            : NavItem({
+              ...navObj,
+              isDeprecated: navObj.href?.includes('components') && navObj.sources.some(source => (
+                  source.source === "react-deprecated" || source.source === "html-deprecated")
+                && !navObj.sources.some(source => source.source === "react" || source.source === "html")
+              ),
+              isBeta: navObj.sources.some(source => source.beta),
+              isDemo: navObj.sources.some(source => (
+                  source.source === "react-demos" || source.source === "html-demos")
+                && !navObj.sources.some(source => source.source === "react" || source.source === "html")
+              )
+            })
+        )}
     </NavExpandable>
   );
 }
@@ -94,7 +122,7 @@ export const SideNav = ({ groupedRoutes = {}, navItems = [] }) => {
       lastElement.scrollIntoView({ block: 'center' });
     }
   }, []);
-  
+
   return (
     <Nav aria-label="Side Nav" theme="light">
       <NavList className="ws-side-nav-list">

package/components/tableOfContents/tableOfContents.css

@@ -1,39 +1,39 @@
 .ws-toc {
   align-self: flex-start;
   position: sticky;
-  width: calc(100% + var(--pf-c-page__main-section--PaddingLeft) + var(--pf-c-page__main-section--PaddingRight));
-  background-color: var(--pf-global--BackgroundColor--200);
+  width: calc(100% + var(--pf-v5-c-page__main-section--PaddingLeft) + var(--pf-v5-c-page__main-section--PaddingRight));
+  background-color: var(--pf-v5-global--BackgroundColor--200);
   z-index: 501;
-  margin: calc(var(--pf-c-page__main-section--PaddingTop) * -1) calc(var(--pf-c-page__main-section--PaddingRight) * -2) var(--pf-global--spacer--md) calc(var(--pf-c-page__main-section--PaddingLeft) * -1);
-  padding: var(--pf-global--spacer--md) 0 var(--pf-global--spacer--md) var(--pf-global--spacer--md);
-  box-shadow: var(--pf-global--BoxShadow--lg-bottom);
+  margin: calc(var(--pf-v5-c-page__main-section--PaddingTop) * -1) calc(var(--pf-v5-c-page__main-section--PaddingRight) * -2) var(--pf-v5-global--spacer--md) calc(var(--pf-v5-c-page__main-section--PaddingLeft) * -1);
+  padding: var(--pf-v5-global--spacer--md) 0 var(--pf-v5-global--spacer--md) var(--pf-v5-global--spacer--md);
+  box-shadow: var(--pf-v5-global--BoxShadow--lg-bottom);
 }
 
 .ws-toc.pf-m-expanded {
-  box-shadow: var(--pf-global--BoxShadow--sm-bottom)
+  box-shadow: var(--pf-v5-global--BoxShadow--sm-bottom)
 }
 
 /* Mobile jumplinks */
 @media (max-width: 1450px) {
-  .ws-toc.pf-m-expanded .pf-c-jump-links__main {
+  .ws-toc.pf-m-expanded .pf-v5-c-jump-links__main {
     max-height: 65vh;
     overflow: auto;
   }
   
-  .ws-toc .pf-c-jump-links__header {
+  .ws-toc .pf-v5-c-jump-links__header {
     position: sticky;
     top: 0;
-    background-color: var(--pf-global--BackgroundColor--200);
+    background-color: var(--pf-v5-global--BackgroundColor--200);
     z-index: 2;
   }
 }
 
-.ws-toc .pf-c-jump-links__main {
+.ws-toc .pf-v5-c-jump-links__main {
   scrollbar-width: none;
 }
 
 /* Hide TOC scrollbar Chrome, Safari & Opera */
-.ws-toc .pf-c-jump-links__main::-webkit-scrollbar {
+.ws-toc .pf-v5-c-jump-links__main::-webkit-scrollbar {
   display: none;
 }
 
@@ -46,7 +46,7 @@
     -ms-overflow-style: none;
     scrollbar-width: none;
     order: 1;
-    padding: 0 var(--pf-global--spacer--lg) var(--pf-global--spacer--lg) var(--pf-global--spacer--2xl);
+    padding: 0 var(--pf-v5-global--spacer--lg) var(--pf-v5-global--spacer--lg) var(--pf-v5-global--spacer--2xl);
     flex-grow: 1;
     background: none;
     margin: 0;
@@ -59,18 +59,18 @@
 }
 
 /* .ws-toc-link { */
-.ws-toc-item .pf-c-jump-links__link {
+.ws-toc-item .pf-v5-c-jump-links__link {
   position: relative;
   display: block;
-  color: var(--ws-toc-link--Color, var(--pf-global--Color--300));
-  font-size: var(--pf-global--FontSize--sm);
+  color: var(--ws-toc-link--Color, var(--pf-v5-global--Color--300));
+  font-size: var(--pf-v5-global--FontSize--sm);
   margin: -4px 0;
 }
 
-.ws-toc-sublist > .ws-toc-item:first-child .pf-c-jump-links__link {
+.ws-toc-sublist > .ws-toc-item:first-child .pf-v5-c-jump-links__link {
   margin-top: 0;
 }
 
-.ws-toc-item.pf-m-current .pf-c-jump-links__link::before {
+.ws-toc-item.pf-m-current .pf-v5-c-jump-links__link::before {
   z-index: 1;
 }

package/helpers/codesandbox.js

@@ -2,15 +2,13 @@ const { parse } = require('@patternfly/ast-helpers');
 const versions  = require('../versions.json');
 const overpass = require('./fonts');
 const { capitalize } = require('./capitalize');
-const path = require('path');
-const pathPrefix = process.env.pathPrefix;
 
 const getStaticParams = (title, html) => {
   const imgAssetRegex = /['"](\/assets\/images\/.*)['"]/g;
   let imgAsset;
   while ((imgAsset = imgAssetRegex.exec(html))) {
     const imgName = imgAsset[1];
-    html = html.replace(imgName, `https://www.patternfly.org/v4${imgName}`);
+    html = html.replace(imgName, `https://www.patternfly.org${imgName}`);
   }
 
   return {
@@ -18,7 +16,7 @@ const getStaticParams = (title, html) => {
       'index.html': {
         content: `
           <!DOCTYPE html>
-          <html lang="en" class="pf-m-redhat-font">
+          <html lang="en">
             <head>
               <meta charset="utf-8" />
               <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -184,7 +182,7 @@ function getReactParams(title, code, scope, lang, relativeImports, relPath, sour
     files: {
       'index.html': {
         content: `<!DOCTYPE html>
-<html lang="en" class="pf-m-redhat-font">
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />

package/helpers/getTitle.js

@@ -1,5 +1,5 @@
 module.exports = {
   getTitle(title) {
-    return `PatternFly 4${title ? ` • ${title}` : ''}`;
+    return `PatternFly${title ? ` • ${title}` : ''}`;
   }
-}
+}

package/layouts/sideNavLayout/sideNavLayout.css

@@ -1,5 +1,5 @@
 /* Page layout */
-/* tells .pf-c-page to consume the available space left over from the banners/footers */
+/* tells .pf-v5-c-page to consume the available space left over from the banners/footers */
 #ws-router {
   display: flex;
   flex-direction: column;
@@ -9,11 +9,7 @@
 }
 
 .ws-switcher-divider {
-  padding: 0 var(--pf-global--spacer--md);
-}
-
-.ws-patternfly-3 > svg {
-  margin-left: var(--pf-global--spacer--sm);
+  padding: 0 var(--pf-v5-global--spacer--md);
 }
 
 @media (min-width: 1200px) {
@@ -22,8 +18,8 @@
   }
 }
 
-.ws-page-sidebar > .pf-c-page__sidebar-body {
-  padding-top: var(--pf-global--spacer--md);
+.ws-page-sidebar > .pf-v5-c-page__sidebar-body {
+  padding-top: var(--pf-v5-global--spacer--md);
 }
 
 /* Search */
@@ -31,12 +27,12 @@
   /* Fix search results overflowing page */
   min-width: 480px !important;
 }
-.ws-global-search.pf-c-input-group {
+.ws-global-search.pf-v5-c-input-group {
   /* remove white background on dark Masthead */
-  --pf-c-input-group--BackgroundColor: none;
+  --pf-v5-c-input-group--BackgroundColor: none;
 }
 
 /* For tiny (200px) viewports */
-.ws-masthead .pf-c-toolbar__item  {
+.ws-masthead .pf-v5-c-toolbar__item  {
   min-width: 0;
 }