@payfit/unity-components
Version:
89 lines (88 loc) • 3.29 kB
JavaScript
import { useFunnelLayoutContext as e } from "../FunnelLayout.context.js";
import { FunnelBackButton as t } from "./FunnelBackButton.js";
import { FunnelProgressBar as n } from "./FunnelProgressBar.js";
import { forwardRef as r, useMemo as i } from "react";
import { uyTv as a } from "@payfit/unity-themes";
import { jsx as o, jsxs as s } from "react/jsx-runtime";
import { useIntl as c } from "react-intl";
//#region src/components/funnel-layout/parts/FunnelTopBar.tsx
var l = a({ slots: {
base: ["uy:bg-surface-neutral uy:shadow-raising uy:min-h-800"],
titleWrapper: ["uy:px-200 uy:py-150 uy:md:px-500 uy:min-h-[calc(var(--uy-spacing-800)-4px)]", "uy:flex uy:justify-between uy:items-center"],
title: ["uy:text-content-neutral uy:typography-body-strong uy:sm:typography-h4 uy:flex-1 uy:sm:flex-auto uy:text-center uy:col-2"]
} }), u = r(({ actions: r, backButtonLabel: a, currentTaskDescription: u, leading: d, onBackButtonPress: f, progressAnnouncement: p, progressValue: m, showProgress: h = !0, title: g, ..._ }, v) => {
let y = c(), { ids: b } = e(), { base: x, titleWrapper: S, title: C } = l(), w = i(() => d === void 0 ? a && f ? (process.env.NODE_ENV === "development" && console.warn("FunnelTopBar: backButtonLabel and onBackButtonPress are deprecated. Use leading={<FunnelBackButton />} instead."), /* @__PURE__ */ o(t, {
label: a,
onPress: f
})) : null : d, [
d,
a,
f
]);
process.env.NODE_ENV === "development" && d !== void 0 && (a || f) && console.warn("FunnelTopBar: Both leading and deprecated props (backButtonLabel/onBackButtonPress) provided. leading takes precedence.");
let T = i(() => ({
navigationDescription: y.formatMessage({
id: "unity:layout:funnel:top-bar:navigation-desc",
defaultMessage: "Process navigation"
}),
progressAnnouncement: p ?? y.formatMessage({
id: "unity:layout:funnel:top-bar:progress-announcement",
defaultMessage: m === void 0 ? "Progress status unavailable" : `Process is ${m}% complete`
}, { progress: m })
}), [
y,
p,
m
]);
return /* @__PURE__ */ s("header", {
ref: v,
id: b.topbarId,
className: x(),
role: "banner",
"aria-labelledby": b.funnelTitleId,
"aria-describedby": b.funnelStatusId,
"data-dd-privacy": "allow",
..._,
children: [
/* @__PURE__ */ s("nav", {
className: S(),
"aria-label": T.navigationDescription,
children: [
/* @__PURE__ */ o("div", {
className: "uy:grow-0 uy:basis-[100px]",
children: w
}),
/* @__PURE__ */ s("h1", {
className: C(),
id: b.funnelTitleId,
children: [g, u && /* @__PURE__ */ o("span", {
className: "uy:sr-only",
children: u
})]
}),
/* @__PURE__ */ o("div", {
className: "uy:grow-0 uy:basis-[100px]",
"aria-hidden": !r,
role: r ? "group" : "presentation",
children: r
})
]
}),
h && /* @__PURE__ */ o("div", {
"aria-hidden": "true",
children: /* @__PURE__ */ o(n, { value: m ?? 0 })
}),
/* @__PURE__ */ o("div", {
id: b.funnelStatusId,
role: "status",
"aria-live": "polite",
"aria-atomic": "true",
className: "uy:sr-only",
children: T.progressAnnouncement
})
]
});
});
u.displayName = "FunnelTopBar";
//#endregion
export { u as FunnelTopBar, l as funnelTopBar };