@patternfly/react-core 5.0.0-alpha.7 → 5.0.0-alpha.71

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

@@ -1,103 +1,130 @@
 import React from 'react';
+
 import {
+  Button,
+  Alert,
   EmptyState,
-  EmptyStateIcon,
+  EmptyStateHeader,
+  EmptyStateFooter,
   EmptyStateBody,
-  EmptyStateSecondaryActions,
-  Title,
+  EmptyStateActions,
+  EmptyStateIcon,
+  Progress,
   Form,
   FormGroup,
   TextInput,
-  Progress,
-  Button,
+  HelperText,
+  HelperTextItem,
+  FormHelperText,
   Wizard,
-  WizardFooter,
-  WizardContextConsumer,
-  Alert
+  WizardStep,
+  WizardFooterWrapper,
+  useWizardContext
 } from '@patternfly/react-core';
-// eslint-disable-next-line patternfly-react/import-tokens-icons
-import { CogsIcon } from '@patternfly/react-icons';
+import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
 
-interface finishedProps {
-  onClose: () => void;
+interface ValidationProgressProps {
+  onClose(): void;
 }
 
-const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedProps) => {
-  const [percent, setPercent] = React.useState(0);
-
-  const tick = () => {
-    setPercent(prevPercent => {
-      if (prevPercent < 100) {
-        return prevPercent + 20;
-      } else {
-        return prevPercent;
-      }
-    });
-  };
+const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({ onClose }) => {
+  const [percentValidated, setPercentValidated] = React.useState(0);
+
+  const tick = React.useCallback(() => {
+    if (percentValidated < 100) {
+      setPercentValidated(prevValue => prevValue + 20);
+    }
+  }, [percentValidated]);
 
   React.useEffect(() => {
     const interval = setInterval(() => tick(), 1000);
 
-    if (percent >= 100) {
+    return () => {
       clearInterval(interval);
-    }
-
-    return () => clearInterval(interval);
-  }, [percent]);
+    };
+  }, [tick]);
 
   return (
     <div className="pf-l-bullseye">
-      <EmptyState variant="large">
-        <EmptyStateIcon icon={CogsIcon} />
-        <Title headingLevel="h4" size="lg">
-          {percent === 100 ? 'Validation complete' : 'Validating credentials'}
-        </Title>
+      <EmptyState variant="lg">
+        <EmptyStateHeader
+          headingLevel="h4"
+          titleText={percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}
+          icon={<EmptyStateIcon icon={CogsIcon} />}
+        />
         <EmptyStateBody>
-          <Progress value={percent} measureLocation="outside" aria-label="validation-progress" />
+          <Progress value={percentValidated} measureLocation="outside" aria-label="Wizard validation progress" />
         </EmptyStateBody>
         <EmptyStateBody>
           Description can be used to further elaborate on the validation step, or give the user a better idea of how
           long the process will take.
         </EmptyStateBody>
-        <EmptyStateSecondaryActions>
-          <Button isDisabled={percent !== 100} onClick={props.onClose}>
-            Log to console
-          </Button>
-        </EmptyStateSecondaryActions>
+        <EmptyStateFooter>
+          <EmptyStateActions>
+            <Button isDisabled={percentValidated !== 100} onClick={onClose}>
+              Log to console
+            </Button>
+          </EmptyStateActions>
+        </EmptyStateFooter>
       </EmptyState>
     </div>
   );
 };
 
-interface sampleFormProps {
-  formValue: string;
-  isFormValid: boolean;
-  onChange?: (isValid: boolean, value: string) => void;
+interface LastStepFooterProps {
+  isValid: boolean;
+  setIsSubmitted(isSubmitted: boolean): void;
+  setHasErrorOnSubmit(isSubmitted: boolean): void;
 }
 
-const SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormProps) => {
-  const [value, setValue] = React.useState(props.formValue);
-  const [isValid, setIsValid] = React.useState(props.isFormValid);
+const LastStepFooter: React.FunctionComponent<LastStepFooterProps> = ({
+  isValid,
+  setIsSubmitted,
+  setHasErrorOnSubmit
+}) => {
+  const { goToNextStep, goToPrevStep } = useWizardContext();
 
-  const handleTextInputChange = (value: string) => {
-    const valid = /^\d+$/.test(value);
-    setValue(value);
-    setIsValid(valid);
-    props.onChange && props.onChange(valid, value);
+  const onValidate = () => {
+    setIsSubmitted(true);
+
+    if (!isValid) {
+      setIsSubmitted(false);
+      setHasErrorOnSubmit(true);
+    } else {
+      goToNextStep();
+    }
   };
 
+  return (
+    <WizardFooterWrapper>
+      <Button onClick={onValidate}>Validate</Button>
+      <Button variant="secondary" onClick={goToPrevStep}>
+        Back
+      </Button>
+    </WizardFooterWrapper>
+  );
+};
+
+interface SampleFormProps {
+  value: string;
+  isValid: boolean;
+  setValue: (value: string) => void;
+  setIsValid: (isValid: boolean) => void;
+}
+
+const SampleForm: React.FunctionComponent<SampleFormProps> = ({ value, isValid, setValue, setIsValid }) => {
   const validated = isValid ? 'default' : 'error';
 
+  const handleTextInputChange = (value: string) => {
+    const isValid = /^\d+$/.test(value);
+
+    setValue(value);
+    setIsValid(isValid);
+  };
+
   return (
     <Form>
-      <FormGroup
-        label="Age:"
-        type="number"
-        helperText="Write your age in numbers."
-        helperTextInvalid="Age has to be a number"
-        fieldId="age"
-        validated={validated}
-      >
+      <FormGroup label="Age:" type="number" fieldId="age">
         <TextInput
           validated={validated}
           value={value}
@@ -105,100 +132,62 @@ const SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormP
           aria-describedby="age-helper"
           onChange={handleTextInputChange}
         />
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem variant={validated}>
+              {validated === 'error' ? 'Age has to be a number' : 'Write your age in numbers.'}
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
       </FormGroup>
     </Form>
   );
 };
 
-export const WizardValidateButtonPress: React.FunctionComponent = () => {
-  const [isFormValid, setIsFormValid] = React.useState(false);
-  const [formValue, setFormValue] = React.useState('Validating on button press');
-  const [stepsValid, setStepsValid] = React.useState(0);
-  const [errorText, setErrorText] = React.useState(false);
+export const WizardValidateOnButtonPress: React.FunctionComponent = () => {
+  const [ageValue, setAgeValue] = React.useState('Thirty');
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
+  const [isFirstStepValid, setIsFirstStepValid] = React.useState(false);
+  const [hasErrorOnSubmit, setHasErrorOnSubmit] = React.useState(false);
 
-  const closeWizard = () => {
-    // eslint-disable-next-line no-console
-    console.log('close wizard');
-  };
-
-  const onFormChange = (isValid: boolean, value: string) => {
-    setIsFormValid(isValid);
-    setFormValue(value);
-  };
-
-  const validateLastStep: (onNext: () => void) => void = onNext => {
-    if (stepsValid !== 1 && !isFormValid) {
-      setErrorText(true);
-    } else {
-      setStepsValid(1);
-      setErrorText(false);
-      onNext();
-    }
-  };
+  // eslint-disable-next-line no-console
+  const onClose = () => console.log('Some close action occurs here.');
 
-  const steps = [
-    { name: 'First step', component: <p>Step 1 content</p> },
-    { name: 'Second step', component: <p>Step 2 content</p> },
-    {
-      name: 'Final Step',
-      component: (
-        <>
-          {errorText && (
-            <div style={{ padding: '15px 0' }}>
-              <Alert variant="warning" title="Validation failed, please try again" />
-            </div>
-          )}
-          <SampleForm formValue={formValue} isFormValid={stepsValid !== 1} onChange={onFormChange} />
-        </>
-      )
-    },
-    { name: 'Finish', component: <FinishedStep onClose={closeWizard} />, isFinishedStep: true }
-  ];
-
-  const CustomFooter = (
-    <WizardFooter>
-      <WizardContextConsumer>
-        {({ activeStep, goToStepByName, onNext, onBack, onClose }) => {
-          if (activeStep.name !== 'Final Step') {
-            return (
-              <>
-                <Button variant="primary" type="submit" onClick={onNext}>
-                  Forward
-                </Button>
-                <Button
-                  variant="secondary"
-                  onClick={onBack}
-                  className={activeStep.name === 'First step' ? 'pf-m-disabled' : ''}
-                >
-                  Backward
-                </Button>
-                <Button variant="link" onClick={onClose}>
-                  Cancel
-                </Button>
-              </>
-            );
-          }
-          // Final step buttons
-          return (
-            <>
-              <Button onClick={() => validateLastStep(onNext)}>Validate</Button>
-              <Button onClick={() => goToStepByName('First step')}>Go to Beginning</Button>
-            </>
-          );
-        }}
-      </WizardContextConsumer>
-    </WizardFooter>
-  );
+  if (isSubmitted && isFirstStepValid) {
+    return <ValidationProgress onClose={onClose} />;
+  }
 
-  const title = 'Validate on button press wizard example';
   return (
-    <Wizard
-      navAriaLabel={`${title} steps`}
-      mainAriaLabel={`${title} content`}
-      onClose={closeWizard}
-      footer={CustomFooter}
-      steps={steps}
-      height={400}
-    />
+    <Wizard title="Validate on button press wizard" onClose={onClose} height={400}>
+      <WizardStep name="Step 1" id="validate-btn-step-1">
+        Step 1 content
+      </WizardStep>
+      <WizardStep name="Step 2" id="validate-btn-step-2">
+        Step 2 content
+      </WizardStep>
+      <WizardStep
+        name="Final Step"
+        id="validate-btn-finish-step"
+        footer={
+          <LastStepFooter
+            isValid={isFirstStepValid}
+            setIsSubmitted={setIsSubmitted}
+            setHasErrorOnSubmit={setHasErrorOnSubmit}
+          />
+        }
+      >
+        {hasErrorOnSubmit && (
+          <div style={{ padding: '15px 0' }}>
+            <Alert isInline variant="danger" title="Validation failed, please try again." />
+          </div>
+        )}
+        <SampleForm
+          value={ageValue}
+          setValue={value => setAgeValue(value)}
+          isValid={!hasErrorOnSubmit || isFirstStepValid}
+          setIsValid={setIsFirstStepValid}
+        />
+      </WizardStep>
+    </Wizard>
   );
 };

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

@@ -0,0 +1,106 @@
+import React from 'react';
+
+import { Button, Flex, FlexItem, Spinner, useWizardContext, Wizard, WizardFooter, WizardFooterWrapper, WizardStep } from '@patternfly/react-core';
+
+const CustomWizardFooter = () => {
+  const { activeStep, goToNextStep, goToPrevStep, close } = useWizardContext();
+
+  return (
+    <WizardFooter
+      activeStep={activeStep}
+      onNext={goToNextStep}
+      onBack={goToPrevStep}
+      onClose={close}
+      isBackDisabled={activeStep.index === 1}
+    />
+  );
+};
+
+const CustomStepTwoFooter = () => {
+  const { goToNextStep, goToPrevStep, close } = useWizardContext();
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  async function onNext() {
+    setIsLoading(true);
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    setIsLoading(false);
+
+    goToNextStep();
+  }
+
+  return (
+    <WizardFooterWrapper>
+      <Button variant="primary" onClick={onNext} isLoading={isLoading} isDisabled={isLoading}>
+        Async Next
+      </Button>
+      <Button variant="secondary" onClick={goToPrevStep} isDisabled={isLoading}>
+        Back
+      </Button>
+      <Button variant="link" onClick={close} isDisabled={isLoading}>
+        Cancel
+      </Button>
+    </WizardFooterWrapper>
+  );
+};
+
+interface ReviewStepContentProps {
+  isSubmitting: boolean | undefined;
+}
+
+const ReviewStepContent: React.FunctionComponent<ReviewStepContentProps> = ({ isSubmitting }) => {
+  if (isSubmitting === undefined) {
+    return <FlexItem alignSelf={{ default: 'alignSelfFlexStart' }}>Review step content</FlexItem>;
+  }
+
+  if (isSubmitting) {
+    return (
+      <>
+        <div>Calculating wizard score...</div>
+        <Spinner />
+      </>
+    );
+  }
+
+  return <>50 points to Gryffindor!</>;
+};
+
+export const WizardWithCustomFooter: React.FunctionComponent = () => {
+  const [isSubmitting, setIsSubmitting] = React.useState<boolean>();
+
+  async function onSubmit(): Promise<void> {
+    setIsSubmitting(true);
+
+    await new Promise(resolve => setTimeout(resolve, 5000));
+
+    setIsSubmitting(false);
+  }
+
+  return (
+    <Wizard height={400} title="Custom footer wizard" footer={<CustomWizardFooter />}>
+      <WizardStep name="Step 1" id="custom-footer-first-step">
+        Step 1 content
+      </WizardStep>
+      <WizardStep id="custom-footer-second-step" name="Step 2" footer={<CustomStepTwoFooter />}>
+        Step 2 content with a custom async footer
+      </WizardStep>
+      <WizardStep
+        id="custom-footer-review-step"
+        name="Review"
+        footer={{
+          nextButtonText: 'Submit',
+          onNext: onSubmit,
+          isNextDisabled: isSubmitting,
+          isBackDisabled: isSubmitting
+        }}
+      >
+        <Flex
+          direction={{ default: 'column' }}
+          alignItems={{ default: 'alignItemsCenter' }}
+          spaceItems={{ default: 'spaceItemsLg' }}
+        >
+          <ReviewStepContent isSubmitting={isSubmitting} />
+        </Flex>
+      </WizardStep>
+    </Wizard>
+  );
+};

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+  Wizard,
+  WizardStep,
+  WizardStepType,
+  CustomWizardNavFunction,
+  WizardNav,
+  WizardNavItem
+} from '@patternfly/react-core';
+
+export const WizardWithCustomNav: React.FunctionComponent = () => {
+  const nav: CustomWizardNavFunction = (
+    isExpanded: boolean,
+    steps: WizardStepType[],
+    activeStep: WizardStepType,
+    goToStepByIndex: (index: number) => void
+  ) => (
+    <WizardNav isExpanded={isExpanded}>
+      {steps.map(step => (
+        <WizardNavItem
+          key={step.id}
+          id={step.id}
+          content={step.name}
+          isCurrent={activeStep.id === step.id}
+          isDisabled={step.isDisabled}
+          stepIndex={step.index}
+          onClick={() => goToStepByIndex(step.index)}
+        />
+      ))}
+    </WizardNav>
+  );
+
+  return (
+    <Wizard height={400} nav={nav}>
+      <WizardStep name="Step 1" id="custom-nav-first-step">
+        Did you say...custom nav?
+      </WizardStep>
+      <WizardStep name="Step 2" id="custom-nav-second-step">
+        Oh, you didn't?
+      </WizardStep>
+      <WizardStep name="Review" id="custom-nav-review-step" footer={{ nextButtonText: 'Wrap it up' }}>
+        Well, this is awkward.
+      </WizardStep>
+    </Wizard>
+  );
+};

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Wizard, WizardStep } from '@patternfly/react-core';
+
+export const WizardWithCustomNavItem: React.FunctionComponent = () => (
+  <Wizard height={400} title="Custom navigation item wizard">
+    <WizardStep name="Step 1" id="custom-nav-item-first-step">
+      Step 1 content
+    </WizardStep>
+    <WizardStep
+      id="custom-nav-item-second-step"
+      name="Step 2"
+      navItem={{
+        content: <span style={{ color: 'var(--pf-global--default-color--200)' }}>Custom item</span>
+      }}
+    >
+      Step 2 content with a custom navigation item
+    </WizardStep>
+    <WizardStep name="Review" id="custom-nav-item-review-step" footer={{ nextButtonText: 'Finish' }}>
+      Review step content
+    </WizardStep>
+  </Wizard>
+);

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Wizard, WizardHeader, WizardStep } from '@patternfly/react-core';
+
+export const WizardWithHeader: React.FunctionComponent = () => (
+  <Wizard
+    height={400}
+    title="Header wizard"
+    header={
+      <WizardHeader
+        title="You're a wizard, Harry"
+        description="To be clear, all those not named Harry are not wizards."
+        closeButtonAriaLabel="Close header"
+      />
+    }
+  >
+    <WizardStep name="Step 1" id="header-first-step">
+      Step 1 content
+    </WizardStep>
+    <WizardStep name="Step 2" id="header-second-step">
+      Step 2 content
+    </WizardStep>
+    <WizardStep name="Review" id="header-review-step" footer={{ nextButtonText: 'Finish' }}>
+      Review step content
+    </WizardStep>
+  </Wizard>
+);

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

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { Button, Wizard, WizardStep } 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';
+
+export const WizardWithNavAnchors: React.FunctionComponent = () => (
+  <Wizard height={400} title="Anchor link wizard">
+    <WizardStep
+      name={
+        <>
+          <ExternalLinkAltIcon /> PF3
+        </>
+      }
+      id="navanchors-pf3-step"
+      navItem={{ component: 'a', href: 'https://www.patternfly.org/v3', target: '_blank' }}
+    >
+      Step 1: Read about PF3
+    </WizardStep>
+    <WizardStep
+      name={
+        <>
+          <ExternalLinkAltIcon /> PF4
+        </>
+      }
+      id="navanchors-pf4-step"
+      navItem={{ component: 'a', href: 'https://www.patternfly.org/v4', target: '_blank' }}
+    >
+      Step 2: Read about PF4
+    </WizardStep>
+    <WizardStep
+      name={
+        <>
+          <SlackHashIcon /> Join us on slack
+        </>
+      }
+      id="navanchors-slack-step"
+      navItem={{ component: 'a', href: 'https://patternfly.slack.com', target: '_blank' }}
+    >
+      <Button variant="link" component="a" target="_blank" href="https://patternfly.slack.com">
+        Join the conversation
+      </Button>
+    </WizardStep>
+  </Wizard>
+);

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

@@ -0,0 +1,91 @@
+import React from 'react';
+import {
+  EmptyState,
+  EmptyStateHeader,
+  EmptyStateFooter,
+  EmptyStateBody,
+  EmptyStateActions,
+  EmptyStateIcon,
+  Progress,
+  Button,
+  Wizard,
+  WizardStep
+} from '@patternfly/react-core';
+import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
+
+interface ValidationProgressProps {
+  onClose(): void;
+}
+
+const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({ onClose }) => {
+  const [percentValidated, setPercentValidated] = React.useState(0);
+
+  const tick = React.useCallback(() => {
+    if (percentValidated < 100) {
+      setPercentValidated((prevValue) => prevValue + 20);
+    }
+  }, [percentValidated]);
+
+  React.useEffect(() => {
+    const interval = setInterval(() => tick(), 1000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [tick]);
+
+  return (
+    <div className="pf-l-bullseye">
+      <EmptyState variant="lg">
+        <EmptyStateHeader
+          headingLevel="h4"
+          titleText={percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}
+          icon={<EmptyStateIcon icon={CogsIcon} />}
+        />
+        <EmptyStateBody>
+          <Progress value={percentValidated} measureLocation="outside" aria-label="Wizard validation progress" />
+        </EmptyStateBody>
+        <EmptyStateBody>
+          Description can be used to further elaborate on the validation step, or give the user a better idea of how
+          long the process will take.
+        </EmptyStateBody>
+        <EmptyStateFooter>
+          <EmptyStateActions>
+            <Button isDisabled={percentValidated !== 100} onClick={onClose}>
+              Log to console
+            </Button>
+          </EmptyStateActions>
+        </EmptyStateFooter>
+      </EmptyState>
+    </div>
+  );
+};
+
+export const WizardWithSubmitProgress: React.FunctionComponent = () => {
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
+
+  // eslint-disable-next-line no-console
+  const onClose = () => console.log('Some close action occurs here.');
+
+  if (isSubmitted) {
+    return <ValidationProgress onClose={onClose} />;
+  }
+
+  return (
+    <Wizard height={400} title="Submit progress wizard" onClose={onClose}>
+      <WizardStep name="Step 1" id="submit-progress-step-1">
+        Step 1 content
+      </WizardStep>
+      <WizardStep name="Step 2" id="submit-progress-step-2">
+        Step 2 content
+      </WizardStep>
+      <WizardStep
+        name="Review"
+        id="submit-progress-review"
+        footer={{ nextButtonText: 'Finish', onNext: () => setIsSubmitted(true) }}
+      >
+        Review step content
+      </WizardStep>
+    </Wizard>
+  );
+};