braid-design-system
Version:
Themeable design system for the SEEK Group
127 lines (126 loc) • 4.82 kB
JavaScript
"use strict";
const jsxRuntime = require("react/jsx-runtime");
const assert = require("assert");
const react = require("react");
const lib_utils_flattenChildren_cjs = require("../../utils/flattenChildren.cjs");
const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
const lib_components_Hidden_Hidden_cjs = require("../Hidden/Hidden.cjs");
const lib_components_Text_Text_cjs = require("../Text/Text.cjs");
const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
const lib_components_Stepper_StepperContext_cjs = require("./StepperContext.cjs");
const lib_components_Stepper_Stepper_css_cjs = require("./Stepper.css.cjs");
const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
const resolveActiveStep = (mode, progress, activeStep) => {
if (mode === "linear" && (typeof activeStep === "undefined" || activeStep > progress)) {
return progress;
}
return activeStep || 0;
};
const Stepper = ({
activeStep,
label,
mode = "linear",
tone,
children,
data,
align = "center",
id,
onStepClick,
...restProps
}) => {
const steps = lib_utils_flattenChildren_cjs.flattenChildren(children);
const stepCount = steps.length;
const isLinear = mode === "linear";
const progress = "progress" in restProps ? restProps.progress : 0;
const activeStepNumber = resolveActiveStep(mode, progress, activeStep);
let stepName = "";
const stepItems = react.Children.map(steps, (child, index) => {
const stepNumber = index + 1;
const isLast = stepNumber === stepCount;
assert__default.default(
!child || child.type.__isStep__,
"Only Step elements can be direct children of a Stepper. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/Stepper"
);
if (stepNumber === activeStepNumber && typeof child === "object") {
stepName = child.props.children;
}
return /* @__PURE__ */ jsxRuntime.jsx(
lib_components_Stepper_StepperContext_cjs.StepContext.Provider,
{
value: {
stepNumber,
isLast
},
children: /* @__PURE__ */ jsxRuntime.jsx(
lib_components_Box_Box_cjs.Box,
{
component: "li",
className: [
!isLast ? lib_components_Stepper_Stepper_css_cjs.stretch : void 0,
isLast && align === "center" ? lib_components_Stepper_Stepper_css_cjs.stretchLastAboveTablet : void 0
],
children: child
}
)
}
);
});
return /* @__PURE__ */ jsxRuntime.jsx(
lib_components_Stepper_StepperContext_cjs.StepperContextProvider,
{
activeStep: activeStepNumber,
tone,
align,
progress,
stepCount: stepItems.length,
isLinear,
onStepClick,
children: /* @__PURE__ */ jsxRuntime.jsxs(
lib_components_Box_Box_cjs.Box,
{
component: "nav",
position: "relative",
"aria-label": label,
id,
...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
children: [
/* @__PURE__ */ jsxRuntime.jsx(
lib_components_Box_Box_cjs.Box,
{
component: "ol",
display: "flex",
paddingBottom: { mobile: "medium", tablet: "none" },
justifyContent: {
mobile: "spaceBetween",
tablet: align === "center" ? "center" : void 0
},
children: stepItems
}
),
isLinear ? /* @__PURE__ */ jsxRuntime.jsx(
lib_components_Box_Box_cjs.Box,
{
component: "span",
position: "absolute",
pointerEvents: "none",
className: lib_components_Stepper_Stepper_css_cjs.progressTrack,
role: "progressbar",
"aria-valuemin": 0,
"aria-valuemax": stepCount - 1,
"aria-valuenow": progress > 0 ? progress - 1 : void 0,
"aria-valuetext": progress > 0 ? label : void 0,
style: {
left: `${(100 - (stepCount - 1) / stepCount * 100) / 2}%`,
width: `${(progress - 1) / stepCount * 100}%`
}
}
) : null,
/* @__PURE__ */ jsxRuntime.jsx(lib_components_Hidden_Hidden_cjs.Hidden, { above: "mobile", children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_Text_cjs.Text, { weight: "strong", children: stepName }) })
]
}
)
}
);
};
exports.Stepper = Stepper;