@homebound/beam 2.157.2 → 2.157.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -9,4 +9,4 @@ export interface StepperProps {
|
|
|
9
9
|
currentStep: Step["value"];
|
|
10
10
|
onChange: (stepValue: string) => void;
|
|
11
11
|
}
|
|
12
|
-
export declare function Stepper(
|
|
12
|
+
export declare function Stepper(props: StepperProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
@@ -6,18 +6,22 @@ const react_1 = require("react");
|
|
|
6
6
|
const react_aria_1 = require("react-aria");
|
|
7
7
|
const Icon_1 = require("./Icon");
|
|
8
8
|
const Css_1 = require("../Css");
|
|
9
|
-
|
|
9
|
+
const utils_1 = require("../utils");
|
|
10
|
+
const defaultTestId_1 = require("../utils/defaultTestId");
|
|
11
|
+
function Stepper(props) {
|
|
12
|
+
const { steps, currentStep, onChange } = props;
|
|
10
13
|
if (steps.length === 0) {
|
|
11
14
|
throw new Error("Stepper must be initialized with at least one step");
|
|
12
15
|
}
|
|
16
|
+
const tid = (0, utils_1.useTestIds)(props, "stepper");
|
|
13
17
|
// calc progress based on last completed step - return -1 when no steps completed
|
|
14
18
|
const lastCompletedStep = steps.map((step) => step.state).lastIndexOf("complete");
|
|
15
19
|
const maxStepWidth = 200;
|
|
16
20
|
const minStepWidth = 100;
|
|
17
21
|
const gap = 8;
|
|
18
|
-
return ((0, jsx_runtime_1.jsxs)("nav", Object.assign({ "aria-label": "steps", css: Css_1.Css.df.fdc.w100.$ }, { children: [(0, jsx_runtime_1.jsx)("ol", Object.assign({ css: Css_1.Css.listReset.df.gapPx(gap).$ }, { children: steps.map((step) => {
|
|
22
|
+
return ((0, jsx_runtime_1.jsxs)("nav", Object.assign({ "aria-label": "steps", css: Css_1.Css.df.fdc.w100.$ }, tid, { children: [(0, jsx_runtime_1.jsx)("ol", Object.assign({ css: Css_1.Css.listReset.df.gapPx(gap).$ }, { children: steps.map((step) => {
|
|
19
23
|
const isCurrent = currentStep === step.value;
|
|
20
|
-
return ((0, jsx_runtime_1.jsx)("li", Object.assign({ css: Css_1.Css.df.fg1.fdc.maxwPx(maxStepWidth).mwPx(minStepWidth).$, "aria-current": isCurrent }, { children: (0, jsx_runtime_1.jsx)(StepButton, Object.assign({}, step, { onClick: () => onChange(step.value), isCurrent: isCurrent }), void 0) }), step.label));
|
|
24
|
+
return ((0, jsx_runtime_1.jsx)("li", Object.assign({ css: Css_1.Css.df.fg1.fdc.maxwPx(maxStepWidth).mwPx(minStepWidth).$, "aria-current": isCurrent }, tid.step, { children: (0, jsx_runtime_1.jsx)(StepButton, Object.assign({}, step, { onClick: () => onChange(step.value), isCurrent: isCurrent }, tid.stepButton), void 0) }), step.label));
|
|
21
25
|
}) }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.mt1.bgGray300
|
|
22
26
|
.hPx(4)
|
|
23
27
|
.maxwPx(steps.length * maxStepWidth + (steps.length - 1) * gap)
|
|
@@ -26,13 +30,15 @@ function Stepper({ steps, currentStep, onChange }) {
|
|
|
26
30
|
.h100.w(`${((lastCompletedStep + 1) / steps.length) * 100}%`).$ }, void 0) }), void 0)] }), void 0));
|
|
27
31
|
}
|
|
28
32
|
exports.Stepper = Stepper;
|
|
29
|
-
function StepButton(
|
|
33
|
+
function StepButton(props) {
|
|
34
|
+
const { label, disabled, state, isCurrent, onClick } = props;
|
|
30
35
|
const ariaProps = { onPress: onClick, isDisabled: disabled };
|
|
31
36
|
const ref = (0, react_1.useRef)(null);
|
|
32
37
|
const { buttonProps, isPressed } = (0, react_aria_1.useButton)(ariaProps, ref);
|
|
33
38
|
const { isFocusVisible, focusProps } = (0, react_aria_1.useFocusRing)();
|
|
34
39
|
const { hoverProps, isHovered } = (0, react_aria_1.useHover)(ariaProps);
|
|
35
40
|
const focusRingStyles = state === "error" ? Css_1.Css.bshDanger.$ : Css_1.Css.bshFocus.$;
|
|
41
|
+
const tid = (0, utils_1.useTestIds)(props, "stepButton");
|
|
36
42
|
return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ ref: ref }, buttonProps, focusProps, hoverProps, { css: {
|
|
37
43
|
...Css_1.Css.buttonBase.$,
|
|
38
44
|
...Css_1.Css.tl.w100.h100.sm.gray700.add("whiteSpace", "initial").if(state === "error").red600.$,
|
|
@@ -41,7 +47,7 @@ function StepButton({ label, disabled, state, isCurrent, onClick }) {
|
|
|
41
47
|
...(isPressed ? Css_1.Css.lightBlue500.if(state === "error").red900.$ : {}),
|
|
42
48
|
...(disabled ? Css_1.Css.gray400.cursorNotAllowed.if(state === "error").red200.$ : {}),
|
|
43
49
|
...(isFocusVisible ? focusRingStyles : {}),
|
|
44
|
-
} }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.mrPx(4).$ }, { children: (0, jsx_runtime_1.jsx)(StepIcon, { state: state, isHovered: isHovered, isPressed: isPressed, isCurrent: isCurrent }, void 0) }), void 0), label] }), void 0));
|
|
50
|
+
} }, tid[(0, defaultTestId_1.defaultTestId)(label)], { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.mrPx(4).$ }, { children: (0, jsx_runtime_1.jsx)(StepIcon, { state: state, isHovered: isHovered, isPressed: isPressed, isCurrent: isCurrent }, void 0) }), void 0), label] }), void 0));
|
|
45
51
|
}
|
|
46
52
|
function StepIcon({ state, isHovered = false, isPressed = false, isCurrent = false }) {
|
|
47
53
|
if (state === "error") {
|