@payfit/unity-components
Version:
58 lines (57 loc) • 1.69 kB
JavaScript
import { useTimelineContext as e } from "../Timeline.context.js";
import { timelineStep as t } from "../Timeline.variants.js";
import { TimelineMarker as n } from "./TimelineMarker.js";
import { TimelineStepProvider as r } from "./TimelineStep.context.js";
import { TimelineStepContent as i } from "./TimelineStepContent.js";
import { forwardRef as a, useId as o } from "react";
import { jsx as s, jsxs as c } from "react/jsx-runtime";
import { useIntl as l } from "react-intl";
//#region src/components/timeline/parts/TimelineStep.tsx
var u = a(({ state: a = "pending", stepNumber: u, className: d, statusSlot: f, actionSlot: p, children: m }, h) => {
let g = l(), { orientation: _ } = e(), v = o(), y = o(), b = {
completed: g.formatMessage({
id: "unity:component:timeline:state:completed",
defaultMessage: "Completed"
}),
current: g.formatMessage({
id: "unity:component:timeline:state:current",
defaultMessage: "In progress"
}),
pending: g.formatMessage({
id: "unity:component:timeline:state:pending",
defaultMessage: "Pending"
})
};
return /* @__PURE__ */ c("li", {
ref: h,
className: t({
orientation: _,
className: d
}),
"aria-current": a === "current" ? "step" : void 0,
"aria-labelledby": v,
"aria-describedby": y,
children: [
/* @__PURE__ */ s(n, {
state: a,
stepNumber: u
}),
/* @__PURE__ */ s("span", {
id: y,
className: "uy:sr-only",
children: b[a]
}),
/* @__PURE__ */ s(r, {
labelId: v,
children: /* @__PURE__ */ s(i, {
statusSlot: f,
actionSlot: p,
children: m
})
})
]
});
});
u.displayName = "TimelineStep";
//#endregion
export { u as TimelineStep };