@patternfly/documentation-framework 6.0.0-alpha.99 → 6.0.2

package/components/footer/footer.js

@@ -9,7 +9,7 @@ import {
   Content,
 } from '@patternfly/react-core';
 import { Link } from '@patternfly/documentation-framework/components';
-import { GithubIcon, TwitterIcon } from '@patternfly/react-icons';
+import { GithubIcon } from '@patternfly/react-icons';
 import redhatLogo from './RHLogo.png';
 import redhatLogoDark from './RHLogoDark.png';
 
@@ -33,43 +33,43 @@ export const Footer = ({ isDarkTheme }) => (
               md={4}
               className="pf-v6-u-ml-md pf-v6-u-ml-0-on-md pf-v6-u-mb-xl pf-v6-u-mb-0-on-md"
             >
-              <p className="ws-org-pfsite-footer-menu-list-title">Quicklinks</p>
+              <p className="ws-org-pfsite-footer-menu-list-title">What's new</p>
               <nav aria-label="Quick Links">
                 <List isPlain className="ws-org-pfsite-footer-menu-list">
                   <ListItem className="ws-org-pfsite-footer-menu-list-item">
                     <Link
                       className="ws-org-pfsite-footer-menu-link"
-                      to={'/get-started/about-patternfly'}
-                      aria-label="Get started with PatternFly"
+                      to="/get-started/upgrade"
+                      aria-label="Latest PatternFly upgrade guide"
                     >
-                      Get started
+                      Upgrade
                     </Link>
                   </ListItem>
                   <ListItem className="ws-org-pfsite-footer-menu-list-item">
                     <Link
                       className="ws-org-pfsite-footer-menu-link"
-                      to="/components/all-components"
-                      aria-label="PatternFly components"
+                      to="/get-started/release-highlights/"
+                      aria-label="PatternFly release highlights"
                     >
-                      Components
+                      Releases
                     </Link>
                   </ListItem>
                   <ListItem className="ws-org-pfsite-footer-menu-list-item">
                     <Link
                       className="ws-org-pfsite-footer-menu-link"
-                      to="/layouts/about-layouts"
-                      aria-label="PatternFly layouts"
+                      to="/patternfly-ai/about-ai"
+                      aria-label="PatternFly's new AI resources"
                     >
-                      Layouts
+                      PatternFly AI
                     </Link>
                   </ListItem>
                   <ListItem className="ws-org-pfsite-footer-menu-list-item">
                     <Link
                       className="ws-org-pfsite-footer-menu-link"
-                      to="/design-foundations/about-design-foundations"
-                      aria-label="PatternFly styles"
+                      to="/tokens/about-tokens"
+                      aria-label="PatternFly's new token system"
                     >
-                      Styles
+                      Tokens
                     </Link>
                   </ListItem>
                 </List>
@@ -86,29 +86,28 @@ export const Footer = ({ isDarkTheme }) => (
                   <ListItem className="ws-org-pfsite-footer-menu-list-item">
                     <Link
                       className="ws-org-pfsite-footer-menu-link"
-                      to="/get-started/design"
-                      aria-label="How to contribute as a Designer"
+                      to="/get-started/about-patternfly"
+                      aria-label="Learn about PatternFly"
                     >
-                      Designers
+                      About PatternFly
                     </Link>
                   </ListItem>
                   <ListItem className="ws-org-pfsite-footer-menu-list-item">
                     <Link
                       className="ws-org-pfsite-footer-menu-link"
-                      to="/get-started/develop"
-                      aria-label="How to contribute as a Developer"
+                      to="https://github.com/patternfly/patternfly/blob/main/CODE_OF_CONDUCT.md"
+                      aria-label="Our code of conduct for contributions"
                     >
-                      Developers
+                      Code of conduct
                     </Link>
                   </ListItem>
                   <ListItem className="ws-org-pfsite-footer-menu-list-item">
                     <Link
                       className="ws-org-pfsite-footer-menu-link"
-                      to="https://github.com/patternfly/patternfly/blob/main/CODE_OF_CONDUCT.md"
-                      target="top"
-                      aria-label="PatternFly Code of Conduct"
+                      to="/get-started/contribute"
+                      aria-label="Learn how to contribute to PatternFly"
                     >
-                      Code of Conduct
+                      Contribute
                     </Link>
                   </ListItem>
                 </List>
@@ -119,9 +118,7 @@ export const Footer = ({ isDarkTheme }) => (
               md={4}
               className="pf-v6-u-mt-lg pf-v6-u-mt-0-on-md pf-v6-u-ml-md pf-v6-u-ml-0-on-md"
             >
-              <p className="ws-org-pfsite-footer-menu-list-title">
-                Stay in touch
-              </p>
+              <p className="ws-org-pfsite-footer-menu-list-title">Community</p>
               <nav aria-label="Stay in touch">
                 <List isPlain className="ws-org-pfsite-footer-menu-list">
                   <ListItem className="ws-org-pfsite-footer-menu-list-item">
@@ -137,11 +134,11 @@ export const Footer = ({ isDarkTheme }) => (
                   <ListItem className="ws-org-pfsite-footer-menu-list-item">
                     <Link
                       className="ws-org-pfsite-footer-menu-link"
-                      to="//github.com/orgs/patternfly/discussions"
+                      to="//medium.com/patternfly"
                       target="top"
-                      aria-label="Visit the PatternFly discussion forum"
+                      aria-label="Read the PatternFly blog"
                     >
-                      Discussions
+                      Blog
                     </Link>
                   </ListItem>
                   <ListItem className="ws-org-pfsite-footer-menu-list-item">
@@ -157,11 +154,20 @@ export const Footer = ({ isDarkTheme }) => (
                   <ListItem className="ws-org-pfsite-footer-menu-list-item">
                     <Link
                       className="ws-org-pfsite-footer-menu-link"
-                      to="//medium.com/patternfly"
+                      to="https://github.com/patternfly/patternfly/blob/main/CODE_OF_CONDUCT.md"
+                      aria-label="Join PatternFly meetings"
+                    >
+                      Calendar
+                    </Link>
+                  </ListItem>
+                  <ListItem className="ws-org-pfsite-footer-menu-list-item">
+                    <Link
+                      className="ws-org-pfsite-footer-menu-link"
+                      to="//github.com/orgs/patternfly/discussions"
                       target="top"
-                      aria-label="Read the PatternFly blog"
+                      aria-label="Visit the PatternFly discussion forum"
                     >
-                      PatternFly Medium
+                      Discussions
                     </Link>
                   </ListItem>
                 </List>
@@ -237,6 +243,7 @@ export const Footer = ({ isDarkTheme }) => (
               <Content
                 component="p"
                 className="ws-org-pfsite-footer-menu-about-description"
+                isEditorial
               >
                 PatternFly is an open source design system built to drive
                 consistency and unify teams. From documentation and components
@@ -259,8 +266,19 @@ export const Footer = ({ isDarkTheme }) => (
                 target="top"
                 aria-label="Link to PatternFly X page"
               >
-                <TwitterIcon />
+                <svg
+                  className="pf-v6-svg"
+                  viewBox="0 0 512 512"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  role="img"
+                  width="1em"
+                  height="1em"
+                >
+                  <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path>
+                </svg>
               </Link>
+              {/* Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.*/}
             </GridItem>
           </Grid>
         </GridItem>

package/components/sectionGallery/TextSummary.js

@@ -4,17 +4,17 @@ import { Content } from "@patternfly/react-core";
 
 // convert summary text from string to jsx, remove links
 export const SummaryComponent = ({ id, itemsData }) => {
-  const itemDasherized = id.split(' ').join('-').toLowerCase();
+  const itemDasherized = id.split(" ").join("-").toLowerCase();
   const summary = itemsData?.[itemDasherized]?.summary;
   if (!summary) {
     return null;
   }
   // Remove anchor tags to avoid <a> in summary nested within <a> of Link card/datalistitem
-  const summaryNoLinks = summary.replace(/<Link[^>]*>([^<]+)<\/Link>/gm, '$1');
+  const summaryNoLinks = summary.replace(/<Link[^>]*>([^<]+)<\/Link>/gm, "$1");
   const { code } = convertToReactComponent(`<>${summaryNoLinks}</>`);
-  const getSummaryComponent = new Function('React', code);
+  const getSummaryComponent = new Function("React", code);
   return getSummaryComponent(React);
-}
+};
 
 export const TextSummary = ({ id, itemsData }) => {
   if (!id) {
@@ -22,10 +22,10 @@ export const TextSummary = ({ id, itemsData }) => {
   }
 
   return (
-    <Content>
+    <Content isEditorial>
       <Content component="p">
         <SummaryComponent id={id} itemsData={itemsData} />
       </Content>
     </Content>
-  )
+  );
 };

package/components/sectionGallery/sectionDataListLayout.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 import {
   DataList,
   DataListItem,
@@ -10,9 +10,9 @@ import {
   Content,
   ContentVariants,
   Label,
-} from '@patternfly/react-core';
-import { Link } from '../link/link';
-import { TextSummary } from './TextSummary';
+} from "@patternfly/react-core";
+import { Link } from "../link/link";
+import { TextSummary } from "./TextSummary";
 
 export const SectionDataListLayout = ({
   galleryItems,
@@ -20,7 +20,7 @@ export const SectionDataListLayout = ({
   hasListText,
   hasListImages,
 }) => {
-  if (layoutView !== 'list') {
+  if (layoutView !== "list") {
     return null;
   }
 
@@ -55,9 +55,9 @@ export const SectionDataListLayout = ({
                       </DataListCell>
                     ),
                     <DataListCell width={5} key="text-description">
-                      <Split className={hasListText ? 'pf-v6-u-mb-md' : null}>
+                      <Split className={hasListText ? "pf-v6-u-mb-md" : null}>
                         <SplitItem isFilled>
-                          <Content>
+                          <Content isEditorial>
                             <Content component={ContentVariants.h2}>
                               <span>{title}</span>
                             </Content>

package/components/sectionGallery/sectionGalleryToolbar.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 import {
   Button,
   SearchInput,
@@ -10,9 +10,9 @@ import {
   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';
+} 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,
@@ -20,8 +20,8 @@ export const SectionGalleryToolbar = ({
   setSearchTerm,
   layoutView,
   setLayoutView,
-  placeholderText = 'Search by name',
-  countText = ' items',
+  placeholderText = "Search by name",
+  countText = " items",
 }) => (
   <Toolbar isSticky>
     <ToolbarContent>
@@ -35,7 +35,7 @@ export const SectionGalleryToolbar = ({
       </ToolbarItem>
       {searchTerm && (
         <ToolbarItem>
-          <Button variant="link" onClick={() => setSearchTerm('')}>
+          <Button variant="link" onClick={() => setSearchTerm("")}>
             Reset
           </Button>
         </ToolbarItem>
@@ -46,25 +46,25 @@ export const SectionGalleryToolbar = ({
             <ToggleGroupItem
               icon={<ThIcon />}
               aria-label="grid icon button"
-              isSelected={layoutView === 'grid'}
-              onChange={() => setLayoutView('grid')}
+              isSelected={layoutView === "grid"}
+              onChange={() => setLayoutView("grid")}
             ></ToggleGroupItem>
             <ToggleGroupItem
               icon={<ListIcon />}
               aria-label="list icon button"
-              isSelected={layoutView === 'list'}
-              onChange={() => setLayoutView('list')}
+              isSelected={layoutView === "list"}
+              onChange={() => setLayoutView("list")}
             ></ToggleGroupItem>
           </ToggleGroup>
         </ToolbarItem>
       </ToolbarGroup>
       <ToolbarItem
         variant="pagination"
-        gap={{ default: 'gapMd', md: 'gapNone' }}
-        style={{ '--pf-v6-c-toolbar__item--MinWidth': 'max-content' }}
+        gap={{ default: "gapMd", md: "gapNone" }}
+        style={{ "--pf-v6-c-toolbar__item--MinWidth": "max-content" }}
         className="pf-m-align-self-center"
       >
-        <Content component={ContentVariants.small}>
+        <Content isEditorial component={ContentVariants.small}>
           {galleryItems.length}
           {countText}
         </Content>

package/components/sideNav/sideNav.js

@@ -1,61 +1,88 @@
 import React from 'react';
 import { Link } from '../link/link';
-import { Label, Nav, NavList, NavExpandable, PageContextConsumer, capitalize, Flex, FlexItem } 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';
-// temp fix for tokens changes. uncomment next line once rect-core PR #11002 goes in and  org bumps the versions
-//import globalBreakpointXl from "@patternfly/react-tokens/dist/esm/global_breakpoint_xl";
+import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_xl';
 import { trackEvent } from '../../helpers';
 
 const getIsActive = (location, section, subsection = null) => {
   const slug = makeSlug(null, section, null, null, subsection);
   return location.pathname.startsWith(slug);
-}
+};
 
 const defaultValue = 50;
 
 const NavItem = ({ text, href, isDeprecated, isBeta, isDemo }) => {
-  // temp fix for tokens changes. uncomment next line and delete line 21 once rect-core PR #11002 goes in and  org bumps the versions
-  // const isMobileView = window.innerWidth < Number.parseInt(globalBreakpointXl.value, 10);
- const isMobileView = window.innerWidth < Number.parseInt("75rem", 10);
+  const isMobileView =
+    window.innerWidth < Number.parseInt(globalBreakpointXl.value, 10);
   return (
     <PageContextConsumer key={href + text}>
-      {({onSidebarToggle, isSidebarOpen }) => (
-          <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-v6-c-nav__link',
-                    (isCurrent || pathname.startsWith(href + '/')) && 'pf-m-current'
-                  )
-                }}
-              }
-              tabIndex={isSidebarOpen ? undefined : -1}
-            >
-              <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>
+      {({ onSidebarToggle, isSidebarOpen }) => (
+        <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-v6-c-nav__link',
+                  (isCurrent || pathname.startsWith(href + '/')) &&
+                    'pf-m-current'
+                ),
+              };
+            }}
+            tabIndex={isSidebarOpen ? undefined : -1}
+          >
+            <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>
       )}
     </PageContextConsumer>
-  )
+  );
 };
 
-const ExpandableNav = ({groupedRoutes, location, section, subsection = null}) => {
+const ExpandableNav = ({
+  groupedRoutes,
+  location,
+  section,
+  subsection = null,
+}) => {
   const isActive = getIsActive(location, section, subsection);
   const isSubsection = subsection;
   const routes = isSubsection
@@ -75,39 +102,97 @@ const ExpandableNav = ({groupedRoutes, location, section, subsection = null}) =>
         event.stopPropagation();
         // Don't trigger for bubbled events from NavItems
         if (!event.target.href) {
-          const isExpanded = event.currentTarget.classList.contains('pf-m-expanded');
+          const isExpanded =
+            event.currentTarget.classList.contains('pf-m-expanded');
           // 1 === expand section, 0 === collapse section
-          trackEvent('sidenav_section_click', 'click_event', analyticsName, isExpanded ? 0 : 1);
+          trackEvent(
+            'sidenav_section_click',
+            'click_event',
+            analyticsName,
+            isExpanded ? 0 : 1
+          );
         }
       }}
     >
       {Object.entries(routes || {})
-        .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);
+        .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;
           }
-          return sortValue1 > sortValue2 ? 1 : -1;
-        })
-        .map(navObj => navObj.isSubsection
-            ? ExpandableNav({groupedRoutes, location, section, subsection: navObj.text})
+        )
+        .map((navObj) => {
+          return navObj.isSubsection
+            ? 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 && 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")
-              )
-            })
-        )}
+                ...navObj,
+                isDeprecated:
+                  navObj.href?.includes('components') &&
+                  navObj.sources.some(
+                    (source) =>
+                      (source.source === 'react-deprecated' ||
+                        source.source === 'html-deprecated') &&
+                      // TODO: remove hardcoded Tile when Core PR merges
+                      // https://github.com/patternfly/patternfly/pull/7178
+                      (source.id === 'Tile' ||
+                        !navObj.sources.some(
+                          (source) =>
+                            source.source === 'react' ||
+                            source.source === 'html'
+                        ))
+                  ),
+                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'
+                    )
+                ),
+              });
+        })}
     </NavExpandable>
   );
-}
+};
 
 export const SideNav = ({ groupedRoutes = {}, navItems = [] }) => {
   React.useEffect(() => {
@@ -118,7 +203,8 @@ export const SideNav = ({ groupedRoutes = {}, navItems = [] }) => {
     if (!overflowElement) {
       return;
     }
-    const activeElements = overflowElement.getElementsByClassName('pf-m-current');
+    const activeElements =
+      overflowElement.getElementsByClassName('pf-m-current');
     if (activeElements.length > 0) {
       const lastElement = activeElements[activeElements.length - 1];
       lastElement.scrollIntoView({ block: 'center' });
@@ -128,18 +214,22 @@ export const SideNav = ({ groupedRoutes = {}, navItems = [] }) => {
   return (
     <Nav aria-label="Side Nav" theme="light">
       <NavList className="ws-side-nav-list">
-        {navItems.map(({ section, text, href }) => section
-          ? (
+        {navItems.map(({ section, text, href }) =>
+          section ? (
             <Location key={section}>
-              {({ location }) => ExpandableNav({groupedRoutes, location, section})}
+              {({ location }) =>
+                ExpandableNav({ groupedRoutes, location, section })
+              }
             </Location>
-          )
-          : NavItem({
-              text: text || capitalize(href.replace(/\//g, '').replace(/-/g, ' ')),
-              href: href
+          ) : (
+            NavItem({
+              text:
+                text || capitalize(href.replace(/\//g, '').replace(/-/g, ' ')),
+              href: href,
             })
+          )
         )}
       </NavList>
     </Nav>
   );
-}
+};