@patternfly/react-core 4.223.2 → 4.224.1

package/src/components/Wizard/WizardBody.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import { css } from '@patternfly/react-styles';
+import { WizardDrawerWrapper } from './WizardDrawerWrapper';
+import { Drawer, DrawerContent } from '../Drawer';
+import { WizardStep } from './Wizard';
 
 export interface WizardBodyProps {
   /** Anything that can be rendered in the Wizard body */
@@ -13,6 +16,12 @@ export interface WizardBodyProps {
   'aria-labelledby': string;
   /** Component used as the primary content container */
   mainComponent?: React.ElementType;
+  /** The currently active WizardStep */
+  activeStep: WizardStep;
+  hasDrawer?: boolean;
+  /** Flag indicating the wizard drawer is expanded */
+  isDrawerExpanded?: boolean;
+  /** Callback function for when the drawer is toggled */
 }
 
 export const WizardBody: React.FunctionComponent<WizardBodyProps> = ({
@@ -20,12 +29,24 @@ export const WizardBody: React.FunctionComponent<WizardBodyProps> = ({
   hasNoBodyPadding = false,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
-  mainComponent = 'div'
+  mainComponent = 'div',
+  hasDrawer,
+  isDrawerExpanded,
+  activeStep
 }: WizardBodyProps) => {
   const MainComponent = mainComponent;
   return (
     <MainComponent aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} className={css(styles.wizardMain)}>
-      <div className={css(styles.wizardMainBody, hasNoBodyPadding && styles.modifiers.noPadding)}>{children}</div>
+      <WizardDrawerWrapper
+        hasDrawer={hasDrawer && activeStep.drawerPanelContent}
+        wrapper={(children: React.ReactNode) => (
+          <Drawer isInline isExpanded={isDrawerExpanded}>
+            <DrawerContent panelContent={activeStep.drawerPanelContent}>{children}</DrawerContent>
+          </Drawer>
+        )}
+      >
+        <div className={css(styles.wizardMainBody, hasNoBodyPadding && styles.modifiers.noPadding)}>{children}</div>
+      </WizardDrawerWrapper>
     </MainComponent>
   );
 };

package/src/components/Wizard/WizardDrawerWrapper.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+export interface WizardDrawerWrapperProps {
+  /** The wizard content  */
+  children: React.ReactElement;
+  /** Flag indicating the wizard has a drawer for at least one of the wizard steps */
+  hasDrawer: boolean;
+  /** The drawer component which wraps the wizard content */
+  wrapper: (children: React.ReactElement) => JSX.Element;
+}
+
+export const WizardDrawerWrapper: React.FunctionComponent<WizardDrawerWrapperProps> = ({
+  hasDrawer,
+  wrapper,
+  children
+}) => (hasDrawer ? wrapper(children) : children);
+
+WizardDrawerWrapper.displayName = 'WizardDrawerWrapper';

package/src/components/Wizard/WizardToggle.tsx

@@ -14,7 +14,7 @@ export interface WizardToggleProps {
   /** The currently active WizardStep */
   activeStep: WizardStep;
   /** The WizardFooter */
-  children: React.ReactNode;
+  children?: React.ReactNode;
   /** Set to true to remove body padding */
   hasNoBodyPadding: boolean;
   /** If the nav is open */
@@ -29,6 +29,10 @@ export interface WizardToggleProps {
   mainAriaLabel?: string;
   /** If the wizard is in-page */
   isInPage?: boolean;
+  /** @beta Flag indicating the wizard has a drawer for at least one of the wizard steps */
+  hasDrawer?: boolean;
+  /** @beta Flag indicating the wizard drawer is expanded */
+  isDrawerExpanded?: boolean;
 }
 
 export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
@@ -42,7 +46,9 @@ export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
   'aria-label': ariaLabel = 'Wizard Toggle',
   mainAriaLabelledBy = null,
   mainAriaLabel = null,
-  isInPage = true
+  isInPage = true,
+  hasDrawer,
+  isDrawerExpanded
 }: WizardToggleProps) => {
   let activeStepIndex;
   let activeStepName;
@@ -91,7 +97,11 @@ export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
             aria-label={mainAriaLabel}
             aria-labelledby={mainAriaLabelledBy}
             hasNoBodyPadding={hasNoBodyPadding}
+            activeStep={activeStep}
+            isDrawerExpanded={isDrawerExpanded}
+            hasDrawer={hasDrawer}
           >
+            {hasDrawer && !isDrawerExpanded && activeStep.drawerToggleButton}
             {activeStep.component}
           </WizardBody>
         </div>

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

@@ -1,31 +1,32 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Wizard, WizardStepFunctionType, WizardStep } from '../Wizard';
+import { DrawerPanelContent, DrawerColorVariant, DrawerHead } from '../../Drawer';
 
 describe('Wizard', () => {
   test('Wizard should match snapshot', () => {
     const steps: WizardStep[] = [
-      { name: 'A', id: "step-A", component: <p>Step 1</p> },
+      { name: 'A', id: 'step-A', component: <p>Step 1</p> },
       {
         name: 'B',
-        id: "step-B",
+        id: 'step-B',
         steps: [
           {
             name: 'B-1',
-            id: "step-B-1",
+            id: 'step-B-1',
             component: <p>Step 2</p>,
             enableNext: true
           },
           {
             name: 'B-2',
-            id: "step-B-2",
+            id: 'step-B-2',
             component: <p>Step 3</p>,
             enableNext: false
           }
         ]
       },
-      { name: 'C', id: "step-C", component: <p>Step 4</p> },
-      { name: 'D', id: "step-D", component: <p>Step 5</p> }
+      { name: 'C', id: 'step-C', component: <p>Step 4</p> },
+      { name: 'D', id: 'step-D', component: <p>Step 5</p> }
     ];
     const onBack: WizardStepFunctionType = step => {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -100,6 +101,22 @@ describe('Wizard', () => {
     expect(screen.getByRole('heading', { name: 'Wizard' })).toBeInTheDocument();
   });
 
+  test('wiz with drawer', () => {
+    const wizDrawerPanelContent = (
+      <DrawerPanelContent colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span>This wizard has a drawer with drawer panel content</span>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p>, drawerPanelContent: wizDrawerPanelContent }];
+
+    render(<Wizard title="Wizard with drawer" hasDrawer isDrawerExpanded steps={steps} />);
+    expect(screen.getByRole('heading', { name: 'Wizard with drawer' })).toBeInTheDocument();
+    expect(screen.getByText('This wizard has a drawer with drawer panel content')).toBeInTheDocument();
+  });
+
   test('wiz with title and navAriaLabel combination', () => {
     const steps: WizardStep[] = [{ name: 'A', component: <p>Step 1</p> }];
 
@@ -109,7 +126,7 @@ describe('Wizard', () => {
 
     expect(screen.getByRole('heading', { name: 'Wizard' })).toBeInTheDocument();
     expect(nav).toBeInTheDocument();
-    expect(nav).toHaveAttribute('aria-labelledby', 'pf-wizard-title-4');
+    expect(nav).toHaveAttribute('aria-labelledby', 'pf-wizard-title-5');
   });
 
   test('wiz with title, navAriaLabel, and mainAriaLabel combination', () => {

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

@@ -2,10 +2,12 @@
 id: Wizard
 section: components
 cssPrefix: pf-c-wizard
-propComponents: ['Wizard', 'WizardNav', 'WizardNavItem', 'WizardHeader', 'WizardBody', 'WizardFooter', 'WizardToggle', 'WizardStep']
+propComponents:
+  ['Wizard', 'WizardNav', 'WizardNavItem', 'WizardHeader', 'WizardBody', 'WizardFooter', 'WizardToggle', 'WizardStep']
 ---
 
-import { Button, Wizard, WizardFooter, WizardContextConsumer, ModalVariant, Alert, EmptyState, EmptyStateIcon, EmptyStateBody, EmptyStateSecondaryActions, Title, Progress } from '@patternfly/react-core';
+import { Button, Drawer, DrawerActions, DrawerCloseButton, DrawerColorVariant,
+DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, DrawerSection, Wizard, WizardFooter, WizardContextConsumer, ModalVariant, Alert, EmptyState, EmptyStateIcon, EmptyStateBody, EmptyStateSecondaryActions, Title, Progress } from '@patternfly/react-core';
 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 FinishedStep from './FinishedStep';
@@ -859,3 +861,156 @@ class WizardInModal extends React.Component {
   }
 }
 ```
+
+### Wizard with drawer
+
+```js isBeta
+import React from 'react';
+import {
+  Button,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerHead,
+  DrawerPanelContent,
+  Text,
+  TextContent,
+  Wizard
+} from '@patternfly/react-core';
+
+class WizardWithDrawer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: false,
+      isDrawerExpanded: false,
+      sectionGray: false,
+      panelGray: true,
+      contentGray: false
+    };
+
+    this.drawerRef = React.createRef();
+
+    this.onExpand = () => {
+      this.drawerRef.current && this.drawerRef.current.focus();
+    };
+
+    this.onOpenClick = () => {
+      this.setState({
+        isDrawerExpanded: true
+      });
+    };
+
+    this.onCloseClick = () => {
+      this.setState({
+        isDrawerExpanded: false
+      });
+    };
+  }
+
+  render() {
+    const { isDrawerExpanded } = this.state;
+
+    const panel1Content = (
+      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span tabIndex={isDrawerExpanded ? 0 : -1} ref={this.drawerRef}>
+            drawer-panel-1 content
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton onClick={this.onCloseClick} />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const panel2Content = (
+      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span tabIndex={0} ref={this.drawerRef}>
+            drawer-panel-2 content
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton onClick={this.onCloseClick} />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const panel3Content = (
+      <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
+        <DrawerHead>
+          <span tabIndex={0} ref={this.drawerRef}>
+            drawer-panel-3 content
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton onClick={this.onCloseClick} />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const drawerToggleButton = (
+      <Button isInline variant="link" onClick={this.onOpenClick}>
+        Open Drawer
+      </Button>
+    );
+
+    const steps = [
+      {
+        name: 'Information',
+        component: <p>Information step content</p>,
+        drawerPanelContent: panel1Content,
+        drawerToggleButton: drawerToggleButton
+      },
+      {
+        name: 'Configuration',
+        steps: [
+          {
+            name: 'Substep A',
+            component: <p>Substep A content</p>,
+            drawerPanelContent: panel2Content,
+            drawerToggleButton: drawerToggleButton
+          },
+          {
+            name: 'Substep B',
+            component: <p>Substep B content</p>,
+            drawerPanelContent: panel2Content,
+            drawerToggleButton: drawerToggleButton
+          },
+          {
+            name: 'Substep C',
+            component: <p>Substep C content</p>,
+            drawerPanelContent: panel2Content,
+            drawerToggleButton: drawerToggleButton
+          }
+        ]
+      },
+      {
+        name: 'Additional',
+        component: <p>Additional step content</p>,
+        drawerPanelContent: panel3Content,
+        drawerToggleButton: drawerToggleButton
+      },
+      {
+        name: 'Review',
+        component: <p>Review step content</p>,
+        nextButtonText: 'Finish'
+      }
+    ];
+
+    const title = 'Wizard with drawer';
+
+    return (
+      <React.Fragment>
+        <Wizard
+          height={400}
+          isDrawerExpanded={isDrawerExpanded}
+          hasDrawer
+          navAriaLabel={`${title} steps`}
+          steps={steps}
+        />
+      </React.Fragment>
+    );
+  }
+}
+```