@indico-data/design-system 2.0.2 → 2.1.2

package/lib/index.esm.js

@@ -24102,292 +24102,6 @@ function LoadingAwareContainer(props) {
     return (jsxs(StyledLoadingAwareContainer, { className: y({ loading: isLoading }, className), style: style, children: [jsx(StyledStatusContainer, { role: "status", children: isLoading && 'Loading' }), isLoading ? jsx(LoadingIndicator, {}) : jsx(Fragment, { children: children })] }));
 }
 
-const StyledWizard = styled.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.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.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] = useState(startingStep || steps[0]);
-    const [openCancelConfirm, setOpenCancelConfirm] = useState(false);
-    const onLastStep = 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
-    useEffect(() => {
-        onStepChange(currentStep);
-    }, [currentStep]);
-    // ensures `currentStep` is reset on unmount, just in case
-    useEffect(() => {
-        return () => setCurrentStep(steps[0] || '');
-    }, []);
-    return (jsxs(StyledWizard, { className: className, "data-cy": props['data-cy'], id: id, children: [jsxs("nav", { children: [jsxs("h1", { children: [wizardTitle, ": ", currentStep] }), jsxs("div", { className: "wizard-buttons", children: [jsx(Button$2, { onClick: () => setOpenCancelConfirm(true), variant: "link-style", children: "Cancel" }), steps.indexOf(currentStep) !== 0 && (jsx(IconButton, Object.assign({}, commonButtonProps, { iconName: "fa-arrow-left", label: "Previous Step", onPress: prevStep, isDisabled: disablePrevStep }))), onLastStep ? (jsx(IconButton, Object.assign({}, commonButtonProps, { variant: "primary", iconName: "check", busy: isBusy, label: isBusy ? submitProcessing : submitButtonLabel, onPress: handleNextPress, isDisabled: disableSubmit }))) : (jsx(IconButton, Object.assign({}, commonButtonProps, { variant: "primary", iconSide: "end", iconName: "fa-arrow-right", label: "Next Step", onPress: handleNextPress, isDisabled: disableNextStep }, nextButtonProps)))] })] }), jsx(Fragment, { children: children }), jsx(ConfirmModal, { title: confirmCancel.title, message: confirmCancel.message, confirmText: confirmCancel.confirmText, rejectText: confirmCancel.rejectText, open: openCancelConfirm, clickOutsideHandler: () => setOpenCancelConfirm(false), responseHandler: handleCancelRequest })] }));
-}
-
-const StyledWizardWithSidebar = styled.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] = useState(startingStep || steps[0]);
-    const [openCancelConfirm, setOpenCancelConfirm] = useState(false);
-    const onLastStep = 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
-    useEffect(() => {
-        onStepChange(currentStep);
-    }, [currentStep]);
-    // ensures `currentStep` is reset on unmount, just in case
-    useEffect(() => {
-        return () => setCurrentStep(steps[0] || '');
-    }, []);
-    return (jsxs(StyledWizardWithSidebar, { className: className, "data-cy": props['data-cy'], id: id, backgroundcolor: backgroundColor, color: color, buttoncolor: buttonColor, children: [jsxs("div", { className: "wizard-sidebar", children: [jsxs("h2", { children: [" ", wizardTitle] }), steps.map((step, index) => {
-                        return (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)) && (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) && (jsx(Icon, { name: "fa-check-circle", className: "sidebar-step__check-icon" })), step] }, step));
-                    })] }), jsx("div", { className: "wizard-content", children: jsxs("div", { className: "wizard-content__wrapper", children: [jsxs("div", { className: "wizard-content__items", children: [jsx("div", { className: "wizard-content__header", children: jsx("h2", { children: currentStep }) }), jsx("div", { className: "wizard-content__body", children: children })] }), jsx("nav", { className: "wizard-actions", children: jsxs("div", { className: "wizard-buttons", children: [jsx(Button, { ariaLabel: "cancel", variant: "text", color: "secondary", onClick: () => setOpenCancelConfirm(true), children: "Cancel" }), steps.indexOf(currentStep) !== 0 && (jsx(Button, { variant: "outline", color: "secondary", iconName: "fa-arrow-left", ariaLabel: "previous step", onClick: prevStep, isDisabled: disablePrevStep, className: "mr-1", children: "Previous Step" })), onLastStep ? (jsx(Button, { ariaLabel: "submit", iconName: "check", color: "secondary", isLoading: isBusy, onClick: handleNextPress, isDisabled: disableSubmit, children: isBusy ? submitProcessing : submitButtonLabel })) : (jsx(Button, Object.assign({ ariaLabel: "next step", iconPosition: "right", color: "secondary", iconName: "fa-arrow-right", onClick: handleNextPress, isDisabled: disableNextStep }, nextButtonProps, { children: "Next Step" })))] }) })] }) }), 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.div `
   .drawer__list {
     white-space: nowrap;
@@ -27234,5 +26948,5 @@ const Col = (_a) => {
     return jsx(build.Col, Object.assign({}, rest));
 };
 
-export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup$1 as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, Drawer, EditableInput, GlobalStyles, Icon, IconButton, Button$2 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio, RadioGroup, RandomLoadingMessage, Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, StyledWizard, typography as TYPOGRAPHY, TextInput, TextTruncate, Toggle, Tooltip, Wizard, WizardCard, WizardSection, WizardWithSidebar, color as colorUtils, faIcons, indicons, number as numberUtils, string as stringUtils };
+export { animation as ANIMATION, Radio$1 as AbstractRadio, RadioGroup$1 as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, Drawer, EditableInput, GlobalStyles, Icon, IconButton, Button$2 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio, RadioGroup, RandomLoadingMessage, Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, typography as TYPOGRAPHY, TextInput, TextTruncate, Toggle, Tooltip, color as colorUtils, faIcons, indicons, number as numberUtils, string as stringUtils };
 //# sourceMappingURL=index.esm.js.map