@patternfly/documentation-framework 2.0.0-alpha.4 → 2.0.0-alpha.41

package/components/sectionGallery/sectionGallery.css

@@ -0,0 +1,44 @@
+..ws-mdx-content-content {
+  max-width: initial !important;
+}
+
+.ws-section-gallery {
+  /* top placement */
+  margin-top: calc(var(--pf-v5-c-page__main-section--PaddingTop) * -1);
+}
+
+/* Toolbar styles */
+.ws-section-gallery .pf-v5-c-toolbar {
+  margin-left: calc(var(--pf-v5-c-page__main-section--PaddingLeft) * -1);
+  border-bottom: var(--pf-v5-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-v5-c-page__sidebar--m-light--BorderRightColor);
+  margin-bottom: var(--pf-v5-global--spacer--md);
+  width: calc(100% + var(--pf-v5-c-page__main-section--PaddingLeft) + var(--pf-v5-c-page__main-section--PaddingRight));
+  /* avoid hoverable data list items overlapping toolbar */
+  z-index: calc(var(--pf-v5-global--ZIndex--xs) + 2);
+}
+
+/* Match toolbar left-padding to gallery left-padding */
+.ws-section-gallery .pf-v5-c-toolbar .pf-v5-c-toolbar__content {
+  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-page__main-section--PaddingLeft);
+}
+
+/* Avoid toolbar wrap on smaller screens */
+.ws-section-gallery .pf-v5-c-toolbar__content-section {
+  flex-wrap: nowrap;
+}
+
+/* Avoid link styling on gallery/data list item names */
+.ws-section-gallery-item {
+  text-decoration: inherit;
+  color: inherit;
+}
+
+/* Ensure same height for all cards in a gallery row */
+.ws-section-gallery .pf-v5-c-card {
+  height: 100%;
+}
+
+/* Limit width for data list view only */
+.ws-section-gallery .pf-v5-c-data-list {
+  max-width: 956px;
+}

package/components/sectionGallery/sectionGallery.js

@@ -0,0 +1,53 @@
+import React from "react";
+
+import './sectionGallery.css';
+import { SectionGalleryToolbar } from "./sectionGalleryToolbar";
+import { SectionGalleryLayout } from "./sectionGalleryLayout";
+import { SectionDataListLayout } from "./sectionDataListLayout";
+import { SectionGalleryWrapper } from "./sectionGalleryWrapper";
+
+/** 
+ * Helper component returns gallery of items with search toolbar and switchable gallery/data list views.
+ * @param {Object} illustrations - Object of preview images mapped to their snake_case item display name
+ * @param {string} section - Name of the navigation section to create the gallery within
+ * @param {Object} galleryItemsData - Object containing the image location & summary text mapped to the gallery item's hyphenated-name
+ * @param {string} [placeholderText=Search by name] - Optional text to be displayed as placeholder for SearchInput
+ * @param {string} [countText= items] - Optional text to be displayed after the number of search results
+*/
+
+export const SectionGallery = ({
+  illustrations,
+  section,
+  subsection = null,
+  includeSubsections = false,
+  parseSubsections = false,
+  galleryItemsData,
+  placeholderText,
+  countText
+}) => (
+  <SectionGalleryWrapper
+    illustrations={illustrations}
+    section={section}
+    subsection={subsection}
+    includeSubsections={includeSubsections}
+    parseSubsections={parseSubsections}
+    galleryItemsData={galleryItemsData}
+  >
+    {(sectionGalleryItems, searchTerm, setSearchTerm, layoutView, setLayoutView) => {
+    return (
+      <>
+        <SectionGalleryToolbar
+          galleryItems={sectionGalleryItems}
+          searchTerm={searchTerm}
+          setSearchTerm={setSearchTerm}
+          layoutView={layoutView}
+          setLayoutView={setLayoutView}
+          placeholderText={placeholderText}
+          countText={countText}
+        />
+        <SectionGalleryLayout galleryItems={sectionGalleryItems} layoutView={layoutView} />
+        <SectionDataListLayout galleryItems={sectionGalleryItems} layoutView={layoutView} />
+      </>
+    )}}
+  </SectionGalleryWrapper>
+);

package/components/sectionGallery/sectionGalleryLayout.js

@@ -0,0 +1,37 @@
+import React from "react";
+import { Gallery, GalleryItem, Card, CardTitle, CardBody, CardFooter, Label } from "@patternfly/react-core";
+import { Link } from '../link/link';
+
+export const SectionGalleryLayout = ({ galleryItems, layoutView }) => {
+  if (layoutView !== 'grid') {
+    return null;
+  }
+
+  return (
+    <Gallery hasGutter>
+      {galleryItems.map(({idx, slug, id, itemName, illustration, isBeta}) => (
+        <GalleryItem span={4} key={idx}>
+          <Link to={slug} className="ws-section-gallery-item">
+            <Card
+              id={id}
+              key={idx}
+              isSelectableRaised
+            >
+              <CardTitle>{itemName}</CardTitle>
+              {illustration && (
+                <CardBody>
+                  <img src={illustration} alt={`${itemName} illustration`} />
+                </CardBody>
+              )}
+              {isBeta && (
+                <CardFooter>
+                  <Label color="blue">Beta feature</Label>
+                </CardFooter>
+              )}
+            </Card>
+          </Link>
+        </GalleryItem>
+      ))}
+    </Gallery>
+  )
+};

package/components/sectionGallery/sectionGalleryToolbar.js

@@ -0,0 +1,30 @@
+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,89 @@
+import React from "react";
+import { groupedRoutes } from '../../routes';
+
+export const SectionGalleryWrapper = ({section, subsection, galleryItemsData, illustrations, includeSubsections, parseSubsections, 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('grid');
+  const filteredItems = Object.entries(sectionRoutes)
+    .filter(([itemName, { slug }]) => (
+      // exclude current gallery page from results
+      slug !== location.pathname &&
+      itemName
+        .toLowerCase()
+        .includes(searchTerm.toLowerCase())
+    ));
+  const sectionGalleryItems = filteredItems
+    .sort(([itemName1], [itemName2]) => itemName1.localeCompare(itemName2))
+    .map(([itemName, itemData], idx) => {
+      // Convert to lowercase-camelcase ex: File upload - multiple ==> file_upload_multiple
+      const illustrationName = itemName
+        .replace('-', '')
+        .replace('  ',' ')
+        .split(' ')
+        .join('_')
+        .toLowerCase();
+      const illustration = illustrations[illustrationName] || illustrations.default_placeholder;
+      const { title, id, sources, isSubsection = false } = itemData;
+      // Display beta label if tab other than a '-next' tab is marked Beta
+      const isBeta = !isSubsection && sources && sources.some(src => src.beta && !src.source.includes('-next'));
+      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,
+        title,
+        id,
+        galleryItemsData
+      };
+    });
+
+  return (
+    <div className="ws-section-gallery">
+      { 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

@@ -12,19 +12,21 @@ const getIsActive = (location, section, subsection = null) => {
   return location.pathname.startsWith(`${process.env.pathPrefix}${slug}`);
 }
 
+const defaultValue = 50;
+
 const NavItem = ({ text, href }) => {
   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()}>
+          <li key={href + text} className="pf-v5-c-nav__item" onClick={() => isMobileView && onNavToggle()}>
             <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'
                   )
                 }}
@@ -67,9 +69,14 @@ 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 }]) => ({ text: id, href: slug, isSubsection, sortValue: (isSubsection ? subsectionSortValue : sortValue) }))
+        .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)

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/components/topNav/topNav.css

@@ -1,30 +1,30 @@
 /* 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-v5-c-nav__link {
+  color: var(--pf-v5-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);
+.ws-top-nav-link.pf-v5-c-nav__link:active,
+.ws-top-nav-link.pf-v5-c-nav__link:hover,
+.ws-top-nav-link.pf-v5-c-nav__link.pf-m-current {
+  color: var(--pf-v5-global--BackgroundColor--dark-100);
+  background-color: var(--pf-v5-global--BackgroundColor--light-100);
   transition: .5s;
 }
 
 /* Don't bother with specifity war */
-.ws-top-nav-link.pf-c-nav__link::before {
+.ws-top-nav-link.pf-v5-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;
+  border-color: var(--pf-v5-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 {
+.ws-top-nav-link.pf-v5-c-nav__link:active::before,
+.ws-top-nav-link.pf-v5-c-nav__link:hover::before,
+.ws-top-nav-link.pf-v5-c-nav__link.pf-m-current::before {
   transition: transform .5s;
   transform: scaleX(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;
 }