@patternfly/documentation-framework 6.0.0-alpha.6 → 6.0.0-alpha.61

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,
+  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';
+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' }}
+      >
+        <Text component={TextVariants.small}>
+          {galleryItems.length}
+          {countText}
+        </Text>
       </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;
-}

package/layouts/sideNavLayout/sideNavLayout.js

@@ -24,7 +24,7 @@ import {
   ToolbarItem,
   SkipToContent,
   Switch,
-  SearchInput,
+  // SearchInput,
   ToggleGroup,
   ToggleGroupItem
 } from '@patternfly/react-core';
@@ -35,6 +35,7 @@ import SunIcon from '@patternfly/react-icons/dist/esm/icons/sun-icon';
 import { SideNav, TopNav, GdprBanner } from '../../components';
 import staticVersions from '../../versions.json';
 import v5Logo from '../PF-HorizontalLogo-Reverse.svg';
+import { Footer } from '@patternfly/documentation-framework/components';
 
 export const RtlContext = createContext(false);
 
@@ -51,38 +52,38 @@ const HeaderTools = ({
   const initialVersion = staticVersions.Releases.find(release => release.latest);
   const latestVersion = versions.Releases.find(version => version.latest);
   const previousReleases = Object.values(versions.Releases).filter(version => !version.hidden && !version.latest);
-  const hasSearch = algolia;
+  // const hasSearch = algolia;
   const [isDropdownOpen, setDropdownOpen] = useState(false);
-  const [searchValue, setSearchValue] = React.useState('');
-  const [isSearchExpanded, setIsSearchExpanded] = React.useState(false);
+  // const [searchValue, setSearchValue] = React.useState('');
+  // const [isSearchExpanded, setIsSearchExpanded] = React.useState(false);
   const [isDarkTheme, setIsDarkTheme] = React.useState(false);
 
   const getDropdownItem = (version, isLatest = false) => (
     <DropdownItem itemId={version.name} key={version.name} to={isLatest ? '/' : `/${version.name}`}>
-      {`Release ${version.name}`}
+      {`Current ${version.name}`}
     </DropdownItem>
   );
 
-  const onChange = (_evt, value) => {
-    setSearchValue(value);
-  };
+  // const onChange = (_evt, value) => {
+  //   setSearchValue(value);
+  // };
 
-  const onToggleExpand = (_evt, isSearchExpanded) => {
-    setIsSearchExpanded(!isSearchExpanded);
-  };
+  // const onToggleExpand = (_evt, isSearchExpanded) => {
+  //   setIsSearchExpanded(!isSearchExpanded);
+  // };
 
   const toggleDarkTheme = (_evt, selected) => {
     const darkThemeToggleClicked = !selected === isDarkTheme
-    document.querySelector('html').classList.toggle('pf-v5-theme-dark', darkThemeToggleClicked);
+    document.querySelector('html').classList.toggle('pf-v6-theme-dark', darkThemeToggleClicked);
     setIsDarkTheme(darkThemeToggleClicked);
   };
 
-  useEffect(() => {
-    // reattach algolia to input each time search is expanded
-    if (hasSearch && isSearchExpanded) {
-      attachDocSearch(algolia, '.ws-global-search .pf-v5-c-text-input-group__text-input', 1000);
-    }
-  }, [isSearchExpanded])
+  // useEffect(() => {
+  //   // reattach algolia to input each time search is expanded
+  //   if (hasSearch && isSearchExpanded) {
+  //     attachDocSearch(algolia, '.ws-global-search .pf-v6-c-text-input-group__text-input', 1000);
+  //   }
+  // }, [isSearchExpanded])
 
   return (
     <Toolbar isFullHeight>
@@ -93,8 +94,7 @@ const HeaderTools = ({
           </ToolbarItem>
         )}
         <ToolbarGroup
-          align={{ default: 'alignRight' }}
-          spaceItems={{ default: 'spacerNone', md: 'spacerMd' }}
+          align={{ default: 'alignEnd' }}
         >
           {hasDarkThemeSwitcher && (
             <ToolbarItem>
@@ -109,7 +109,7 @@ const HeaderTools = ({
               <Switch id="ws-rtl-switch" label={'RTL'} defaultChecked={isRTL} onChange={() => setIsRTL(isRTL => !isRTL)} />
             </ToolbarItem>
           )}
-          {hasSearch && (
+          {/* {hasSearch && (
             <ToolbarItem>
               <SearchInput
                 className="ws-global-search"
@@ -120,7 +120,7 @@ const HeaderTools = ({
                 expandableInput={{ isExpanded: isSearchExpanded, onToggleExpand, toggleAriaLabel: 'Expandable search input toggle' }}
               />
             </ToolbarItem>
-          )}
+          )} */}
           <ToolbarItem>
             <Button
               component="a"
@@ -145,7 +145,7 @@ const HeaderTools = ({
                     onClick={() => setDropdownOpen(!isDropdownOpen)}
                     isExpanded={isDropdownOpen}
                   >
-                    Release {initialVersion.name}
+                    Current alphas
                   </MenuToggle>
                 )}
               >
@@ -163,12 +163,35 @@ const HeaderTools = ({
                     </DropdownList>
                   </DropdownGroup>
                 )}
-                <Divider key="divider" className="ws-switcher-divider"/>
+                <Divider key="divider1"/>
+                <DropdownGroup key="Alpha preview version" label="Alpha preview version">
+                  <DropdownList>
+                    <DropdownItem
+                      key="PatternFly 6"
+                      className="ws-patternfly-versions"
+                      isExternalLink
+                      to="https://staging-v6.patternfly.org/"
+                      itemId="patternfly-6"
+                    >
+                      PatternFly 6
+                    </DropdownItem>
+                  </DropdownList>
+                </DropdownGroup>
+                <Divider key="divider2"/>
                 <DropdownGroup key="Previous versions" label="Previous versions">
                   <DropdownList>
+                    <DropdownItem
+                      key="PatternFly 5"
+                      className="ws-patternfly-versions"
+                      isExternalLink
+                      to="https://www.patternfly.org"
+                      itemId="patternfly-5"
+                    >
+                      PatternFly 5
+                    </DropdownItem>
                     <DropdownItem
                       key="PatternFly 4"
-                      className="ws-patternfly-3"
+                      className="ws-patternfly-versions"
                       isExternalLink
                       to="http://v4-archive.patternfly.org/v4/"
                       itemId="patternfly-4"
@@ -177,7 +200,7 @@ const HeaderTools = ({
                     </DropdownItem>
                     <DropdownItem
                       key="PatternFly 3"
-                      className="ws-patternfly-3"
+                      className="ws-patternfly-versions"
                       isExternalLink
                       to="https://pf3.patternfly.org/"
                       itemId="patternfly-3"
@@ -201,7 +224,7 @@ export function attachDocSearch(algolia, inputSelector, timeout) {
       inputSelector,
       autocompleteOptions: {
         hint: false,
-        appendTo: `.ws-global-search .pf-v5-c-text-input-group`,
+        appendTo: `.ws-global-search .pf-v6-c-text-input-group`,
       },
       debug: process.env.NODE_ENV !== 'production',
       ...algolia
@@ -240,18 +263,15 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
   }, []);
 
   const SideBar = (
-    <PageSidebar
-      className="ws-page-sidebar"
-      theme="light"
-    >
+    <PageSidebar>
       <PageSidebarBody>
         <SideNav navItems={sideNavItems} groupedRoutes={groupedRoutes} />
       </PageSidebarBody>
     </PageSidebar>
   );
 
-  const Header = (
-    <Masthead className="ws-masthead">
+  const masthead = (
+    <Masthead>
       <MastheadToggle>
         <PageToggleButton variant="plain" aria-label="Global navigation">
           <BarsIcon />
@@ -263,7 +283,7 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
             <svg height="40px" viewBox="0 0 679 158">
               <title>PF-HorizontalLogo-Color</title>
               <defs>
-                <linearGradient x1="68%" y1="2.25860997e-13%" x2="32%" y2="100%" id="linearGradient-basic-masthead">
+                <linearGradient x1="68%" y1="2.25860997e-13%" x2="32%" y2="100%" id="linearGradient-website-masthead">
                   <stop stopColor="#2B9AF3" offset="0%"></stop>
                   <stop stopColor="#73BCF7" stopOpacity="0.502212631" offset="100%"></stop>
                 </linearGradient>
@@ -282,9 +302,9 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
                   <path d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"></path>
                 </g>
                 <g transform="translate(0.000000, 0.000000)">
-                  <path d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z" fill="#0066CC"></path>
-                  <path d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z" fill="url(#linearGradient-basic-masthead)"></path>
-                  <path d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z" fill="url(#linearGradient-basic-masthead)" transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "></path>
+                  <path d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z" fill='var(--pf-t--color--blue--50)'></path>
+                  <path d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z" fill="url(#linearGradient-website-masthead)"></path>
+                  <path d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z" fill="url(#linearGradient-website-masthead)" transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "></path>
                 </g>
               </g>
             </svg>
@@ -314,13 +334,15 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
         <Page
           id="ws-page"
           mainContainerId="ws-page-main"
-          header={Header}
+          mainComponent="div"
+          masthead={masthead}
           sidebar={SideBar}
           skipToContent={<SkipToContent href="#ws-page-main">Skip to content</SkipToContent>}
           isManagedSidebar
           defaultManagedSidebarIsOpen={navOpenProp}
         >
           {children}
+          {process.env.hasFooter && <Footer />}
         </Page>
         <div id="ws-page-banners">
           {hasGdprBanner && <GdprBanner />}