@indico-data/design-system 1.0.57 → 1.0.58

package/lib/index.esm.js

@@ -25712,12 +25712,13 @@ function Wizard(props) {
 }
 
 const StyledWizardWithSidebar = styled.div `
-  display: inline-flex;
+  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};
@@ -25765,18 +25766,32 @@ const StyledWizardWithSidebar = styled.div `
     }
   }
 
+  .wizard-content__wrapper {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    flex-direction: column;
+    height: 100%;
+  }
   .wizard-content {
-    /* min-width: 660px; */
+    width: 100%;
     padding: 30px;
 
     .wizard-content__header {
-      /* min-height: 70px; */
+      flex: 0 0 100%;
     }
     .wizard-content__body {
-      /* min-height: 520px; */
+      flex: 0 0 100%;
     }
   }
 
+  .wizard-actions {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: end;
+  }
+
   nav {
     display: flex;
     align-items: center;
@@ -25786,18 +25801,21 @@ const StyledWizardWithSidebar = styled.div `
     padding-right: 0 !important;
     margin-top: ${spacings.md};
   }
-
   .wizard-buttons {
     display: flex;
     align-items: center;
     font-size: ${typography.fontSize.subheadSmall};
 
     button {
+      width: 200px;
+      text-align: center;
+      display: flex;
+      justify-content: center;
       ${(props) => props.buttoncolor &&
     css `
           background-color: ${props.buttoncolor};
           color: ${props.backgroundcolor || 'inherit'};
-        `}
+        `};
     }
 
     button.outline {
@@ -25813,6 +25831,7 @@ const StyledWizardWithSidebar = styled.div `
       font-size: inherit;
       margin-right: 1em;
       background-color: inherit;
+      width: auto;
       ${(props) => props.buttoncolor &&
     css `
           color: ${props.buttoncolor};
@@ -25882,7 +25901,7 @@ function WizardWithSidebar(props) {
                             }), 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));
-                    })] }), jsxs("div", { className: "wizard-content", children: [jsx("div", { className: "wizard-content__header", children: jsx("h2", { children: currentStep }) }), jsx("div", { className: "wizard-content__body", children: children }), jsx("nav", { children: jsxs("div", { className: "wizard-buttons", children: [jsx(Button$1, { onClick: () => setOpenCancelConfirm(true), variant: "link-style", children: "Cancel" }), steps.indexOf(currentStep) !== 0 && (jsx(IconButton, { variant: "outline", iconName: "fa-arrow-left", label: "Previous Step", onPress: prevStep, isDisabled: disablePrevStep })), onLastStep ? (jsx(IconButton, { variant: "primary", iconName: "check", busy: isBusy, label: isBusy ? submitProcessing : submitButtonLabel, onPress: handleNextPress, isDisabled: disableSubmit })) : (jsx(IconButton, Object.assign({ variant: "primary", iconSide: "end", iconName: "fa-arrow-right", label: "Next Step", onPress: handleNextPress, isDisabled: disableNextStep }, nextButtonProps)))] }) })] }), jsx(ConfirmModal, { title: confirmCancel.title, message: confirmCancel.message, confirmText: confirmCancel.confirmText, rejectText: confirmCancel.rejectText, open: openCancelConfirm, clickOutsideHandler: () => setOpenCancelConfirm(false), responseHandler: handleCancelRequest, width: 430 })] }));
+                    })] }), 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$1, { onClick: () => setOpenCancelConfirm(true), variant: "link-style", children: "Cancel" }), steps.indexOf(currentStep) !== 0 && (jsx(IconButton, { variant: "outline", iconName: "fa-arrow-left", label: "Previous Step", onPress: prevStep, isDisabled: disablePrevStep })), onLastStep ? (jsx(IconButton, { variant: "primary", iconName: "check", busy: isBusy, label: isBusy ? submitProcessing : submitButtonLabel, onPress: handleNextPress, isDisabled: disableSubmit })) : (jsx(IconButton, Object.assign({ variant: "primary", iconSide: "end", iconName: "fa-arrow-right", label: "Next Step", onPress: handleNextPress, isDisabled: disableNextStep }, nextButtonProps)))] }) })] }) }), jsx(ConfirmModal, { title: confirmCancel.title, message: confirmCancel.message, confirmText: confirmCancel.confirmText, rejectText: confirmCancel.rejectText, open: openCancelConfirm, clickOutsideHandler: () => setOpenCancelConfirm(false), responseHandler: handleCancelRequest, width: 430 })] }));
 }
 
 const fullViewportHeightMinusOffset = 'calc(100% - 42px)';