@patternfly/react-core 5.0.0-alpha.70 → 5.0.0-alpha.72

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

@@ -0,0 +1,379 @@
+---
+id: Wizard
+section: components
+cssPrefix: pf-c-wizard
+propComponents:
+  ['Wizard', 'WizardNav', 'WizardNavItem', 'WizardHeader', 'WizardBody', 'WizardFooter', 'WizardToggle', 'WizardStep']
+ouia: true
+source: react-deprecated
+---
+
+import { Button, Drawer, DrawerActions, DrawerCloseButton, DrawerColorVariant,
+DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, DrawerSection, ModalVariant, Alert, EmptyState, EmptyStateHeader, EmptyStateFooter, EmptyStateBody, EmptyStateActions, Title, Progress, Form, FormGroup, TextInput } from '@patternfly/react-core';
+import { Wizard as WizardDeprecated, WizardFooter as WizardFooterDeprecated, WizardContextConsumer as WizardContextConsumerDeprecated } from '@patternfly/react-core/deprecated';
+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';
+
+
+If you seek a wizard solution that allows for more composition, see the [React](/components/wizard) tab.
+
+## Examples
+
+### Basic
+
+```js file="./WizardBasic.tsx"
+```
+
+### Basic with disabled steps
+
+```js file="./WizardBasicWithDisabledSteps.tsx"
+```
+
+### Anchors for nav items
+
+```js file="./WizardAnchorsForNavItems.tsx"
+```
+
+### Incrementally enabled steps
+
+```js file="./WizardIncrementallyEnabledSteps.tsx"
+```
+
+### Expandable steps
+
+```js file="./WizardExpandableSteps.tsx"
+```
+
+### Finished
+
+```js file="./WizardFinished.tsx"
+```
+
+### Enabled on form validation
+
+```js file="./WizardEnabledOnFormValidation.tsx"
+```
+
+### Validate on button press
+
+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:
+
+```
+interface WizardContext {
+  goToStepById: (stepId: number | string) => void;
+  goToStepByName: (stepName: string) => void;
+  onNext: () => void;
+  onBack: () => void;
+  onClose: () => void;
+  activeStep: WizardStep;
+}
+```
+
+```js file="./WizardValidateOnButtonPress.tsx"
+```
+
+### Progressive steps
+
+```js
+import React from 'react';
+import { Button, Radio, Alert } from '@patternfly/react-core';
+import { Wizard as WizardDeprecated, WizardFooter as WizardFooterDeprecated, WizardContextConsumer as WizardContextConsumerDeprecated } from '@patternfly/react-core/deprecated'
+
+class ProgressiveWizard extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showCreateStep: false,
+      showUpdateStep: false,
+      showOptionsStep: false,
+      showReviewStep: false,
+      getStartedStepRadio: 'Create',
+      createStepRadio: 'Quick',
+      updateStepRadio: 'Quick'
+    };
+    this.closeWizard = () => {
+      console.log('close wizard');
+    };
+    this.onGoToStep = ({ id, name }, { prevId, prevName }) => {
+      // Remove steps after the currently clicked step
+      if (name === 'Get started') {
+        this.setState({
+          showReviewStep: false,
+          showOptionsStep: false,
+          showCreateStep: false,
+          showUpdateStep: false
+        });
+      } else if (name === 'Create options' || name === 'Update options') {
+        this.setState({
+          showReviewStep: false,
+          showOptionsStep: false
+        });
+      } else if (name.indexOf('Substep') > -1) {
+        this.setState({
+          showReviewStep: false
+        });
+      }
+    };
+    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();
+            }
+          );
+        } else {
+          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();
+          }
+        );
+      } else if (activeStep.name === 'Substep 3') {
+        this.setState(
+          {
+            showReviewStep: true
+          },
+          () => {
+            callback();
+          }
+        );
+      } else {
+        callback();
+      }
+    };
+    this.getPreviousStep = (activeStep, callback) => {
+      if (activeStep.name === 'Review') {
+        this.setState(
+          {
+            showReviewStep: false
+          },
+          () => {
+            callback();
+          }
+        );
+      } else if (activeStep.name === 'Substep 1') {
+        this.setState(
+          {
+            showOptionsStep: false
+          },
+          () => {
+            callback();
+          }
+        );
+      } else if (activeStep.name === 'Create options') {
+        this.setState(
+          {
+            showCreateStep: false
+          },
+          () => {
+            callback();
+          }
+        );
+      } else if (activeStep.name === 'Update options') {
+        this.setState(
+          {
+            showUpdateStep: false
+          },
+          () => {
+            callback();
+          }
+        );
+      } else {
+        callback();
+      }
+    };
+  }
+  render() {
+    const {
+      stepsValid,
+      getStartedStepRadio,
+      createStepRadio,
+      updateStepRadio,
+      showCreateStep,
+      showUpdateStep,
+      showOptionsStep,
+      showReviewStep
+    } = this.state;
+    const getStartedStep = {
+      name: 'Get started',
+      component: (
+        <div>
+          <Radio
+            value="Create"
+            isChecked={getStartedStepRadio === 'Create'}
+            onChange={(_, event) => this.setState({ getStartedStepRadio: event.currentTarget.value })}
+            label="Create a new thing"
+            name="radio-step-start"
+            id="radio-step-start-1"
+          />{' '}
+          <Radio
+            value="Update"
+            isChecked={getStartedStepRadio === 'Update'}
+            onChange={(_, event) => this.setState({ getStartedStepRadio: event.currentTarget.value })}
+            label="Update an existing thing"
+            name="radio-step-start"
+            id="radio-step-start-2"
+          />
+        </div>
+      )
+    };
+    const createStep = {
+      name: 'Create options',
+      component: (
+        <div>
+          <Radio
+            value="Quick"
+            isChecked={createStepRadio === 'Quick'}
+            onChange={(_, event) => this.setState({ createStepRadio: event.currentTarget.value })}
+            label="Quick create"
+            name="radio-step-create"
+            id="radio-step-create-1"
+          />{' '}
+          <Radio
+            value="Custom"
+            isChecked={createStepRadio === 'Custom'}
+            onChange={(_, event) => this.setState({ createStepRadio: event.currentTarget.value })}
+            label="Custom create"
+            name="radio-step-create"
+            id="radio-step-create-2"
+          />
+        </div>
+      )
+    };
+    const updateStep = {
+      name: 'Update options',
+      component: (
+        <div>
+          <Radio
+            value="Quick"
+            isChecked={updateStepRadio === 'Quick'}
+            onChange={(_, event) => this.setState({ updateStepRadio: event.currentTarget.value })}
+            label="Quick update"
+            name="radio-step-update"
+            id="radio-step-update-1"
+          />{' '}
+          <Radio
+            value="Custom"
+            isChecked={updateStepRadio === 'Custom'}
+            onChange={(_, event) => this.setState({ updateStepRadio: event.currentTarget.value })}
+            label="Custom update"
+            name="radio-step-update"
+            id="radio-step-update-2"
+          />
+        </div>
+      )
+    };
+    const optionsStep = {
+      name: showCreateStep ? `${createStepRadio} Options` : `${updateStepRadio} Options`,
+      steps: [
+        {
+          name: 'Substep 1',
+          component: 'Substep 1'
+        },
+        {
+          name: 'Substep 2',
+          component: 'Substep 2'
+        },
+        {
+          name: 'Substep 3',
+          component: 'Substep 3'
+        }
+      ]
+    };
+    const reviewStep = {
+      name: 'Review',
+      component: (
+        <div>
+          <div>First choice: {getStartedStepRadio}</div>
+          <div>Second choice: {showCreateStep ? createStepRadio : updateStepRadio}</div>
+        </div>
+      )
+    };
+    const steps = [
+      getStartedStep,
+      ...(showCreateStep ? [createStep] : []),
+      ...(showUpdateStep ? [updateStep] : []),
+      ...(showOptionsStep ? [optionsStep] : []),
+      ...(showReviewStep ? [reviewStep] : [])
+    ];
+    const CustomFooter = (
+      <WizardFooterDeprecated>
+        <WizardContextConsumerDeprecated>
+          {({ activeStep, goToStepByName, goToStepById, onNext, onBack, onClose }) => {
+            return (
+              <>
+                <Button
+                  variant="secondary"
+                  onClick={() => this.getPreviousStep(activeStep, onBack)}
+                  className={activeStep.name === 'Get started' ? 'pf-m-disabled' : ''}
+                >
+                  Back
+                </Button>
+                <Button variant="primary" type="submit" onClick={() => this.getNextStep(activeStep, onNext)}>
+                  {activeStep.name === 'Review' ? 'Finish' : 'Next'}
+                </Button>
+                <Button variant="link" onClick={onClose}>
+                  Cancel
+                </Button>
+              </>
+            );
+          }}
+        </WizardContextConsumerDeprecated>
+      </WizardFooterDeprecated>
+    );
+    const title = 'Progressive wizard';
+    return (
+      <WizardDeprecated
+        navAriaLabel={`${title} steps`}
+        mainAriaLabel={`${title} content`}
+        onClose={this.closeWizard}
+        footer={CustomFooter}
+        onGoToStep={this.onGoToStep}
+        steps={steps}
+        height={400}
+      />
+    );
+  }
+}
+```
+
+### Get current step
+
+```js file="./WizardGetCurrentStep.tsx"
+```
+
+### Wizard in modal
+
+```js file="./WizardInModal.tsx"
+```
+
+### Wizard with drawer
+
+```js file="./WizardWithDrawer.tsx"
+```

package/src/{components → deprecated/components}/Wizard/examples/WizardAnchorsForNavItems.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Button, Wizard } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
+import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated'
 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';
 
@@ -38,5 +39,5 @@ export const WizardWithNavAnchors: React.FunctionComponent = () => {
     }
   ];
   const title = 'Anchor link wizard example';
-  return <Wizard navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} height={400} />;
+  return <WizardDeprecated navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} height={400} />;
 };

package/src/deprecated/components/Wizard/examples/WizardBasic.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
+
+export const WizardBasic: React.FunctionComponent = () => {
+  const steps = [
+    {
+      name: 'First step',
+      component: (
+        <>
+          <p>
+            The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role of
+            "region", and an aria-label or aria-labelledby to be applied.
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra. Duis
+            lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt tempor, enim
+            ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. Nulla facilisi. Duis
+            eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci eu risus posuere pulvinar id
+            nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et libero a auctor.
+          </p>
+          <p>
+            Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris ultrices
+            orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec bibendum ante.
+            Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem, commodo sodales quam
+            lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non egestas diam velit in mi. Ut
+            sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in odio nec, ornare aliquet libero. Sed
+            luctus elit nibh. Quisque et felis diam. Integer ac metus dolor.
+          </p>
+        </>
+      )
+    },
+    { name: 'Second step', component: <p>Step 2 content</p> },
+    { name: 'Third step', component: <p>Step 3 content</p> },
+    { name: 'Fourth step', component: <p>Step 4 content</p> },
+    { name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }
+  ];
+  const title = 'Basic wizard example';
+  return <WizardDeprecated navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} height={400} />;
+};

package/src/{components → deprecated/components}/Wizard/examples/WizardBasicWithDisabledSteps.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Wizard } from '@patternfly/react-core';
+import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 
 export const WizardBasicWithDisabledSteps: React.FunctionComponent = () => {
   const steps = [
@@ -10,5 +10,5 @@ export const WizardBasicWithDisabledSteps: React.FunctionComponent = () => {
     { name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }
   ];
   const title = 'Basic wizard with disabled steps example';
-  return <Wizard navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} height={400} />;
+  return <WizardDeprecated navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} height={400} />;
 };

package/src/deprecated/components/Wizard/examples/WizardEnabledOnFormValidation.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import { Form, FormGroup, TextInput } from '@patternfly/react-core';
+import { Wizard as WizardDeprecated, WizardStep } from '@patternfly/react-core/deprecated';
+interface PrevStepInfo {
+  prevId?: string | number;
+  prevName: React.ReactNode;
+}
+
+interface sampleFormProps {
+  formValue: string;
+  isFormValid: boolean;
+  onChange?: (isValid: boolean, value: string) => void;
+}
+
+const SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormProps) => {
+  const [value, setValue] = React.useState(props.formValue);
+  const [isValid, setIsValid] = React.useState(props.isFormValid);
+
+  const handleTextInputChange = (value: string) => {
+    const valid = /^\d+$/.test(value);
+    setValue(value);
+    setIsValid(valid);
+    props.onChange && props.onChange(valid, value);
+  };
+
+  const validated = isValid ? 'default' : 'error';
+
+  return (
+    <Form>
+      <FormGroup
+        label="Age:"
+        type="number"
+        helperText="Write your age in numbers."
+        helperTextInvalid="Age has to be a number"
+        fieldId="age"
+        validated={validated}
+      >
+        <TextInput
+          validated={validated}
+          value={value}
+          id="age-input"
+          aria-describedby="age-helper"
+          onChange={handleTextInputChange}
+        />
+      </FormGroup>
+    </Form>
+  );
+};
+
+export const WizardFormValidation: React.FunctionComponent = () => {
+  const [isFormValid, setIsFormValid] = React.useState(false);
+  const [formValue, setFormValue] = React.useState('Thirty');
+  const [allStepsValid, setAllStepsValid] = React.useState(false);
+  const [stepIdReached, setStepIdReached] = React.useState(1);
+
+  React.useEffect(() => {
+    setAllStepsValid(isFormValid);
+  }, [isFormValid, stepIdReached]);
+
+  const closeWizard = () => {
+    // eslint-disable-next-line no-console
+    console.log('close wizard');
+  };
+
+  const onFormChange = (isValid: boolean, value: string) => {
+    setIsFormValid(isValid);
+    setFormValue(value);
+  };
+
+  const areAllStepsValid = () => {
+    setAllStepsValid(isFormValid);
+  };
+
+  const onNext = ({ id, name }: WizardStep, { prevId, prevName }: PrevStepInfo) => {
+    // eslint-disable-next-line no-console
+    console.log(`current id: ${id}, current name: ${name}, previous id: ${prevId}, previous name: ${prevName}`);
+    if (id) {
+      if (typeof id === 'string') {
+        const [, orderIndex] = id.split('-');
+        id = parseInt(orderIndex);
+      }
+      setStepIdReached(stepIdReached < id ? id : stepIdReached);
+    }
+  };
+
+  const onBack = ({ id, name }: WizardStep, { prevId, prevName }: PrevStepInfo) => {
+    // eslint-disable-next-line no-console
+    console.log(`current id: ${id}, current name: ${name}, previous id: ${prevId}, previous name: ${prevName}`);
+    areAllStepsValid();
+  };
+
+  const onGoToStep = ({ id, name }: WizardStep, { prevId, prevName }: PrevStepInfo) => {
+    // eslint-disable-next-line no-console
+    console.log(`current id: ${id}, current name: ${name}, previous id: ${prevId}, previous name: ${prevName}`);
+  };
+
+  const steps = [
+    { id: 'validated-1', name: 'Information', component: <p>Step 1 content</p> },
+    {
+      name: 'Configuration',
+      steps: [
+        {
+          id: 'validated-2',
+          name: 'Substep A with validation',
+          component: <SampleForm formValue={formValue} isFormValid={isFormValid} onChange={onFormChange} />,
+          enableNext: isFormValid,
+          canJumpTo: stepIdReached >= 2
+        },
+        { id: 'validated-3', name: 'Substep B', component: <p>Substep B</p>, canJumpTo: stepIdReached >= 3 }
+      ]
+    },
+    {
+      id: 'validated-4',
+      name: 'Additional',
+      component: <p>Step 3 content</p>,
+      enableNext: allStepsValid,
+      canJumpTo: stepIdReached >= 4
+    },
+    {
+      id: 'validated-5',
+      name: 'Review',
+      component: <p>Step 4 content</p>,
+      nextButtonText: 'Finish',
+      canJumpTo: stepIdReached >= 5
+    }
+  ];
+  const title = 'Wizard enabled on form validation example';
+  return (
+    <WizardDeprecated
+      navAriaLabel={`${title} steps`}
+      mainAriaLabel={`${title} content`}
+      onClose={closeWizard}
+      steps={steps}
+      onNext={onNext}
+      onBack={onBack}
+      onGoToStep={onGoToStep}
+      height={400}
+    />
+  );
+};

package/src/deprecated/components/Wizard/examples/WizardExpandableSteps.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
+
+export const WizardExpandableSteps: React.FunctionComponent = () => {
+  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: 'Second step', component: <p>Step 2 content</p> },
+    {
+      name: 'Third step',
+      steps: [
+        { name: 'Substep C', component: <p>Substep C content</p> },
+        { name: 'Substep D', component: <p>Substep D content</p> }
+      ]
+    },
+    { name: 'Fourth step', component: <p>Step 4 content</p> },
+    { name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }
+  ];
+  const title = 'Expandable wizard example';
+  return (
+    <WizardDeprecated
+      navAriaLabel={`${title} steps`}
+      mainAriaLabel={`${title} content`}
+      steps={steps}
+      height={400}
+      isNavExpandable
+    />
+  );
+};

package/src/{components → deprecated/components}/Wizard/examples/WizardFinished.tsx

@@ -7,9 +7,9 @@ import {
   EmptyStateActions,
   EmptyStateIcon,
   Progress,
-  Button,
-  Wizard
+  Button
 } from '@patternfly/react-core';
+import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 // eslint-disable-next-line patternfly-react/import-tokens-icons
 import { CogsIcon } from '@patternfly/react-icons';
 
@@ -83,7 +83,7 @@ export const WizardFinished: React.FunctionComponent = () => {
   ];
   const title = 'Finished wizard example';
   return (
-    <Wizard
+    <WizardDeprecated
       navAriaLabel={`${title} steps`}
       mainAriaLabel={`${title} content`}
       onClose={closeWizard}

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Wizard as WizardDeprecated, WizardStep } from '@patternfly/react-core/deprecated';
+
+export const WizardGetCurrentStep: React.FunctionComponent = () => {
+  const onCurrentStepChanged = ({ id }: WizardStep) => {
+    // eslint-disable-next-line no-console
+    console.log(id);
+  };
+  const closeWizard = () => {
+    // eslint-disable-next-line no-console
+    console.log('close wizard');
+  };
+
+  const steps = [
+    { id: 1, name: 'First step', component: <p>Step 1 content</p> },
+    { id: 2, name: 'Second step', component: <p>Step 2 content</p> },
+    { id: 3, name: 'Third step', component: <p>Step 3 content</p> },
+    { id: 4, name: 'Fourth step', component: <p>Step 4 content</p> },
+    { id: 5, name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }
+  ];
+  const title = 'Get current step wizard example';
+  return (
+    <WizardDeprecated
+      navAriaLabel={`${title} steps`}
+      mainAriaLabel={`${title} content`}
+      onClose={closeWizard}
+      description="Simple Wizard Description"
+      steps={steps}
+      height={400}
+      onCurrentStepChanged={onCurrentStepChanged}
+    />
+  );
+};

package/src/{components → deprecated/components}/Wizard/examples/WizardInModal.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Button, Wizard } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
+import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 
 export const WizardInModal: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -19,7 +20,7 @@ export const WizardInModal: React.FunctionComponent = () => {
       <Button variant="primary" onClick={handleModalToggle}>
         Show Modal
       </Button>
-      <Wizard
+      <WizardDeprecated
         title={title}
         description="Simple Wizard Description"
         descriptionComponent="div"