@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
200 lines (199 loc) • 8.9 kB
JavaScript
"use client";
import { jsxs as P, jsx as h, Fragment as Ve } from "react/jsx-runtime";
import { d as Ae } from "./index.D-sRdssb.js";
import { c as n } from "./index.DL9mof6u.js";
import { isValidElement as Be, cloneElement as Ie } from "react";
import { DSFlag as He } from "../flag.CE32qHPa.js";
import { DSHeading as Oe } from "../heading.DHLpT4dc.js";
import { D as qe } from "./LinkButton.CWibqvhs.js";
import { g as j } from "./helpers.CexwVao7.js";
import '../assets/LinkCard.Bi9QqIDA.css';const Me = "ds-link-card_root_h40nd_1", Re = "ds-link-card_root--horizontal_h40nd_53", $e = "ds-link-card_image-wrapper_h40nd_58", Ge = "ds-link-card_content_h40nd_68", Je = "ds-link-card_header_h40nd_97", Ke = "ds-link-card_footer_h40nd_98", Qe = "ds-link-card_heading_h40nd_109", Ue = "ds-link-card_link_h40nd_113", Xe = "ds-link-card_description_h40nd_118", Ye = "ds-link-card_meta-data_h40nd_135", Ze = "ds-link-card_decorative-link_h40nd_152", et = "ds-link-card_flags_h40nd_156", tt = "ds-link-card_brand-flag_h40nd_165", i = {
root: Me,
rootHorizontal: Re,
imageWrapper: $e,
content: Ge,
header: Je,
footer: Ke,
heading: Qe,
link: Ue,
description: Xe,
metaData: Ye,
decorativeLink: Ze,
flags: et,
brandFlag: tt
}, at = ({
href: p,
linkComponent: e,
flags: t,
flagListAriaLabel: m,
heading: f,
img: g,
brandFlag: o
}) => {
if (!p && !e)
throw new Error(j("DSLinkCard", "Please provide either the 'href' prop or a custom 'linkComponent'."));
if (p && e)
throw new Error(j("DSLinkCard", "Please provide either the 'href' prop or a custom 'linkComponent', but not both."));
if (!f)
throw new Error(j("DSLinkCard", "The 'heading' prop is required and must be provided."));
t && t.length > 6 && console.warn(j("DSLinkCard", "It is recommended to provide a maximum of 6 flags for optimal display.")), t && t.length > 0 && !m && console.warn(j("DSLinkCard", "When providing flags, please also ensure to add the 'flagListAriaLabel' to describe the list of flags for non sighted screen reader users.")), o && g === void 0 && console.warn(j("DSLinkCard", "The 'brandFlag' prop is set to true, but no 'img' prop is provided. The 'brandFlag' will have no effect without an image."));
}, it = (p) => {
const e = Ae.c(112);
let t, m, f, g, o, s, l, d, r, a, k, b, v, _;
e[0] !== p ? ({
heading: l,
brandFlag: t,
className: f,
cardClassNames: m,
decorativeLinkButtonProps: g,
description: o,
flagListAriaLabel: s,
flags: v,
href: d,
img: r,
linkComponent: a,
metaData: k,
orientation: _,
...b
} = p, e[0] = p, e[1] = t, e[2] = m, e[3] = f, e[4] = g, e[5] = o, e[6] = s, e[7] = l, e[8] = d, e[9] = r, e[10] = a, e[11] = k, e[12] = b, e[13] = v, e[14] = _) : (t = e[1], m = e[2], f = e[3], g = e[4], o = e[5], s = e[6], l = e[7], d = e[8], r = e[9], a = e[10], k = e[11], b = e[12], v = e[13], _ = e[14]);
let c, A;
e[15] !== t || e[16] !== s || e[17] !== l || e[18] !== d || e[19] !== r || e[20] !== a || e[21] !== v || e[22] !== _ ? (c = v === void 0 ? [] : v, A = _ === void 0 ? "vertical" : _, process.env.NODE_ENV !== "production" && at({
href: d,
linkComponent: a,
heading: l,
flags: c,
flagListAriaLabel: s,
img: r,
brandFlag: t
}), e[15] = t, e[16] = s, e[17] = l, e[18] = d, e[19] = r, e[20] = a, e[21] = v, e[22] = _, e[23] = c, e[24] = A) : (c = e[23], A = e[24]);
let B;
e[25] !== g ? (B = g || {}, e[25] = g, e[26] = B) : B = e[26];
const {
label: V,
iconName: ae,
variant: Pe,
hideLabel: ie,
size: Ee
} = B, ne = Ee === void 0 ? "small" : Ee, I = Pe === "ghost" ? "ghost" : "filled", re = k || c.length > 0 || V;
let O;
e[27] !== m ? (O = m || {}, e[27] = m, e[28] = O) : O = e[28];
const {
brandFlag: oe,
contentWrapper: se,
descriptionWrapper: le,
decorativeLink: de,
flagsWrapper: ce,
footerWrapper: he,
headerWrapper: pe,
heading: me,
imageWrapper: fe,
metaDataWrapper: ge
} = O, ke = A === "horizontal";
let q;
e[29] !== f || e[30] !== ke ? (q = n(i.root, f, {
[i.rootHorizontal]: ke
}), e[29] = f, e[30] = ke, e[31] = q) : q = e[31];
const ve = q;
let M;
e[32] !== oe ? (M = n(i.brandFlag, oe), e[32] = oe, e[33] = M) : M = e[33];
const _e = M;
let R;
e[34] !== se ? (R = n(i.content, se), e[34] = se, e[35] = R) : R = e[35];
const Le = R;
let $;
e[36] !== le ? ($ = n(i.description, le), e[36] = le, e[37] = $) : $ = e[37];
const be = $;
let G;
e[38] !== de ? (G = n(i.decorativeLink, de), e[38] = de, e[39] = G) : G = e[39];
const Ce = G;
let J;
e[40] !== ce ? (J = n(i.flags, ce), e[40] = ce, e[41] = J) : J = e[41];
const ue = J;
let K;
e[42] !== he ? (K = n(i.footer, he), e[42] = he, e[43] = K) : K = e[43];
const Ne = K;
let Q;
e[44] !== pe ? (Q = n(i.header, pe), e[44] = pe, e[45] = Q) : Q = e[45];
const De = Q;
let U;
e[46] !== me ? (U = n(i.heading, me), e[46] = me, e[47] = U) : U = e[47];
const Se = U;
let X;
e[48] !== fe ? (X = n(i.imageWrapper, fe), e[48] = fe, e[49] = X) : X = e[49];
const we = X;
let Y;
e[50] !== ge ? (Y = n(i.metaData, ge), e[50] = ge, e[51] = Y) : Y = e[51];
const Fe = Y;
let C, u, N, D, S, w, F, z;
e[52] !== b ? ({
download: u,
hrefLang: N,
ping: D,
referrerPolicy: S,
rel: w,
target: F,
type: z,
...C
} = b, e[52] = b, e[53] = C, e[54] = u, e[55] = N, e[56] = D, e[57] = S, e[58] = w, e[59] = F, e[60] = z) : (C = e[53], u = e[54], N = e[55], D = e[56], S = e[57], w = e[58], F = e[59], z = e[60]);
let Z;
e[61] !== u || e[62] !== d || e[63] !== N || e[64] !== a || e[65] !== D || e[66] !== S || e[67] !== w || e[68] !== F || e[69] !== z ? (Z = (L) => a && Be(a) ? Ie(a, {
...a.props,
className: n(i.link, a.props.className),
children: /* @__PURE__ */ P(Ve, { children: [
L,
" ",
a.props.children
] })
}) : /* @__PURE__ */ h("a", { href: d, className: i.link, download: u, hrefLang: N, ping: D, referrerPolicy: S, rel: w, target: F, type: z, children: L }), e[61] = u, e[62] = d, e[63] = N, e[64] = a, e[65] = D, e[66] = S, e[67] = w, e[68] = F, e[69] = z, e[70] = Z) : Z = e[70];
const ze = Z;
let ee;
e[71] !== ze || e[72] !== Se ? (ee = (L) => {
const Te = typeof L == "object" && L !== void 0, {
headingText: je,
headingSize: xe,
headingTag: ye
} = Te ? L : {
headingText: L
};
return /* @__PURE__ */ h(Oe, { tag: ye === void 0 ? "h3" : ye, size: xe === void 0 ? "medium" : xe, className: Se, children: ze(je) });
}, e[71] = ze, e[72] = Se, e[73] = ee) : ee = e[73];
const We = ee;
let W;
e[74] !== We || e[75] !== l ? (W = We(l), e[74] = We, e[75] = l, e[76] = W) : W = e[76];
let E;
e[77] !== o || e[78] !== be ? (E = o && /* @__PURE__ */ h("div", { className: be, children: o }), e[77] = o, e[78] = be, e[79] = E) : E = e[79];
let T;
e[80] !== De || e[81] !== W || e[82] !== E ? (T = /* @__PURE__ */ P("div", { className: De, children: [
W,
E
] }), e[80] = De, e[81] = W, e[82] = E, e[83] = T) : T = e[83];
let x;
e[84] !== I || e[85] !== Ce || e[86] !== ie || e[87] !== ae || e[88] !== V || e[89] !== ne || e[90] !== s || e[91] !== c || e[92] !== ue || e[93] !== Ne || e[94] !== re || e[95] !== k || e[96] !== Fe ? (x = re && /* @__PURE__ */ P("div", { className: Ne, children: [
k && /* @__PURE__ */ h("div", { className: Fe, children: k }),
c.length > 0 && /* @__PURE__ */ h("ul", { className: ue, "aria-label": s, children: c.map(nt) }),
V && /* @__PURE__ */ h(qe, { iconName: ae, iconPosition: "right", variant: I, hideLabel: ie, size: ne, isFlush: I === "ghost", "aria-hidden": !0, className: Ce, children: V })
] }), e[84] = I, e[85] = Ce, e[86] = ie, e[87] = ae, e[88] = V, e[89] = ne, e[90] = s, e[91] = c, e[92] = ue, e[93] = Ne, e[94] = re, e[95] = k, e[96] = Fe, e[97] = x) : x = e[97];
let y;
e[98] !== Le || e[99] !== T || e[100] !== x ? (y = /* @__PURE__ */ P("div", { className: Le, children: [
T,
x
] }), e[98] = Le, e[99] = T, e[100] = x, e[101] = y) : y = e[101];
let H;
e[102] !== t || e[103] !== _e || e[104] !== we || e[105] !== r ? (H = r && /* @__PURE__ */ P("div", { className: we, children: [
t && /* @__PURE__ */ h(He, { color: "orange-base", className: _e, children: t }),
r
] }), e[102] = t, e[103] = _e, e[104] = we, e[105] = r, e[106] = H) : H = e[106];
let te;
return e[107] !== C || e[108] !== ve || e[109] !== y || e[110] !== H ? (te = /* @__PURE__ */ P("div", { ...C, className: ve, children: [
y,
H
] }), e[107] = C, e[108] = ve, e[109] = y, e[110] = H, e[111] = te) : te = e[111], te;
};
it.displayName = "DSLinkCard";
function nt(p, e) {
return /* @__PURE__ */ h("li", { children: /* @__PURE__ */ h(He, { color: "grey-light", children: p }) }, e);
}
export {
it as D,
at as v
};