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

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

@@ -1,64 +1,59 @@
 import React from 'react';
+
 import {
+  Button,
+  Alert,
   EmptyState,
   EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   EmptyStateActions,
+  EmptyStateIcon,
+  Progress,
   Form,
   FormGroup,
   TextInput,
-  Progress,
-  Button,
-  Wizard,
-  WizardFooter,
-  WizardContextConsumer,
-  Alert,
-  EmptyStateIcon,
   HelperText,
   HelperTextItem,
-  FormHelperText
+  FormHelperText,
+  Wizard,
+  WizardStep,
+  WizardFooterWrapper,
+  useWizardContext
 } from '@patternfly/react-core';
-// eslint-disable-next-line patternfly-react/import-tokens-icons
-import { CogsIcon } from '@patternfly/react-icons';
+import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
 
-interface finishedProps {
-  onClose: () => void;
+interface ValidationProgressProps {
+  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;
-      }
-    });
-  };
+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);
 
-    if (percent >= 100) {
+    return () => {
       clearInterval(interval);
-    }
-
-    return () => clearInterval(interval);
-  }, [percent]);
+    };
+  }, [tick]);
 
   return (
     <div className="pf-l-bullseye">
       <EmptyState variant="lg">
         <EmptyStateHeader
           headingLevel="h4"
-          titleText={percent === 100 ? 'Validation complete' : 'Validating credentials'}
+          titleText={percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}
           icon={<EmptyStateIcon icon={CogsIcon} />}
         />
         <EmptyStateBody>
-          <Progress value={percent} measureLocation="outside" aria-label="validation-progress" />
+          <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
@@ -66,7 +61,7 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
         </EmptyStateBody>
         <EmptyStateFooter>
           <EmptyStateActions>
-            <Button isDisabled={percent !== 100} onClick={props.onClose}>
+            <Button isDisabled={percentValidated !== 100} onClick={onClose}>
               Log to console
             </Button>
           </EmptyStateActions>
@@ -76,25 +71,57 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
   );
 };
 
-interface sampleFormProps {
-  formValue: string;
-  isFormValid: boolean;
-  onChange?: (isValid: boolean, value: string) => void;
+interface LastStepFooterProps {
+  isValid: boolean;
+  setIsSubmitted(isSubmitted: boolean): void;
+  setHasErrorOnSubmit(isSubmitted: boolean): void;
 }
 
-const SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormProps) => {
-  const [value, setValue] = React.useState(props.formValue);
-  const [isValid, setIsValid] = React.useState(props.isFormValid);
+const LastStepFooter: React.FunctionComponent<LastStepFooterProps> = ({
+  isValid,
+  setIsSubmitted,
+  setHasErrorOnSubmit
+}) => {
+  const { goToNextStep, goToPrevStep } = useWizardContext();
 
-  const handleTextInputChange = (value: string) => {
-    const valid = /^\d+$/.test(value);
-    setValue(value);
-    setIsValid(valid);
-    props.onChange && props.onChange(valid, value);
+  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" fieldId="age">
@@ -117,95 +144,50 @@ const SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormP
   );
 };
 
-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);
-  };
+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);
 
-  const validateLastStep: (onNext: () => void) => void = (onNext) => {
-    if (stepsValid !== 1 && !isFormValid) {
-      setErrorText(true);
-    } else {
-      setStepsValid(1);
-      setErrorText(false);
-      onNext();
-    }
-  };
+  // eslint-disable-next-line no-console
+  const onClose = () => console.log('Some close action occurs here.');
 
-  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>
-  );
+  if (isSubmitted && isFirstStepValid) {
+    return <ValidationProgress onClose={onClose} />;
+  }
 
-  const title = 'Validate on button press wizard example';
   return (
-    <Wizard
-      navAriaLabel={`${title} steps`}
-      mainAriaLabel={`${title} content`}
-      onClose={closeWizard}
-      footer={CustomFooter}
-      steps={steps}
-      height={400}
-    />
+    <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 → components}/Wizard/examples/WizardWithCustomFooter.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
-import { Button, Flex, FlexItem, Spinner } from '@patternfly/react-core';
-import { useWizardContext, Wizard, WizardFooter, WizardFooterWrapper, WizardStep } from '@patternfly/react-core/next';
+import { Button, Flex, FlexItem, Spinner, useWizardContext, Wizard, WizardFooter, WizardFooterWrapper, WizardStep } from '@patternfly/react-core';
 
 const CustomWizardFooter = () => {
   const { activeStep, goToNextStep, goToPrevStep, close } = useWizardContext();

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

@@ -6,7 +6,7 @@ import {
   CustomWizardNavFunction,
   WizardNav,
   WizardNavItem
-} from '@patternfly/react-core/next';
+} from '@patternfly/react-core';
 
 export const WizardWithCustomNav: React.FunctionComponent = () => {
   const nav: CustomWizardNavFunction = (

package/src/{next/components → components}/Wizard/examples/WizardWithCustomNavItem.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 WizardWithCustomNavItem: React.FunctionComponent = () => (
   <Wizard height={400} title="Custom navigation item wizard">

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Wizard, WizardHeader, WizardStep } from '@patternfly/react-core/next';
+import { Wizard, WizardHeader, WizardStep } from '@patternfly/react-core';
 
 export const WizardWithHeader: React.FunctionComponent = () => (
   <Wizard

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

@@ -1,7 +1,6 @@
 import React from 'react';
 
-import { Button } from '@patternfly/react-core';
-import { Wizard, WizardStep } from '@patternfly/react-core/next';
+import { Button, Wizard, WizardStep } 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';
 

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

@@ -7,9 +7,10 @@ import {
   EmptyStateActions,
   EmptyStateIcon,
   Progress,
-  Button
+  Button,
+  Wizard,
+  WizardStep
 } 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 {

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Button, Modal, ModalVariant } from '@patternfly/react-core';
-import { Wizard, WizardStep, WizardHeader } from '@patternfly/react-core/next';
+import { Button, Modal, ModalVariant, Wizard, WizardStep, WizardHeader } from '@patternfly/react-core';
 
 export const WizardWithinModal = () => {
   const [isModelOpen, setIsModalOpen] = React.useState(false);

package/src/components/Wizard/index.ts

@@ -1,8 +1,11 @@
 export * from './Wizard';
-export * from './WizardContext';
-export * from './WizardNav';
-export * from './WizardNavItem';
-export * from './WizardHeader';
 export * from './WizardBody';
 export * from './WizardFooter';
 export * from './WizardToggle';
+export * from './WizardStep';
+export * from './WizardNav';
+export * from './WizardNavItem';
+export * from './WizardHeader';
+export * from './types';
+export { useWizardFooter } from './hooks';
+export { useWizardContext, WizardContext } from './WizardContext';

package/src/{next/components → components}/Wizard/types.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { WizardNavProps, WizardNavItemProps, WizardFooterProps } from '../Wizard';
+import { WizardNavProps, WizardNavItemProps, WizardFooterProps } from '.';
 
 /** Type used to define 'basic' steps, or in other words, steps that are neither parents or children of parents. */
 export interface WizardBasicStep {

package/src/components/index.ts

@@ -3,7 +3,6 @@ export * from './AboutModal';
 export * from './Accordion';
 export * from './ActionList';
 export * from './Alert';
-export * from './AlertGroup';
 export * from './Avatar';
 export * from './BackToTop';
 export * from './Backdrop';

package/src/demos/AlertGroup.md

@@ -1,5 +1,5 @@
 ---
-id: Alert group
+id: Alert
 section: components
 ---
 

package/src/demos/Wizard/WizardDemo.md

@@ -1,11 +1,13 @@
 ---
 id: Wizard
 section: components
+source: react-demos
 ---
 
 import imgBrand from './imgBrand.svg';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 
 ## Demos
 
@@ -22,10 +24,10 @@ import {
   NavItem,
   NavList,
   PageSection,
-  Wizard,
   Modal,
   ModalVariant
 } from '@patternfly/react-core';
+import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
 class BasicWizardDemo extends React.Component {
@@ -89,7 +91,7 @@ class BasicWizardDemo extends React.Component {
           aria-describedby="wiz-modal-demo-description"
           aria-labelledby="wiz-modal-demo-title"
         >
-          <Wizard
+          <WizardDeprecated
             navAriaLabel={`${title} steps`}
             mainAriaLabel={`${title} content`}
             titleId="wiz-modal-demo-title"
@@ -117,9 +119,9 @@ import {
   DrawerPanelContent,
   DrawerHead,
   Modal,
-  ModalVariant,
-  Wizard
+  ModalVariant
 } from '@patternfly/react-core';
+import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 
 class WizardModalWithDrawerDemo extends React.Component {
   constructor(props) {
@@ -285,7 +287,7 @@ class WizardModalWithDrawerDemo extends React.Component {
         aria-describedby="wiz-modal-demo-description"
         aria-labelledby="wiz-modal-demo-title"
       >
-        <Wizard
+        <WizardDeprecated
           navAriaLabel={`${title} steps`}
           hasDrawer
           isDrawerExpanded={isDrawerExpanded}
@@ -317,9 +319,9 @@ import {
   Modal,
   ModalVariant,
   Text,
-  TextContent,
-  Wizard
+  TextContent
 } from '@patternfly/react-core';
+import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 
 class WizardModalWithDrawerDemo extends React.Component {
   constructor(props) {
@@ -536,7 +538,7 @@ class WizardModalWithDrawerDemo extends React.Component {
         aria-describedby="wiz-modal-demo-description"
         aria-labelledby="wiz-modal-demo-title"
       >
-        <Wizard
+        <WizardDeprecated
           navAriaLabel={`${title} steps`}
           hasDrawer
           isDrawerExpanded={isDrawerExpanded}
@@ -565,9 +567,9 @@ import {
   NavList,
   PageSection,
   PageSectionTypes,
-  PageSectionVariants,
-  Wizard
+  PageSectionVariants
 } from '@patternfly/react-core';
+import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 import imgBrand from './imgBrand.svg';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
@@ -615,7 +617,7 @@ class FullPageWizard extends React.Component {
       <React.Fragment>
         <DashboardWrapper hasPageTemplateTitle>
           <PageSection type={PageSectionTypes.wizard} variant={PageSectionVariants.light}>
-            <Wizard navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} />
+            <WizardDeprecated navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} />
           </PageSection>
         </DashboardWrapper>
       </React.Fragment>
@@ -650,13 +652,13 @@ import {
   Text,
   TextContent,
   Title,
-  Wizard,
   Masthead,
   PageToggleButton,
   MastheadToggle,
   MastheadMain,
   MastheadBrand
 } from '@patternfly/react-core';
+import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 import imgBrand from './imgBrand.svg';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
@@ -876,7 +878,7 @@ class FullPageWizard extends React.Component {
             </TextContent>
           </PageSection>
           <PageSection type={PageSectionTypes.wizard} variant={PageSectionVariants.light}>
-            <Wizard
+            <WizardDeprecated
               hasDrawer
               isDrawerExpanded={isDrawerExpanded}
               onExpandDrawer={this.onExpand}
@@ -918,13 +920,13 @@ import {
   Text,
   TextContent,
   Title,
-  Wizard,
   Masthead,
   PageToggleButton,
   MastheadToggle,
   MastheadMain,
   MastheadBrand
 } from '@patternfly/react-core';
+import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 import imgBrand from './imgBrand.svg';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
@@ -1194,7 +1196,7 @@ class FullPageWizard extends React.Component {
             </TextContent>
           </PageSection>
           <PageSection type={PageSectionTypes.wizard} variant={PageSectionVariants.light}>
-            <Wizard
+            <WizardDeprecated
               hasDrawer
               isDrawerExpanded={isDrawerExpanded}
               onExpandDrawer={this.onExpand}