@patternfly/react-core 5.0.0-alpha.70 → 5.0.0-alpha.72

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

@@ -1,45 +1,31 @@
 import React from 'react';
-import {
-  Form,
-  FormGroup,
-  FormHelperText,
-  HelperText,
-  HelperTextItem,
-  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;
+import { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextInput, Wizard, WizardStep } from '@patternfly/react-core';
+
+interface SampleFormProps {
+  value: string;
+  isValid: boolean;
+  setValue: (value: string) => void;
+  setIsValid: (isValid: boolean) => void;
 }
 
-const SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormProps) => {
-  const [value, setValue] = React.useState(props.formValue);
-  const [isValid, setIsValid] = React.useState(props.isFormValid);
+const SampleForm: React.FunctionComponent<SampleFormProps> = ({ value, isValid, setValue, setIsValid }) => {
+  const validated = isValid ? 'default' : 'error';
 
   const handleTextInputChange = (value: string) => {
-    const valid = /^\d+$/.test(value);
+    const isValid = /^\d+$/.test(value);
+
     setValue(value);
-    setIsValid(valid);
-    props.onChange && props.onChange(valid, value);
+    setIsValid(isValid);
   };
 
-  const validated = isValid ? 'default' : 'error';
-
   return (
     <Form>
       <FormGroup label="Age:" type="number" fieldId="age">
         <TextInput
           validated={validated}
           value={value}
-          id="age-input"
+          id="age"
           aria-describedby="age-helper"
           onChange={handleTextInputChange}
         />
@@ -55,94 +41,43 @@ const SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormP
   );
 };
 
-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);
-  };
+export const WizardEnabledOnFormValidation: React.FunctionComponent = () => {
+  const [ageValue, setAgeValue] = React.useState('Thirty');
+  const [isSubAFormValid, setIsSubAFormValid] = React.useState(false);
 
-  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 onSave = () => alert(`Wow, you look a lot younger than ${ageValue}.`);
 
-  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}
-    />
+    <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/components/Wizard/examples/WizardExpandableSteps.tsx

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

@@ -1,33 +1,55 @@
 import React from 'react';
-import { Wizard, WizardStep } from '@patternfly/react-core';
+import {
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DescriptionListDescription,
+  Wizard,
+  WizardStep,
+  WizardStepType
+} 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 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);
 
-  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}
-    />
+    <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 → components}/Wizard/examples/WizardProgressiveSteps.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Wizard, WizardStep } from '@patternfly/react-core/next';
+import { Wizard, WizardStep } from '@patternfly/react-core';
 
 export const WizardProgressiveSteps: React.FunctionComponent = () => (
   <Wizard height={400} title="Progressive steps wizard" isProgressive>

package/src/{next/components → components}/Wizard/examples/WizardStepDrawerContent.tsx

@@ -9,9 +9,11 @@ import {
   DrawerActions,
   DrawerCloseButton,
   Flex,
-  Button
+  Button,
+  useWizardContext,
+  Wizard,
+  WizardStep
 } from '@patternfly/react-core';
-import { useWizardContext, Wizard, WizardStep } from '@patternfly/react-core/next';
 
 const StepContentWithDrawer: React.FunctionComponent = () => {
   const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);

package/src/{next/components → components}/Wizard/examples/WizardStepErrorStatus.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
-import { Checkbox } from '@patternfly/react-core';
-import { Wizard, WizardStep } from '@patternfly/react-core/next';
+import { Checkbox, Wizard, WizardStep } from '@patternfly/react-core';
 
 interface SomeContextProps {
   errorMessage: string | undefined;

package/src/{next/components → components}/Wizard/examples/WizardStepVisitRequired.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Wizard, WizardStep } from '@patternfly/react-core/next';
+import { Wizard, WizardStep } from '@patternfly/react-core';
 
 export const WizardStepVisitRequired: React.FunctionComponent = () => (
   <Wizard height={400} title="Incrementally enabled steps wizard" isVisitRequired>

package/src/{next/components → components}/Wizard/examples/WizardToggleStepVisibility.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
-import { Checkbox } from '@patternfly/react-core';
-import { Wizard, WizardStep } from '@patternfly/react-core/next';
+import { Checkbox, Wizard, WizardStep } from '@patternfly/react-core';
 
 interface SomeContextProps {
   isToggleStepChecked: boolean;