@patternfly/react-core 6.1.0-prerelease.9 → 6.1.0

package/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx

@@ -12,7 +12,7 @@ import {
   DropdownItem
 } from '@patternfly/react-core';
 import ThIcon from '@patternfly/react-icons/dist/js/icons/th-icon';
-import pfIcon from '@patternfly/react-core/src/demos/Card/pf-logo-small.svg';
+import brandImg from '@patternfly/react-core/src/demos/assets/PF-IconLogo.svg';
 
 const MockLink: React.FunctionComponent = ({ to, ...props }: any) => <a href={to} {...props}></a>;
 
@@ -69,7 +69,7 @@ export const ApplicationLauncherDemo: React.FunctionComponent = () => {
           id="3"
           isFavorited={favorites.includes('3')}
           isExternalLink
-          icon={<img src={pfIcon} />}
+          icon={<img src={brandImg} alt="" width={25} height={25} />}
           component={(props) => <MockLink {...props} to="#router-link2" />}
         >
           Custom component with icon

package/src/demos/CustomMenus/examples/DrilldownMenuDemo.tsx

@@ -52,7 +52,7 @@ export const DrilldownMenuDemo: React.FunctionComponent = () => {
   };
 
   const setHeight = (menuId: string, height: number) => {
-    if (!menuHeights[menuId] || (menuId !== 'rootMenu' && menuHeights[menuId] !== height)) {
+    if (menuHeights[menuId] === undefined || (menuId !== 'rootMenu' && menuHeights[menuId] !== height)) {
       setMenuHeights({
         ...menuHeights,
         [menuId]: height

package/src/demos/DashboardWrapper.tsx

@@ -98,8 +98,19 @@ export const DashboardWrapper: React.FC<DashboardWrapperProps> = ({
     </PageSidebar>
   );
 
+  const defaultContainerId = 'main-content-page-layout-default-nav';
+
+  const handleClick = (event: React.MouseEvent) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(mainContainerId ?? defaultContainerId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
   const PageSkipToContent = (
-    <SkipToContent href={`#${mainContainerId ?? 'main-content-page-layout-default-nav'}`}>
+    <SkipToContent onClick={handleClick} href={`#${mainContainerId ?? defaultContainerId}`}>
       Skip to content
     </SkipToContent>
   );
@@ -112,7 +123,7 @@ export const DashboardWrapper: React.FC<DashboardWrapperProps> = ({
       skipToContent={PageSkipToContent}
       banner={banner}
       breadcrumb={renderedBreadcrumb}
-      mainContainerId={mainContainerId ?? 'main-content-page-layout-default-nav'}
+      mainContainerId={mainContainerId ?? defaultContainerId}
       notificationDrawer={notificationDrawer}
       isNotificationDrawerExpanded={isNotificationDrawerExpanded}
       {...(typeof onPageResize === 'function' && {

package/src/demos/ExpandableSection/examples/ExpandableTextDemo.tsx

@@ -8,13 +8,7 @@ export const ExpandableTextDemo: React.FunctionComponent = () => {
     setIsExpanded(isExpanded);
   };
 
-  const content = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec dignissim turpis, et tristique purus.
-  Phasellus efficitur ante quis dolor viverra imperdiet. Orci varius natoque penatibus et magnis dis parturient
-  montes, nascetur ridiculus mus. Pellentesque laoreet, sem ac elementum semper, lectus mauris vestibulum nulla,
-  eget volutpat massa neque vel turpis. Donec finibus enim eu leo accumsan consectetur. Praesent massa diam,
-  tincidunt eu dui ac, ullamcorper elementum est. Phasellus metus felis, venenatis vitae semper nec, porta a metus.
-  Vestibulum justo nisi, imperdiet id eleifend at, varius nec lorem. Fusce porttitor mollis nibh, ut elementum ante
-  commodo tincidunt. Integer tincidunt at ipsum non aliquet.`;
+  const content = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec dignissim turpis, et tristique purus. Phasellus efficitur ante quis dolor viverra imperdiet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque laoreet, sem ac elementum semper, lectus mauris vestibulum nulla, eget volutpat massa neque vel turpis. Donec finibus enim eu leo accumsan consectetur. Praesent massa diam, tincidunt eu dui ac, ullamcorper elementum est. Phasellus metus felis, venenatis vitae semper nec, porta a metus. Vestibulum justo nisi, imperdiet id eleifend at, varius nec lorem. Fusce porttitor mollis nibh, ut elementum ante commodo tincidunt. Integer tincidunt at ipsum non aliquet.`;
 
   return (
     <ExpandableSection

package/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -279,7 +279,21 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
     </PageSidebar>
   );
   const pageId = 'main-content-page-layout-default-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   const PageBreadcrumb = (
     <Breadcrumb>

package/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx

@@ -329,7 +329,21 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
     </PageSidebar>
   );
   const pageId = 'main-content-page-layout-default-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   const PageBreadcrumb = (
     <Breadcrumb>

package/src/demos/assets/PF-IconLogo.svg

@@ -0,0 +1,17 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Logo">
+<path id="Rectangle-Copy-17" fill-rule="evenodd" clip-rule="evenodd" d="M15.6522 0H40V24.3478H37.3913C25.3851 24.3478 15.6522 14.6149 15.6522 2.6087V0Z" fill="#0066CC"/>
+<path id="Path-2" fill-rule="evenodd" clip-rule="evenodd" d="M40 0.869568L16.5217 40H34.9367C37.7331 40 40 37.7331 40 34.9367V0.869568Z" fill="url(#paint0_linear_6460_7774)"/>
+<path id="Path-2_2" fill-rule="evenodd" clip-rule="evenodd" d="M39.1304 9.53674e-06L-3.8147e-06 23.4783V5.0633C-3.8147e-06 2.26692 2.26691 9.53674e-06 5.06329 9.53674e-06L39.1304 9.53674e-06Z" fill="url(#paint1_linear_6460_7774)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_6460_7774" x1="1613.04" y1="0.869504" x2="-337.034" y2="3251" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2B9AF3"/>
+<stop offset="1" stop-color="#73BCF7" stop-opacity="0.502213"/>
+</linearGradient>
+<linearGradient id="paint1_linear_6460_7774" x1="39.1305" y1="-1573.04" x2="-3211" y2="377.033" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2B9AF3"/>
+<stop offset="1" stop-color="#73BCF7" stop-opacity="0.502213"/>
+</linearGradient>
+</defs>
+</svg>

package/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx

@@ -282,7 +282,20 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
 
   const mainContainerId = 'main-content-page-layout-tertiary-nav';
 
-  const pageSkipToContent = <SkipToContent href={`#${mainContainerId}`}>Skip to content</SkipToContent>;
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(mainContainerId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const pageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${mainContainerId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <Page

package/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx

@@ -515,7 +515,20 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
 
   const mainContainerId = 'main-content-page-layout-tertiary-nav';
 
-  const pageSkipToContent = <SkipToContent href={`#${mainContainerId}`}>Skip to content</SkipToContent>;
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(mainContainerId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const pageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${mainContainerId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <Page

package/src/demos/examples/Nav/NavDefault.tsx

@@ -58,7 +58,21 @@ export const NavDefault: React.FunctionComponent = () => {
     </PageSidebar>
   );
   const pageId = 'main-content-page-layout-default-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <>

package/src/demos/examples/Nav/NavExpandable.tsx

@@ -84,7 +84,21 @@ export const NavExpandableDemo: React.FunctionComponent = () => {
     </PageSidebar>
   );
   const pageId = 'main-content-page-layout-expandable-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <React.Fragment>

package/src/demos/examples/Nav/NavFlyout.tsx

@@ -259,7 +259,21 @@ export const NavFlyout: React.FunctionComponent = () => {
   );
 
   const pageId = 'main-content-page-layout-flyout-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <Page

package/src/demos/examples/Nav/NavGrouped.tsx

@@ -67,7 +67,21 @@ export const NavGrouped: React.FunctionComponent = () => {
     </PageSidebar>
   );
   const pageId = 'main-content-page-layout-group-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <>

package/src/demos/examples/Nav/NavHorizontal.tsx

@@ -204,7 +204,21 @@ export const NavHorizontal: React.FunctionComponent = () => {
   );
 
   const pageId = 'main-content-page-layout-horizontal-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <React.Fragment>

package/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx

@@ -258,7 +258,21 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
   );
 
   const pageId = 'main-content-page-layout-horizontal-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <React.Fragment>

package/src/demos/examples/Nav/NavManual.tsx

@@ -234,7 +234,21 @@ export const NavManual: React.FunctionComponent = () => {
     </PageSidebar>
   );
   const pageId = 'main-content-page-layout-manual-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <React.Fragment>

package/src/demos/examples/Nav/NavWithSubnav.tsx

@@ -69,7 +69,21 @@ export const NavWithSubnav: React.FunctionComponent = () => {
     </PageSidebar>
   );
   const pageId = 'main-content-page-layout-default-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   const SubNav = (
     <Nav onSelect={onSubNavSelect} aria-label="Subnav" variant="horizontal-subnav">

package/src/demos/examples/Page/PageContextSelector.tsx

@@ -284,7 +284,20 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
 
   const mainContainerId = 'main-content';
 
-  const pageSkipToContent = <SkipToContent href={`#${mainContainerId}`}>Skip to content</SkipToContent>;
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(mainContainerId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const pageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${mainContainerId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <Page

package/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx

@@ -251,7 +251,20 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
 
   const mainContainerId = 'main-content';
 
-  const pageSkipToContent = <SkipToContent href={`#${mainContainerId}`}>Skip to content</SkipToContent>;
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(mainContainerId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const pageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${mainContainerId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <Page

package/src/demos/examples/Page/PageStickySectionGroup.tsx

@@ -251,7 +251,20 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
 
   const mainContainerId = 'main-content';
 
-  const pageSkipToContent = <SkipToContent href={`#${mainContainerId}`}>Skip to content</SkipToContent>;
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(mainContainerId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const pageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${mainContainerId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <Page

package/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx

@@ -243,7 +243,20 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
 
   const mainContainerId = 'main-content';
 
-  const pageSkipToContent = <SkipToContent href={`#${mainContainerId}`}>Skip to content</SkipToContent>;
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(mainContainerId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const pageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${mainContainerId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <Page

package/src/demos/examples/Wizard/InPageWithDrawer.tsx

@@ -104,7 +104,21 @@ export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
   );
 
   const pageId = 'main-content-page-layout-default-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   const PageBreadcrumb = (
     <Breadcrumb>

package/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx

@@ -105,7 +105,20 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = ()
 
   const pageId = 'main-content-page-layout-default-nav';
 
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   const PageBreadcrumb = (
     <Breadcrumb>

package/src/demos/examples/DashboardWrapper.js

@@ -1,126 +0,0 @@
-import React from 'react';
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  Content,
-  Nav,
-  NavItem,
-  NavList,
-  Page,
-  PageSection,
-  PageSidebar,
-  PageSidebarBody,
-  SkipToContent
-} from '@patternfly/react-core';
-import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
-
-export const DashboardBreadcrumb = (
-  <Breadcrumb>
-    <BreadcrumbItem>Section home</BreadcrumbItem>
-    <BreadcrumbItem to="#">Section title</BreadcrumbItem>
-    <BreadcrumbItem to="#">Section title</BreadcrumbItem>
-    <BreadcrumbItem to="#" isActive>
-      Section landing
-    </BreadcrumbItem>
-  </Breadcrumb>
-);
-
-export const PageTemplateTitle = (
-  <PageSection>
-    <Content>
-      <h1>Main title</h1>
-      <p>This is a full page demo.</p>
-    </Content>
-  </PageSection>
-);
-
-export default class DashboardWrapper extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      activeItem: 1
-    };
-
-    this.onNavSelect = (_event, result) => {
-      this.setState({
-        activeItem: result.itemId
-      });
-    };
-  }
-
-  render() {
-    const { activeItem } = this.state;
-    const {
-      children,
-      mainContainerId,
-      breadcrumb,
-      masthead,
-      sidebar,
-      sidebarNavOpen,
-      onPageResize = () => {},
-      hasNoBreadcrumb,
-      notificationDrawer,
-      isNotificationDrawerExpanded,
-      hasPageTemplateTitle,
-      ...pageProps
-    } = this.props;
-
-    let renderedBreadcrumb;
-    if (!hasNoBreadcrumb) {
-      renderedBreadcrumb = breadcrumb !== undefined ? breadcrumb : DashboardBreadcrumb;
-    }
-
-    const PageNav = (
-      <Nav onSelect={this.onNavSelect} aria-label="Nav">
-        <NavList>
-          <NavItem itemId={0} isActive={activeItem === 0} to="#system-panel">
-            System panel
-          </NavItem>
-          <NavItem itemId={1} isActive={activeItem === 1} to="#policy">
-            Policy
-          </NavItem>
-          <NavItem itemId={2} isActive={activeItem === 2} to="#auth">
-            Authentication
-          </NavItem>
-          <NavItem itemId={3} isActive={activeItem === 3} to="#network">
-            Network services
-          </NavItem>
-          <NavItem itemId={4} isActive={activeItem === 4} to="#server">
-            Server
-          </NavItem>
-        </NavList>
-      </Nav>
-    );
-
-    const _sidebar = (
-      <PageSidebar isSidebarOpen={sidebarNavOpen || false}>
-        <PageSidebarBody>{PageNav}</PageSidebarBody>
-      </PageSidebar>
-    );
-    const PageSkipToContent = (
-      <SkipToContent href={`#${mainContainerId ? mainContainerId : 'main-content-page-layout-default-nav'}`}>
-        Skip to content
-      </SkipToContent>
-    );
-
-    return (
-      <Page
-        masthead={masthead !== undefined ? masthead : <DashboardHeader />}
-        sidebar={sidebar !== undefined ? sidebar : _sidebar}
-        isManagedSidebar
-        skipToContent={PageSkipToContent}
-        breadcrumb={renderedBreadcrumb}
-        mainContainerId={mainContainerId ? mainContainerId : 'main-content-page-layout-default-nav'}
-        notificationDrawer={notificationDrawer}
-        isNotificationDrawerExpanded={isNotificationDrawerExpanded}
-        {...(typeof onPageResize === 'function' && {
-          onPageResize: (event, resizeObject) => onPageResize(event, resizeObject)
-        })}
-        {...pageProps}
-      >
-        {hasPageTemplateTitle && PageTemplateTitle}
-        {children}
-      </Page>
-    );
-  }
-}