braid-design-system
Version:
Themeable design system for the SEEK Group
196 lines (195 loc) • 6.33 kB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
import assert from "assert";
import clsx from "clsx";
import { useRef, useContext, useEffect } from "react";
import { Box } from "../Box/Box.mjs";
import { Hidden } from "../Hidden/Hidden.mjs";
import { Stack } from "../Stack/Stack.mjs";
import { Text } from "../Text/Text.mjs";
import { StepContext, StepperContext } from "./StepperContext.mjs";
import { step, tone, progressTrack, progressTrackCentered, progressLine, progressUnfilled, indicatorContainer, inner, tick, indicator, highlight, complete, active } from "./Stepper.css.mjs";
const StepIndicator = ({ complete: complete$1, started, active: active$1 }) => /* @__PURE__ */ jsxs(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
xmlSpace: "preserve",
focusable: "false",
viewBox: "0 0 24 24",
className: clsx(
indicator,
complete$1 || active$1 || started ? highlight : void 0,
complete$1 && !active$1 ? complete : void 0,
active$1 ? active : void 0
),
children: [
/* @__PURE__ */ jsx(
"circle",
{
fill: "none",
stroke: "currentColor",
strokeWidth: 4,
cx: 12,
cy: 12,
r: 10
}
),
/* @__PURE__ */ jsx("circle", { cx: 12, cy: 12, r: 5, className: inner }),
/* @__PURE__ */ 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: tick
}
)
]
}
);
const Step = ({ complete: complete2 = false, id, children }) => {
const stepRef = useRef(null);
const { stepNumber, isLast } = useContext(StepContext);
const stepperContext = useContext(StepperContext);
assert(
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: tone$1,
align,
progress,
isLinear,
onKeyUp,
onKeyDown,
onClick,
onFocus,
onBlur,
onStepClick
} = stepperContext;
const active2 = activeStep === stepNumber;
const focused = focusedStep === stepNumber;
const linearStepBeforeProgress = isLinear && stepNumber < progress;
const completed = complete2 || linearStepBeforeProgress;
const started = active2 || complete2 || isLinear && stepNumber <= progress;
const keyboardAccessible = focused || active2 && focusedStep === null;
const interactable = typeof onStepClick === "function" && !active2 && (!isLinear || stepNumber <= progress);
useEffect(() => {
if (stepRef.current && focused) {
stepRef.current.focus();
}
}, [focused]);
return /* @__PURE__ */ jsxs(
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 && !active2 ? "none" : void 0,
"aria-current": active2 ? "step" : void 0,
className: [step, tone[tone$1]],
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__ */ jsx(
Box,
{
component: "span",
position: "absolute",
overflow: "hidden",
borderRadius: "full",
className: [
progressTrack,
align === "center" ? progressTrackCentered : void 0
],
children: /* @__PURE__ */ jsx(
Box,
{
component: "span",
position: "absolute",
top: 0,
bottom: 0,
left: 0,
width: "full",
className: [
progressLine,
!linearStepBeforeProgress ? progressUnfilled : void 0
]
}
)
}
) : null,
/* @__PURE__ */ jsxs(
Stack,
{
component: "span",
space: "medium",
align: {
mobile: "left",
tablet: align === "center" ? "center" : void 0
},
children: [
/* @__PURE__ */ jsx(
Box,
{
component: "span",
display: "block",
position: "relative",
transition: "fast",
borderRadius: "full",
className: indicatorContainer,
"aria-hidden": true,
children: /* @__PURE__ */ jsx(
StepIndicator,
{
complete: completed,
active: active2,
started
}
)
}
),
/* @__PURE__ */ jsx(Hidden, { component: "span", below: "tablet", children: /* @__PURE__ */ jsx(
Box,
{
component: "span",
display: "block",
paddingX: align === "center" ? "xsmall" : void 0,
paddingRight: align === "left" && !isLast ? "xsmall" : void 0,
userSelect: "none",
children: /* @__PURE__ */ jsx(
Text,
{
align: align === "center" ? "center" : void 0,
weight: started ? "strong" : void 0,
tone: !started ? "secondary" : void 0,
children
}
)
}
) })
]
}
)
]
}
);
};
Step.__isStep__ = true;
export {
Step
};