@spaced-out/ui-design-system/lib/components/Stepper/Stepper.stories.d.ts

Sense UI components library

import * as React from 'react';
import type { StepperProps } from './';
declare const _default: {
    tags: string[];
    title: string;
    component: import("flow-to-typescript-codemod").Flow.AbstractComponent<StepperProps, HTMLDivElement>;
    argTypes: {
        classNames: {
            description: string;
            control: {
                type: string;
            };
            table: {
                type: {
                    summary: string;
                };
            };
        };
        activeStep: {
            control: {
                type: string;
            };
            description: string;
            table: {
                type: {
                    summary: string;
                };
                defaultValue: {
                    summary: string;
                };
            };
        };
        orientation: {
            control: {
                type: string;
            };
            options: string[];
            description: string;
            table: {
                type: {
                    summary: string;
                };
                defaultValue: {
                    summary: string;
                };
            };
        };
    };
    parameters: {
        docs: {
            subtitle: string;
            description: {
                component: string;
            };
        };
        storySource: {
            componentPath: string;
        };
    };
};
export default _default;
/**
 * Renders a Stepper component with Completed check
 *
 * Below conditions are required for the step to be clickable:
 *
 * 1. The step should have an `onClick` handler
 * 2. The current step should not be `active`
 * 3. The previous step should be `completed`
 *
 */
export declare const _Stepper: {
    (args: StepperProps): React.JSX.Element;
    args: {
        activeStep: number;
    };
};
/**
 * Renders a Stepper component with Completed check
 *
 * Below conditions are required for the step to be clickable:
 *
 * 1. The step should have an `onClick` handler
 * 2. The current step should not be `active`
 * 3. The previous step should be `completed`
 *
 */
/**
export const _WithStepIcon = (args: StepperProps): React.Node => {
  const [openDialog, setOpenDialog] = React.useState(false);
  const [activeStep, setActiveStep] = React.useState(args.activeStep || 0);
  const [completedSteps, setCompletedSteps] = React.useState({
    '0': false,
    '1': false,
    '2': false,
  });

  const handleNext = () => {
    if (completedSteps[activeStep] === false) {
      setOpenDialog(true);
      return;
    }
    setActiveStep((prevStep) => prevStep + 1);
  };

  const handleBack = () => {
    setActiveStep((prevStep) => prevStep - 1);
  };

  const handleClick = (idx) => {
    setActiveStep(idx);
  };

  const handleMarkComplete = () => {
    const newCompletedSteps = {...completedSteps};
    for (let i = 0; i <= activeStep; i++) {
      newCompletedSteps[i] = true;
    }
    setCompletedSteps(newCompletedSteps);
  };

  const handleMarkInComplete = () => {
    const newCompletedSteps = {...completedSteps};
    for (let i = activeStep; i <= 2; i++) {
      newCompletedSteps[i] = false;
    }
    setCompletedSteps(newCompletedSteps);
  };

  React.useEffect(() => {
    setActiveStep(args.activeStep || 0);
  }, [args.activeStep]);

  return (
    <div className={css.container}>
      <Stepper {...args} activeStep={activeStep}>
        {stepsWithIcon.map((stepDetails, index) => (
          <Step
            key={stepDetails.id}
            index={index}
            iconName={stepDetails.iconName}
            iconType={stepDetails.iconType}
            onClick={handleClick}
            completed={completedSteps[index]}
          >
            <StepLabel>{stepDetails.label}</StepLabel>
            <StepContent>{stepDetails.description}</StepContent>
          </Step>
        ))}
      </Stepper>
      <div className={css.spacedActions}>
        <div className={css.actionBlock}>
          <Button
            size="small"
            type="secondary"
            onClick={handleBack}
            disabled={!(activeStep > 0)}
            iconLeftName="arrow-left"
          >
            Back
          </Button>
          <Button
            size="small"
            type="secondary"
            onClick={handleNext}
            disabled={!(activeStep < steps.length - 1)}
            iconRightName="arrow-right"
          >
            Next
          </Button>
        </div>
        <div className={css.actionBlock}>
          <Button
            size="small"
            type="primary"
            onClick={handleMarkComplete}
            iconLeftName="circle-check"
            disabled={completedSteps[activeStep]}
          >
            Mark Complete
          </Button>
          <Button
            size="small"
            type="danger"
            onClick={handleMarkInComplete}
            iconLeftName="circle-xmark"
            disabled={!completedSteps[activeStep]}
          >
            Mark Incomplete
          </Button>
        </div>
      </div>

      <BasicDialog
        isOpen={openDialog}
        abortText="Close"
        body="Please mark the current step complete to move on to the next one!"
        handleAbort={() => setOpenDialog(false)}
        heading="Unable to proceed to next step"
        semantic="danger"
      />
    </div>
  );
};

_WithStepIcon.args = {
  activeStep: 0,
};
*/
//# sourceMappingURL=Stepper.stories.d.ts.map