@octopusdeploy/design-system-components
Version:
The design systems component library.
31 lines (30 loc) • 2.27 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DialogStepNavigationFooter = DialogStepNavigationFooter;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const Button_1 = require("../Button");
const DialogStepIndicator_1 = require("./DialogStepIndicator");
/**
* DialogStepNavigationFooter – the shared multi-step navigation footer for dialogs.
*
* Renders a Cancel button, optional Back button, and a Next/Complete button,
* with an optional step indicator when there are multiple steps.
*/
function DialogStepNavigationFooter({ totalSteps, currentStepIndex, isFirstStep, isLastStep, isNavigating, primaryImportance, completeButtonLabel, backButtonDisabled, nextButtonDisabled, onClose, onBack, onNext, onComplete, }) {
return ((0, jsx_runtime_1.jsxs)("footer", { className: footerStyles, children: [totalSteps > 1 && (0, jsx_runtime_1.jsx)(DialogStepIndicator_1.DialogStepIndicator, { totalSteps: totalSteps, currentStepIndex: currentStepIndex }), (0, jsx_runtime_1.jsxs)("div", { className: buttonGroupStyles, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { importance: "quiet", label: "Cancel", onClick: onClose }), !isFirstStep && (0, jsx_runtime_1.jsx)(Button_1.Button, { importance: "secondary", label: "Back", onClick: onBack, disabled: isNavigating || backButtonDisabled }), isLastStep ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { importance: primaryImportance, label: completeButtonLabel ?? "Complete", onClick: () => onComplete?.() })) : ((0, jsx_runtime_1.jsx)(Button_1.Button, { importance: primaryImportance, label: "Next", onClick: onNext, disabled: isNavigating || nextButtonDisabled }))] })] }));
}
const footerStyles = (0, css_1.css)({
flexShrink: 0,
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
gap: design_system_tokens_1.space[8],
padding: `${design_system_tokens_1.space[8]} ${design_system_tokens_1.space[24]} ${design_system_tokens_1.space[24]} ${design_system_tokens_1.space[24]}`,
});
const buttonGroupStyles = (0, css_1.css)({
display: "flex",
gap: design_system_tokens_1.space[8],
});