@patternfly/react-core 6.6.1-prerelease.8 → 6.6.1-prerelease.9

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.6.1-prerelease.7","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.6.1-prerelease.8","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.6.1-prerelease.7","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.6.1-prerelease.8","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.6.1-prerelease.7","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.6.1-prerelease.8","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.6.1-prerelease.8",
+  "version": "6.6.1-prerelease.9",
   "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",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.6.1-prerelease.3",
-    "@patternfly/react-styles": "^6.6.1-prerelease.2",
-    "@patternfly/react-tokens": "^6.6.1-prerelease.2",
+    "@patternfly/react-icons": "^6.6.1-prerelease.4",
+    "@patternfly/react-styles": "^6.6.1-prerelease.3",
+    "@patternfly/react-tokens": "^6.6.1-prerelease.3",
     "focus-trap": "7.6.6",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.6.0-prerelease.40",
+    "@patternfly/patternfly": "6.6.0-prerelease.41",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.3"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "008744f97e0d226d41c0bec0b78ec938943392e3"
+  "gitHead": "103c595fefeee9e6cf6209cc94154b0551702f18"
 }

package/src/components/Drawer/Drawer.tsx

@@ -23,6 +23,8 @@ export interface DrawerProps extends React.HTMLProps<HTMLDivElement>, OUIAProps
   isInline?: boolean;
   /** @beta Indicates if the drawer will have pill styles */
   isPill?: boolean;
+  /** @beta Positions the drawer as fixed to fill the viewport. Place the drawer after Page as a sibling. */
+  isViewport?: boolean;
   /** Indicates if the drawer will always show both content and panel. */
   isStatic?: boolean;
   /** Position of the drawer panel. left and right are deprecated, use start and end instead. */
@@ -43,6 +45,7 @@ export interface DrawerContextProps {
   drawerRef?: React.RefObject<HTMLDivElement | null>;
   drawerContentRef?: React.RefObject<HTMLDivElement | null>;
   isInline: boolean;
+  isViewport: boolean;
 }
 
 export const DrawerContext = createContext<Partial<DrawerContextProps>>({
@@ -52,7 +55,8 @@ export const DrawerContext = createContext<Partial<DrawerContextProps>>({
   position: 'end',
   drawerRef: null,
   drawerContentRef: null,
-  isInline: false
+  isInline: false,
+  isViewport: false
 });
 
 export const Drawer: React.FunctionComponent<DrawerProps> = ({
@@ -61,6 +65,7 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
   isExpanded = false,
   isInline = false,
   isPill = false,
+  isViewport = false,
   isStatic = false,
   position = 'end',
   onExpand = () => {},
@@ -73,13 +78,16 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
   const drawerContentRef = useRef<HTMLDivElement>(undefined);
 
   return (
-    <DrawerContext.Provider value={{ isExpanded, isStatic, onExpand, position, drawerRef, drawerContentRef, isInline }}>
+    <DrawerContext.Provider
+      value={{ isExpanded, isStatic, onExpand, position, drawerRef, drawerContentRef, isInline, isViewport }}
+    >
       <div
         className={css(
           styles.drawer,
           isExpanded && styles.modifiers.expanded,
           isInline && styles.modifiers.inline,
           isPill && styles.modifiers.pill,
+          isViewport && styles.modifiers.viewport,
           isStatic && styles.modifiers.static,
           (position === 'left' || position === 'start') && styles.modifiers.panelLeft,
           position === 'bottom' && styles.modifiers.panelBottom,

package/src/components/Drawer/DrawerContent.tsx

@@ -13,7 +13,7 @@ export enum DrawerContentColorVariant {
 export interface DrawerContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the Drawer. */
   className?: string;
-  /** Content to be rendered in the drawer. */
+  /** Content to be rendered in the drawer. Can be omitted to leave the content container empty. */
   children?: React.ReactNode;
   /** Content rendered in the drawer panel. */
   panelContent: React.ReactNode;

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -100,7 +100,8 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const panel = useRef<HTMLDivElement>(undefined);
   const splitterRef = useRef<HTMLDivElement>(undefined);
   const [separatorValue, setSeparatorValue] = useState(0);
-  const { position, isExpanded, isStatic, onExpand, drawerRef, drawerContentRef, isInline } = useContext(DrawerContext);
+  const { position, isExpanded, isStatic, onExpand, drawerRef, drawerContentRef, isInline, isViewport } =
+    useContext(DrawerContext);
   const hidden = isStatic ? false : !isExpanded;
   const [isExpandedInternal, setIsExpandedInternal] = useState(!hidden);
   const [isFocusTrapActive, setIsFocusTrapActive] = useState(false);
@@ -126,9 +127,22 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     }
   }, [isStatic, isExpanded]);
 
+  const getSizeElement = () => {
+    if (isViewport) {
+      return drawerRef?.current ?? drawerContentRef?.current;
+    }
+    return drawerContentRef?.current ?? drawerRef?.current;
+  };
+
   const calcValueNow = () => {
     let splitterPos;
     let drawerSize;
+    const sizeEl = getSizeElement();
+
+    if (!sizeEl || !panel.current || !splitterRef.current || !drawerRef?.current) {
+      return 0;
+    }
+
     const isRTL = getLanguageDirection(panel.current) === 'rtl';
 
     if (isInline && (position === 'end' || position === 'right')) {
@@ -149,37 +163,23 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
       }
     } else if (position === 'end' || position === 'right') {
       if (isRTL) {
-        splitterPos =
-          drawerContentRef.current.getBoundingClientRect().left - splitterRef.current.getBoundingClientRect().right;
-        drawerSize =
-          drawerContentRef.current.getBoundingClientRect().left -
-          drawerContentRef.current.getBoundingClientRect().right;
+        splitterPos = sizeEl.getBoundingClientRect().left - splitterRef.current.getBoundingClientRect().right;
+        drawerSize = sizeEl.getBoundingClientRect().left - sizeEl.getBoundingClientRect().right;
       } else {
-        splitterPos =
-          drawerContentRef.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
-        drawerSize =
-          drawerContentRef.current.getBoundingClientRect().right -
-          drawerContentRef.current.getBoundingClientRect().left;
+        splitterPos = sizeEl.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
+        drawerSize = sizeEl.getBoundingClientRect().right - sizeEl.getBoundingClientRect().left;
       }
     } else if (position === 'start' || position === 'left') {
       if (isRTL) {
-        splitterPos =
-          splitterRef.current.getBoundingClientRect().left - drawerContentRef.current.getBoundingClientRect().right;
-        drawerSize =
-          drawerContentRef.current.getBoundingClientRect().left -
-          drawerContentRef.current.getBoundingClientRect().right;
+        splitterPos = splitterRef.current.getBoundingClientRect().left - sizeEl.getBoundingClientRect().right;
+        drawerSize = sizeEl.getBoundingClientRect().left - sizeEl.getBoundingClientRect().right;
       } else {
-        splitterPos =
-          splitterRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
-        drawerSize =
-          drawerContentRef.current.getBoundingClientRect().right -
-          drawerContentRef.current.getBoundingClientRect().left;
+        splitterPos = splitterRef.current.getBoundingClientRect().right - sizeEl.getBoundingClientRect().left;
+        drawerSize = sizeEl.getBoundingClientRect().right - sizeEl.getBoundingClientRect().left;
       }
     } else if (position === 'bottom') {
-      splitterPos =
-        drawerContentRef.current.getBoundingClientRect().bottom - splitterRef.current.getBoundingClientRect().top;
-      drawerSize =
-        drawerContentRef.current.getBoundingClientRect().bottom - drawerContentRef.current.getBoundingClientRect().top;
+      splitterPos = sizeEl.getBoundingClientRect().bottom - splitterRef.current.getBoundingClientRect().top;
+      drawerSize = sizeEl.getBoundingClientRect().bottom - sizeEl.getBoundingClientRect().top;
     }
 
     const newSplitterPos = (splitterPos / drawerSize) * 100;

package/src/components/Drawer/__tests__/Drawer.test.tsx

@@ -231,3 +231,56 @@ test('Renders with ouiaSafe=false when specified', () => {
   );
   expect(screen.getByTestId('drawer')).toHaveAttribute('data-ouia-safe', 'false');
 });
+
+test(`Does not render with ${styles.modifiers.viewport} class by default`, () => {
+  render(
+    <Drawer data-testid="drawer">
+      <DrawerContent panelContent={<DrawerPanelContent>panel</DrawerPanelContent>}>
+        <DrawerContentBody>content</DrawerContentBody>
+      </DrawerContent>
+    </Drawer>
+  );
+
+  expect(screen.getByTestId('drawer')).not.toHaveClass(styles.modifiers.viewport);
+});
+
+test(`Renders with ${styles.modifiers.viewport} when isViewport is specified`, () => {
+  render(
+    <Drawer data-testid="drawer" isViewport>
+      <DrawerContent panelContent={<DrawerPanelContent>panel</DrawerPanelContent>}>
+        <DrawerContentBody>content</DrawerContentBody>
+      </DrawerContent>
+    </Drawer>
+  );
+
+  expect(screen.getByTestId('drawer')).toHaveClass(styles.modifiers.viewport);
+});
+
+test('Resizeable DrawerPanelContent without drawer content does not throw', async () => {
+  const consoleError = jest.spyOn(console, 'error').mockImplementation();
+
+  const panelContent = (
+    <DrawerPanelContent isResizable>
+      <DrawerHead>
+        <span>drawer-panel</span>
+        <DrawerActions>
+          <DrawerCloseButton />
+        </DrawerActions>
+      </DrawerHead>
+    </DrawerPanelContent>
+  );
+
+  const user = userEvent.setup();
+
+  render(
+    <Drawer isExpanded isViewport>
+      <DrawerContent panelContent={panelContent} />
+    </Drawer>
+  );
+
+  await user.tab();
+  await user.keyboard(`{${KeyTypes.ArrowLeft}}`);
+
+  expect(consoleError).not.toHaveBeenCalled();
+  consoleError.mockRestore();
+});

package/src/components/Drawer/examples/Drawer.md

@@ -13,7 +13,7 @@ propComponents:
     DrawerCloseButton,
     DrawerPanelDescription,
     DrawerPanelBody,
-    DrawerPanelFocusTrapObject,
+    DrawerPanelFocusTrapObject
   ]
 section: components
 ---

package/src/components/Page/examples/Page.md

@@ -33,18 +33,6 @@ The `<MastheadMain>` component includes the smaller area that typically contains
 - 1 or more `<PageSidebarBody>` components inside `<PageSidebar>` for vertical navigation or other sidebar content
 - 1 or more `<PageSection>` components
 
-### Page header and footer
-
-To use a page header instead of passing a [masthead](/components/masthead) directly, pass a `<PageHeader>` to the `masthead` property. `<PageHeader>` should only be used to wrap custom header content.
-
-`<PageFooter>` can be passed to the `footer` property, and should be used to wrap custom footer content.
-
-When using a custom `<PageHeader>` and `<PageFooter>`, the `isPlain` flag should be passed to `<Page>`. This will remove styling on the main container, the height constraints on the page wrapper (so it can grow beyond the viewport), and remove the scroll management from the content section so the window will be what scrolls.
-
-```ts file="./PageHeaderAndFooterContent.tsx"
-
-```
-
 ### Vertical navigation
 
 To add a vertical sidebar to a `<Page>`, pass a `<PageSidebar>` component into the `sidebar` property. To render navigation in the sidebar, pass a `<PageSidebarBody>` component to `<PageSidebar>`.
@@ -162,3 +150,27 @@ In this example, a scroll event listener on the scroll parent container toggles
 ```ts file="./PageDynamicStickySection.tsx"
 
 ```
+
+### Custom header
+
+To use a page header instead of passing a [masthead](/components/masthead) directly, pass a `<PageHeader>` to the `masthead` property. `<PageHeader>` should only be used to wrap custom header content.
+
+```ts isBeta file="./PageCustomHeader.tsx"
+
+```
+
+### Footer
+
+`<PageFooter>` can be passed to the `footer` property, and should be used to wrap custom footer content.
+
+```ts isBeta file="./PageCustomFooter.tsx"
+
+```
+
+### Plain
+
+When a page should not have the default content area background or overflow scrolling, pass the `isPlain` property to `<Page>`.
+
+```ts isBeta file="./PagePlain.tsx"
+
+```

package/src/components/Page/examples/PageCustomFooter.tsx

@@ -0,0 +1,59 @@
+import { useState } from 'react';
+import {
+  Masthead,
+  MastheadMain,
+  MastheadToggle,
+  MastheadBrand,
+  MastheadLogo,
+  MastheadContent,
+  Page,
+  PageFooter,
+  PageSection,
+  PageSidebar,
+  PageSidebarBody,
+  PageToggleButton
+} from '@patternfly/react-core';
+
+export const PageCustomFooter: React.FunctionComponent = () => {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+
+  const onSidebarToggle = () => {
+    setIsSidebarOpen(!isSidebarOpen);
+  };
+
+  const masthead = (
+    <Masthead>
+      <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton
+            aria-label="Global navigation"
+            isSidebarOpen={isSidebarOpen}
+            onSidebarToggle={onSidebarToggle}
+            id="custom-footer-body-nav-toggle"
+            isHamburgerButton
+          />
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>Content</MastheadContent>
+    </Masthead>
+  );
+
+  const sidebar = (
+    <PageSidebar isSidebarOpen={isSidebarOpen} id="custom-footer-vertical-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
+
+  return (
+    <Page footer={<PageFooter>Page footer</PageFooter>} masthead={masthead} sidebar={sidebar}>
+      <PageSection aria-labelledby="custom-footer-section">
+        <h2 id="custom-footer-section">Page content</h2>
+      </PageSection>
+    </Page>
+  );
+};

package/src/components/Page/examples/PageCustomHeader.tsx

@@ -0,0 +1,17 @@
+import { Page, PageHeader, PageSection, PageSidebar, PageSidebarBody } from '@patternfly/react-core';
+
+export const PageCustomHeader: React.FunctionComponent = () => {
+  const sidebar = (
+    <PageSidebar isSidebarOpen id="custom-header-vertical-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
+
+  return (
+    <Page masthead={<PageHeader>Custom page header</PageHeader>} sidebar={sidebar}>
+      <PageSection aria-labelledby="custom-header-section">
+        <h2 id="custom-header-section">Page content</h2>
+      </PageSection>
+    </Page>
+  );
+};

package/src/components/Page/examples/PagePlain.tsx

@@ -0,0 +1,9 @@
+import { Page, PageHeader, PageSection } from '@patternfly/react-core';
+
+export const PagePlain: React.FunctionComponent = () => (
+  <Page isPlain masthead={<PageHeader>Custom header</PageHeader>} sidebar={null}>
+    <PageSection aria-labelledby="plain-page-section">
+      <h2 id="plain-page-section">Page content</h2>
+    </PageSection>
+  </Page>
+);

package/src/demos/CardView/CardView.md

@@ -6,7 +6,7 @@ section: patterns
 import { Fragment, useState } from 'react';
 import RhUiTrashFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-trash-fill-icon';
 import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
-import pfIcon from '../assets/pf-logo-small.svg';
+import pfIcon from '@patternfly/react-core/src/demos/assets/PF-IconLogo.svg';
 import activeMQIcon from '../assets/activemq-core_200x150.png';
 import avroIcon from '../assets/camel-avro_200x150.png';
 import dropBoxIcon from '../assets/camel-dropbox_200x150.png';

package/src/demos/CardView/examples/CardView.tsx

@@ -36,7 +36,7 @@ import {
 } from '@patternfly/react-core';
 import RhUiTrashFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-trash-fill-icon';
 import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
-import pfIcon from './assets/pf-logo-small.svg';
+import pfIcon from '@patternfly/react-core/src/demos/assets/PF-IconLogo.svg';
 import activeMQIcon from './assets/activemq-core_200x150.png';
 import avroIcon from './assets/camel-avro_200x150.png';
 import dropBoxIcon from './assets/camel-dropbox_200x150.png';

package/src/demos/Drawer/Drawer.md

@@ -0,0 +1,16 @@
+---
+id: Drawer
+section: components
+---
+
+import { Fragment, useRef, useState } from 'react';
+
+## Demos
+
+### Expanded resizable viewport drawer
+
+Use `isViewport` to position the drawer as `fixed` so it fills the viewport. Place the drawer after `<Page>` as a sibling. Omit children of `<DrawerContent>` so the content container stays empty; the empty container is still required so the panel can overlay the page.
+
+```ts file="./examples/DrawerViewport.tsx" isFullscreen isBeta
+
+```

package/src/demos/Drawer/examples/DrawerViewport.tsx

@@ -0,0 +1,112 @@
+import { Fragment, useRef, useState } from 'react';
+import {
+  Backdrop,
+  Button,
+  Drawer,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerHead,
+  DrawerPanelContent,
+  Masthead,
+  MastheadBrand,
+  MastheadContent,
+  MastheadLogo,
+  MastheadMain,
+  MastheadToggle,
+  Page,
+  PageSection,
+  PageSidebar,
+  PageSidebarBody,
+  PageToggleButton,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem
+} from '@patternfly/react-core';
+
+export const DrawerViewport: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const drawerRef = useRef<HTMLSpanElement>(null);
+
+  const onExpand = () => {
+    drawerRef.current && drawerRef.current.focus();
+  };
+
+  const onClick = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const onCloseClick = () => {
+    setIsExpanded(false);
+  };
+
+  const onResize = (_event: MouseEvent | TouchEvent | React.KeyboardEvent, newWidth: number, id: string) => {
+    // eslint-disable-next-line no-console
+    console.log(`${id} has new width of: ${newWidth}`);
+  };
+
+  const headerToolbar = (
+    <Toolbar id="viewport-drawer-toolbar">
+      <ToolbarContent>
+        <ToolbarItem>
+          <Button aria-expanded={isExpanded} onClick={onClick}>
+            Toggle drawer
+          </Button>
+        </ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+
+  const masthead = (
+    <Masthead>
+      <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton isHamburgerButton aria-label="Global navigation" id="viewport-drawer-nav-toggle" />
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>{headerToolbar}</MastheadContent>
+    </Masthead>
+  );
+
+  const sidebar = (
+    <PageSidebar id="viewport-drawer-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
+
+  const panelContent = (
+    <DrawerPanelContent isResizable onResize={onResize} id="viewport-resize-panel" minSize="150px">
+      <DrawerHead>
+        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
+          Drawer panel header
+        </span>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseClick} />
+        </DrawerActions>
+      </DrawerHead>
+    </DrawerPanelContent>
+  );
+
+  return (
+    <Fragment>
+      <Page isManagedSidebar masthead={masthead} sidebar={sidebar}>
+        <PageSection aria-labelledby="viewport-drawer-section">
+          <h2 id="viewport-drawer-section">Viewport drawer example</h2>
+          <p>
+            The viewport drawer is a sibling of Page. DrawerContent is left empty so the panel overlays the page without
+            affecting page layout or scrolling.
+          </p>
+        </PageSection>
+      </Page>
+      {isExpanded && <Backdrop onClick={onCloseClick}></Backdrop>}
+      <Drawer isExpanded={isExpanded} isViewport onExpand={onExpand}>
+        <DrawerContent panelContent={panelContent} />
+      </Drawer>
+    </Fragment>
+  );
+};

package/src/demos/Page.md

@@ -4,18 +4,25 @@ section: components
 ---
 
 import { useState, useRef, useEffect } from 'react';
-import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
-import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
-import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
-import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
-import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
-import RhUiMenuBarsIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-menu-bars-icon';
-import LightbulbIcon from '@patternfly/react-icons/dist/esm/icons/lightbulb-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
-import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import RhUiCloudFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-fill-icon';
-import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
-import pfIconLogo from '@patternfly/react-core/src/demos/assets/PF-IconLogo-color.svg';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
+import RhUiTrashFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-trash-fill-icon';
+import RhUiPortIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-port-icon';
+import RhUiContainerIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-icon';
+import RhUiAutomationIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-automation-icon';
+import RhUiConnectedIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-connected-icon';
+import RhUiArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-right-icon';
+import pfIcon from '@patternfly/react-core/src/demos/assets/PF-IconLogo.svg';
+import activeMQIcon from '@patternfly/react-core/src/demos/assets/activemq-core_200x150.png';
+import avroIcon from '@patternfly/react-core/src/demos/assets/camel-avro_200x150.png';
+import dropBoxIcon from '@patternfly/react-core/src/demos/assets/camel-dropbox_200x150.png';
+import infinispanIcon from '@patternfly/react-core/src/demos/assets/camel-infinispan_200x150.png';
+import saxonIcon from '@patternfly/react-core/src/demos/assets/camel-saxon_200x150.png';
+import sparkIcon from '@patternfly/react-core/src/demos/assets/camel-spark_200x150.png';
+import swaggerIcon from '@patternfly/react-core/src/demos/assets/camel-swagger-java_200x150.png';
+import azureIcon from '@patternfly/react-core/src/demos/assets/FuseConnector_Icons_AzureServices.png';
+import restIcon from '@patternfly/react-core/src/demos/assets/FuseConnector_Icons_REST.png';
+import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
 
 - 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
@@ -50,3 +57,9 @@ When adding a context selector/perspective switcher in a `PageSidebar`, you must
 ```ts file='./examples/Page/PageContextSelector.tsx' isFullscreen
 
 ```
+
+### Plain
+
+```ts file='./examples/Page/PagePlain.tsx' isFullscreen
+
+```