@patternfly/react-core 6.0.0-alpha.1 → 6.0.0-alpha.10

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { Wizard, WizardFooterProps, WizardStep, WizardNavProps } from '../';
+import { Wizard, WizardFooterProps, WizardStep, WizardNavProps, WizardStepChangeScope } from '../';
 
 test('renders step when child is of type WizardStep', () => {
   render(
@@ -58,6 +58,27 @@ test('renders default footer with custom props', () => {
   expect(screen.getByRole('button', { name: 'Leave now!' })).toBeVisible();
 });
 
+test('can add props to default footer buttons', () => {
+  render(
+    <Wizard
+      footer={{
+        nextButtonProps: { id: 'next-button', className: 'custom-class' },
+        backButtonProps: { id: 'back-button' },
+        cancelButtonProps: { id: 'cancel-button' }
+      }}
+    >
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
+
+  const nextButton = screen.getByRole('button', { name: 'Next' });
+
+  expect(nextButton).toHaveProperty('id', 'next-button');
+  expect(nextButton).toHaveClass('custom-class');
+  expect(screen.getByRole('button', { name: 'Back' })).toHaveProperty('id', 'back-button');
+  expect(screen.getByRole('button', { name: 'Cancel' })).toHaveProperty('id', 'cancel-button');
+});
+
 test('renders custom footer', () => {
   render(
     <Wizard footer={<>Some footer</>}>
@@ -99,6 +120,17 @@ test('renders default nav with custom props', () => {
   expect(screen.getByRole('button', { name: 'Test step 2' })).toHaveAttribute('disabled');
 });
 
+test('renders nav aria label', () => {
+  render(
+    <Wizard navAriaLabel="custom nav aria-label">
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
+  const navElement = screen.getByLabelText('custom nav aria-label');
+
+  expect(navElement).toHaveAttribute('aria-label');
+});
+
 test('renders custom nav', () => {
   const customNav = () => <nav>Some custom nav</nav>;
 
@@ -162,28 +194,33 @@ test(`can customize the wizard's height and width`, () => {
   expect(wizard).toHaveStyle('width: 500px');
 });
 
-test('calls onNavByIndex on nav item click', async () => {
+test('calls onStepChange on nav item click', async () => {
   const user = userEvent.setup();
-  const onNavByIndex = jest.fn();
+  const onStepChange = jest.fn();
 
   render(
-    <Wizard onStepChange={onNavByIndex}>
+    <Wizard onStepChange={onStepChange}>
       <WizardStep id="step-1" name="Test step 1" />
       <WizardStep id="step-2" name="Test step 2" />
     </Wizard>
   );
 
   await user.click(screen.getByRole('button', { name: 'Test step 2' }));
-  expect(onNavByIndex).toHaveBeenCalled();
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step-2' }),
+    expect.objectContaining({ id: 'step-1' }),
+    WizardStepChangeScope.Nav
+  );
 });
 
-test('calls onNext and not onSave on next button click when not on the last step', async () => {
+test('calls onStepChange and not onSave on next button click when not on the last step', async () => {
   const user = userEvent.setup();
-  const onNext = jest.fn();
+  const onStepChange = jest.fn();
   const onSave = jest.fn();
 
   render(
-    <Wizard onStepChange={onNext} onSave={onSave}>
+    <Wizard onStepChange={onStepChange} onSave={onSave}>
       <WizardStep id="step-1" name="Test step 1" />
       <WizardStep id="step-2" name="Test step 2" />
     </Wizard>
@@ -191,16 +228,21 @@ test('calls onNext and not onSave on next button click when not on the last step
 
   await user.click(screen.getByRole('button', { name: 'Next' }));
 
-  expect(onNext).toHaveBeenCalled();
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step-2' }),
+    expect.objectContaining({ id: 'step-1' }),
+    WizardStepChangeScope.Next
+  );
   expect(onSave).not.toHaveBeenCalled();
 });
 
-test('calls onBack on back button click', async () => {
+test('calls onStepChange on back button click', async () => {
   const user = userEvent.setup();
-  const onBack = jest.fn();
+  const onStepChange = jest.fn();
 
   render(
-    <Wizard onStepChange={onBack}>
+    <Wizard onStepChange={onStepChange}>
       <WizardStep id="step-1" name="Test step 1" />
       <WizardStep id="step-2" name="Test step 2" />
     </Wizard>
@@ -209,7 +251,12 @@ test('calls onBack on back button click', async () => {
   await user.click(screen.getByRole('button', { name: 'Test step 2' }));
   await user.click(screen.getByRole('button', { name: 'Back' }));
 
-  expect(onBack).toHaveBeenCalled();
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step-1' }),
+    expect.objectContaining({ id: 'step-2' }),
+    WizardStepChangeScope.Back
+  );
 });
 
 test('calls onSave and not onClose on next button click when on the last step', async () => {
@@ -433,17 +480,153 @@ test('incrementally shows/hides steps based on the activeStep when isProgressive
   ).toBeNull();
 });
 
-test('parent step can be non-collapsible by setting isCollapsible to false', () => {
+test('parent step can be expandable by setting isExpandable to true', () => {
   render(
     <Wizard>
       <WizardStep
         id="step-1"
         name="Test step 1"
-        isCollapsible={false}
+        isExpandable
         steps={[<WizardStep id="sub-step-1" name="Sub step 1" />]}
       />
     </Wizard>
   );
 
-  expect(screen.queryByLabelText('step icon', { exact: false })).toBeNull();
+  expect(screen.getByLabelText('step icon', { exact: false })).toBeVisible();
+});
+
+test('child steps are disabled when parent is disabled', () => {
+  render(
+    <Wizard>
+      <WizardStep
+        id="step-1"
+        name="Test step 1"
+        isDisabled
+        steps={[<WizardStep id="sub-step-1" name="Sub step 1" />]}
+      />
+    </Wizard>
+  );
+
+  expect(
+    screen.getByRole('button', {
+      name: 'Test step 1'
+    })
+  ).toBeDisabled();
+  expect(
+    screen.getByRole('button', {
+      name: 'Sub step 1'
+    })
+  ).toBeDisabled();
+});
+
+test('child steps are hidden when parent is hidden', () => {
+  render(
+    <Wizard>
+      <WizardStep id="step-1" name="Test step 1" isHidden steps={[<WizardStep id="sub-step-1" name="Sub step 1" />]} />
+    </Wizard>
+  );
+
+  expect(
+    screen.queryByRole('button', {
+      name: 'Test step 1'
+    })
+  ).toBeNull();
+  expect(
+    screen.queryByRole('button', {
+      name: 'Sub step 1'
+    })
+  ).toBeNull();
+});
+
+test('onStepChange skips over disabled or hidden steps and substeps', 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="Test Substep 1" />]} />
+      <WizardStep id="step-3" name="Test step 3" isDisabled />
+      <WizardStep
+        id="step-4"
+        name="Test step 4"
+        isDisabled
+        steps={[<WizardStep id="step4-sub1" name="Test Substep 1" />]}
+      />
+      <WizardStep
+        id="step-5"
+        name="Test step 4"
+        steps={[
+          <WizardStep id="step5-sub1" name="Test Substep 1" isDisabled />,
+          <WizardStep id="step5-sub2" name="Test Substep 2" />
+        ]}
+      />
+      <WizardStep id="step-6" name="Test step 6" isHidden />
+      <WizardStep
+        id="step-7"
+        name="Test step 7"
+        isHidden
+        steps={[<WizardStep id="step7-sub1" name="Test Substep 1" />]}
+      />
+      <WizardStep
+        id="step-8"
+        name="Test step 8"
+        steps={[
+          <WizardStep id="step8-sub1" name="Test Substep 1" isHidden />,
+          <WizardStep id="step8-sub2" name="Test Substep 2" />
+        ]}
+      />
+    </Wizard>
+  );
+
+  const nextButton = screen.getByRole('button', { name: 'Next' });
+  const backButton = screen.getByRole('button', { name: 'Back' });
+
+  await user.click(nextButton);
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step2-sub1' }),
+    expect.objectContaining({ id: 'step-1' }),
+    WizardStepChangeScope.Next
+  );
+
+  await user.click(nextButton);
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step5-sub2' }),
+    expect.objectContaining({ id: 'step2-sub1' }),
+    WizardStepChangeScope.Next
+  );
+
+  await user.click(nextButton);
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step8-sub2' }),
+    expect.objectContaining({ id: 'step5-sub2' }),
+    WizardStepChangeScope.Next
+  );
+
+  await user.click(backButton);
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step5-sub2' }),
+    expect.objectContaining({ id: 'step8-sub2' }),
+    WizardStepChangeScope.Back
+  );
+
+  await user.click(backButton);
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step2-sub1' }),
+    expect.objectContaining({ id: 'step5-sub2' }),
+    WizardStepChangeScope.Back
+  );
+
+  await user.click(backButton);
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step-1' }),
+    expect.objectContaining({ id: 'step2-sub1' }),
+    WizardStepChangeScope.Back
+  );
 });

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

@@ -10,7 +10,7 @@ test('renders children without additional props', () => {
   expect(container).not.toHaveAttribute('aria-labelledby');
 });
 
-test('has no padding className when hasNoBodyPadding is not specified', () => {
+test('has no padding className when hasNoPadding is not specified', () => {
   render(<WizardBody>content</WizardBody>);
   expect(screen.getByText('content')).not.toHaveClass('pf-m-no-padding');
 });

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

@@ -58,7 +58,7 @@ test('renders only the active step content by default', async () => {
   render(<WizardToggle {...defaultProps} />);
 
   expect(screen.getByText('First step content')).toBeInTheDocument();
-  expect(screen.queryByText('Second step content')).toBeNull;
+  expect(screen.queryByText('Second step content')).toBeNull();
 });
 
 test('has expanded properties when the toggle dropdown button is clicked', async () => {
@@ -95,7 +95,7 @@ test('unsets expanded properties when using the Escape key', async () => {
   expect(toggleButton).not.toHaveClass('pf-m-expanded');
 });
 
-const WizardToggleExpand = props => {
+const WizardToggleExpand = (props) => {
   const [isExpanded, setIsExpanded] = React.useState(false);
 
   return (

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

@@ -31,7 +31,7 @@ describe('buildSteps', () => {
   });
 
   test('returns flattened array of steps and sub-steps when sub-steps exist', () => {
-    const CustomSubStep = props => <div {...props} />;
+    const CustomSubStep = (props) => <div {...props} />;
 
     const component = (
       <WizardStep

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

@@ -49,6 +49,8 @@ WizardHeader
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-icon';
 import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
+import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 
 ## Examples
 
@@ -149,7 +151,7 @@ import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
 Used to access any property of [WizardContext](#wizardcontextprops):
 
 ```noLive
-import { useWizardContext } from '@patternfly/react-core/next';
+import { useWizardContext } from '@patternfly/react-core';
 
 const StepContent = () => {
   const { activeStep } = useWizardContext();
@@ -162,7 +164,7 @@ const StepContent = () => {
 Used to set a unique footer for the wizard on any given step.
 
 ```noLive
-import { useWizardFooter } from '@patternfly/react-core/next';
+import { useWizardFooter } from '@patternfly/react-core';
 
 const StepContent = () => {
   useWizardFooter(<>Some footer</>);

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

@@ -36,7 +36,7 @@ const CurrentStepDescriptionList = ({ currentStep }: { currentStep: WizardStepTy
 export const GetCurrentStepWizard: React.FunctionComponent = () => {
   const [currentStep, setCurrentStep] = React.useState<WizardStepType>();
 
-  const onStepChange = (event: React.MouseEvent<HTMLButtonElement>, currentStep: WizardStepType) =>
+  const onStepChange = (_event: React.MouseEvent<HTMLButtonElement>, currentStep: WizardStepType) =>
     setCurrentStep(currentStep);
 
   return (
@@ -44,9 +44,43 @@ export const GetCurrentStepWizard: React.FunctionComponent = () => {
       <WizardStep name="Step 1" id="get-current-step-1">
         {currentStep ? <CurrentStepDescriptionList currentStep={currentStep} /> : 'Step 1 content'}
       </WizardStep>
-      <WizardStep name="Step 2" id="get-current-step-2">
-        <CurrentStepDescriptionList currentStep={currentStep} />
-      </WizardStep>
+      <WizardStep
+        name="Step 2"
+        id="get-current-step-2"
+        isDisabled
+        steps={[
+          <WizardStep name="Substep 1" id="get-current-substep-1" key="get-current-substep-1">
+            <CurrentStepDescriptionList currentStep={currentStep} />
+          </WizardStep>,
+          <WizardStep name="Substep 2" id="get-current-substep-2" key="get-current-substep-2">
+            <CurrentStepDescriptionList currentStep={currentStep} />
+          </WizardStep>
+        ]}
+      />
+      <WizardStep
+        name="Step 3"
+        id="get-current-step-3"
+        steps={[
+          <WizardStep name="Substep 3" id="get-current-substep-3" key="get-current-substep-3">
+            <CurrentStepDescriptionList currentStep={currentStep} />
+          </WizardStep>,
+          <WizardStep name="Substep 4" id="get-current-substep-4" key="get-current-substep-4">
+            <CurrentStepDescriptionList currentStep={currentStep} />
+          </WizardStep>
+        ]}
+      />
+      <WizardStep
+        name="Step 4"
+        id="get-current-step-4"
+        steps={[
+          <WizardStep name="Substep 5" id="get-current-substep-5" key="get-current-substep-5" isHidden>
+            <CurrentStepDescriptionList currentStep={currentStep} />
+          </WizardStep>,
+          <WizardStep name="Substep 6" id="get-current-substep-6" key="get-current-substep-6">
+            <CurrentStepDescriptionList currentStep={currentStep} />
+          </WizardStep>
+        ]}
+      />
       <WizardStep name="Review" id="get-current-review-step" footer={{ nextButtonText: 'Finish' }}>
         <CurrentStepDescriptionList currentStep={currentStep} />
       </WizardStep>

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

@@ -14,6 +14,7 @@ import {
   Wizard,
   WizardStep
 } from '@patternfly/react-core';
+import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
 const StepContentWithDrawer: React.FunctionComponent = () => {
   const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
@@ -39,7 +40,7 @@ const StepContentWithDrawer: React.FunctionComponent = () => {
         }
       >
         <Flex
-          className="pf-v5-c-wizard__main-body"
+          className={styles.wizardMainBody}
           direction={{ default: 'column' }}
           spaceItems={{ default: 'spaceItemsLg' }}
           height="100%"

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

@@ -22,6 +22,7 @@ import {
   useWizardContext
 } from '@patternfly/react-core';
 import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
+import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 
 interface ValidationProgressProps {
   onClose(): void;
@@ -45,7 +46,7 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
   }, [tick]);
 
   return (
-    <div className="pf-v5-l-bullseye">
+    <div className={layout.bullseye}>
       <EmptyState variant="lg">
         <EmptyStateHeader
           headingLevel="h4"

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

@@ -10,7 +10,7 @@ export const WizardWithCustomNavItem: React.FunctionComponent = () => (
       id="custom-nav-item-second-step"
       name="Step 2"
       navItem={{
-        content: <span style={{ color: 'var(--pf-v5-global--default-color--200)' }}>Custom item</span>
+        content: <span>Custom item</span>
       }}
     >
       Step 2 content with a custom navigation item

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

@@ -12,6 +12,7 @@ import {
   WizardStep
 } from '@patternfly/react-core';
 import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
+import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 
 interface ValidationProgressProps {
   onClose(): void;
@@ -35,7 +36,7 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
   }, [tick]);
 
   return (
-    <div className="pf-v5-l-bullseye">
+    <div className={layout.bullseye}>
       <EmptyState variant="lg">
         <EmptyStateHeader
           headingLevel="h4"

package/src/components/Wizard/types.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { WizardNavProps, WizardNavItemProps, WizardFooterProps } from '.';
+import { ButtonProps } from '../Button';
 
 /** Type used to define 'basic' steps, or in other words, steps that are neither parents or children of parents. */
 export interface WizardBasicStep {
@@ -30,6 +31,9 @@ export enum WizardNavItemStatus {
   Error = 'error'
 }
 
+/** Type for customizing a button (next, back or cancel) in a Wizard footer. It omits some props which either have a default value or are passed directly via WizardFooterProps. */
+export type WizardFooterButtonProps = Omit<ButtonProps, 'children' | 'variant' | 'onClick'>;
+
 /** Type used to define parent steps. */
 export interface WizardParentStep extends WizardBasicStep {
   /** Nested step IDs */

package/src/components/Wizard/utils.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { WizardStepType } from './types';
+import { isWizardParentStep, isWizardSubStep, WizardStepType } from './types';
 import { WizardStep, WizardStepProps } from './WizardStep';
 
 /**
@@ -8,7 +8,7 @@ import { WizardStep, WizardStepProps } from './WizardStep';
  * @param children
  * @returns WizardStepType[]
  */
-export const buildSteps = (children: React.ReactNode | React.ReactNode[]) =>
+export const buildSteps = (children: React.ReactNode) =>
   React.Children.toArray(children).reduce((acc: WizardStepType[], child: React.ReactNode, index: number) => {
     if (isWizardStep(child)) {
       const { props: childProps } = child;
@@ -57,3 +57,26 @@ export const normalizeStepProps = ({
   steps: _steps,
   ...controlStep
 }: WizardStepProps): Omit<WizardStepType, 'index'> => controlStep;
+
+/**
+ * Determines whether a step is navigable based on disabled/hidden properties
+ * @param steps All steps
+ * @param step
+ * @returns boolean
+ */
+export const isStepEnabled = (steps: WizardStepType[], step: WizardStepType): boolean => {
+  // Skip over parent steps since they are merely containers of sub-steps
+  if (!isWizardParentStep(step) && !step.isHidden && !step.isDisabled) {
+    if (isWizardSubStep(step)) {
+      const parentStep = steps.find((otherStep) => otherStep.id === step.parentId);
+
+      if (!parentStep.isHidden && !parentStep.isDisabled) {
+        return true;
+      }
+    } else {
+      return true;
+    }
+  }
+
+  return false;
+};

package/src/components/assets/PF-HorizontalLogo-Color.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="679px" height="158px" viewBox="0 0 679 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>PF-HorizontalLogo-Color </title>
+    <defs>
+        <linearGradient x1="68%" y1="2.25860997e-13%" x2="32%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#2B9AF3" offset="0%"></stop>
+            <stop stop-color="#73BCF7" stop-opacity="0.502212631" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="PF-HorizontalLogo-Color" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="PatternFly-Copy-11" transform="translate(206.000000, 45.750000)" fill="#151515" fill-rule="nonzero">
+            <path d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z" id="Shape"></path>
+            <path d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z" id="Shape"></path>
+            <path d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z" id="Path"></path>
+            <path d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z" id="Path"></path>
+            <path d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z" id="Shape"></path>
+            <path d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z" id="Path"></path>
+            <path d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z" id="Path"></path>
+            <polygon id="Path" points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"></polygon>
+            <polygon id="Path" points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"></polygon>
+            <path d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z" id="Path"></path>
+        </g>
+        <g id="Logo" transform="translate(0.000000, 0.000000)">
+            <path d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z" id="Rectangle-Copy-17" fill="#0066CC"></path>
+            <path d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z" id="Path-2" fill="url(#linearGradient-1)"></path>
+            <path d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z" id="Path-2" fill="url(#linearGradient-1)" transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "></path>
+        </g>
+    </g>
+</svg>

package/src/demos/AlertGroup.md

@@ -6,8 +6,6 @@ section: components
 import { useEffect } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import DashboardWrapper from './examples/DashboardWrapper';
-import DashboardHeader from './examples/DashboardHeader';
 
 ## Demos
 

package/src/demos/BackToTop.md

@@ -3,8 +3,6 @@ id: Back to top
 section: components
 ---
 
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-
 ## Demos
 
 ### Using name selector