@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
201 lines (200 loc) • 10 kB
JavaScript
"use client";
import { jsxs as w, jsx as s, Fragment as Te } from "react/jsx-runtime";
import { d as je } from "./index.cKLI89Eg.js";
import { c as r } from "./index.DQOqod3i.js";
import { isValidElement as Ve, cloneElement as Be } from "react";
import { b as U } from "./Flag.CbQYBzVC.js";
import { DSHeading as Me } from "../heading.BHSklXho.js";
import { D as Oe } from "./Icon.DYtaQgbw.js";
import { D as qe } from "./LinkButton.BxG7fx1O.js";
import { g as u } from "./helpers.CexwVao7.js";
import '../assets/LinkCard.CqjmRkfO.css';const Re = "ds-link-card_root_1xnhr_1", $e = "ds-link-card_root--elevated_1xnhr_26", Ge = "ds-link-card_root--horizontal_1xnhr_66", Je = "ds-link-card_media-wrapper_1xnhr_71", Ke = "ds-link-card_content_1xnhr_81", Qe = "ds-link-card_content--padding-small_1xnhr_86", Ue = "ds-link-card_header_1xnhr_117", Xe = "ds-link-card_footer_1xnhr_118", Ye = "ds-link-card_heading_1xnhr_133", Ze = "ds-link-card_heading--with-icon_1xnhr_136", ea = "ds-link-card_link_1xnhr_146", aa = "ds-link-card_description_1xnhr_151", na = "ds-link-card_meta-data_1xnhr_168", ta = "ds-link-card_decorative-link_1xnhr_185", ia = "ds-link-card_flags_1xnhr_189", oa = "ds-link-card_brand-flag_1xnhr_198", ra = "ds-link-card_graphic-area_1xnhr_204", a = {
root: Re,
rootElevated: $e,
rootHorizontal: Ge,
mediaWrapper: Je,
content: Ke,
contentPaddingSmall: Qe,
header: Ue,
footer: Xe,
heading: Ye,
headingWithIcon: Ze,
link: ea,
description: aa,
metaData: na,
decorativeLink: ta,
flags: ia,
brandFlag: oa,
graphicArea: ra
}, sa = ({
href: m,
linkComponent: e,
flags: n,
flagListAriaLabel: d,
heading: i,
mediaArea: l,
img: g,
brandFlag: c,
decorativeLinkButtonProps: f
}) => {
if (typeof g < "u" && console.warn(u("DSLinkCard", "The 'img' prop is deprecated. Please use 'mediaArea' instead.")), !m && !e)
throw new Error(u("DSLinkCard", "Please provide either the 'href' prop or a custom 'linkComponent'."));
if (m && e)
throw new Error(u("DSLinkCard", "Please provide either the 'href' prop or a custom 'linkComponent', but not both."));
if (!i)
throw new Error(u("DSLinkCard", "The 'heading' prop is required and must be provided."));
n && n.length > 6 && console.warn(u("DSLinkCard", "It is recommended to provide a maximum of 6 flags for optimal display.")), n && n.length > 0 && !d && console.warn(u("DSLinkCard", "When providing flags, please also ensure to add the 'flagListAriaLabel' to describe the list of flags for non sighted screen reader users.")), c && l === void 0 && g === void 0 && console.warn(u("DSLinkCard", "The 'brandFlag' prop is set but no 'mediaArea' prop is provided. The 'brandFlag' will have no effect without a media element.")), typeof i == "object" && i !== null && i.headingIconName && f?.label && console.warn(u("DSLinkCard", "The 'heading.headingIconName' option should not be used when a decorative link label is provided."));
}, la = (m) => {
const e = je.c(89);
let n, d, i, l, g, c, f, o, h, L, t, N, k, _, b, C, D, x;
e[0] !== m ? ({
heading: o,
brandFlag: n,
className: i,
cardClassNames: d,
decorativeLinkButtonProps: l,
description: g,
flagListAriaLabel: c,
flags: b,
href: h,
mediaArea: N,
img: L,
linkComponent: t,
metaData: k,
orientation: C,
padding: D,
graphicArea: f,
variant: x,
..._
} = m, e[0] = m, e[1] = n, e[2] = d, e[3] = i, e[4] = l, e[5] = g, e[6] = c, e[7] = f, e[8] = o, e[9] = h, e[10] = L, e[11] = t, e[12] = N, e[13] = k, e[14] = _, e[15] = b, e[16] = C, e[17] = D, e[18] = x) : (n = e[1], d = e[2], i = e[3], l = e[4], g = e[5], c = e[6], f = e[7], o = e[8], h = e[9], L = e[10], t = e[11], N = e[12], k = e[13], _ = e[14], b = e[15], C = e[16], D = e[17], x = e[18]);
let v, S, W, F, I;
e[19] !== n || e[20] !== l || e[21] !== c || e[22] !== o || e[23] !== h || e[24] !== L || e[25] !== t || e[26] !== N || e[27] !== b || e[28] !== C || e[29] !== D || e[30] !== x ? (v = b === void 0 ? [] : b, W = C === void 0 ? "vertical" : C, F = D === void 0 ? "medium" : D, I = x === void 0 ? "outlined" : x, S = N ?? L, process.env.NODE_ENV !== "production" && sa({
href: h,
linkComponent: t,
heading: o,
flags: v,
flagListAriaLabel: c,
mediaArea: N,
img: L,
brandFlag: n,
decorativeLinkButtonProps: l
}), e[19] = n, e[20] = l, e[21] = c, e[22] = o, e[23] = h, e[24] = L, e[25] = t, e[26] = N, e[27] = b, e[28] = C, e[29] = D, e[30] = x, e[31] = v, e[32] = S, e[33] = W, e[34] = F, e[35] = I) : (v = e[31], S = e[32], W = e[33], F = e[34], I = e[35]);
let V;
e[36] !== l ? (V = l || {}, e[36] = l, e[37] = V) : V = e[37];
const {
label: j,
iconName: X,
iconPosition: se,
variant: ce,
hideLabel: Y,
size: le
} = V, Z = se === void 0 ? "right" : se, ee = le === void 0 ? "small" : le, B = ce === "ghost" ? "ghost" : "filled", ae = k || v.length > 0 || j, ne = typeof o == "object" && o !== null && !!o.headingIconName;
let M;
if (e[38] !== B || e[39] !== n || e[40] !== d || e[41] !== i || e[42] !== Y || e[43] !== X || e[44] !== Z || e[45] !== j || e[46] !== ee || e[47] !== g || e[48] !== c || e[49] !== v || e[50] !== f || e[51] !== ae || e[52] !== o || e[53] !== ne || e[54] !== h || e[55] !== t || e[56] !== S || e[57] !== k || e[58] !== W || e[59] !== F || e[60] !== _ || e[61] !== I) {
const {
brandFlag: he,
contentWrapper: pe,
descriptionWrapper: me,
decorativeLink: ge,
flagsWrapper: fe,
footerWrapper: ve,
headerWrapper: ke,
heading: _e,
mediaWrapper: ue,
imageWrapper: Le,
metaDataWrapper: Ne,
graphicAreaWrapper: be
} = d || {}, te = W === "horizontal", ie = I === "elevated";
let O;
e[63] !== i || e[64] !== ie || e[65] !== te ? (O = r(a.root, i, {
[a.rootHorizontal]: te,
[a.rootElevated]: ie
}), e[63] = i, e[64] = ie, e[65] = te, e[66] = O) : O = e[66];
const Ce = O, de = r(a.brandFlag, he), De = r(a.content, pe, {
[a.contentPaddingSmall]: F === "small"
}), xe = r(a.description, me), Se = r(a.decorativeLink, ge), we = r(a.flags, fe), We = r(a.footer, ve), Fe = r(a.header, ke), Ie = r(a.heading, _e, {
[a.headingWithIcon]: ne
}), Pe = ue || Le, ze = r(a.mediaWrapper, Pe), ye = r(a.metaData, Ne), Ae = r(a.graphicArea, be);
let q, P, z, y, A, E, H, T;
e[67] !== _ ? ({
download: P,
hrefLang: z,
ping: y,
referrerPolicy: A,
rel: E,
target: H,
type: T,
...q
} = _, e[67] = _, e[68] = q, e[69] = P, e[70] = z, e[71] = y, e[72] = A, e[73] = E, e[74] = H, e[75] = T) : (q = e[68], P = e[69], z = e[70], y = e[71], A = e[72], E = e[73], H = e[74], T = e[75]);
let R;
e[76] !== P || e[77] !== h || e[78] !== z || e[79] !== t || e[80] !== y || e[81] !== A || e[82] !== E || e[83] !== H || e[84] !== T ? (R = (p) => t && Ve(t) ? Be(t, {
...t.props,
className: r(a.link, t.props.className),
children: /* @__PURE__ */ w(Te, { children: [
p,
" ",
t.props.children
] })
}) : /* @__PURE__ */ s("a", { href: h, className: a.link, download: P, hrefLang: z, ping: y, referrerPolicy: A, rel: E, target: H, type: T, children: p }), e[76] = P, e[77] = h, e[78] = z, e[79] = t, e[80] = y, e[81] = A, e[82] = E, e[83] = H, e[84] = T, e[85] = R) : R = e[85];
const Ee = R, oe = (p) => {
const G = typeof p == "object" && p !== void 0, {
headingText: J,
headingIconName: K,
headingSize: Q,
headingTag: re
} = G ? p : {
headingText: p
};
return /* @__PURE__ */ w(Me, { tag: re === void 0 ? "h3" : re, size: Q === void 0 ? "medium" : Q, className: Ie, children: [
Ee(J),
K && /* @__PURE__ */ s(Oe, { name: K, "aria-hidden": "true" })
] });
}, He = (p) => {
if (typeof p == "string")
return /* @__PURE__ */ s(U, { color: "promo-highlight", className: de, children: p });
const {
children: G,
color: J,
className: K,
...Q
} = p;
return /* @__PURE__ */ s(U, { color: J === void 0 ? "promo-highlight" : J, className: r(de, K), ...Q, children: G });
};
let $;
e[86] !== oe || e[87] !== o ? ($ = oe(o), e[86] = oe, e[87] = o, e[88] = $) : $ = e[88], M = /* @__PURE__ */ w("div", { ...q, className: Ce, children: [
/* @__PURE__ */ w("div", { className: De, children: [
/* @__PURE__ */ w("div", { className: Fe, children: [
f && /* @__PURE__ */ s("div", { className: Ae, children: f }),
$,
g && /* @__PURE__ */ s("div", { className: xe, children: g })
] }),
ae && /* @__PURE__ */ w("div", { className: We, children: [
k && /* @__PURE__ */ s("div", { className: ye, children: k }),
v.length > 0 && /* @__PURE__ */ s("ul", { className: we, "aria-label": c, children: v.map(da) }),
j && /* @__PURE__ */ s(qe, { iconName: X, iconPosition: Z, variant: B, hideLabel: Y, size: ee, isFlush: B === "ghost", "aria-hidden": !0, className: Se, children: j })
] })
] }),
S && /* @__PURE__ */ w("div", { className: ze, children: [
n && He(n),
S
] })
] }), e[38] = B, e[39] = n, e[40] = d, e[41] = i, e[42] = Y, e[43] = X, e[44] = Z, e[45] = j, e[46] = ee, e[47] = g, e[48] = c, e[49] = v, e[50] = f, e[51] = ae, e[52] = o, e[53] = ne, e[54] = h, e[55] = t, e[56] = S, e[57] = k, e[58] = W, e[59] = F, e[60] = _, e[61] = I, e[62] = M;
} else
M = e[62];
return M;
};
la.displayName = "DSLinkCard";
function da(m, e) {
if (typeof m == "string")
return /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(U, { color: "status-info", children: m }) }, e);
const {
children: n,
color: d,
...i
} = m;
return /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(U, { color: d === void 0 ? "status-info" : d, ...i, children: n }) }, e);
}
export {
la as D,
sa as v
};