@patternfly/react-core 4.273.3 → 4.274.1

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import {
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DescriptionListDescription
+} from '@patternfly/react-core';
+import { Wizard, WizardStep, WizardStepType } from '@patternfly/react-core/next';
+
+const CurrentStepDescriptionList = ({ currentStep }: { currentStep: WizardStepType | undefined }) => (
+  <DescriptionList isHorizontal isCompact>
+    <DescriptionListGroup>
+      <DescriptionListTerm>Index</DescriptionListTerm>
+      <DescriptionListDescription>{currentStep?.index}</DescriptionListDescription>
+    </DescriptionListGroup>
+
+    <DescriptionListGroup>
+      <DescriptionListTerm>ID</DescriptionListTerm>
+      <DescriptionListDescription>{currentStep?.id}</DescriptionListDescription>
+    </DescriptionListGroup>
+
+    <DescriptionListGroup>
+      <DescriptionListTerm>Name</DescriptionListTerm>
+      <DescriptionListDescription>{currentStep?.name}</DescriptionListDescription>
+    </DescriptionListGroup>
+
+    <DescriptionListGroup>
+      <DescriptionListTerm>Visited</DescriptionListTerm>
+      <DescriptionListDescription>{currentStep?.isVisited ? 'true' : 'false'}</DescriptionListDescription>
+    </DescriptionListGroup>
+  </DescriptionList>
+);
+
+export const GetCurrentStepWizard: React.FunctionComponent = () => {
+  const [currentStep, setCurrentStep] = React.useState<WizardStepType>();
+
+  const onStepChange = (event: React.MouseEvent<HTMLButtonElement>, currentStep: WizardStepType) =>
+    setCurrentStep(currentStep);
+
+  return (
+    <Wizard height={400} title="Get current step wizard" onStepChange={onStepChange}>
+      <WizardStep name="Step 1" id="get-current-step-1">
+        {currentStep ? <CurrentStepDescriptionList currentStep={currentStep} /> : 'Step 1 content'}
+      </WizardStep>
+      <WizardStep name="Step 2" id="get-current-step-2">
+        <CurrentStepDescriptionList currentStep={currentStep} />
+      </WizardStep>
+      <WizardStep name="Review" id="get-current-review-step" footer={{ nextButtonText: 'Finish' }}>
+        <CurrentStepDescriptionList currentStep={currentStep} />
+      </WizardStep>
+    </Wizard>
+  );
+};

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Wizard, WizardStep } from '@patternfly/react-core/next';
+
+export const WizardProgressiveSteps: React.FunctionComponent = () => (
+  <Wizard height={400} title="Progressive steps wizard" isProgressive>
+    <WizardStep id="progressive-step-1" name="Get started">
+      Get started content
+    </WizardStep>
+    <WizardStep id="progressive-step-2" name="Update options">
+      Update options content
+    </WizardStep>
+    <WizardStep
+      id="progressive-step-3"
+      name="Quick options"
+      steps={[
+        <WizardStep key="progressive-substep-1" id="progressive-substep-1" name="Substep 1">
+          Substep 1 content
+        </WizardStep>,
+        <WizardStep key="progressive-substep-2" id="progressive-substep-2" name="Substep 2">
+          Substep 2 content
+        </WizardStep>,
+        <WizardStep key="progressive-substep-3" id="progressive-substep-3" name="Substep 3">
+          Substep 3 content
+        </WizardStep>
+      ]}
+    />
+    <WizardStep id="progressive-step-4" name="Review" footer={{ nextButtonText: 'Finish' }}>
+      Review content
+    </WizardStep>
+  </Wizard>
+);

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

@@ -0,0 +1,80 @@
+import React from 'react';
+
+import {
+  Drawer,
+  DrawerContent,
+  DrawerPanelContent,
+  DrawerColorVariant,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  Flex,
+  Button
+} from '@patternfly/react-core';
+import { useWizardContext, Wizard, WizardStep } from '@patternfly/react-core/next';
+
+const StepContentWithDrawer: React.FunctionComponent = () => {
+  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
+  const { activeStep } = useWizardContext();
+  const drawerRef = React.useRef<HTMLSpanElement>(null);
+
+  const onWizardExpand = () => drawerRef.current && drawerRef.current.focus();
+
+  return (
+    <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onWizardExpand}>
+      <DrawerContent
+        panelContent={
+          <DrawerPanelContent widths={{ default: 'width_50' }} colorVariant={DrawerColorVariant.light200}>
+            <DrawerHead>
+              <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
+                Drawer content: <strong>{activeStep?.name}</strong>
+              </span>
+              <DrawerActions>
+                <DrawerCloseButton onClick={() => setIsDrawerExpanded(false)} />
+              </DrawerActions>
+            </DrawerHead>
+          </DrawerPanelContent>
+        }
+      >
+        <Flex
+          className="pf-c-wizard__main-body"
+          direction={{ default: 'column' }}
+          spaceItems={{ default: 'spaceItemsLg' }}
+          height="100%"
+        >
+          {!isDrawerExpanded && (
+            <Button isInline variant="link" onClick={() => setIsDrawerExpanded(prevExpanded => !prevExpanded)}>
+              Open drawer
+            </Button>
+          )}
+          <div>{activeStep?.name} content</div>
+        </Flex>
+      </DrawerContent>
+    </Drawer>
+  );
+};
+
+export const WizardStepDrawerContent: React.FunctionComponent = () => (
+  <Wizard height={400} title="With drawer wizard">
+    <WizardStep body={null} name="Step 1" id="with-drawer-step-1">
+      <StepContentWithDrawer />
+    </WizardStep>
+    <WizardStep
+      name="Step 2"
+      id="with-drawer-step-2"
+      steps={[
+        <WizardStep body={null} key="with-drawer-substep-1" name="Substep 1" id="with-drawer-substep-1">
+          <StepContentWithDrawer />
+        </WizardStep>,
+        <WizardStep body={null} key="with-drawer-substep-2" name="Substep 2" id="with-drawer-substep-2">
+          <StepContentWithDrawer />
+        </WizardStep>
+      ]}
+    >
+      <StepContentWithDrawer />
+    </WizardStep>
+    <WizardStep name="Review" id="with-drawer-review-step" footer={{ nextButtonText: 'Finish' }}>
+      Review step content
+    </WizardStep>
+  </Wizard>
+);

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

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { Checkbox } from '@patternfly/react-core';
+import { Wizard, WizardStep } from '@patternfly/react-core/next';
+
+interface SomeContextProps {
+  errorMessage: string | undefined;
+  setErrorMessage(error: string | undefined): void;
+}
+type SomeContextRenderProps = Pick<SomeContextProps, 'errorMessage'>;
+interface SomeContextProviderProps {
+  children: (context: SomeContextRenderProps) => React.ReactElement;
+}
+
+const SomeContext: React.Context<SomeContextProps> = React.createContext({} as SomeContextProps);
+
+const SomeContextProvider = ({ children }: SomeContextProviderProps) => {
+  const [errorMessage, setErrorMessage] = React.useState<string>();
+
+  return (
+    <SomeContext.Provider value={{ errorMessage, setErrorMessage }}>{children({ errorMessage })}</SomeContext.Provider>
+  );
+};
+
+const StepContentWithAction = () => {
+  const { errorMessage, setErrorMessage } = React.useContext(SomeContext);
+
+  return (
+    <Checkbox
+      label="Give step 1 an error status"
+      isChecked={!!errorMessage}
+      onChange={checked => setErrorMessage(checked ? 'Some error message' : undefined)}
+      id="toggle-error-checkbox"
+      name="Toggle Error Checkbox"
+    />
+  );
+};
+
+export const WizardStepErrorStatus: React.FunctionComponent = () => (
+  <SomeContextProvider>
+    {({ errorMessage }) => (
+      <Wizard height={400} title="Step error status wizard">
+        <WizardStep status={errorMessage ? 'error' : 'default'} id="error-status-step-1" name="Step 1">
+          Step 1 content
+        </WizardStep>
+        <WizardStep name="Error action step" id="error-status-step-2">
+          <StepContentWithAction />
+        </WizardStep>
+        <WizardStep name="Review" id="error-status-review-step" footer={{ nextButtonText: 'Finish' }}>
+          Review step content
+        </WizardStep>
+      </Wizard>
+    )}
+  </SomeContextProvider>
+);

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Wizard, WizardStep } from '@patternfly/react-core/next';
+
+export const WizardStepVisitRequired: React.FunctionComponent = () => (
+  <Wizard height={400} title="Incrementally enabled steps wizard" isVisitRequired>
+    <WizardStep name="Step 1" id="req-visit-first-step">
+      Step 1 content
+    </WizardStep>
+    <WizardStep name="Step 2" id="req-visit-second-step">
+      Step 2 content
+    </WizardStep>
+    <WizardStep name="Step 3" id="req-visit-third-step">
+      Step 3 content
+    </WizardStep>
+    <WizardStep name="Step 4" id="req-visit-fourth-step">
+      Step 4 content
+    </WizardStep>
+    <WizardStep name="Review" id="req-visit-review-step" footer={{ nextButtonText: 'Finish' }}>
+      Review step content
+    </WizardStep>
+  </Wizard>
+);

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

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { Checkbox } from '@patternfly/react-core';
+import { Wizard, WizardStep } from '@patternfly/react-core/next';
+
+interface SomeContextProps {
+  isToggleStepChecked: boolean;
+  setIsToggleStepChecked(isHidden: boolean): void;
+}
+type SomeContextRenderProps = Pick<SomeContextProps, 'isToggleStepChecked'>;
+interface SomeContextProviderProps {
+  children: (context: SomeContextRenderProps) => React.ReactElement;
+}
+
+const SomeContext: React.Context<SomeContextProps> = React.createContext({} as SomeContextProps);
+
+const SomeContextProvider: React.FunctionComponent<SomeContextProviderProps> = ({ children }) => {
+  const [isToggleStepChecked, setIsToggleStepChecked] = React.useState(false);
+
+  return (
+    <SomeContext.Provider value={{ isToggleStepChecked, setIsToggleStepChecked }}>
+      {children({ isToggleStepChecked })}
+    </SomeContext.Provider>
+  );
+};
+
+const StepContentWithAction: React.FunctionComponent = () => {
+  const { isToggleStepChecked, setIsToggleStepChecked } = React.useContext(SomeContext);
+
+  return (
+    <Checkbox
+      label="Toggle visibility of the next step"
+      isChecked={isToggleStepChecked}
+      onChange={checked => setIsToggleStepChecked(checked)}
+      id="toggle-hide-step-checkbox"
+      name="Toggle Hide Step Checkbox"
+    />
+  );
+};
+
+export const WizardToggleStepVisibility: React.FunctionComponent = () => (
+  <SomeContextProvider>
+    {({ isToggleStepChecked }) => (
+      <Wizard height={400} title="Toggle step visibility wizard">
+        <WizardStep name="Hidden action step" id="toggle-visible-step-1">
+          <StepContentWithAction />
+        </WizardStep>
+        <WizardStep name="Step 2" id="toggle-visible-step-2" isHidden={isToggleStepChecked}>
+          Step 2 content
+        </WizardStep>
+        <WizardStep name="Review" id="toggle-visible-review-step" footer={{ nextButtonText: 'Finish' }}>
+          Review step content
+        </WizardStep>
+      </Wizard>
+    )}
+  </SomeContextProvider>
+);

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>
+);