@patternfly/react-core 4.247.0 → 4.247.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.247.0",
+  "version": "4.247.1",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "064d341a881a7ab291add565ed1929cf915ab049"
+  "gitHead": "22fc7d8e8189ef2da0eb483a8c35c4c0e2be3807"
 }

package/src/demos/Page.md

@@ -0,0 +1,47 @@
+---
+id: Page
+section: components
+---
+
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import imgBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
+import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
+import LightbulbIcon from '@patternfly/react-icons/dist/esm/icons/lightbulb-icon';
+
+- All examples set the `isManagedSidebar` prop on the Page component to have the sidebar automatically close for smaller screen widths. You can also manually control this behavior by not adding the `isManagedSidebar` prop and instead:
+
+  1. Add an onNavToggle callback to PageHeader
+  2. Pass a boolean into the isNavOpen prop to PageSidebar
+
+- To make the page take up the full height, it is recommended to set the height of all ancestor elements up to the page component to `100%`
+
+## Layouts
+
+This demonstrates a variety of navigation patterns in the context of a full page layout. These can be used as a basis for choosing the most appropriate page template for your application.
+
+### Sticky section group
+
+```ts file='./examples/Page/PageStickySectionGroup.tsx' isFullscreen
+```
+
+### Sticky section group (alternate syntax)
+
+```ts  file='./examples/Page/PageStickySectionGroupAlternate.tsx' isFullscreen
+```
+
+### Sticky section group (using PageHeader)
+
+This demo is provided becuase PageHeader and PageHeaderTools are still in use; however, going forward Masthead and Toolbar should be used to make headers rather than PageHeader and PageHeaderTools.
+
+```ts file='./examples/Page/PageStickySectionGroupUsingPageHeader.tsx' isFullscreen
+```
+
+### Sticky section breadcrumb (with breakpoints)
+
+```ts file='./examples/Page/PageStickySectionBreadcrumb.tsx' isFullscreen
+```

package/src/demos/examples/DashboardWrapper.js

@@ -60,7 +60,8 @@ export default class DashboardWrapper extends React.Component {
       hasNoBreadcrumb,
       notificationDrawer,
       isNotificationDrawerExpanded,
-      hasPageTemplateTitle
+      hasPageTemplateTitle,
+      ...pageProps
     } = this.props;
 
     let renderedBreadcrumb;
@@ -108,6 +109,7 @@ export default class DashboardWrapper extends React.Component {
         notificationDrawer={notificationDrawer}
         isNotificationDrawerExpanded={isNotificationDrawerExpanded}
         onPageResize={onPageResize}
+        {...pageProps}
       >
         {hasPageTemplateTitle && PageTemplateTitle}
         {children}

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

@@ -0,0 +1,305 @@
+import React from 'react';
+import {
+  ApplicationLauncher,
+  ApplicationLauncherItem,
+  Avatar,
+  Brand,
+  Breadcrumb,
+  BreadcrumbItem,
+  Button,
+  ButtonVariant,
+  Card,
+  CardBody,
+  Divider,
+  Dropdown,
+  DropdownGroup,
+  DropdownItem,
+  DropdownToggle,
+  Gallery,
+  GalleryItem,
+  KebabToggle,
+  Masthead,
+  MastheadBrand,
+  MastheadContent,
+  MastheadMain,
+  MastheadToggle,
+  Nav,
+  NavItem,
+  NavList,
+  Page,
+  PageSection,
+  PageSectionVariants,
+  PageSidebar,
+  PageToggleButton,
+  SkipToContent,
+  Text,
+  TextContent,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem
+} from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+
+interface NavOnSelectProps {
+  groupId: number | string;
+  itemId: number | string;
+  to: string;
+  event: React.FormEvent<HTMLInputElement>;
+}
+
+export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
+  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
+  const [isAppLauncherOpen, setIsAppLauncherOpen] = React.useState(false);
+  const [activeItem, setActiveItem] = React.useState(1);
+
+  const onNavSelect = (selectedItem: NavOnSelectProps) => {
+    typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
+  };
+
+  const onDropdownToggle = (isOpen: boolean) => {
+    setIsDropdownOpen(isOpen);
+  };
+
+  const onDropdownSelect = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+
+  const onKebabDropdownToggle = (isOpen: boolean) => {
+    setIsKebabDropdownOpen(isOpen);
+  };
+
+  const onKebabDropdownSelect = () => {
+    setIsKebabDropdownOpen(!isKebabDropdownOpen);
+  };
+
+  const onFullKebabDropdownToggle = (isOpen: boolean) => {
+    setIsFullKebabDropdownOpen(isOpen);
+  };
+
+  const onFullKebabDropdownSelect = () => {
+    setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
+  };
+
+  const onAppLauncherToggle = (isOpen: boolean) => {
+    setIsAppLauncherOpen(isOpen);
+  };
+
+  const onAppLauncherSelect = () => {
+    setIsAppLauncherOpen(!isAppLauncherOpen);
+  };
+
+  const dashboardBreadcrumb = (
+    <Breadcrumb>
+      <BreadcrumbItem>Section home</BreadcrumbItem>
+      <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+      <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+      <BreadcrumbItem to="#" isActive>
+        Section landing
+      </BreadcrumbItem>
+    </Breadcrumb>
+  );
+
+  const kebabDropdownItems = [
+    <DropdownItem key="settings">
+      <CogIcon /> Settings
+    </DropdownItem>,
+    <DropdownItem key="help">
+      <HelpIcon /> Help
+    </DropdownItem>
+  ];
+
+  const fullKebabDropdownItems = [
+    <DropdownGroup key="group 2">
+      <DropdownItem key="group 2 profile">My profile</DropdownItem>
+      <DropdownItem key="group 2 user" component="button">
+        User management
+      </DropdownItem>
+      <DropdownItem key="group 2 logout">Logout</DropdownItem>
+    </DropdownGroup>,
+    <Divider key="divider" />,
+    <DropdownItem key="settings">
+      <CogIcon /> Settings
+    </DropdownItem>,
+    <DropdownItem key="help">
+      <HelpIcon /> Help
+    </DropdownItem>
+  ];
+
+  const userDropdownItems = [
+    <DropdownGroup key="group 2">
+      <DropdownItem key="group 2 profile">My profile</DropdownItem>
+      <DropdownItem key="group 2 user" component="button">
+        User management
+      </DropdownItem>
+      <DropdownItem key="group 2 logout">Logout</DropdownItem>
+    </DropdownGroup>
+  ];
+
+  const appLauncherItems = [
+    <ApplicationLauncherItem key="application_1a" href="#">
+      Application 1 (anchor link)
+    </ApplicationLauncherItem>,
+    <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
+      Application 2 (button with onClick)
+    </ApplicationLauncherItem>
+  ];
+
+  const headerToolbar = (
+    <Toolbar id="toolbar" isFullHeight isStatic>
+      <ToolbarContent>
+        <ToolbarGroup
+          variant="icon-button-group"
+          alignment={{ default: 'alignRight' }}
+          spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+        >
+          <ToolbarItem>
+            <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
+          </ToolbarItem>
+          <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
+            <ToolbarItem visibility={{ default: 'hidden', md: 'hidden', lg: 'visible' }}>
+              <ApplicationLauncher
+                onSelect={onAppLauncherSelect}
+                onToggle={onAppLauncherToggle}
+                isOpen={isAppLauncherOpen}
+                items={appLauncherItems}
+              />
+            </ToolbarItem>
+            <ToolbarItem>
+              <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
+            </ToolbarItem>
+            <ToolbarItem>
+              <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
+            </ToolbarItem>
+          </ToolbarGroup>
+          <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
+            <Dropdown
+              isPlain
+              position="right"
+              onSelect={onKebabDropdownSelect}
+              toggle={<KebabToggle onToggle={onKebabDropdownToggle} />}
+              isOpen={isKebabDropdownOpen}
+              dropdownItems={kebabDropdownItems}
+            />
+          </ToolbarItem>
+          <ToolbarItem visibility={{ md: 'hidden' }}>
+            <Dropdown
+              isPlain
+              position="right"
+              onSelect={onFullKebabDropdownSelect}
+              toggle={<KebabToggle onToggle={onFullKebabDropdownToggle} />}
+              isOpen={isFullKebabDropdownOpen}
+              dropdownItems={fullKebabDropdownItems}
+            />
+          </ToolbarItem>
+        </ToolbarGroup>
+        <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
+          <Dropdown
+            isFullHeight
+            onSelect={onDropdownSelect}
+            isOpen={isDropdownOpen}
+            toggle={
+              <DropdownToggle icon={<Avatar src={imgAvatar} alt="Avatar" />} onToggle={onDropdownToggle}>
+                Ned Username
+              </DropdownToggle>
+            }
+            dropdownItems={userDropdownItems}
+          />
+        </ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+
+  const masthead = (
+    <Masthead>
+      <MastheadToggle>
+        <PageToggleButton variant="plain" aria-label="Global navigation">
+          <BarsIcon />
+        </PageToggleButton>
+      </MastheadToggle>
+      <MastheadMain>
+        <MastheadBrand>
+          <Brand
+            widths={{ default: '180px', md: '180px', '2xl': '220px' }}
+            src="/assets/images/logo__pf--reverse--base.png"
+            alt="Fallback patternFly default logo"
+          >
+            <source media="(min-width: 768px)" srcSet="/assets/images/logo__pf--reverse-on-md.svg" />
+            <source srcSet="/assets/images/logo__pf--reverse--base.svg" />
+          </Brand>
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>{headerToolbar}</MastheadContent>
+    </Masthead>
+  );
+
+  const pageNav = (
+    <Nav onSelect={onNavSelect}>
+      <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 nav={pageNav} />;
+
+  const mainContainerId = 'main-content';
+
+  const pageSkipToContent = <SkipToContent href={`#${mainContainerId}`}>Skip to content</SkipToContent>;
+
+  return (
+    <Page
+      header={masthead}
+      sidebar={sidebar}
+      isManagedSidebar
+      skipToContent={pageSkipToContent}
+      breadcrumb={dashboardBreadcrumb}
+      mainContainerId={mainContainerId}
+      isBreadcrumbWidthLimited
+      breadcrumbProps={{
+        stickyOnBreakpoint: {
+          md: 'top'
+        }
+      }}
+    >
+      <PageSection variant={PageSectionVariants.light} isWidthLimited>
+        <TextContent>
+          <Text component="h1">Main title</Text>
+          <Text component="p">This is a full page demo.</Text>
+        </TextContent>
+      </PageSection>
+      <PageSection isWidthLimited>
+        <Gallery hasGutter>
+          {Array.apply(0, Array(50)).map((_x, i) => (
+            <GalleryItem key={i}>
+              <Card>
+                <CardBody>This is a card</CardBody>
+              </Card>
+            </GalleryItem>
+          ))}
+        </Gallery>
+      </PageSection>
+    </Page>
+  );
+};

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

@@ -0,0 +1,306 @@
+import React from 'react';
+import {
+  ApplicationLauncher,
+  ApplicationLauncherItem,
+  Avatar,
+  Brand,
+  Breadcrumb,
+  BreadcrumbItem,
+  Button,
+  ButtonVariant,
+  Card,
+  CardBody,
+  Divider,
+  Dropdown,
+  DropdownGroup,
+  DropdownItem,
+  DropdownToggle,
+  Gallery,
+  GalleryItem,
+  KebabToggle,
+  Masthead,
+  MastheadBrand,
+  MastheadContent,
+  MastheadMain,
+  MastheadToggle,
+  Nav,
+  NavItem,
+  NavList,
+  Page,
+  PageSection,
+  PageSectionVariants,
+  PageSidebar,
+  PageToggleButton,
+  SkipToContent,
+  Text,
+  TextContent,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem
+} from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+
+interface NavOnSelectProps {
+  groupId: number | string;
+  itemId: number | string;
+  to: string;
+  event: React.FormEvent<HTMLInputElement>;
+}
+
+export const PageStickySectionGroup: React.FunctionComponent = () => {
+  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
+  const [isAppLauncherOpen, setIsAppLauncherOpen] = React.useState(false);
+  const [activeItem, setActiveItem] = React.useState(1);
+
+  const onNavSelect = (selectedItem: NavOnSelectProps) => {
+    typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
+  };
+
+  const onDropdownToggle = (isOpen: boolean) => {
+    setIsDropdownOpen(isOpen);
+  };
+
+  const onDropdownSelect = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+
+  const onKebabDropdownToggle = (isOpen: boolean) => {
+    setIsKebabDropdownOpen(isOpen);
+  };
+
+  const onKebabDropdownSelect = () => {
+    setIsKebabDropdownOpen(!isKebabDropdownOpen);
+  };
+
+  const onFullKebabDropdownToggle = (isOpen: boolean) => {
+    setIsFullKebabDropdownOpen(isOpen);
+  };
+
+  const onFullKebabDropdownSelect = () => {
+    setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
+  };
+
+  const onAppLauncherToggle = (isOpen: boolean) => {
+    setIsAppLauncherOpen(isOpen);
+  };
+
+  const onAppLauncherSelect = () => {
+    setIsAppLauncherOpen(!isAppLauncherOpen);
+  };
+
+  const dashboardBreadcrumb = (
+    <Breadcrumb>
+      <BreadcrumbItem>Section home</BreadcrumbItem>
+      <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+      <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+      <BreadcrumbItem to="#" isActive>
+        Section landing
+      </BreadcrumbItem>
+    </Breadcrumb>
+  );
+
+  const kebabDropdownItems = [
+    <DropdownItem key="settings">
+      <CogIcon /> Settings
+    </DropdownItem>,
+    <DropdownItem key="help">
+      <HelpIcon /> Help
+    </DropdownItem>
+  ];
+
+  const fullKebabDropdownItems = [
+    <DropdownGroup key="group 2">
+      <DropdownItem key="group 2 profile">My profile</DropdownItem>
+      <DropdownItem key="group 2 user" component="button">
+        User management
+      </DropdownItem>
+      <DropdownItem key="group 2 logout">Logout</DropdownItem>
+    </DropdownGroup>,
+    <Divider key="divider" />,
+    <DropdownItem key="settings">
+      <CogIcon /> Settings
+    </DropdownItem>,
+    <DropdownItem key="help">
+      <HelpIcon /> Help
+    </DropdownItem>
+  ];
+
+  const userDropdownItems = [
+    <DropdownGroup key="group 2">
+      <DropdownItem key="group 2 profile">My profile</DropdownItem>
+      <DropdownItem key="group 2 user" component="button">
+        User management
+      </DropdownItem>
+      <DropdownItem key="group 2 logout">Logout</DropdownItem>
+    </DropdownGroup>
+  ];
+
+  const appLauncherItems = [
+    <ApplicationLauncherItem key="application_1a" href="#">
+      Application 1 (anchor link)
+    </ApplicationLauncherItem>,
+    <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
+      Application 2 (button with onClick)
+    </ApplicationLauncherItem>
+  ];
+
+  const headerToolbar = (
+    <Toolbar id="toolbar" isFullHeight isStatic>
+      <ToolbarContent>
+        <ToolbarGroup
+          variant="icon-button-group"
+          alignment={{ default: 'alignRight' }}
+          spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+        >
+          <ToolbarItem>
+            <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
+          </ToolbarItem>
+          <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
+            <ToolbarItem visibility={{ default: 'hidden', md: 'hidden', lg: 'visible' }}>
+              <ApplicationLauncher
+                onSelect={onAppLauncherSelect}
+                onToggle={onAppLauncherToggle}
+                isOpen={isAppLauncherOpen}
+                items={appLauncherItems}
+              />
+            </ToolbarItem>
+            <ToolbarItem>
+              <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
+            </ToolbarItem>
+            <ToolbarItem>
+              <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
+            </ToolbarItem>
+          </ToolbarGroup>
+          <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
+            <Dropdown
+              isPlain
+              position="right"
+              onSelect={onKebabDropdownSelect}
+              toggle={<KebabToggle onToggle={onKebabDropdownToggle} />}
+              isOpen={isKebabDropdownOpen}
+              dropdownItems={kebabDropdownItems}
+            />
+          </ToolbarItem>
+          <ToolbarItem visibility={{ md: 'hidden' }}>
+            <Dropdown
+              isPlain
+              position="right"
+              onSelect={onFullKebabDropdownSelect}
+              toggle={<KebabToggle onToggle={onFullKebabDropdownToggle} />}
+              isOpen={isFullKebabDropdownOpen}
+              dropdownItems={fullKebabDropdownItems}
+            />
+          </ToolbarItem>
+        </ToolbarGroup>
+        <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
+          <Dropdown
+            isFullHeight
+            onSelect={onDropdownSelect}
+            isOpen={isDropdownOpen}
+            toggle={
+              <DropdownToggle icon={<Avatar src={imgAvatar} alt="Avatar" />} onToggle={onDropdownToggle}>
+                Ned Username
+              </DropdownToggle>
+            }
+            dropdownItems={userDropdownItems}
+          />
+        </ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+
+  const masthead = (
+    <Masthead>
+      <MastheadToggle>
+        <PageToggleButton variant="plain" aria-label="Global navigation">
+          <BarsIcon />
+        </PageToggleButton>
+      </MastheadToggle>
+      <MastheadMain>
+        <MastheadBrand>
+          <Brand
+            widths={{ default: '180px', md: '180px', '2xl': '220px' }}
+            src="/assets/images/logo__pf--reverse--base.png"
+            alt="Fallback patternFly default logo"
+          >
+            <source media="(min-width: 768px)" srcSet="/assets/images/logo__pf--reverse-on-md.svg" />
+            <source srcSet="/assets/images/logo__pf--reverse--base.svg" />
+          </Brand>
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>{headerToolbar}</MastheadContent>
+    </Masthead>
+  );
+
+  const pageNav = (
+    <Nav onSelect={onNavSelect}>
+      <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 nav={pageNav} />;
+
+  const mainContainerId = 'main-content';
+
+  const pageSkipToContent = <SkipToContent href={`#${mainContainerId}`}>Skip to content</SkipToContent>;
+
+  return (
+    <Page
+      header={masthead}
+      sidebar={sidebar}
+      isManagedSidebar
+      skipToContent={pageSkipToContent}
+      breadcrumb={dashboardBreadcrumb}
+      mainContainerId={mainContainerId}
+      isBreadcrumbWidthLimited
+      isBreadcrumbGrouped
+      additionalGroupedContent={
+        <PageSection variant={PageSectionVariants.light} isWidthLimited>
+          <TextContent>
+            <Text component="h1">Main title</Text>
+            <Text component="p">This is a full page demo.</Text>
+          </TextContent>
+        </PageSection>
+      }
+      groupProps={{
+        stickyOnBreakpoint: { default: 'top' }
+      }}
+    >
+      <PageSection>
+        <Gallery hasGutter>
+          {Array.apply(0, Array(50)).map((x, i) => (
+            <GalleryItem key={i}>
+              <Card>
+                <CardBody>This is a card</CardBody>
+              </Card>
+            </GalleryItem>
+          ))}
+        </Gallery>
+      </PageSection>
+    </Page>
+  );
+};