@patternfly/react-core 4.202.32 → 4.202.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.202.32",
+  "version": "4.202.33",
   "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",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.53.32",
-    "@patternfly/react-styles": "^4.52.32",
-    "@patternfly/react-tokens": "^4.54.32",
+    "@patternfly/react-icons": "^4.53.33",
+    "@patternfly/react-styles": "^4.52.33",
+    "@patternfly/react-tokens": "^4.54.33",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "0a693aa54cb89c22e75f0643ab85c49ae3ff38dd"
+  "gitHead": "be595a28a0caac9e45ad672c4f290b8241ad17b4"
 }

package/src/components/Wizard/Wizard.tsx

@@ -54,6 +54,8 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   descriptionId?: string;
   /** The wizard description */
   description?: React.ReactNode;
+  /** Component type of the description */
+  descriptionComponent?: 'div' | 'p';
   /** Flag indicating whether the close button should be in the header */
   hideClose?: boolean;
   /** Callback function to close the wizard */
@@ -111,6 +113,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
   static defaultProps: PickOptional<WizardProps> = {
     title: null,
     description: '',
+    descriptionComponent: 'p',
     className: '',
     startAtStep: 1,
     nextButtonText: 'Next',
@@ -312,6 +315,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
       height,
       title,
       description,
+      descriptionComponent,
       onClose,
       onSave,
       onBack,
@@ -453,6 +457,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
               onClose={onClose}
               title={title}
               description={description}
+              descriptionComponent={descriptionComponent}
               closeButtonAriaLabel={closeButtonAriaLabel}
               hideClose={hideClose}
             />

package/src/components/Wizard/WizardHeader.tsx

@@ -12,6 +12,8 @@ export interface WizardHeaderProps {
   title: string;
   /** Description of the wizard */
   description?: React.ReactNode;
+  /** Component type of the description */
+  descriptionComponent?: 'div' | 'p';
   /** Flag indicating whether the close button should be in the header */
   hideClose?: boolean;
   /** Aria-label applied to the X (Close) button */
@@ -29,6 +31,7 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
   hideClose,
   closeButtonAriaLabel,
   titleId,
+  descriptionComponent: Component = 'p',
   descriptionId
 }: WizardHeaderProps) => (
   <div className={css(styles.wizardHeader)}>
@@ -41,9 +44,9 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
       {title || <>&nbsp;</>}
     </Title>
     {description && (
-      <p className={css(styles.wizardDescription)} id={descriptionId}>
+      <Component className={css(styles.wizardDescription)} id={descriptionId}>
         {description}
-      </p>
+      </Component>
     )}
   </div>
 );

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

@@ -12,7 +12,9 @@ import FinishedStep from './FinishedStep';
 import SampleForm from './SampleForm';
 
 ## Examples
+
 ### Basic
+
 ```js
 import React from 'react';
 import { Button, Wizard } from '@patternfly/react-core';
@@ -31,19 +33,13 @@ class SimpleWizard extends React.Component {
       { name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }
     ];
     const title = 'Basic wizard';
-    return (
-      <Wizard
-        navAriaLabel={`${title} steps`}
-        mainAriaLabel={`${title} content`}
-        steps={steps}
-        height={400}
-      />
-    );
+    return <Wizard navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} height={400} />;
   }
 }
 ```
 
 ### Anchors for nav items
+
 ```js
 import React from 'react';
 import { Button, Wizard } from '@patternfly/react-core';
@@ -58,35 +54,45 @@ class WizardWithNavAnchors extends React.Component {
   render() {
     const steps = [
       {
-        name: <div><ExternalLinkAltIcon /> PF3</div>,
+        name: (
+          <div>
+            <ExternalLinkAltIcon /> PF3
+          </div>
+        ),
         component: <p>Step 1: Read about PF3</p>,
         stepNavItemProps: { navItemComponent: 'a', href: 'https://www.patternfly.org/v3/', target: '_blank' }
       },
       {
-        name: <div><ExternalLinkAltIcon /> PF4</div>,
+        name: (
+          <div>
+            <ExternalLinkAltIcon /> PF4
+          </div>
+        ),
         component: <p>Step 2: Read about PF4</p>,
         stepNavItemProps: { navItemComponent: 'a', href: 'https://www.patternfly.org/v4/', target: '_blank' }
       },
       {
-        name: <div><SlackHashIcon /> Join us on slack</div>,
-        component: <Button variant="link" component="a" target="_blank" href="https://patternfly.slack.com/">Join the conversation</Button>,
+        name: (
+          <div>
+            <SlackHashIcon /> Join us on slack
+          </div>
+        ),
+        component: (
+          <Button variant="link" component="a" target="_blank" href="https://patternfly.slack.com/">
+            Join the conversation
+          </Button>
+        ),
         stepNavItemProps: { navItemComponent: 'a', href: 'https://patternfly.slack.com/', target: '_blank' }
       }
     ];
     const title = 'Anchor link wizard';
-    return (
-      <Wizard
-        navAriaLabel={`${title} steps`}
-        mainAriaLabel={`${title} content`}
-        steps={steps}
-        height={400}
-      />
-    );
+    return <Wizard navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} height={400} />;
   }
 }
 ```
 
 ### Incrementally enabled steps
+
 ```js
 import React from 'react';
 import { Button, Wizard } from '@patternfly/react-core';
@@ -103,8 +109,8 @@ class IncrementallyEnabledStepsWizard extends React.Component {
       });
     };
     this.closeWizard = () => {
-      console.log("close wizard");
-    }
+      console.log('close wizard');
+    };
   }
 
   render() {
@@ -115,7 +121,13 @@ class IncrementallyEnabledStepsWizard extends React.Component {
       { id: 2, name: 'Second step', component: <p>Step 2 content</p>, canJumpTo: stepIdReached >= 2 },
       { id: 3, name: 'Third step', component: <p>Step 3 content</p>, canJumpTo: stepIdReached >= 3 },
       { id: 4, name: 'Fourth step', component: <p>Step 4 content</p>, canJumpTo: stepIdReached >= 4 },
-      { id: 5, name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish', canJumpTo: stepIdReached >= 5 }
+      {
+        id: 5,
+        name: 'Review',
+        component: <p>Review step content</p>,
+        nextButtonText: 'Finish',
+        canJumpTo: stepIdReached >= 5
+      }
     ];
     const title = 'Incrementally enabled wizard';
     return (
@@ -133,6 +145,7 @@ class IncrementallyEnabledStepsWizard extends React.Component {
 ```
 
 ### Expandable steps
+
 ```js
 import React from 'react';
 import { Button, Wizard } from '@patternfly/react-core';
@@ -144,19 +157,19 @@ class SimpleWizard extends React.Component {
 
   render() {
     const steps = [
-      { 
+      {
         name: 'First step',
         steps: [
           { name: 'Substep A', component: <p>Substep A content</p> },
-          { name: 'Substep B', component: <p>Substep B content</p> },
+          { name: 'Substep B', component: <p>Substep B content</p> }
         ]
       },
       { name: 'Second step', component: <p>Step 2 content</p> },
-      { 
-        name: 'Third step', 
+      {
+        name: 'Third step',
         steps: [
           { name: 'Substep C', component: <p>Substep C content</p> },
-          { name: 'Substep D', component: <p>Substep D content</p> },
+          { name: 'Substep D', component: <p>Substep D content</p> }
         ]
       },
       { name: 'Fourth step', component: <p>Step 4 content</p> },
@@ -177,6 +190,7 @@ class SimpleWizard extends React.Component {
 ```
 
 ### Finished
+
 ```js
 import React from 'react';
 import { Button, Wizard } from '@patternfly/react-core';
@@ -187,12 +201,11 @@ class FinishedStepWizard extends React.Component {
     super(props);
 
     this.closeWizard = () => {
-      console.log("close wizard");
-    }
+      console.log('close wizard');
+    };
   }
 
   render() {
-
     const steps = [
       { name: 'First step', component: <p>Step 1 content</p> },
       { name: 'Second step', component: <p>Step 2 content</p> },
@@ -216,6 +229,7 @@ class FinishedStepWizard extends React.Component {
 ```
 
 ### Enabled on form validation
+
 ```js
 import React from 'react';
 import { Button, Wizard, Form, FormGroup, TextInput } from '@patternfly/react-core';
@@ -232,8 +246,8 @@ class ValidationWizard extends React.Component {
     };
 
     this.closeWizard = () => {
-      console.log("close wizard");
-    }
+      console.log('close wizard');
+    };
 
     this.onFormChange = (isValid, value) => {
       this.setState(
@@ -287,17 +301,27 @@ class ValidationWizard extends React.Component {
           {
             id: 2,
             name: 'Substep A with validation',
-            component: (
-              <SampleForm formValue={formValue} isFormValid={isFormValid} onChange={this.onFormChange} />
-            ),
+            component: <SampleForm formValue={formValue} isFormValid={isFormValid} onChange={this.onFormChange} />,
             enableNext: isFormValid,
             canJumpTo: stepIdReached >= 2
           },
           { id: 3, name: 'Substep B', component: <p>Substep B</p>, canJumpTo: stepIdReached >= 3 }
         ]
       },
-      { id: 4, name: 'Additional', component: <p>Step 3 content</p>, enableNext: allStepsValid, canJumpTo: stepIdReached >= 4 },
-      { id: 5, name: 'Review', component: <p>Step 4 content</p>, nextButtonText: 'Close', canJumpTo: stepIdReached >= 5 }
+      {
+        id: 4,
+        name: 'Additional',
+        component: <p>Step 3 content</p>,
+        enableNext: allStepsValid,
+        canJumpTo: stepIdReached >= 4
+      },
+      {
+        id: 5,
+        name: 'Review',
+        component: <p>Step 4 content</p>,
+        nextButtonText: 'Close',
+        canJumpTo: stepIdReached >= 5
+      }
     ];
     const title = 'Enabled on form validation wizard';
     return (
@@ -321,7 +345,7 @@ class ValidationWizard extends React.Component {
 
 This example demonstrates how to use the `WizardContextConsumer` to consume the `WizardContext`. `WizardContext` can be used to imperatively move to a specific wizard step.
 
-The definition of the `WizardContext` is as follows: 
+The definition of the `WizardContext` is as follows:
 
 ```
 interface WizardContext {
@@ -348,7 +372,7 @@ class ValidateButtonPressWizard extends React.Component {
     };
 
     this.closeWizard = () => {
-      console.log("close wizard");
+      console.log('close wizard');
     };
 
     this.validateLastStep = onNext => {
@@ -373,7 +397,11 @@ class ValidateButtonPressWizard extends React.Component {
         name: 'Final Step',
         component: (
           <>
-            {stepsValid === 1 && <div style={{padding: '15px 0'}}><Alert variant="warning" title="Validation failed, please try again" /></div>}
+            {stepsValid === 1 && (
+              <div style={{ padding: '15px 0' }}>
+                <Alert variant="warning" title="Validation failed, please try again" />
+              </div>
+            )}
             <SampleForm formValue="Validating on button press" isFormValid={stepsValid !== 1} />
           </>
         )
@@ -391,14 +419,18 @@ class ValidateButtonPressWizard extends React.Component {
                   <Button variant="primary" type="submit" onClick={onNext}>
                     Forward
                   </Button>
-                  <Button variant="secondary" onClick={onBack} className={activeStep.name === 'Step 1' ? 'pf-m-disabled' : ''}>
+                  <Button
+                    variant="secondary"
+                    onClick={onBack}
+                    className={activeStep.name === 'Step 1' ? 'pf-m-disabled' : ''}
+                  >
                     Backward
                   </Button>
                   <Button variant="link" onClick={onClose}>
                     Cancel
                   </Button>
                 </>
-              )
+              );
             }
             // Final step buttons
             return (
@@ -406,7 +438,8 @@ class ValidateButtonPressWizard extends React.Component {
                 <Button onClick={() => this.validateLastStep(onNext)}>Validate</Button>
                 <Button onClick={() => goToStepByName('Step 1')}>Go to Beginning</Button>
               </>
-            )}}
+            );
+          }}
         </WizardContextConsumer>
       </WizardFooter>
     );
@@ -426,6 +459,7 @@ class ValidateButtonPressWizard extends React.Component {
 ```
 
 ### Progressive steps
+
 ```js
 import React from 'react';
 import { Button, Radio, Wizard, WizardFooter, WizardContextConsumer, Alert } from '@patternfly/react-core';
@@ -445,8 +479,8 @@ class ProgressiveWizard extends React.Component {
       updateStepRadio: 'Quick'
     };
     this.closeWizard = () => {
-      console.log("close wizard");
-    }
+      console.log('close wizard');
+    };
     this.onGoToStep = ({ id, name }, { prevId, prevName }) => {
       // Remove steps after the currently clicked step
       if (name === 'Get started') {
@@ -470,66 +504,90 @@ class ProgressiveWizard extends React.Component {
     this.getNextStep = (activeStep, callback) => {
       if (activeStep.name === 'Get started') {
         if (this.state.getStartedStepRadio === 'Create') {
-          this.setState({
-            showCreateStep: true,
-            showUpdateStep: false,
-            showOptionsStep: false,
-            showReviewStep: false
-          }, () => {
-            callback();
-          });
+          this.setState(
+            {
+              showCreateStep: true,
+              showUpdateStep: false,
+              showOptionsStep: false,
+              showReviewStep: false
+            },
+            () => {
+              callback();
+            }
+          );
         } else {
-          this.setState({
-            showCreateStep: false,
-            showUpdateStep: true,
-            showOptionsStep: false,
-            showReviewStep: false
-          }, () => {
-            callback();
-          });
+          this.setState(
+            {
+              showCreateStep: false,
+              showUpdateStep: true,
+              showOptionsStep: false,
+              showReviewStep: false
+            },
+            () => {
+              callback();
+            }
+          );
         }
       } else if (activeStep.name === 'Create options' || activeStep.name === 'Update options') {
-        this.setState({
-          showOptionsStep: true,
-          showReviewStep: false
-        }, () => {
-          callback();
-        });
+        this.setState(
+          {
+            showOptionsStep: true,
+            showReviewStep: false
+          },
+          () => {
+            callback();
+          }
+        );
       } else if (activeStep.name === 'Substep 3') {
-        this.setState({
-          showReviewStep: true
-        }, () => {
-          callback();
-        });
+        this.setState(
+          {
+            showReviewStep: true
+          },
+          () => {
+            callback();
+          }
+        );
       } else {
         callback();
       }
     };
     this.getPreviousStep = (activeStep, callback) => {
       if (activeStep.name === 'Review') {
-        this.setState({
-          showReviewStep: false
-        }, () => {
-          callback();
-        });
+        this.setState(
+          {
+            showReviewStep: false
+          },
+          () => {
+            callback();
+          }
+        );
       } else if (activeStep.name === 'Substep 1') {
-        this.setState({
-          showOptionsStep: false
-        }, () => {
-          callback();
-        });
+        this.setState(
+          {
+            showOptionsStep: false
+          },
+          () => {
+            callback();
+          }
+        );
       } else if (activeStep.name === 'Create options') {
-        this.setState({
-          showCreateStep: false
-        }, () => {
-          callback();
-        });
+        this.setState(
+          {
+            showCreateStep: false
+          },
+          () => {
+            callback();
+          }
+        );
       } else if (activeStep.name === 'Update options') {
-        this.setState({
-          showUpdateStep: false
-        }, () => {
-          callback();
-        });
+        this.setState(
+          {
+            showUpdateStep: false
+          },
+          () => {
+            callback();
+          }
+        );
       } else {
         callback();
       }
@@ -653,7 +711,7 @@ class ProgressiveWizard extends React.Component {
       ...(showCreateStep ? [createStep] : []),
       ...(showUpdateStep ? [updateStep] : []),
       ...(showOptionsStep ? [optionsStep] : []),
-      ...(showReviewStep ? [reviewStep] : []),
+      ...(showReviewStep ? [reviewStep] : [])
     ];
 
     const CustomFooter = (
@@ -665,14 +723,19 @@ class ProgressiveWizard extends React.Component {
                 <Button variant="primary" type="submit" onClick={() => this.getNextStep(activeStep, onNext)}>
                   {activeStep.name === 'Review' ? 'Finish' : 'Next'}
                 </Button>
-                <Button variant="secondary" onClick={() => this.getPreviousStep(activeStep, onBack)} className={activeStep.name === 'Get Started' ? 'pf-m-disabled' : ''}>
+                <Button
+                  variant="secondary"
+                  onClick={() => this.getPreviousStep(activeStep, onBack)}
+                  className={activeStep.name === 'Get Started' ? 'pf-m-disabled' : ''}
+                >
                   Back
                 </Button>
                 <Button variant="link" onClick={onClose}>
                   Cancel
                 </Button>
               </>
-            )}}
+            );
+          }}
         </WizardContextConsumer>
       </WizardFooter>
     );
@@ -693,6 +756,7 @@ class ProgressiveWizard extends React.Component {
 ```
 
 ### Remember last step
+
 ```js
 import React from 'react';
 import { Button, Wizard } from '@patternfly/react-core';
@@ -704,18 +768,18 @@ class RememberLastStepWizard extends React.Component {
       step: 1
     };
     this.closeWizard = () => {
-      console.log("close wizard");
-    }
+      console.log('close wizard');
+    };
     this.onMove = (curr, prev) => {
       this.setState({
         step: curr.id
       });
-    }
+    };
     this.onSave = () => {
       this.setState({
-        step: 1,
-      })
-    }
+        step: 1
+      });
+    };
   }
 
   render() {
@@ -748,6 +812,7 @@ class RememberLastStepWizard extends React.Component {
 ```
 
 ### Wizard in modal
+
 ```js
 import React from 'react';
 import { Button, Wizard } from '@patternfly/react-core';
@@ -784,6 +849,7 @@ class WizardInModal extends React.Component {
         <Wizard
           title={title}
           description="Simple Wizard Description"
+          descriptionComponent="div"
           steps={steps}
           onClose={this.handleModalToggle}
           isOpen={isOpen}
@@ -793,4 +859,3 @@ class WizardInModal extends React.Component {
   }
 }
 ```
-

package/src/components/AboutModal/__tests__/Generated/AboutModal.test.tsx

@@ -1,27 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { AboutModal } from '../../AboutModal';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('AboutModal should match snapshot (auto-generated)', () => {
-  const view = render(
-    <AboutModal
-      children={<div>ReactNode</div>}
-      className={"''"}
-      isOpen={false}
-      onClose={(): any => undefined}
-      productName={"''"}
-      trademark={"''"}
-      brandImageSrc={'string'}
-      brandImageAlt={'string'}
-      backgroundImageSrc={"''"}
-      noAboutModalBoxContentContainer={false}
-      appendTo={null}
-    />
-  );
-  expect(view.container).toMatchSnapshot();
-});

package/src/components/AboutModal/__tests__/Generated/AboutModalBox.test.tsx

@@ -1,13 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { AboutModalBox } from '../../AboutModalBox';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('AboutModalBox should match snapshot (auto-generated)', () => {
-  const view = render(<AboutModalBox children={<div>ReactNode</div>} className={"''"} />);
-  expect(view.container).toMatchSnapshot();
-});

package/src/components/AboutModal/__tests__/Generated/AboutModalBoxBrand.test.tsx

@@ -1,13 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { AboutModalBoxBrand } from '../../AboutModalBoxBrand';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('AboutModalBoxBrand should match snapshot (auto-generated)', () => {
-  const view = render(<AboutModalBoxBrand className={"''"} src={"''"} alt={'string'} />);
-  expect(view.container).toMatchSnapshot();
-});

package/src/components/AboutModal/__tests__/Generated/AboutModalBoxCloseButton.test.tsx

@@ -1,13 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { AboutModalBoxCloseButton } from '../../AboutModalBoxCloseButton';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('AboutModalBoxCloseButton should match snapshot (auto-generated)', () => {
-  const view = render(<AboutModalBoxCloseButton className={"''"} onClose={() => undefined as any} />);
-  expect(view.container).toMatchSnapshot();
-});