braid-design-system
Version:
Themeable design system for the SEEK Group
198 lines (197 loc) • 7.53 kB
JavaScript
"use strict";
const jsxRuntime = require("react/jsx-runtime");
const assert = require("assert");
const clsx = require("clsx");
const react = require("react");
const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
const lib_components_Hidden_Hidden_cjs = require("../Hidden/Hidden.cjs");
const lib_components_Stack_Stack_cjs = require("../Stack/Stack.cjs");
const lib_components_Text_Text_cjs = require("../Text/Text.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 clsx__default = /* @__PURE__ */ _interopDefaultCompat(clsx);
const StepIndicator = ({ complete, started, active }) => /* @__PURE__ */ jsxRuntime.jsxs(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
xmlSpace: "preserve",
focusable: "false",
viewBox: "0 0 24 24",
className: clsx__default.default(
lib_components_Stepper_Stepper_css_cjs.indicator,
complete || active || started ? lib_components_Stepper_Stepper_css_cjs.highlight : void 0,
complete && !active ? lib_components_Stepper_Stepper_css_cjs.complete : void 0,
active ? lib_components_Stepper_Stepper_css_cjs.active : void 0
),
children: [
/* @__PURE__ */ jsxRuntime.jsx(
"circle",
{
fill: "none",
stroke: "currentColor",
strokeWidth: 4,
cx: 12,
cy: 12,
r: 10
}
),
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 12, cy: 12, r: 5, className: lib_components_Stepper_Stepper_css_cjs.inner }),
/* @__PURE__ */ jsxRuntime.jsx(
"path",
{
d: "M 18.26 7.64 C 17.94 7.32 17.46 7.32 17.14 7.64 L 9.7 15.08 L 7.06 12.44 C 6.74 12.12 6.26 12.12 5.94 12.44 S 5.62 13.24 5.94 13.56 L 9.14 16.76 C 9.3 16.92 9.46 17 9.7 17 S 10.1 16.92 10.26 16.76 L 18.26 8.76 C 18.58 8.44 18.58 7.96 18.26 7.64 Z",
className: lib_components_Stepper_Stepper_css_cjs.tick
}
)
]
}
);
const Step = ({ complete = false, id, children }) => {
const stepRef = react.useRef(null);
const { stepNumber, isLast } = react.useContext(lib_components_Stepper_StepperContext_cjs.StepContext);
const stepperContext = react.useContext(lib_components_Stepper_StepperContext_cjs.StepperContext);
assert__default.default(
stepperContext !== null,
"A Step must be rendered as a child of a Stepper. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/Stepper"
);
const {
focusedStep,
activeStep,
tone,
align,
progress,
isLinear,
onKeyUp,
onKeyDown,
onClick,
onFocus,
onBlur,
onStepClick
} = stepperContext;
const active = activeStep === stepNumber;
const focused = focusedStep === stepNumber;
const linearStepBeforeProgress = isLinear && stepNumber < progress;
const completed = complete || linearStepBeforeProgress;
const started = active || complete || isLinear && stepNumber <= progress;
const keyboardAccessible = focused || active && focusedStep === null;
const interactable = typeof onStepClick === "function" && !active && (!isLinear || stepNumber <= progress);
react.useEffect(() => {
if (stepRef.current && focused) {
stepRef.current.focus();
}
}, [focused]);
return /* @__PURE__ */ jsxRuntime.jsxs(
lib_components_Box_Box_cjs.Box,
{
component: "button",
ref: stepRef,
position: "relative",
display: "flex",
justifyContent: { tablet: align === "center" ? "center" : void 0 },
width: "full",
cursor: interactable ? "pointer" : void 0,
pointerEvents: !interactable && !active ? "none" : void 0,
"aria-current": active ? "step" : void 0,
className: [lib_components_Stepper_Stepper_css_cjs.step, lib_components_Stepper_Stepper_css_cjs.tone[tone]],
onClick: interactable ? () => {
if (onClick) {
onClick(stepNumber);
}
if (onStepClick) {
onStepClick({ id, stepNumber });
}
} : void 0,
onKeyUp,
onKeyDown,
onFocus,
onBlur: keyboardAccessible ? onBlur : void 0,
tabIndex: keyboardAccessible ? 0 : -1,
children: [
!isLast ? /* @__PURE__ */ jsxRuntime.jsx(
lib_components_Box_Box_cjs.Box,
{
component: "span",
position: "absolute",
overflow: "hidden",
borderRadius: "full",
className: [
lib_components_Stepper_Stepper_css_cjs.progressTrack,
align === "center" ? lib_components_Stepper_Stepper_css_cjs.progressTrackCentered : void 0
],
children: /* @__PURE__ */ jsxRuntime.jsx(
lib_components_Box_Box_cjs.Box,
{
component: "span",
position: "absolute",
top: 0,
bottom: 0,
left: 0,
width: "full",
className: [
lib_components_Stepper_Stepper_css_cjs.progressLine,
!linearStepBeforeProgress ? lib_components_Stepper_Stepper_css_cjs.progressUnfilled : void 0
]
}
)
}
) : null,
/* @__PURE__ */ jsxRuntime.jsxs(
lib_components_Stack_Stack_cjs.Stack,
{
component: "span",
space: "medium",
align: {
mobile: "left",
tablet: align === "center" ? "center" : void 0
},
children: [
/* @__PURE__ */ jsxRuntime.jsx(
lib_components_Box_Box_cjs.Box,
{
component: "span",
display: "block",
position: "relative",
transition: "fast",
borderRadius: "full",
className: lib_components_Stepper_Stepper_css_cjs.indicatorContainer,
"aria-hidden": true,
children: /* @__PURE__ */ jsxRuntime.jsx(
StepIndicator,
{
complete: completed,
active,
started
}
)
}
),
/* @__PURE__ */ jsxRuntime.jsx(lib_components_Hidden_Hidden_cjs.Hidden, { component: "span", below: "tablet", children: /* @__PURE__ */ jsxRuntime.jsx(
lib_components_Box_Box_cjs.Box,
{
component: "span",
display: "block",
paddingX: align === "center" ? "xsmall" : void 0,
paddingRight: align === "left" && !isLast ? "xsmall" : void 0,
userSelect: "none",
children: /* @__PURE__ */ jsxRuntime.jsx(
lib_components_Text_Text_cjs.Text,
{
align: align === "center" ? "center" : void 0,
weight: started ? "strong" : void 0,
tone: !started ? "secondary" : void 0,
children
}
)
}
) })
]
}
)
]
}
);
};
Step.__isStep__ = true;
exports.Step = Step;