@indico-data/design-system 2.0.3 → 2.1.3

package/lib/index.js

@@ -24127,292 +24127,6 @@ function LoadingAwareContainer(props) {
     return (jsxRuntime.jsxs(StyledLoadingAwareContainer, { className: y({ loading: isLoading }, className), style: style, children: [jsxRuntime.jsx(StyledStatusContainer, { role: "status", children: isLoading && 'Loading' }), isLoading ? jsxRuntime.jsx(LoadingIndicator, {}) : jsxRuntime.jsx(jsxRuntime.Fragment, { children: children })] }));
 }
 
-const StyledWizard = styled__default.default.div `
-  nav {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    margin-bottom: 24px;
-
-    // override for some styling in AppChrome IPA component
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-  }
-
-  h1 {
-    margin-bottom: 0;
-  }
-
-  .wizard-buttons {
-    display: flex;
-    align-items: center;
-
-    font-size: ${typography.fontSize.subheadLarge};
-
-    button.link-style {
-      font-size: inherit;
-      margin-right: 1em;
-    }
-  }
-`;
-const commonPadding = '20px';
-// todo: permafrost: move into css fragment at top level
-const WizardCard = styled__default.default.div `
-  width: 100%;
-  padding: 14px ${commonPadding};
-
-  background-color: ${allColors.clay};
-  border: 1px solid ${allColors.oxfordBlue};
-  border-radius: 4px;
-  box-shadow: 1px 1px 1px 0 ${allColors.ebony};
-`;
-const WizardSection = styled__default.default.div `
-  .section-heading {
-    margin-bottom: 0;
-    // todo: store value elsewhere
-    font-size: 22px;
-    color: ${allColors.lightFontColor};
-
-    .supporting-text {
-      font-size: ${typography.fontSize.subheadLarge};
-      color: ${allColors.defaultFontColor};
-    }
-  }
-
-  .section-content {
-    padding: ${commonPadding};
-  }
-
-  :not(:last-of-type) {
-    margin-bottom: ${commonPadding};
-
-    .section-content {
-      border-bottom: 1px solid ${allColors.ebony};
-    }
-  }
-`;
-
-const commonButtonProps = {
-    size: 'large',
-};
-function Wizard(props) {
-    const { children, className, confirmCancel, disableNextStep, disablePrevStep, disableSubmit, id, isLastStep, onCancel, onNextPress, onStepChange, onSubmit, startingStep, steps, submitButtonLabel, submitProcessing = '', wizardTitle, nextButtonProps, } = props;
-    const [currentStep, setCurrentStep] = React$1.useState(startingStep || steps[0]);
-    const [openCancelConfirm, setOpenCancelConfirm] = React$1.useState(false);
-    const onLastStep = React$1.useMemo(() => {
-        if (isLastStep !== undefined) {
-            return isLastStep;
-        }
-        return steps.indexOf(currentStep) === steps.length - 1;
-    }, [isLastStep, steps, currentStep]);
-    const isBusy = !!(submitProcessing && submitProcessing.length > 0);
-    const nextStep = () => {
-        if (!onLastStep) {
-            const currentIndex = steps.indexOf(currentStep);
-            setCurrentStep(steps[currentIndex + 1]);
-        }
-    };
-    const prevStep = () => {
-        const currentIndex = steps.indexOf(currentStep);
-        if (currentIndex !== 0) {
-            setCurrentStep(steps[currentIndex - 1]);
-        }
-    };
-    // handles the user's selection in the cancel confirmation modal
-    const handleCancelRequest = (confirmCancel) => {
-        if (confirmCancel && onCancel) {
-            onCancel();
-        }
-        setOpenCancelConfirm(false);
-    };
-    const handleNextPress = () => {
-        const allowNext = onNextPress ? onNextPress() : true;
-        if (!allowNext) {
-            return;
-        }
-        if (onLastStep) {
-            handleSubmit();
-        }
-        else {
-            nextStep();
-        }
-    };
-    const handleSubmit = () => {
-        onSubmit();
-    };
-    // report current step to the consuming component
-    React$1.useEffect(() => {
-        onStepChange(currentStep);
-    }, [currentStep]);
-    // ensures `currentStep` is reset on unmount, just in case
-    React$1.useEffect(() => {
-        return () => setCurrentStep(steps[0] || '');
-    }, []);
-    return (jsxRuntime.jsxs(StyledWizard, { className: className, "data-cy": props['data-cy'], id: id, children: [jsxRuntime.jsxs("nav", { children: [jsxRuntime.jsxs("h1", { children: [wizardTitle, ": ", currentStep] }), jsxRuntime.jsxs("div", { className: "wizard-buttons", children: [jsxRuntime.jsx(Button$2, { onClick: () => setOpenCancelConfirm(true), variant: "link-style", children: "Cancel" }), steps.indexOf(currentStep) !== 0 && (jsxRuntime.jsx(IconButton, Object.assign({}, commonButtonProps, { iconName: "fa-arrow-left", label: "Previous Step", onPress: prevStep, isDisabled: disablePrevStep }))), onLastStep ? (jsxRuntime.jsx(IconButton, Object.assign({}, commonButtonProps, { variant: "primary", iconName: "check", busy: isBusy, label: isBusy ? submitProcessing : submitButtonLabel, onPress: handleNextPress, isDisabled: disableSubmit }))) : (jsxRuntime.jsx(IconButton, Object.assign({}, commonButtonProps, { variant: "primary", iconSide: "end", iconName: "fa-arrow-right", label: "Next Step", onPress: handleNextPress, isDisabled: disableNextStep }, nextButtonProps)))] })] }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }), jsxRuntime.jsx(ConfirmModal, { title: confirmCancel.title, message: confirmCancel.message, confirmText: confirmCancel.confirmText, rejectText: confirmCancel.rejectText, open: openCancelConfirm, clickOutsideHandler: () => setOpenCancelConfirm(false), responseHandler: handleCancelRequest })] }));
-}
-
-const StyledWizardWithSidebar = styled__default.default.div `
-  height: 750px;
-  display: flex;
-  /* display: flex;
-  /* min-height: 455px; */
-  background-color: ${(props) => (props.backgroundcolor ? props.backgroundcolor : 'currentColor')};
-  color: ${(props) => (props.color ? props.color : 'inherit')};
-  border-radius: 4px;
-  h2 {
-    font-size: ${typography.fontSize.subheadLarge};
-    margin-bottom: ${spacings.md};
-    color: ${(props) => (props.color ? props.color : 'inherit')};
-    font-weight: bold;
-  }
-
-  .wizard-sidebar {
-    width: 245px;
-    padding: 30px;
-    border-right: 1px solid ${allColors.silverChalice};
-
-    .sidebar-step {
-      margin-bottom: ${spacings.sm};
-      display: flex;
-      align-items: center;
-      color: ${allColors.silverChalice};
-      &.current-step,
-      &.prior-step {
-        color: ${allColors.black};
-      }
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-
-      .sidebar-step__check-icon {
-        fill: ${allColors.green};
-        margin-right: ${spacings.sm};
-        width: 24px;
-        height: 24px;
-      }
-
-      .sidebar-step__number-icon {
-        margin-right: ${spacings.sm};
-        width: 24px;
-        height: 24px;
-        border-radius: 50%;
-        border: 1px solid currentColor;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: ${typography.fontSize.caption};
-      }
-    }
-  }
-
-  .wizard-content__wrapper {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    flex-direction: column;
-    height: 100%;
-  }
-  .wizard-content {
-    width: 100%;
-    padding: 30px;
-
-    .wizard-content__header {
-      flex: 0 0 100%;
-    }
-    .wizard-content__body {
-      flex: 0 0 100%;
-    }
-  }
-
-  .wizard-actions {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: end;
-  }
-
-  nav {
-    display: flex;
-    align-items: center;
-    justify-content: end;
-    // override for some styling in AppChrome IPA component
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-    margin-top: ${spacings.md};
-  }
-  .wizard-buttons {
-    display: flex;
-    align-items: center;
-    font-size: ${typography.fontSize.subheadSmall};
-  }
-`;
-
-function WizardWithSidebar(props) {
-    const { children, className, confirmCancel, disableNextStep, disablePrevStep, disableSubmit, id, isLastStep, onCancel, onNextPress, onStepChange, onSubmit, startingStep, stepSchema, submitButtonLabel, submitProcessing = '', wizardTitle, nextButtonProps, validationErrors, backgroundColor, color, buttonColor, } = props;
-    const steps = Object.keys(stepSchema);
-    const [currentStep, setCurrentStep] = React$1.useState(startingStep || steps[0]);
-    const [openCancelConfirm, setOpenCancelConfirm] = React$1.useState(false);
-    const onLastStep = React$1.useMemo(() => {
-        if (isLastStep !== undefined) {
-            return isLastStep;
-        }
-        return steps.indexOf(currentStep) === steps.length - 1;
-    }, [isLastStep, steps, currentStep]);
-    const isBusy = !!(submitProcessing && submitProcessing.length > 0);
-    const nextStep = () => {
-        if (!onLastStep) {
-            const currentIndex = steps.indexOf(currentStep);
-            setCurrentStep(steps[currentIndex + 1]);
-        }
-    };
-    const prevStep = () => {
-        const currentIndex = steps.indexOf(currentStep);
-        if (currentIndex !== 0) {
-            setCurrentStep(steps[currentIndex - 1]);
-        }
-    };
-    // handles the user's selection in the cancel confirmation modal
-    const handleCancelRequest = (confirmCancel) => {
-        if (confirmCancel && onCancel) {
-            onCancel();
-        }
-        setOpenCancelConfirm(false);
-    };
-    const handleNextPress = () => {
-        const allowNext = onNextPress ? onNextPress() : true;
-        if (!allowNext) {
-            return;
-        }
-        if (onLastStep) {
-            handleSubmit();
-        }
-        else {
-            nextStep();
-        }
-    };
-    const handleSubmit = () => {
-        onSubmit();
-    };
-    // report current step to the consuming component
-    React$1.useEffect(() => {
-        onStepChange(currentStep);
-    }, [currentStep]);
-    // ensures `currentStep` is reset on unmount, just in case
-    React$1.useEffect(() => {
-        return () => setCurrentStep(steps[0] || '');
-    }, []);
-    return (jsxRuntime.jsxs(StyledWizardWithSidebar, { className: className, "data-cy": props['data-cy'], id: id, backgroundcolor: backgroundColor, color: color, buttoncolor: buttonColor, children: [jsxRuntime.jsxs("div", { className: "wizard-sidebar", children: [jsxRuntime.jsxs("h2", { children: [" ", wizardTitle] }), steps.map((step, index) => {
-                        return (jsxRuntime.jsxs("div", { className: y('sidebar-step', {
-                                ['current-step']: index === steps.indexOf(currentStep),
-                                ['prior-step']: index < steps.indexOf(currentStep),
-                            }), children: [(Object.keys(validationErrors ? validationErrors : []).some((error) => stepSchema[step].inputsRequiringValidation.includes(error)) ||
-                                    index > steps.indexOf(currentStep)) && (jsxRuntime.jsx("div", { className: "sidebar-step__number-icon", children: index + 1 })), !Object.keys(validationErrors ? validationErrors : []).some((error) => stepSchema[step].inputsRequiringValidation.includes(error)) &&
-                                    index <= steps.indexOf(currentStep) && (jsxRuntime.jsx(Icon, { name: "fa-check-circle", className: "sidebar-step__check-icon" })), step] }, step));
-                    })] }), jsxRuntime.jsx("div", { className: "wizard-content", children: jsxRuntime.jsxs("div", { className: "wizard-content__wrapper", children: [jsxRuntime.jsxs("div", { className: "wizard-content__items", children: [jsxRuntime.jsx("div", { className: "wizard-content__header", children: jsxRuntime.jsx("h2", { children: currentStep }) }), jsxRuntime.jsx("div", { className: "wizard-content__body", children: children })] }), jsxRuntime.jsx("nav", { className: "wizard-actions", children: jsxRuntime.jsxs("div", { className: "wizard-buttons", children: [jsxRuntime.jsx(Button, { ariaLabel: "cancel", variant: "text", color: "secondary", onClick: () => setOpenCancelConfirm(true), children: "Cancel" }), steps.indexOf(currentStep) !== 0 && (jsxRuntime.jsx(Button, { variant: "outline", color: "secondary", iconName: "fa-arrow-left", ariaLabel: "previous step", onClick: prevStep, isDisabled: disablePrevStep, className: "mr-1", children: "Previous Step" })), onLastStep ? (jsxRuntime.jsx(Button, { ariaLabel: "submit", iconName: "check", color: "secondary", isLoading: isBusy, onClick: handleNextPress, isDisabled: disableSubmit, children: isBusy ? submitProcessing : submitButtonLabel })) : (jsxRuntime.jsx(Button, Object.assign({ ariaLabel: "next step", iconPosition: "right", color: "secondary", iconName: "fa-arrow-right", onClick: handleNextPress, isDisabled: disableNextStep }, nextButtonProps, { children: "Next Step" })))] }) })] }) }), jsxRuntime.jsx(ConfirmModal, { title: confirmCancel.title, message: confirmCancel.message, confirmText: confirmCancel.confirmText, rejectText: confirmCancel.rejectText, open: openCancelConfirm, clickOutsideHandler: () => setOpenCancelConfirm(false), responseHandler: handleCancelRequest, width: 430 })] }));
-}
-
 const StyledDrawerLinkList = styled__default.default.div `
   .drawer__list {
     white-space: nowrap;
@@ -27307,16 +27021,11 @@ exports.SectionTable = SectionTable;
 exports.Select = Select;
 exports.Shrug = Shrug;
 exports.SingleCombobox = SingleCombobox;
-exports.StyledWizard = StyledWizard;
 exports.TYPOGRAPHY = typography;
 exports.TextInput = TextInput;
 exports.TextTruncate = TextTruncate;
 exports.Toggle = Toggle;
 exports.Tooltip = Tooltip;
-exports.Wizard = Wizard;
-exports.WizardCard = WizardCard;
-exports.WizardSection = WizardSection;
-exports.WizardWithSidebar = WizardWithSidebar;
 exports.colorUtils = color;
 exports.faIcons = faIcons;
 exports.indicons = indicons;