@anoki/fse-ui
Version:
FSE UI components library
90 lines (89 loc) • 4.03 kB
JavaScript
import { j as e } from "./index.es278.js";
import { d as n } from "./index.es332.js";
import { clsx as x } from "./index.es280.js";
import { DateTime as j } from "./index.es3.js";
import { ArrowLink as N } from "./index.es21.js";
import './components/ui/VerticalCardStepper/VerticalCardStepper.css';/* empty css */
import { RichText as v } from "./index.es218.js";
import { Link as k } from "./index.es180.js";
import { ExternalLink as f } from "./index.es128.js";
var u = /* @__PURE__ */ ((i) => (i.DATE = "date", i.HEADLINE = "headline", i.ORDERED = "ordered", i.CHECK = "check", i))(u || {});
const y = (i) => {
const a = j.fromISO(i);
return {
day: a.toFormat("dd"),
month: a.toFormat("LLLL"),
year: a.toFormat("yyyy")
};
}, F = ({ steps: i, type: a, asLink: s }) => {
const d = s ?? "a";
return /* @__PURE__ */ e.jsx("div", { className: "vertical-container", children: /* @__PURE__ */ e.jsx("div", { className: "timeline", children: i.map((r, l) => {
var c;
const t = () => {
switch (a) {
case "date": {
if (!r.meta) return /* @__PURE__ */ e.jsx("div", { className: "date" });
const { day: o, month: m, year: h } = y(r.meta);
return /* @__PURE__ */ e.jsxs("div", { className: "date", children: [
/* @__PURE__ */ e.jsx("div", { className: "day", children: o }),
/* @__PURE__ */ e.jsx("div", { className: "month", children: m }),
/* @__PURE__ */ e.jsx("div", { className: "year", children: h })
] });
}
case "headline":
return /* @__PURE__ */ e.jsx("div", { className: "headline", children: r.meta });
case "ordered":
return /* @__PURE__ */ e.jsx("div", { className: "circle-container", children: /* @__PURE__ */ e.jsx("div", { className: "circle", children: l + 1 }) });
case "check":
return /* @__PURE__ */ e.jsx("div", { className: "circle-container", children: /* @__PURE__ */ e.jsx("div", { className: "circle", children: /* @__PURE__ */ e.jsx("div", { className: "checkmark" }) }) });
default:
return null;
}
};
return /* @__PURE__ */ e.jsxs("div", { className: "step", children: [
/* @__PURE__ */ e.jsx("div", { className: "meta", children: t() }),
/* @__PURE__ */ e.jsx("div", { className: "vertical-line", children: /* @__PURE__ */ e.jsx("div", { className: "dot" }) }),
/* @__PURE__ */ e.jsxs("div", { className: "card", children: [
/* @__PURE__ */ e.jsx("div", { className: "label", children: r.label }),
/* @__PURE__ */ e.jsx("h3", { className: x("title", "cursor-pointer hover-underline"), children: /* @__PURE__ */ e.jsx(
d,
{
className: "link-unstyled",
href: ((c = r.link) == null ? void 0 : c.link) ?? "#",
children: r.title
}
) }),
/* @__PURE__ */ e.jsxs("div", { className: "", children: [
/* @__PURE__ */ e.jsx("div", { className: "description pb-x12", children: /* @__PURE__ */ e.jsx(v, { description: r.description, maxLines: 5 }) }),
/* @__PURE__ */ e.jsxs("div", { className: "card-footer", children: [
r.link && (r.linkType === n.LinkTypeEnum.INTERNAL || !r.linkType) && /* @__PURE__ */ e.jsx(
N,
{
href: r.link.link,
className: "card-footer-detail",
children: r.link.title
}
),
r.link && r.linkType === n.LinkTypeEnum.EXTERNAL && /* @__PURE__ */ e.jsx(
k,
{
title: "",
src: r.link.link,
icon: f,
decoration: "ui-footer-logo-link",
transform: "none",
external: !0,
asLink: s
}
)
] })
] })
] })
] }, l);
}) }) });
};
export {
u as StepVariantEnum,
F as VerticalCardStepper
};
//# sourceMappingURL=index.es236.js.map