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

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

@@ -1,84 +0,0 @@
-import React from 'react';
-
-import { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, 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" fieldId="age">
-        <TextInput
-          validated={validated}
-          value={value}
-          id="age"
-          aria-describedby="age-helper"
-          onChange={handleTextInputChange}
-        />
-        <FormHelperText>
-          <HelperText>
-            <HelperTextItem variant={validated}>
-              {validated === 'error' ? 'Age has to be a number' : 'Write your age in numbers.'}
-            </HelperTextItem>
-          </HelperText>
-        </FormHelperText>
-      </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

@@ -1,42 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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/WizardValidateOnButtonPress.tsx

@@ -1,190 +0,0 @@
-import React from 'react';
-
-import {
-  Button,
-  Alert,
-  EmptyState,
-  EmptyStateHeader,
-  EmptyStateFooter,
-  EmptyStateBody,
-  EmptyStateActions,
-  EmptyStateIcon,
-  Progress,
-  Form,
-  FormGroup,
-  TextInput,
-  HelperText,
-  HelperTextItem,
-  FormHelperText
-} 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="lg">
-        <EmptyStateHeader
-          headingLevel="h4"
-          titleText={percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}
-          icon={<EmptyStateIcon icon={CogsIcon} />}
-        />
-        <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>
-        <EmptyStateFooter>
-          <EmptyStateActions>
-            <Button isDisabled={percentValidated !== 100} onClick={onClose}>
-              Log to console
-            </Button>
-          </EmptyStateActions>
-        </EmptyStateFooter>
-      </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" fieldId="age">
-        <TextInput
-          validated={validated}
-          value={value}
-          id="age"
-          aria-describedby="age-helper"
-          onChange={handleTextInputChange}
-        />
-        <FormHelperText>
-          <HelperText>
-            <HelperTextItem variant={validated}>
-              {validated === 'error' ? 'Age has to be a number' : 'Write your age in numbers.'}
-            </HelperTextItem>
-          </HelperText>
-        </FormHelperText>
-      </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>
-  );
-};