@patternfly/react-core 6.5.0-prerelease.5 → 6.5.0-prerelease.51

package/src/components/TreeView/__tests__/__snapshots__/TreeViewSearch.test.tsx.snap

@@ -23,12 +23,24 @@ exports[`Matches snapshot 1`] = `
             fill="currentColor"
             height="1em"
             role="img"
-            viewBox="0 0 512 512"
             width="1em"
           >
-            <path
-              d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-            />
+            <svg
+              class="pf-v6-icon-default"
+              viewBox="0 0 512 512"
+            >
+              <path
+                d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+              />
+            </svg>
+            <svg
+              class="pf-v6-icon-rh-ui"
+              viewBox="0 0 32 32"
+            >
+              <path
+                d="m30.796 29.205-8.557-8.557A11.945 11.945 0 0 0 25 13c0-6.617-5.383-12-12-12S1 6.383 1 13s5.383 12 12 12c2.904 0 5.57-1.038 7.648-2.761l8.556 8.556a1.122 1.122 0 0 0 1.592 0 1.127 1.127 0 0 0 0-1.591ZM3 13C3 7.486 7.486 3 13 3s10 4.486 10 10-4.486 10-10 10S3 18.514 3 13Z"
+              />
+            </svg>
           </svg>
         </div>
       </div>

package/src/components/Wizard/Wizard.tsx

@@ -59,6 +59,10 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
    * are called.
    */
   shouldFocusContent?: boolean;
+  /** Adds plain styling to the wizard. */
+  isPlain?: boolean;
+  /** @beta Prevents the wizard from automatically applying plain styling when glass theme is enabled. */
+  isNoPlainOnGlass?: boolean;
 }
 
 export const Wizard = ({
@@ -77,6 +81,8 @@ export const Wizard = ({
   onSave,
   onClose,
   shouldFocusContent = true,
+  isPlain = false,
+  isNoPlainOnGlass = false,
   ...wrapperProps
 }: WizardProps) => {
   const [activeStepIndex, setActiveStepIndex] = useState(startIndex);
@@ -181,7 +187,12 @@ export const Wizard = ({
       mainWrapperRef={wrapperRef}
     >
       <div
-        className={css(styles.wizard, className)}
+        className={css(
+          styles.wizard,
+          isPlain && styles.modifiers.plain,
+          isNoPlainOnGlass && styles.modifiers.noPlainOnGlass,
+          className
+        )}
         style={{
           ...(height ? { [wizardHeightToken.name]: typeof height === 'number' ? `${height}px` : height } : {}),
           ...(width ? { width } : {})

package/src/components/Wizard/WizardHeader.tsx

@@ -1,7 +1,7 @@
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import { css } from '@patternfly/react-styles';
 import { Button } from '../Button';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export interface WizardHeaderProps extends React.HTMLProps<HTMLDivElement> {
   /** Callback function called when the X (Close) button is clicked */
@@ -39,7 +39,7 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
   <div className={css(styles.wizardHeader, className)} {...props}>
     {!isCloseHidden && (
       <div className={css(styles.wizardClose)}>
-        <Button variant="plain" aria-label={closeButtonAriaLabel} onClick={onClose} icon={<TimesIcon />} />
+        <Button variant="plain" aria-label={closeButtonAriaLabel} onClick={onClose} icon={<RhMicronsCloseIcon />} />
       </div>
     )}
     <div className={css(styles.wizardTitle)}>

package/src/components/Wizard/WizardNavInternal.tsx

@@ -48,7 +48,7 @@ export const WizardNavInternal = ({
           let firstSubStepIndex: number;
           let hasActiveChild = false;
 
-          const subNavItems = step.subStepIds?.map((subStepId, subStepIndex) => {
+          const subNavItems = step.subStepIds?.map((subStepId, _subStepIndex) => {
             const subStep = steps.find((step) => step.id === subStepId);
             const hasVisitedNextStep = steps.some((step) => step.index > subStep.index && step.isVisited);
             const isSubStepDisabled =
@@ -66,8 +66,8 @@ export const WizardNavInternal = ({
               return;
             }
 
-            // Store the first sub-step index so that when its parent is clicked, the first sub-step is focused
-            if (subStepIndex === 0) {
+            // Store the first visible sub-step index so that when its parent is clicked, the first sub-step is focused
+            if (firstSubStepIndex === undefined) {
               firstSubStepIndex = subStep.index;
             }
 

package/src/components/Wizard/WizardNavItem.tsx

@@ -1,17 +1,16 @@
 import { useEffect, useState } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
 
 import { OUIAProps, useOUIAProps } from '../../helpers';
 import { WizardNavItemStatus } from './types';
 
 export interface WizardNavItemProps
-  extends Omit<React.HTMLProps<HTMLLIElement>, 'onClick' | 'id' | 'content' | 'type'>,
-    OUIAProps {
+  extends Omit<React.HTMLProps<HTMLLIElement>, 'onClick' | 'id' | 'content' | 'type'>, OUIAProps {
   /** Additional classes spread to the wizard nav item */
   className?: string;
   /** Can nest a WizardNav component for substeps */
@@ -110,9 +109,9 @@ export const WizardNavItem = ({
           <>
             <span className="pf-v6-screen-reader">, {status}</span>
             <span className={css(styles.wizardNavLinkStatusIcon)}>
-              {status === WizardNavItemStatus.Error && <ExclamationCircleIcon />}
-              {status === WizardNavItemStatus.Success && <CheckCircleIcon />}
-              {status === WizardNavItemStatus.Warning && <ExclamationTriangleIcon />}
+              {status === WizardNavItemStatus.Error && <RhUiErrorFillIcon />}
+              {status === WizardNavItemStatus.Success && <RhUiCheckCircleFillIcon />}
+              {status === WizardNavItemStatus.Warning && <RhUiWarningFillIcon />}
             </span>
           </>
         )}
@@ -122,7 +121,7 @@ export const WizardNavItem = ({
               <span className="pf-v6-c-wizard__nav-link-text">{content}</span>
               <span className={css(styles.wizardNavLinkToggle)}>
                 <span className={css(styles.wizardNavLinkToggleIcon)}>
-                  <AngleRightIcon aria-label={`${isCurrent ? 'Collapse' : 'Expand'} step icon`} />
+                  <RhMicronsCaretDownIcon aria-label={`${isCurrent ? 'Collapse' : 'Expand'} step icon`} />
                 </span>
               </span>
             </>

package/src/components/Wizard/WizardToggle.tsx

@@ -1,10 +1,10 @@
 import { Fragment, useCallback, useEffect } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 
 import { KeyTypes } from '../../helpers/constants';
 import { WizardStepType, isWizardSubStep } from './types';
@@ -100,19 +100,23 @@ export const WizardToggle = ({
           >
             {isActiveStepStatus === 'error' && (
               <span className={css(styles.wizardToggleStatusIcon)}>
-                <ExclamationCircleIcon />
+                <RhUiErrorFillIcon />
               </span>
             )}
             {isActiveStepStatus === 'success' && (
               <span className={css(styles.wizardToggleStatusIcon)}>
-                <CheckCircleIcon />
+                <RhUiCheckCircleFillIcon />
               </span>
             )}
             {isActiveStepStatus !== 'success' && isActiveStepStatus !== 'error' && (
               <span className={css(styles.wizardToggleNum)}>{wizardToggleIndex}</span>
             )}{' '}
             {parentStep?.name || activeStep?.name}
-            {isActiveSubStep && <AngleRightIcon className={css(styles.wizardToggleSeparator)} />}
+            {isActiveSubStep && (
+              <span className={css(styles.wizardToggleSeparator)}>
+                <RhMicronsCaretRightIcon />
+              </span>
+            )}
           </span>
           {isActiveSubStep && <span className={css(styles.wizardToggleListItem)}>{activeStep?.name}</span>}
         </span>

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

@@ -2,6 +2,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { Wizard, WizardFooterProps, WizardStep, WizardNavProps, WizardStepChangeScope } from '../';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
 test('renders step when child is of type WizardStep', () => {
   render(
@@ -627,3 +628,62 @@ test('onStepChange skips over disabled or hidden steps and substeps', async () =
     WizardStepChangeScope.Back
   );
 });
+
+test('clicking parent step navigates to first visible sub-step when first sub-step is hidden', async () => {
+  const user = userEvent.setup();
+  const onStepChange = jest.fn();
+
+  render(
+    <Wizard onStepChange={onStepChange}>
+      <WizardStep id="step-1" name="Test step 1" />
+      <WizardStep
+        id="step-2"
+        name="Test step 2"
+        steps={[
+          <WizardStep id="step2-sub1" name="Hidden sub step" isHidden />,
+          <WizardStep id="step2-sub2" name="Visible sub step 1" />,
+          <WizardStep id="step2-sub3" name="Visible sub step 2" />
+        ]}
+      />
+      <WizardStep id="step-3" name="Test step 3" />
+    </Wizard>
+  );
+
+  // Navigate to step 3 first
+  await user.click(screen.getByRole('button', { name: 'Test step 3' }));
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step-3' }),
+    expect.objectContaining({ id: 'step-1' }),
+    WizardStepChangeScope.Nav
+  );
+
+  // Click on parent step 2 - should navigate to the first VISIBLE sub-step (step2-sub2), not crash
+  await user.click(screen.getByRole('button', { name: 'Test step 2' }));
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step2-sub2' }),
+    expect.objectContaining({ id: 'step-3' }),
+    WizardStepChangeScope.Nav
+  );
+});
+
+test(`Renders with ${styles.modifiers.plain} class when isPlain is true`, () => {
+  render(
+    <Wizard isPlain data-testid="wizard-plain">
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
+
+  expect(screen.getByTestId('wizard-plain')).toHaveClass(styles.modifiers.plain);
+});
+
+test(`Renders with ${styles.modifiers.noPlainOnGlass} class when isNoPlainOnGlass is true`, () => {
+  render(
+    <Wizard isNoPlainOnGlass data-testid="wizard-no-plain">
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
+
+  expect(screen.getByTestId('wizard-no-plain')).toHaveClass(styles.modifiers.noPlainOnGlass);
+});

package/src/components/Wizard/examples/Wizard.md

@@ -63,6 +63,12 @@ import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 
 ```
 
+### Plain
+
+```ts file="./WizardPlain.tsx"
+
+```
+
 ### Focus content on next/back
 
 To focus the main content element of the `Wizard`, pass in the `shouldFocusContent` property. It is recommended that this is passed in so that users can navigate through a `WizardStep` content in order.

package/src/components/Wizard/examples/WizardPlain.tsx

@@ -0,0 +1,15 @@
+import { Wizard, WizardStep } from '@patternfly/react-core';
+
+export const WizardPlain: React.FunctionComponent = () => (
+  <Wizard height={400} title="Plain wizard" isPlain>
+    <WizardStep name="Step 1" id="plain-first-step">
+      <p>Step 1 content</p>
+    </WizardStep>
+    <WizardStep name="Step 2" id="plain-second-step">
+      <p>Step 2 content</p>
+    </WizardStep>
+    <WizardStep name="Review" id="plain-review-step" footer={{ nextButtonText: 'Finish' }}>
+      <p>Review step content</p>
+    </WizardStep>
+  </Wizard>
+);

package/src/components/index.ts

@@ -32,6 +32,7 @@ export * from './FileUpload';
 export * from './Form';
 export * from './FormSelect';
 export * from './HelperText';
+export * from './Hero';
 export * from './Hint';
 export * from './Icon';
 export * from './InputGroup';

package/src/demos/Banner.md

@@ -11,148 +11,11 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 
 ### Basic sticky banner
 
-```js isFullscreen
-import { Fragment } from 'react';
-import { Banner, Card, CardBody, Flex, Gallery, GalleryItem, PageSection, Content } from '@patternfly/react-core';
-
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
-import { css } from '@patternfly/react-styles';
-import display from '@patternfly/react-styles/css/utilities/Display/display';
-
-class BannerDemo extends React.Component {
-  render() {
-    const banner = (
-      <Banner isSticky>
-        <Flex
-          justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
-          flexWrap={{ default: 'nowrap' }}
-        >
-          <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
-          <div className={css(display.displayNone, display.displayBlockOnLg)}>
-            This message is sticky to the top of the page.
-          </div>
-          <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
-          <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
-        </Flex>
-      </Banner>
-    );
-    return (
-      <Fragment>
-        <DashboardWrapper banner={banner} breadcrumb={null}>
-          <PageSection aria-labelledby="main-title">
-            <Content>
-              <h1 id="main-title">Main title</h1>
-              <p>
-                Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
-                of it’s relative line height of 1.5.
-              </p>
-            </Content>
-          </PageSection>
-          <PageSection aria-label='Cards gallery'>
-            <Gallery hasGutter>
-              {Array.from({ length: 30 }).map((_value, index) => (
-                <GalleryItem key={index}>
-                  <Card key={index}>
-                    <CardBody>This is a card</CardBody>
-                  </Card>
-                </GalleryItem>
-              ))}
-            </Gallery>
-          </PageSection>
-        </DashboardWrapper>
-      </Fragment>
-    );
-  }
-}
+```ts file="examples/Banner/BannerBasicSticky.tsx" isFullscreen
 ```
 
 ### Top and bottom banner
 
-```js isFullscreen
-import { Fragment } from 'react';
-import {
-  Banner,
-  Card,
-  CardBody,
-  Flex,
-  FlexItem,
-  Gallery,
-  GalleryItem,
-  PageSection,
-  Content
-} from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
-import { css } from '@patternfly/react-styles';
-import display from '@patternfly/react-styles/css/utilities/Display/display';
+```ts file="examples/Banner/BannerTopBottom.tsx" isFullscreen
 
-class BannerDemo extends React.Component {
-  render() {
-    return (
-      <Fragment>
-        <Flex
-          direction={{ default: 'column' }}
-          flexWrap={{ default: 'nowrap' }}
-          spaceItems={{ default: 'spaceItemsNone' }}
-          style={{ height: '100%' }}
-        >
-          <FlexItem>
-            <Banner isSticky>
-              <Flex
-                justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
-                flexWrap={{ default: 'nowrap' }}
-              >
-                <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
-                <div className={css(display.displayNone, display.displayBlockOnLg)}>
-                  This message is sticky to the top of the page.
-                </div>
-                <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
-                <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
-              </Flex>
-            </Banner>
-          </FlexItem>
-          <FlexItem grow={{ default: 'grow' }} style={{ minHeight: 0 }}>
-            <DashboardWrapper breadcrumb={null}>
-              <PageSection aria-labelledby="main-title">
-                <Content>
-                  <h1 id='main-title'>Main title</h1>
-                  <p>
-                    Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because{' '}
-                    <br />
-                    of it’s relative line height of 1.5.
-                  </p>
-                </Content>
-              </PageSection>
-              <PageSection aria-label='Cards gallery'>
-                <Gallery hasGutter>
-                  {Array.from({ length: 30 }).map((_value, index) => (
-                    <GalleryItem key={index}>
-                      <Card key={index}>
-                        <CardBody>This is a card</CardBody>
-                      </Card>
-                    </GalleryItem>
-                  ))}
-                </Gallery>
-              </PageSection>
-            </DashboardWrapper>
-          </FlexItem>
-          <FlexItem>
-            <Banner isSticky>
-              <Flex
-                justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
-                flexWrap={{ default: 'nowrap' }}
-              >
-                <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
-                <div className={css(display.displayNone, display.displayBlockOnLg)}>
-                  This message is sticky to the bottom of the page.
-                </div>
-                <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
-                <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
-              </Flex>
-            </Banner>
-          </FlexItem>
-        </Flex>
-      </Fragment>
-    );
-  }
-}
 ```

package/src/demos/Button/Button.md

@@ -4,7 +4,7 @@ section: components
 ---
 
 import { useState } from 'react';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 
 ## Demos 
 

package/src/demos/Button/examples/ButtonProgress.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Form, FormGroup, ActionGroup, TextInput, Button } from '@patternfly/react-core';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 
 export const ButtonProgress: React.FunctionComponent = () => {
   const [loginState, setLoginState] = useState<'notLoggedIn' | 'loading' | 'loggedIn'>('notLoggedIn');
@@ -41,7 +41,7 @@ export const ButtonProgress: React.FunctionComponent = () => {
               : null
           }
           isLoading={loginState === 'loading'}
-          icon={loginState === 'loggedIn' ? <CheckCircleIcon /> : null}
+          icon={loginState === 'loggedIn' ? <RhUiCheckCircleFillIcon /> : null}
           spinnerAriaValueText="Loading..."
         >
           {loginState === 'notLoggedIn' && 'Link account and log in'}

package/src/demos/CardDemos.md

@@ -2,12 +2,13 @@
 id: Card
 section: components
 ---
+
 import { Fragment, useState } from 'react';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-information-fill-icon';
 import ArrowRightIcon from '@patternfly/react-icons/dist/js/icons/arrow-right-icon';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
-import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, BellIcon } from '@patternfly/react-icons';
+import { RhUiCheckCircleFillIcon, RhUiErrorFillIcon, RhUiWarningFillIcon, RhUiNotificationFillIcon } from '@patternfly/react-icons';
 import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
 import { Chart, ChartAxis, ChartGroup, ChartVoronoiContainer, ChartStack, ChartBar, ChartTooltip, ChartDonutThreshold, ChartDonutUtilization, ChartArea, ChartContainer, ChartLabel } from '@patternfly/react-charts/victory';
 import chart_color_yellow_100 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_100';

package/src/demos/Compass/Compass.md

@@ -0,0 +1,40 @@
+---
+id: Compass
+section: AI
+subsection: Generative UIs
+---
+
+import { useRef, useState } from 'react';
+import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
+import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon';
+import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
+import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
+import imgAvatar from '../assets/avatarImg.svg';
+import pfLogo from '../assets/PF-IconLogo-color.svg';
+
+## Demos
+
+### Compass layout
+
+This demo showcases an implementation of the following Compass features:
+
+- Middle navigation in the `header`, featuring top-level primary tabs and a secondary container for sub-tabs.
+- Vertical sidebars utilizing `<ActionList>` groups with buttons that use the `isCircle` prop.
+- A custom gradient background in the `<Hero>`, visible in dark mode.
+- Background images that automatically adapt to both light and dark modes.
+- A `footer` section containing the `<CompassMessageBar>`, that could be used for AI text input.
+
+```ts isFullscreen file="./examples/CompassDemo.tsx"
+
+```
+
+### Docked nav demo
+
+```ts isFullscreen file="./examples/CompassDockDemo.tsx"
+
+```