@patternfly/react-core 4.274.0 → 4.275.0

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

@@ -0,0 +1,183 @@
+import React from 'react';
+
+import {
+  Button,
+  Alert,
+  EmptyState,
+  EmptyStateIcon,
+  Title,
+  EmptyStateBody,
+  Progress,
+  EmptyStateSecondaryActions,
+  Form,
+  FormGroup,
+  TextInput
+} from '@patternfly/react-core';
+import { Wizard, WizardStep, WizardFooterWrapper, useWizardContext } from '@patternfly/react-core/next';
+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="large">
+        <EmptyStateIcon icon={CogsIcon} />
+        <Title headingLevel="h4" size="lg">
+          {percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}
+        </Title>
+        <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>
+        <EmptyStateSecondaryActions>
+          <Button isDisabled={percentValidated !== 100} onClick={onClose}>
+            Log to console
+          </Button>
+        </EmptyStateSecondaryActions>
+      </EmptyState>
+    </div>
+  );
+};
+
+interface LastStepFooterProps {
+  isValid: boolean;
+  setIsSubmitted(isSubmitted: boolean): void;
+  setHasErrorOnSubmit(isSubmitted: boolean): void;
+}
+
+const LastStepFooter: React.FunctionComponent<LastStepFooterProps> = ({
+  isValid,
+  setIsSubmitted,
+  setHasErrorOnSubmit
+}) => {
+  const { goToNextStep, goToPrevStep } = useWizardContext();
+
+  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}
+      >
+        <TextInput
+          validated={validated}
+          value={value}
+          id="age"
+          aria-describedby="age-helper"
+          onChange={handleTextInputChange}
+        />
+      </FormGroup>
+    </Form>
+  );
+};
+
+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);
+
+  // eslint-disable-next-line no-console
+  const onClose = () => console.log('Some close action occurs here.');
+
+  if (isSubmitted && isFirstStepValid) {
+    return <ValidationProgress onClose={onClose} />;
+  }
+
+  return (
+    <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/next/components/Wizard/examples/WizardWithCustomFooter.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+
+import { Button, Flex, FlexItem, Spinner } from '@patternfly/react-core';
+import { useWizardContext, Wizard, WizardFooter, WizardFooterWrapper, WizardStep } from '@patternfly/react-core/next';
+
+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/next/components/Wizard/examples/{WizardCustomNav.tsx → WizardWithCustomNav.tsx}

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

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Wizard, WizardStep } from '@patternfly/react-core/next';
+
+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/next/components/Wizard/examples/WizardWithHeader.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Wizard, WizardHeader, WizardStep } from '@patternfly/react-core/next';
+
+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/next/components/Wizard/examples/WizardWithNavAnchors.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { Button } from '@patternfly/react-core';
+import { Wizard, WizardStep } from '@patternfly/react-core/next';
+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/next/components/Wizard/examples/WizardWithSubmitProgress.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import {
+  EmptyState,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStateSecondaryActions,
+  Title,
+  Progress,
+  Button
+} from '@patternfly/react-core';
+import { Wizard, WizardStep } from '@patternfly/react-core/next';
+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="large">
+        <EmptyStateIcon icon={CogsIcon} />
+        <Title headingLevel="h4" size="lg">
+          {percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}
+        </Title>
+        <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>
+        <EmptyStateSecondaryActions>
+          <Button isDisabled={percentValidated !== 100} onClick={onClose}>
+            Log to console
+          </Button>
+        </EmptyStateSecondaryActions>
+      </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>
+  );
+};

package/src/next/components/Wizard/examples/WizardWithinModal.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Button, Modal, ModalVariant } from '@patternfly/react-core';
+import { Wizard, WizardStep, WizardHeader } from '@patternfly/react-core/next';
+
+export const WizardWithinModal = () => {
+  const [isModelOpen, setIsModalOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setIsModalOpen(true)}>Show Modal</Button>
+
+      <Modal
+        isOpen={isModelOpen}
+        showClose={false}
+        aria-label="Wizard modal"
+        hasNoBodyWrapper
+        variant={ModalVariant.medium}
+      >
+        <Wizard
+          height={400}
+          title="In modal wizard"
+          header={<WizardHeader title="Wizard in modal" description="Simple wizard description" />}
+        >
+          <WizardStep name="Step 1" id="in-modal-step-1">
+            Step 1 content
+          </WizardStep>
+          <WizardStep name="Step 2" id="in-modal-step-2">
+            Step 2 content
+          </WizardStep>
+          <WizardStep
+            name="Review"
+            id="in-modal-review-step"
+            footer={{ nextButtonText: 'Finish', onNext: () => setIsModalOpen(false) }}
+          >
+            Review step content
+          </WizardStep>
+        </Wizard>
+      </Modal>
+    </>
+  );
+};

package/src/next/components/Wizard/hooks/index.ts

@@ -1 +1,2 @@
 export { useWizardFooter } from './useWizardFooter';
+export { useGetMergedSteps } from './useGetMergedSteps';

package/src/next/components/Wizard/hooks/useGetMergedSteps.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import isEqual from 'fast-deep-equal';
+import { WizardStepType } from '../types';
+
+/**
+ * Get stable ref of combined initial (prop provided) and current (context stored) steps.
+ * @param initialSteps
+ * @param currentSteps
+ * @returns WizardStepType[]
+ */
+export const useGetMergedSteps = (initialSteps: WizardStepType[], currentSteps: WizardStepType[]): WizardStepType[] => {
+  const initialStepsRef = React.useRef(initialSteps);
+  const currentStepsRef = React.useRef(currentSteps);
+
+  // Check each value within the array of initialSteps (props) and currentSteps (context).
+  // If any value changes for either of these, update the reference.
+  if (!isEqual(initialStepsRef.current, initialSteps)) {
+    initialStepsRef.current = initialSteps;
+  }
+  if (!isEqual(currentStepsRef.current, currentSteps)) {
+    currentStepsRef.current = currentSteps;
+  }
+
+  // Combine both initial and current steps, where prop provided values
+  // take precedence over what's stored in context.
+  const mergedSteps = React.useMemo(
+    () =>
+      initialSteps.reduce((acc, initialStepProps, index) => {
+        const currentStepProps = currentSteps[index];
+
+        if (initialStepProps.id === currentStepProps.id) {
+          acc.push({
+            ...currentStepProps,
+            ...initialStepProps
+          });
+        }
+
+        return acc;
+      }, []),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [initialStepsRef.current, currentStepsRef.current]
+  );
+
+  return mergedSteps;
+};

package/src/next/components/Wizard/index.ts

@@ -6,6 +6,6 @@ export * from './WizardStep';
 export * from './WizardNav';
 export * from './WizardNavItem';
 export * from './WizardHeader';
-export * from './hooks';
 export * from './types';
-export { useWizardContext } from './WizardContext';
+export { useWizardFooter } from './hooks';
+export { useWizardContext, WizardContext } from './WizardContext';