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

package/components/sectionGallery/sectionGalleryLayout.js

@@ -1,41 +1,91 @@
-import React from "react";
-import { Gallery, GalleryItem, Card, CardTitle, CardBody, CardFooter, Label } from "@patternfly/react-core";
-import { Link } from '../link/link';
-import { TextSummary } from "./TextSummary";
+import React from 'react';
+import {
+  Gallery,
+  GalleryItem,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardBody,
+  CardFooter,
+  Label,
+} from '@patternfly/react-core';
+import { navigate } from '@reach/router';
+import { TextSummary } from './TextSummary';
 
-export const SectionGalleryLayout = ({ galleryItems, layoutView, hasGridText, hasGridImages }) => {
+export const SectionGalleryLayout = ({
+  galleryItems,
+  layoutView,
+  hasGridText,
+  hasGridImages,
+}) => {
   if (layoutView !== 'grid') {
     return null;
   }
 
   return (
     <Gallery hasGutter>
-      {galleryItems.map(({idx, slug, id, itemName, illustration, isBeta, isDeprecated, isDemo, title, galleryItemsData}) => (
-        <GalleryItem span={4} key={idx}>
-          <Link to={slug} className="ws-section-gallery-item">
-            <Card
-              id={id}
-              key={idx}
-              isSelectableRaised
-            >
-              <CardTitle>{title}</CardTitle>
+      {galleryItems.map(
+        ({
+          idx,
+          slug,
+          id,
+          itemName,
+          illustration,
+          isBeta,
+          isDeprecated,
+          isDemo,
+          title,
+          galleryItemsData,
+        }) => (
+          <GalleryItem span={4} key={idx}>
+            <Card id={id} key={idx} isClickable>
+              <CardHeader
+                selectableActions={{
+                  onClickAction: (e) => {
+                    e.preventDefault();
+                    document.getElementById('ws-page-main').scrollIntoView();
+                    navigate(slug);
+                  },
+                  selectableActionId: `${id}-input`,
+                  selectableActionAriaLabelledby: id,
+                  name: `clickable-card-${idx}`,
+                }}
+              >
+                <CardTitle>{title}</CardTitle>
+              </CardHeader>
               {(hasGridImages || hasGridText) && (
                 <CardBody>
-                  { hasGridImages && illustration && <img src={illustration} alt={`${itemName} illustration`} /> }
-                  { hasGridText && <TextSummary id={id} itemsData={galleryItemsData} /> }
+                  {hasGridImages && illustration && (
+                    <img src={illustration} alt={`${itemName} illustration`} />
+                  )}
+                  {hasGridText && (
+                    <TextSummary id={id} itemsData={galleryItemsData} />
+                  )}
                 </CardBody>
               )}
               {(isBeta || isDeprecated || isDemo) && (
                 <CardFooter>
-                  {isBeta && (<Label color="blue" isCompact>Beta</Label>)}
-                  {!isBeta && isDeprecated && (<Label color="grey" isCompact>Deprecated</Label>)}
-                  {!isBeta && !isDeprecated && isDemo && (<Label color="purple" isCompact>Demo</Label>)}
+                  {isBeta && (
+                    <Label color="blue" isCompact>
+                      Beta
+                    </Label>
+                  )}
+                  {!isBeta && isDeprecated && (
+                    <Label color="grey" isCompact>
+                      Deprecated
+                    </Label>
+                  )}
+                  {!isBeta && !isDeprecated && isDemo && (
+                    <Label color="purple" isCompact>
+                      Demo
+                    </Label>
+                  )}
                 </CardFooter>
               )}
             </Card>
-          </Link>
-        </GalleryItem>
-      ))}
+          </GalleryItem>
+        )
+      )}
     </Gallery>
-  )
+  );
 };

package/components/sectionGallery/sectionGalleryToolbar.js

@@ -1,7 +1,18 @@
-import React from "react";
-import { Button, SearchInput, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem, Text, TextVariants, ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+import React from 'react';
+import {
+  Button,
+  SearchInput,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+  Content,
+  ContentVariants,
+  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';
+import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 
 export const SectionGalleryToolbar = ({
   galleryItems,
@@ -9,29 +20,53 @@ export const SectionGalleryToolbar = ({
   setSearchTerm,
   layoutView,
   setLayoutView,
-  placeholderText ="Search by name",
-  countText=" items"
+  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>
+        <SearchInput
+          onClear={false}
+          value={searchTerm}
+          placeholder={placeholderText}
+          onChange={(_evt, val) => setSearchTerm(val)}
+        />
       </ToolbarItem>
       {searchTerm && (
         <ToolbarItem>
-          <Button variant="link" onClick={() => setSearchTerm('')}>Reset</Button>
+          <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>
+            <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
+        variant="pagination"
+        spacer={{ default: 'spacerMd', md: 'spacerNone' }}
+        style={{ '--pf-v6-c-toolbar__item--MinWidth': 'max-content' }}
+      >
+        <Content component={ContentVariants.small}>
+          {galleryItems.length}
+          {countText}
+        </Content>
       </ToolbarItem>
     </ToolbarContent>
   </Toolbar>

package/components/sideNav/sideNav.js

@@ -19,14 +19,14 @@ const NavItem = ({ text, href, isDeprecated, isBeta, isDemo }) => {
   return (
     <PageContextConsumer key={href + text}>
       {({onSidebarToggle, isSidebarOpen }) => (
-          <li key={href + text} className="pf-v5-c-nav__item" onClick={() => isMobileView && onSidebarToggle && onSidebarToggle()}>
+          <li key={href + text} className="pf-v6-c-nav__item" onClick={() => isMobileView && onSidebarToggle && onSidebarToggle()}>
             <Link
               to={href}
               getProps={({ isCurrent, href, location }) => {
                 const { pathname } = location;
                 return {
                   className: css(
-                    'pf-v5-c-nav__link',
+                    'pf-v6-c-nav__link',
                     (isCurrent || pathname.startsWith(href + '/')) && 'pf-m-current'
                   )
                 }}
@@ -67,7 +67,6 @@ const ExpandableNav = ({groupedRoutes, location, section, subsection = null}) =>
       key={capitalize(currentSection.replace(/-/g, ' '))}
       isActive={isActive}
       isExpanded={isActive}
-      className="ws-side-nav-group"
       onClick={(event) => {
         // Don't bubble click event up, avoids subsection triggering duplicate analtics
         event.stopPropagation();
@@ -96,7 +95,7 @@ const ExpandableNav = ({groupedRoutes, location, section, subsection = null}) =>
                   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),
+              isBeta: navObj.sources.some(source => source.beta && source.source !== 'react-next' && source.source !== 'react-templates'),
               isDemo: navObj.sources.some(source => (
                   source.source === "react-demos" || source.source === "html-demos")
                 && !navObj.sources.some(source => source.source === "react" || source.source === "html")

package/components/tableOfContents/tableOfContents.css

@@ -1,45 +1,48 @@
 .ws-toc {
   align-self: flex-start;
   position: sticky;
-  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-block-start: calc(var(--pf-v5-c-page__main-section--PaddingTop) * -1);
-  margin-block-end: var(--pf-v5-global--spacer--md);
-  margin-inline-start: calc(var(--pf-v5-c-page__main-section--PaddingLeft) * -1);
-  margin-inline-end: calc(var(--pf-v5-c-page__main-section--PaddingRight) * -2);
-  padding-block-start: var(--pf-v5-global--spacer--md);
-  padding-block-end: var(--pf-v5-global--spacer--md);
-  padding-inline-start: var(--pf-v5-global--spacer--md);
+  width: calc(100% + var(--pf-v6-c-page__main-section--PaddingInlineStart) + var(--pf-v6-c-page__main-section--PaddingInlineEnd));
+  background-color: var(--pf-t--global--background--color--secondary--default);
+  z-index: 201;
+  margin-block-start: calc(var(--pf-v6-c-page__main-section--PaddingTop) * -1);
+  margin-block-end: var(--pf-t--global--spacer--md);
+  margin-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) * -1);
+  margin-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) * -2);
+  padding-block-start: var(--pf-t--global--spacer--md);
+  padding-block-end: var(--pf-t--global--spacer--md);
+  padding-inline-start: var(--pf-t--global--spacer--md);
   padding-inline-end: 0;
-  box-shadow: var(--pf-v5-global--BoxShadow--lg-bottom);
+  box-shadow: var(--pf-t--global--box-shadow--lg--bottom);
 }
 
 .ws-toc.pf-m-expanded {
-  box-shadow: var(--pf-v5-global--BoxShadow--sm-bottom)
+  box-shadow: var(--pf-t--global--box-shadow--sm--bottom)
+}
+
+.ws-toc .pf-v6-c-jump-links__toggle {
+  background-color: var(--pf-t--global--background--color--secondary--default);
 }
 
 /* Mobile jumplinks */
 @media (max-width: 1450px) {
-  .ws-toc.pf-m-expanded .pf-v5-c-jump-links__main {
+  .ws-toc.pf-m-expanded .pf-v6-c-jump-links__main {
     max-height: 65vh;
-    overflow: auto;
+    overflow-y:auto;
   }
-  
-  .ws-toc .pf-v5-c-jump-links__header {
+
+  .ws-toc .pf-v6-c-jump-links__header {
     position: sticky;
     top: 0;
-    background-color: var(--pf-v5-global--BackgroundColor--200);
     z-index: 2;
   }
 }
 
-.ws-toc .pf-v5-c-jump-links__main {
+.ws-toc .pf-v6-c-jump-links__main {
   scrollbar-width: none;
 }
 
 /* Hide TOC scrollbar Chrome, Safari & Opera */
-.ws-toc .pf-v5-c-jump-links__main::-webkit-scrollbar {
+.ws-toc .pf-v6-c-jump-links__main::-webkit-scrollbar {
   display: none;
 }
 
@@ -52,7 +55,7 @@
     -ms-overflow-style: none;
     scrollbar-width: none;
     order: 1;
-    padding: 0 var(--pf-v5-global--spacer--lg) var(--pf-v5-global--spacer--lg) var(--pf-v5-global--spacer--2xl);
+    padding: 0 var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--2xl);
     flex-grow: 1;
     background: none;
     margin: 0;
@@ -64,19 +67,3 @@
   }
 }
 
-/* .ws-toc-link { */
-.ws-toc-item .pf-v5-c-jump-links__link {
-  position: relative;
-  display: block;
-  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-v5-c-jump-links__link {
-  margin-top: 0;
-}
-
-.ws-toc-item.pf-m-current .pf-v5-c-jump-links__link::before {
-  z-index: 1;
-}

package/layouts/sideNavLayout/sideNavLayout.css

@@ -1,5 +1,5 @@
 /* Page layout */
-/* tells .pf-v5-c-page to consume the available space left over from the banners/footers */
+/* tells .pf-v6-c-page to consume the available space left over from the banners/footers */
 #ws-router {
   display: flex;
   flex-direction: column;
@@ -8,43 +8,8 @@
   flex: 1;
 }
 
-.ws-switcher-divider {
-  padding: 0 var(--pf-v5-global--spacer--md);
-}
-
-@media (min-width: 1200px) {
-  .ws-page-sidebar {
-    box-shadow: none !important;
-  }
-}
-
-.ws-page-sidebar > .pf-v5-c-page__sidebar-body {
-  padding-top: var(--pf-v5-global--spacer--md);
-}
-
 /* Search */
 #algolia-autocomplete-listbox-0 {
   /* Fix search results overflowing page */
   min-width: 480px !important;
 }
-.ws-global-search.pf-v5-c-input-group {
-  /* remove white background on dark Masthead */
-  --pf-v5-c-input-group--BackgroundColor: none;
-}
-
-/* For tiny (200px) viewports */
-.ws-masthead .pf-v5-c-toolbar__item  {
-  min-width: 0;
-}
-
-.ws-masthead .pf-v5-c-switch {
-  align-items: center;
-  --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-switch__input--checked__label--Color: var(--pf-v5-global--Color--100);
-}
-
-.ws-masthead .pf-v5-c-toggle-group {
-  --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v5-global--palette--blue-400);
-  --pf-v5-c-toggle-group__button--focus--BackgroundColor: transparent;
-  --pf-v5-c-toggle-group__button--hover--BackgroundColor: transparent;
-}