@patternfly/react-core 4.267.4 → 4.267.5

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Button, Wizard } 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 = () => {
+  const steps = [
+    {
+      name: (
+        <div>
+          <ExternalLinkAltIcon /> PF3
+        </div>
+      ),
+      component: <p>Step 1: Read about PF3</p>,
+      stepNavItemProps: { navItemComponent: 'a', href: 'https://www.patternfly.org/v3/', target: '_blank' }
+    },
+    {
+      name: (
+        <div>
+          <ExternalLinkAltIcon /> PF4
+        </div>
+      ),
+      component: <p>Step 2: Read about PF4</p>,
+      stepNavItemProps: { navItemComponent: 'a', href: 'https://www.patternfly.org/v4/', target: '_blank' }
+    },
+    {
+      name: (
+        <div>
+          <SlackHashIcon /> Join us on slack
+        </div>
+      ),
+      component: (
+        <Button variant="link" component="a" target="_blank" href="https://patternfly.slack.com/">
+          Join the conversation
+        </Button>
+      ),
+      stepNavItemProps: { navItemComponent: 'a', href: 'https://patternfly.slack.com/', target: '_blank' }
+    }
+  ];
+  const title = 'Anchor link wizard example';
+  return <Wizard navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} height={400} />;
+};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Wizard } from '@patternfly/react-core';
+
+export const WizardBasic: React.FunctionComponent = () => {
+  const steps = [
+    { name: 'First step', component: <p>Step 1 content</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 <Wizard navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} height={400} />;
+};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Wizard } from '@patternfly/react-core';
+
+export const WizardBasicWithDisabledSteps: React.FunctionComponent = () => {
+  const steps = [
+    { name: 'First step', component: <p>Step 1 content</p> },
+    { name: 'Second step', component: <p>Step 2 content</p>, isDisabled: true },
+    { name: 'Third step', component: <p>Step 3 content</p> },
+    { name: 'Fourth step', component: <p>Step 4 content</p>, isDisabled: true },
+    { 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} />;
+};

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

@@ -0,0 +1,139 @@
+import React from 'react';
+import { Form, FormGroup, TextInput, Wizard, WizardStep } from '@patternfly/react-core';
+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 (
+    <Wizard
+      navAriaLabel={`${title} steps`}
+      mainAriaLabel={`${title} content`}
+      onClose={closeWizard}
+      steps={steps}
+      onNext={onNext}
+      onBack={onBack}
+      onGoToStep={onGoToStep}
+      height={400}
+    />
+  );
+};

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Wizard } from '@patternfly/react-core';
+
+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 (
+    <Wizard
+      navAriaLabel={`${title} steps`}
+      mainAriaLabel={`${title} content`}
+      steps={steps}
+      height={400}
+      isNavExpandable
+    />
+  );
+};

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

@@ -0,0 +1,90 @@
+import React from 'react';
+import {
+  EmptyState,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStateSecondaryActions,
+  Title,
+  Progress,
+  Button,
+  Wizard
+} from '@patternfly/react-core';
+// eslint-disable-next-line patternfly-react/import-tokens-icons
+import { CogsIcon } from '@patternfly/react-icons';
+
+interface finishedProps {
+  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;
+      }
+    });
+  };
+
+  React.useEffect(() => {
+    const interval = setInterval(() => tick(), 1000);
+
+    if (percent >= 100) {
+      clearInterval(interval);
+    }
+
+    return () => clearInterval(interval);
+  }, [percent]);
+
+  return (
+    <div className="pf-l-bullseye">
+      <EmptyState variant="large">
+        <EmptyStateIcon icon={CogsIcon} />
+        <Title headingLevel="h4" size="lg">
+          {percent === 100 ? 'Validation complete' : 'Validating credentials'}
+        </Title>
+        <EmptyStateBody>
+          <Progress value={percent} measureLocation="outside" aria-label="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>
+      </EmptyState>
+    </div>
+  );
+};
+
+export const WizardFinished: React.FunctionComponent = () => {
+  const closeWizard = () => {
+    // eslint-disable-next-line no-console
+    console.log('close wizard');
+  };
+
+  const steps = [
+    { name: 'First step', component: <p>Step 1 content</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' },
+    { name: 'Finish', component: <FinishedStep onClose={closeWizard} />, isFinishedStep: true }
+  ];
+  const title = 'Finished wizard example';
+  return (
+    <Wizard
+      navAriaLabel={`${title} steps`}
+      mainAriaLabel={`${title} content`}
+      onClose={closeWizard}
+      steps={steps}
+      height={400}
+    />
+  );
+};

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Wizard, WizardStep } from '@patternfly/react-core';
+
+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 (
+    <Wizard
+      navAriaLabel={`${title} steps`}
+      mainAriaLabel={`${title} content`}
+      onClose={closeWizard}
+      description="Simple Wizard Description"
+      steps={steps}
+      height={400}
+      onCurrentStepChanged={onCurrentStepChanged}
+    />
+  );
+};

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Button, Wizard } from '@patternfly/react-core';
+
+export const WizardInModal: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const handleModalToggle = () => {
+    setIsOpen(!isOpen);
+  };
+  const steps = [
+    { name: 'First step', component: <p>Step 1 content</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 = 'Wizard in modal example';
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show Modal
+      </Button>
+      <Wizard
+        title={title}
+        description="Simple Wizard Description"
+        descriptionComponent="div"
+        steps={steps}
+        onClose={handleModalToggle}
+        isOpen={isOpen}
+      />
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Wizard, WizardStep } from '@patternfly/react-core';
+
+export const WizardIncrementallyEnabledSteps: React.FunctionComponent = () => {
+  const [stepIdReached, setStepIdReached] = React.useState(1);
+
+  const onNext = ({ id }: WizardStep) => {
+    if (id) {
+      if (typeof id === 'string') {
+        const [, orderIndex] = id.split('-');
+        id = parseInt(orderIndex);
+      }
+      setStepIdReached(stepIdReached < id ? id : stepIdReached);
+    }
+  };
+
+  const closeWizard = () => {
+    // eslint-disable-next-line no-console
+    console.log('close wizard');
+  };
+
+  const steps = [
+    { id: 'incrementallyEnabled-1', name: 'First step', component: <p>Step 1 content</p> },
+    {
+      id: 'incrementallyEnabled-2',
+      name: 'Second step',
+      component: <p>Step 2 content</p>,
+      canJumpTo: stepIdReached >= 2
+    },
+    {
+      id: 'incrementallyEnabled-3',
+      name: 'Third step',
+      component: <p>Step 3 content</p>,
+      canJumpTo: stepIdReached >= 3
+    },
+    {
+      id: 'incrementallyEnabled-4',
+      name: 'Fourth step',
+      component: <p>Step 4 content</p>,
+      canJumpTo: stepIdReached >= 4
+    },
+    {
+      id: 'incrementallyEnabled-5',
+      name: 'Review',
+      component: <p>Review step content</p>,
+      nextButtonText: 'Finish',
+      canJumpTo: stepIdReached >= 5
+    }
+  ];
+  const title = 'Incrementally enabled wizard example';
+  return (
+    <Wizard
+      navAriaLabel={`${title} steps`}
+      mainAriaLabel={`${title} content`}
+      onClose={closeWizard}
+      steps={steps}
+      onNext={onNext}
+      height={400}
+    />
+  );
+};

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

@@ -0,0 +1,204 @@
+import React from 'react';
+import {
+  EmptyState,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStateSecondaryActions,
+  Title,
+  Form,
+  FormGroup,
+  TextInput,
+  Progress,
+  Button,
+  Wizard,
+  WizardFooter,
+  WizardContextConsumer,
+  Alert
+} from '@patternfly/react-core';
+// eslint-disable-next-line patternfly-react/import-tokens-icons
+import { CogsIcon } from '@patternfly/react-icons';
+
+interface finishedProps {
+  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;
+      }
+    });
+  };
+
+  React.useEffect(() => {
+    const interval = setInterval(() => tick(), 1000);
+
+    if (percent >= 100) {
+      clearInterval(interval);
+    }
+
+    return () => clearInterval(interval);
+  }, [percent]);
+
+  return (
+    <div className="pf-l-bullseye">
+      <EmptyState variant="large">
+        <EmptyStateIcon icon={CogsIcon} />
+        <Title headingLevel="h4" size="lg">
+          {percent === 100 ? 'Validation complete' : 'Validating credentials'}
+        </Title>
+        <EmptyStateBody>
+          <Progress value={percent} measureLocation="outside" aria-label="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>
+      </EmptyState>
+    </div>
+  );
+};
+
+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"
+          aria-describedby="age-helper"
+          onChange={handleTextInputChange}
+        />
+      </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);
+
+  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();
+    }
+  };
+
+  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>
+  );
+
+  const title = 'Validate on button press wizard example';
+  return (
+    <Wizard
+      navAriaLabel={`${title} steps`}
+      mainAriaLabel={`${title} content`}
+      onClose={closeWizard}
+      footer={CustomFooter}
+      steps={steps}
+      height={400}
+    />
+  );
+};