@patternfly/react-core 4.274.0 → 4.274.1

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

@@ -0,0 +1,84 @@
+import React from 'react';
+
+import { Form, FormGroup, TextInput } from '@patternfly/react-core';
+import { Wizard, WizardStep } from '@patternfly/react-core/next';
+
+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 WizardEnabledOnFormValidation: React.FunctionComponent = () => {
+  const [ageValue, setAgeValue] = React.useState('Thirty');
+  const [isSubAFormValid, setIsSubAFormValid] = React.useState(false);
+
+  const onSave = () => alert(`Wow, you look a lot younger than ${ageValue}.`);
+
+  return (
+    <Wizard isVisitRequired height={400} title="Enabled on form validation wizard" onSave={onSave}>
+      <WizardStep name="Information" id="form-valid-info">
+        Information content
+      </WizardStep>
+      <WizardStep
+        name="Configuration"
+        id="form-valid-config"
+        steps={[
+          <WizardStep
+            name="Substep A with validation"
+            id="form-valid-sub-a"
+            key="form-valid-sub-a"
+            footer={{ isNextDisabled: !isSubAFormValid }}
+          >
+            <SampleForm
+              value={ageValue}
+              setValue={setAgeValue}
+              isValid={isSubAFormValid}
+              setIsValid={setIsSubAFormValid}
+            />
+          </WizardStep>,
+          <WizardStep name="Substep B" id="form-valid-sub-b" key="form-valid-sub-b">
+            Substep B content
+          </WizardStep>
+        ]}
+      />
+      <WizardStep name="Additional" id="form-valid-additional">
+        Additional step content
+      </WizardStep>
+      <WizardStep name="Review" id="form-valid-review" footer={{ nextButtonText: 'Submit form' }}></WizardStep>
+    </Wizard>
+  );
+};

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Wizard, WizardStep } from '@patternfly/react-core/next';
+
+export const WizardExpandableSteps: React.FunctionComponent = () => (
+  <Wizard height={400} title="Expandable steps wizard" nav={{ isExpanded: true }}>
+    <WizardStep
+      name="Step 1"
+      id="expand-steps-1"
+      isExpandable
+      steps={[
+        <WizardStep name="Substep A" id="expand-steps-sub-a" key="expand-steps-sub-a">
+          Substep A content
+        </WizardStep>,
+        <WizardStep name="Substep B" id="expand-steps-sub-b" key="expand-steps-sub-b">
+          Substep B content
+        </WizardStep>
+      ]}
+    />
+    <WizardStep name="Step 2" id="expand-steps-2">
+      Step 2 content
+    </WizardStep>
+    <WizardStep
+      name="Step 3"
+      id="expand-steps-3"
+      isExpandable
+      steps={[
+        <WizardStep name="Substep C" id="expand-steps-sub-c" key="expand-steps-sub-c">
+          Substep C content
+        </WizardStep>,
+        <WizardStep name="Substep D" id="expand-steps-sub-d" key="expand-steps-sub-d">
+          Substep D content
+        </WizardStep>
+      ]}
+    />
+    <WizardStep name="Step 4" id="expand-steps-4">
+      Step 4 content
+    </WizardStep>
+    <WizardStep name="Review" id="expand-steps-review" footer={{ nextButtonText: 'Finish' }}>
+      Review step content
+    </WizardStep>
+  </Wizard>
+);

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