@telefonica/mistica 16.5.0 → 16.6.0

package/dist-es/hero.js

@@ -78,90 +78,129 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { jsx as e, jsxs as s, Fragment as C } from "react/jsx-runtime";
 import * as $ from "react";
-import f from "classnames";
+import y from "classnames";
 import { useScreenSize as D } from "./hooks.js";
-import { Text3 as N, Text8 as G } from "./text.js";
-import j from "./grid-layout.js";
-import R from "./box.js";
-import g from "./stack.js";
-import A from "./button-group.js";
-import { vars as i } from "./skins/skin-contract.css-mistica.js";
-import { container as v, containerMobile as E, containerMinHeight as C, expandedContent as M, layout as b, vars as H, hero as V, containerDesktop as S, contentContainer as _, actions as z } from "./hero.css-mistica.js";
-import { vars as h } from "./image.css-mistica.js";
-import { useSlideshowContext as K } from "./carousel.js";
-import { getPrefixedDataAttributes as T } from "./utils/dom.js";
-import { useIsInverseOrMediaVariant as U } from "./theme-variant-context.js";
-import { applyCssVars as y } from "./utils/css.js";
-import { ResetResponsiveLayout as W, InternalResponsiveLayout as q } from "./responsive-layout.js";
-const O = {
-    default: i.colors.background,
-    alternative: i.colors.backgroundAlternative,
-    brand: i.colors.backgroundBrand,
-    "brand-secondary": i.colors.backgroundBrandSecondary,
+import { Text3 as R, Text8 as A } from "./text.js";
+import G from "./grid-layout.js";
+import H from "./box.js";
+import j from "./stack.js";
+import E from "./button-group.js";
+import { vars as d } from "./skins/skin-contract.css-mistica.js";
+import { container as B, containerMobile as M, containerMinHeight as S, expandedContent as V, layout as N, vars as T, hero as _, containerDesktop as O, contentContainer as z, flexColumn as F, actions as K } from "./hero.css-mistica.js";
+import { vars as b } from "./image.css-mistica.js";
+import { useSlideshowContext as U } from "./carousel.js";
+import { getPrefixedDataAttributes as k } from "./utils/dom.js";
+import { useIsInverseOrMediaVariant as W } from "./theme-variant-context.js";
+import { applyCssVars as g } from "./utils/css.js";
+import { ResetResponsiveLayout as q, InternalResponsiveLayout as J } from "./responsive-layout.js";
+import { isBiggerHeading as Q } from "./utils/headings.js";
+const w = {
+    default: d.colors.background,
+    alternative: d.colors.backgroundAlternative,
+    brand: d.colors.backgroundBrand,
+    "brand-secondary": d.colors.backgroundBrandSecondary,
     none: "transparent"
-}, k = (param)=>{
-    let { children: e, isInverse: o, backgroundColor: t } = param;
-    return /* @__PURE__ */ r(q, {
-        isInverse: o,
-        className: b,
-        innerDivClassName: b,
+}, I = (param)=>{
+    let { children: r, isInverse: t, backgroundColor: a } = param;
+    return /* @__PURE__ */ e(J, {
+        isInverse: t,
+        className: N,
+        innerDivClassName: N,
         shouldExpandWhenNested: !0,
-        backgroundColor: t !== null && t !== void 0 ? t : "transparent",
-        children: e
+        backgroundColor: a !== null && a !== void 0 ? a : "transparent",
+        children: r
     });
 }, x = (param)=>{
-    let { headline: e, title: o, titleAs: t = "h1", pretitle: l, description: c, descriptionLinesMax: a, extra: n, button: d, secondaryButton: p, buttonLink: s } = param;
-    return /* @__PURE__ */ m("section", {
-        className: _,
+    let { headline: r, title: t, titleAs: a = "h1", pretitle: l, pretitleAs: c, description: o, descriptionLinesMax: m, extra: p, button: f, secondaryButton: u, buttonLink: n } = param;
+    const v = t ? /* @__PURE__ */ e(A, {
+        as: a,
+        dataAttributes: {
+            testid: "title"
+        },
+        children: t
+    }) : void 0, i = l ? /* @__PURE__ */ e(R, {
+        as: c,
+        regular: !0,
+        dataAttributes: {
+            testid: "pretitle"
+        },
+        children: l
+    }) : void 0, h = r ? // assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
+    /* @__PURE__ */ e("div", {
+        "data-testid": "headline",
+        style: {
+            paddingBottom: 16,
+            order: -1
+        },
+        children: r
+    }) : void 0;
+    return /* @__PURE__ */ s("section", {
+        className: z,
         children: [
-            /* @__PURE__ */ m("div", {
+            /* @__PURE__ */ s("div", {
                 children: [
-                    /* @__PURE__ */ m(g, {
+                    /* @__PURE__ */ s(j, {
                         space: 16,
                         children: [
-                            e && e,
-                            /* @__PURE__ */ m(g, {
-                                space: 8,
-                                children: [
-                                    l && /* @__PURE__ */ r(N, {
-                                        as: "p",
-                                        regular: !0,
-                                        children: l
-                                    }),
-                                    o && /* @__PURE__ */ r(G, {
-                                        as: t,
-                                        children: o
-                                    })
-                                ]
+                            /* @__PURE__ */ e("div", {
+                                className: F,
+                                children: Q(a, c) ? /* @__PURE__ */ s(C, {
+                                    children: [
+                                        v,
+                                        h,
+                                        i && /* @__PURE__ */ e("div", {
+                                            style: {
+                                                paddingBottom: t ? 8 : 0,
+                                                order: -1
+                                            },
+                                            children: i
+                                        })
+                                    ]
+                                }) : /* @__PURE__ */ s(C, {
+                                    children: [
+                                        i && /* @__PURE__ */ e("div", {
+                                            style: {
+                                                paddingBottom: t ? 8 : 0
+                                            },
+                                            children: i
+                                        }),
+                                        h,
+                                        v
+                                    ]
+                                })
                             }),
-                            c && /* @__PURE__ */ r(N, {
+                            o && /* @__PURE__ */ e(R, {
                                 as: "p",
                                 regular: !0,
-                                color: i.colors.textSecondary,
-                                truncate: a,
-                                children: c
+                                color: d.colors.textSecondary,
+                                truncate: m,
+                                dataAttributes: {
+                                    testid: "description"
+                                },
+                                children: o
                             })
                         ]
                     }),
-                    n && /* @__PURE__ */ r("div", {
-                        children: n
+                    p && /* @__PURE__ */ e("div", {
+                        "data-testid": "slot",
+                        children: p
                     })
                 ]
             }),
-            (d || s) && /* @__PURE__ */ r("div", {
-                className: z,
-                children: /* @__PURE__ */ r(A, {
-                    primaryButton: d,
-                    secondaryButton: p,
-                    link: s
+            (f || n) && /* @__PURE__ */ e("div", {
+                className: K,
+                children: /* @__PURE__ */ e(E, {
+                    primaryButton: f,
+                    secondaryButton: u,
+                    link: n
                 })
             })
         ]
     });
-}, F = /*#__PURE__*/ $.forwardRef((_param, d)=>{
-    var { height: e, background: o = "default", media: t, desktopMediaPosition: l = "left", dataAttributes: c, noPaddingY: a } = _param, n = _object_without_properties(_param, [
+}, X = /*#__PURE__*/ $.forwardRef((_param, p)=>{
+    var { height: r, background: t = "default", media: a, desktopMediaPosition: l = "left", dataAttributes: c, noPaddingY: o } = _param, m = _object_without_properties(_param, [
         "height",
         "background",
         "media",
@@ -169,39 +208,37 @@ const O = {
         "dataAttributes",
         "noPaddingY"
     ]);
-    const { isTabletOrSmaller: p } = D(), s = K(), u = !!(s != null && s.withBullets), w = U(), B = o === "none" ? w : o === "brand" || o === "brand-secondary";
-    if (p) return /* @__PURE__ */ r(W, {
-        children: /* @__PURE__ */ r("div", {
-            style: y({
-                [h.mediaBorderRadius]: "0px"
+    const { isTabletOrSmaller: f } = D(), u = U(), n = !!(u != null && u.withBullets), v = W(), i = t === "none" ? v : t === "brand" || t === "brand-secondary";
+    if (f) return /* @__PURE__ */ e(q, {
+        children: /* @__PURE__ */ e("div", {
+            style: g({
+                [b.mediaBorderRadius]: "0px"
             }),
-            children: /* @__PURE__ */ m("div", _object_spread_props(_object_spread({}, T(_object_spread({
-                "component-name": "Hero"
-            }, c))), {
-                ref: d,
-                style: _object_spread({}, e === "100vh" ? {
+            children: /* @__PURE__ */ s("div", _object_spread_props(_object_spread({}, k(c, "Hero")), {
+                ref: p,
+                style: _object_spread({}, r === "100vh" ? {
                     maxHeight: "-webkit-fill-available"
-                } : {}, y({
-                    [H.height]: typeof e == "number" ? `${e}px` : e !== null && e !== void 0 ? e : "100%",
-                    [h.mediaBorderRadius]: "0px"
+                } : {}, g({
+                    [T.height]: typeof r == "number" ? `${r}px` : r !== null && r !== void 0 ? r : "100%",
+                    [b.mediaBorderRadius]: "0px"
                 })),
-                className: f(v, E, {
-                    [C]: !a
+                className: y(B, M, {
+                    [S]: !o
                 }),
                 children: [
-                    t,
-                    /* @__PURE__ */ r(k, {
-                        isInverse: B,
-                        backgroundColor: O[o],
-                        children: /* @__PURE__ */ r("div", {
-                            className: M,
-                            children: /* @__PURE__ */ r("div", {
+                    a,
+                    /* @__PURE__ */ e(I, {
+                        isInverse: i,
+                        backgroundColor: w[t],
+                        children: /* @__PURE__ */ e("div", {
+                            className: V,
+                            children: /* @__PURE__ */ e("div", {
                                 style: {
                                     paddingTop: 24,
-                                    paddingBottom: u ? 48 : a ? 0 : 24
+                                    paddingBottom: n ? 48 : o ? 0 : 24
                                 },
-                                className: b,
-                                children: /* @__PURE__ */ r(x, _object_spread({}, n))
+                                className: N,
+                                children: /* @__PURE__ */ e(x, _object_spread({}, m))
                             })
                         })
                     })
@@ -209,50 +246,48 @@ const O = {
             }))
         })
     });
-    const I = l === "left" ? t : /* @__PURE__ */ r(R, {
+    const h = l === "left" ? a : /* @__PURE__ */ e(H, {
         paddingRight: 24,
-        children: /* @__PURE__ */ r(x, _object_spread({}, n))
-    }), L = l === "right" ? t : /* @__PURE__ */ r(R, {
+        children: /* @__PURE__ */ e(x, _object_spread({}, m))
+    }), L = l === "right" ? a : /* @__PURE__ */ e(H, {
         paddingLeft: 24,
-        children: /* @__PURE__ */ r(x, _object_spread({}, n))
+        children: /* @__PURE__ */ e(x, _object_spread({}, m))
     });
-    return /* @__PURE__ */ r("div", _object_spread_props(_object_spread({}, T(_object_spread({
-        "component-name": "Hero"
-    }, c))), {
-        ref: d,
-        style: _object_spread_props(_object_spread({}, e === "100vh" ? {
+    return /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, k(c, "Hero")), {
+        ref: p,
+        style: _object_spread_props(_object_spread({}, r === "100vh" ? {
             maxHeight: "-webkit-fill-available"
-        } : {}, y({
-            [H.height]: typeof e == "number" ? `${e}px` : e !== null && e !== void 0 ? e : "100%",
-            [h.mediaBorderRadius]: i.borderRadii.container
+        } : {}, g({
+            [T.height]: typeof r == "number" ? `${r}px` : r !== null && r !== void 0 ? r : "100%",
+            [b.mediaBorderRadius]: d.borderRadii.container
         })), {
-            background: O[o]
+            background: w[t]
         }),
-        className: V,
-        children: /* @__PURE__ */ r(k, {
-            isInverse: B,
-            children: /* @__PURE__ */ r(j, {
+        className: _,
+        children: /* @__PURE__ */ e(I, {
+            isInverse: i,
+            children: /* @__PURE__ */ e(G, {
                 template: "6+6",
-                left: /* @__PURE__ */ r("div", {
+                left: /* @__PURE__ */ e("div", {
                     style: {
-                        paddingTop: a ? 0 : 56,
-                        paddingBottom: a && !u ? 0 : 56
+                        paddingTop: o ? 0 : 56,
+                        paddingBottom: o && !n ? 0 : 56
                     },
-                    className: f(v, S, {
-                        [C]: !a
+                    className: y(B, O, {
+                        [S]: !o
                     }),
-                    children: I
+                    children: h
                 }),
-                right: /* @__PURE__ */ r("div", {
+                right: /* @__PURE__ */ e("div", {
                     style: {
-                        paddingTop: a ? 0 : 56,
-                        paddingBottom: a && !u ? 0 : 56
+                        paddingTop: o ? 0 : 56,
+                        paddingBottom: o && !n ? 0 : 56
                     },
-                    className: f(v, S),
+                    className: y(B, O),
                     children: L
                 })
             })
         })
     }));
-}), dr = F;
-export { dr as default };
+}), fe = X;
+export { fe as default };

package/dist-es/highlighted-card.js

@@ -82,17 +82,17 @@ import { jsxs as l, jsx as i, Fragment as C } from "react/jsx-runtime";
 import * as u from "react";
 import { useIsInverseOrMediaVariant as g } from "./theme-variant-context.js";
 import y from "./stack.js";
-import { BaseTouchable as k } from "./touchable.js";
-import { Text as H, Text2 as T } from "./text.js";
-import { text4 as A } from "./text-props.js";
+import { BaseTouchable as A } from "./touchable.js";
+import { Text as H, Text2 as k } from "./text.js";
+import { text4 as T } from "./text-props.js";
 import { Boxed as M } from "./boxed.js";
 import N, { useIsDismissable as P } from "./maybe-dismissable.js";
 import { container as R, textContainerVariant as $, imageContent as D, touchableContainer as O } from "./highlighted-card.css-mistica.js";
 import { vars as S } from "./skins/skin-contract.css-mistica.js";
 import { useTheme as j } from "./hooks.js";
-const B = /*#__PURE__*/ u.forwardRef((n, e)=>{
-    var _n_isInverse;
-    const { title: s, description: r, imageUrl: a, imageFit: o, imageAlt: m, titleAs: f = "h3", width: d, dataAttributes: b, titleLinesMax: v, descriptionLinesMax: x } = n, t = _object_without_properties(n, [
+const B = /*#__PURE__*/ u.forwardRef((s, e)=>{
+    var _s_isInverse;
+    const { title: o, description: r, imageUrl: a, imageFit: n, imageAlt: c, titleAs: b = "h3", width: m, dataAttributes: f, titleLinesMax: v, descriptionLinesMax: x } = s, t = _object_without_properties(s, [
         "title",
         "description",
         "imageUrl",
@@ -103,14 +103,15 @@ const B = /*#__PURE__*/ u.forwardRef((n, e)=>{
         "dataAttributes",
         "titleLinesMax",
         "descriptionLinesMax"
-    ]), I = g(), p = (_n_isInverse = n.isInverse) !== null && _n_isInverse !== void 0 ? _n_isInverse : I, h = P(), { textPresets: w } = j(), c = /* @__PURE__ */ l(M, {
+    ]), p = g(), I = (_s_isInverse = s.isInverse) !== null && _s_isInverse !== void 0 ? _s_isInverse : p, h = P(), { textPresets: w } = j(), d = /* @__PURE__ */ l(M, {
         ref: e,
-        isInverse: p,
+        variant: I ? "inverse" : "default",
         className: R,
         dataAttributes: _object_spread({
-            "component-name": "HighlightedCard"
-        }, b),
-        width: d ? `${d}px` : "100%",
+            "component-name": "HighlightedCard",
+            testid: "HighlightedCard"
+        }, f),
+        width: m ? `${m}px` : "100%",
         minHeight: "100%",
         children: [
             /* @__PURE__ */ l("div", {
@@ -121,19 +122,25 @@ const B = /*#__PURE__*/ u.forwardRef((n, e)=>{
                     /* @__PURE__ */ l(y, {
                         space: 8,
                         children: [
-                            !!s && /* @__PURE__ */ i(H, _object_spread_props(_object_spread({}, A), {
+                            !!o && /* @__PURE__ */ i(H, _object_spread_props(_object_spread({}, T), {
                                 truncate: v,
                                 weight: w.cardTitle.weight,
-                                as: f,
+                                as: b,
                                 hyphens: "auto",
-                                children: s
+                                dataAttributes: {
+                                    testid: "title"
+                                },
+                                children: o
                             })),
-                            !!r && /* @__PURE__ */ i(T, {
+                            !!r && /* @__PURE__ */ i(k, {
                                 regular: !0,
                                 color: S.colors.textSecondary,
                                 truncate: x,
                                 as: "p",
                                 hyphens: "auto",
+                                dataAttributes: {
+                                    testid: "description"
+                                },
                                 children: r
                             })
                         ]
@@ -151,38 +158,40 @@ const B = /*#__PURE__*/ u.forwardRef((n, e)=>{
                     })
                 ]
             }),
-            a && /* @__PURE__ */ i("div", _object_spread_props(_object_spread({}, m ? {
+            a && /* @__PURE__ */ i("div", _object_spread_props(_object_spread({
+                "data-testid": "image"
+            }, c ? {
                 role: "img",
-                "aria-label": m
+                "aria-label": c
             } : {}), {
                 className: D,
                 style: {
                     backgroundImage: `url(${a})`,
                     backgroundRepeat: "no-repeat",
-                    backgroundSize: o === "fit" ? "contain" : "cover",
-                    backgroundPosition: o === "fit" ? "bottom right" : `center ${o === "fill-center" ? "center" : "right"}`
+                    backgroundSize: n === "fit" ? "contain" : "cover",
+                    backgroundPosition: n === "fit" ? "bottom right" : `center ${n === "fill-center" ? "center" : "right"}`
                 }
             }))
         ]
     });
-    return t.button ? c : t.onPress || t.to || t.href ? /* @__PURE__ */ i(k, _object_spread_props(_object_spread({}, t), {
+    return t.button ? d : t.onPress || t.to || t.href ? /* @__PURE__ */ i(A, _object_spread_props(_object_spread({}, t), {
         className: O,
-        children: c
-    })) : c;
-}), F = /*#__PURE__*/ u.forwardRef((_param, s)=>{
-    var { "aria-label": n } = _param, e = _object_without_properties(_param, [
+        children: d
+    })) : d;
+}), F = /*#__PURE__*/ u.forwardRef((_param, o)=>{
+    var { "aria-label": s } = _param, e = _object_without_properties(_param, [
         "aria-label"
     ]);
     var _e_isInverse;
-    const r = n || e.title || e.description, a = g(), o = (_e_isInverse = e.isInverse) !== null && _e_isInverse !== void 0 ? _e_isInverse : a;
+    const r = s || e.title || e.description, a = g(), n = (_e_isInverse = e.isInverse) !== null && _e_isInverse !== void 0 ? _e_isInverse : a;
     return /* @__PURE__ */ i(N, {
         onClose: e.onClose,
         "aria-label": r,
         width: e.width,
-        variant: e.imageUrl ? "media" : o ? "inverse" : void 0,
+        variant: e.imageUrl ? "media" : n ? "inverse" : void 0,
         children: /* @__PURE__ */ i(B, _object_spread_props(_object_spread({}, e), {
             "aria-label": r,
-            ref: s
+            ref: o
         }))
     });
 }), X = F;