@telefonica/mistica 16.5.0 → 16.6.0

package/dist-es/header.js

@@ -78,164 +78,234 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { jsx as t, jsxs as n, Fragment as k } from "react/jsx-runtime";
 import u from "./box.js";
-import p from "./stack.js";
-import g from "./responsive-layout.js";
-import k from "./grid-layout.js";
-import { useSetOverscrollColor as T } from "./overscroll-color-context.js";
-import { Text2 as y, Text3 as f, Text7 as B, Text6 as H } from "./text.js";
-import { vars as a } from "./skins/skin-contract.css-mistica.js";
-import { hideOnTabletOrSmaller as L, hideOnDesktop as S, breadcrumbs as v } from "./header.css-mistica.js";
-import { getPrefixedDataAttributes as C } from "./utils/dom.js";
-import { Title3 as R, Title4 as M } from "./title.js";
-const P = (param)=>{
-    let { headline: r, pretitle: e, pretitleAs: t, title: l, titleAs: c = "h2", description: d, dataAttributes: h, small: i = !1 } = param;
-    return /* @__PURE__ */ o(p, {
+import h from "./stack.js";
+import f from "./responsive-layout.js";
+import T from "./grid-layout.js";
+import { useSetOverscrollColor as x } from "./overscroll-color-context.js";
+import { Text2 as A, Text3 as g, Text7 as C, Text6 as S } from "./text.js";
+import { vars as s } from "./skins/skin-contract.css-mistica.js";
+import { flexColumn as L, hideOnTabletOrSmaller as M, hideOnDesktop as N, breadcrumbs as P } from "./header.css-mistica.js";
+import { getPrefixedDataAttributes as j } from "./utils/dom.js";
+import { Title3 as O, Title4 as R } from "./title.js";
+import { isBiggerHeading as F } from "./utils/headings.js";
+const Z = (param)=>{
+    let { headline: o, pretitle: e, pretitleAs: r, title: d, titleAs: a = "h2", description: i, dataAttributes: b, small: c = !1 } = param;
+    const l = (()=>{
+        if (!e) return null;
+        const y = {
+            regular: !0,
+            color: s.colors.textPrimary,
+            as: r,
+            dataAttributes: {
+                testid: "pretitle"
+            }
+        };
+        if (typeof e == "string") return /* @__PURE__ */ t(g, _object_spread_props(_object_spread({}, y), {
+            children: e
+        }));
+        const { text: B } = e, H = _object_without_properties(e, [
+            "text"
+        ]);
+        return /* @__PURE__ */ t(g, _object_spread_props(_object_spread({}, y, H), {
+            children: B
+        }));
+    })(), p = d ? c ? /* @__PURE__ */ t(O, {
+        as: a,
+        dataAttributes: {
+            testid: "title"
+        },
+        children: d
+    }) : /* @__PURE__ */ t(R, {
+        as: a,
+        dataAttributes: {
+            testid: "title"
+        },
+        children: d
+    }) : void 0, v = o ? // assuming that the headline will always be followed by one of: pretitle, title, description
+    /* @__PURE__ */ t("div", {
+        style: {
+            paddingBottom: 8,
+            order: -1
+        },
+        "data-testid": "headline",
+        children: o
+    }) : void 0;
+    return /* @__PURE__ */ t(h, {
         space: {
             mobile: 24,
             desktop: 32
         },
-        dataAttributes: h,
-        children: (l || e || d) && /* @__PURE__ */ o(u, {
+        dataAttributes: _object_spread({
+            testid: "Header"
+        }, b),
+        children: (d || e || i) && /* @__PURE__ */ t(u, {
             paddingRight: 16,
-            children: /* @__PURE__ */ s(p, {
-                space: 8,
+            children: /* @__PURE__ */ n("div", {
+                className: L,
                 children: [
-                    r,
-                    e && ((n, b)=>{
-                        if (typeof n == "string") return /* @__PURE__ */ o(f, _object_spread_props(_object_spread({
-                            regular: !0
-                        }, b), {
-                            children: n
-                        }));
-                        const { text: N } = n, x = _object_without_properties(n, [
-                            "text"
-                        ]);
-                        return /* @__PURE__ */ o(f, _object_spread_props(_object_spread({
-                            regular: !0
-                        }, b, x), {
-                            children: n.text
-                        }));
-                    })(e, {
-                        color: a.colors.textPrimary,
-                        as: t
+                    F(a, r) ? /* @__PURE__ */ n(k, {
+                        children: [
+                            p && /* @__PURE__ */ t("div", {
+                                style: {
+                                    paddingBottom: i ? 8 : 0
+                                },
+                                children: p
+                            }),
+                            v,
+                            l && /* @__PURE__ */ t("div", {
+                                style: {
+                                    paddingBottom: e || i ? 8 : 0,
+                                    order: -1
+                                },
+                                children: l
+                            })
+                        ]
+                    }) : /* @__PURE__ */ n(k, {
+                        children: [
+                            l && /* @__PURE__ */ t("div", {
+                                style: {
+                                    paddingBottom: d || i ? 8 : 0
+                                },
+                                children: l
+                            }),
+                            v,
+                            p && /* @__PURE__ */ t("div", {
+                                style: {
+                                    paddingBottom: i ? 8 : 0
+                                },
+                                children: p
+                            })
+                        ]
                     }),
-                    l && (i ? /* @__PURE__ */ o(R, {
-                        as: c,
-                        children: l
-                    }) : /* @__PURE__ */ o(M, {
-                        as: c,
-                        children: l
-                    })),
-                    d && (i ? /* @__PURE__ */ o(y, {
-                        regular: !0,
-                        color: a.colors.textSecondary,
-                        children: d
-                    }) : /* @__PURE__ */ o(f, {
-                        regular: !0,
-                        color: a.colors.textSecondary,
-                        children: d
-                    }))
+                    i && /* @__PURE__ */ t("div", {
+                        style: {
+                            order: 1
+                        },
+                        children: c ? /* @__PURE__ */ t(A, {
+                            regular: !0,
+                            color: s.colors.textSecondary,
+                            dataAttributes: {
+                                testid: "description"
+                            },
+                            children: i
+                        }) : /* @__PURE__ */ t(g, {
+                            regular: !0,
+                            color: s.colors.textSecondary,
+                            dataAttributes: {
+                                testid: "description"
+                            },
+                            children: i
+                        })
+                    })
                 ]
             })
         })
     });
-}, Q = (param)=>{
-    let { title: r, titleAs: e = "h1", description: t, button: l } = param;
-    return /* @__PURE__ */ s(p, {
+}, _ = (param)=>{
+    let { title: o, titleAs: e = "h1", description: r, button: d, dataAttributes: a } = param;
+    return /* @__PURE__ */ n(h, {
         space: 32,
+        dataAttributes: _object_spread({
+            testid: "MainSectionHeader"
+        }, a),
         children: [
-            /* @__PURE__ */ s(p, {
+            /* @__PURE__ */ n(h, {
                 space: {
                     mobile: 12,
                     desktop: 16
                 },
                 children: [
-                    r && /* @__PURE__ */ o(B, {
+                    o && /* @__PURE__ */ t(C, {
                         as: e,
-                        children: r
+                        dataAttributes: {
+                            testid: "title"
+                        },
+                        children: o
                     }),
-                    t && /* @__PURE__ */ o(H, {
-                        children: t
+                    r && /* @__PURE__ */ t(S, {
+                        dataAttributes: {
+                            testid: "description"
+                        },
+                        children: r
                     })
                 ]
             }),
-            l
+            d
         ]
     });
-}, U = (param)=>{
-    let { isInverse: r = !1, breadcrumbs: e, header: t, extra: l, sideBySideExtraOnDesktop: c = !1, dataAttributes: d, bleed: h = !1, noPaddingY: i = !1 } = param;
-    const m = h && r && l, n = /* @__PURE__ */ s("div", {
+}, $ = (param)=>{
+    let { isInverse: o = !1, breadcrumbs: e, header: r, extra: d, sideBySideExtraOnDesktop: a = !1, dataAttributes: i, bleed: b = !1, noPaddingY: c = !1 } = param;
+    const m = b && o && d, l = /* @__PURE__ */ n("div", {
         children: [
-            e && /* @__PURE__ */ o("div", {
-                className: v,
+            e && /* @__PURE__ */ t("div", {
+                className: P,
                 children: e
             }),
-            t
+            r
         ]
     });
-    return T(r ? {
-        topColor: a.colors.backgroundBrandTop
-    } : {}), /* @__PURE__ */ s("div", _object_spread_props(_object_spread({}, C(_object_spread({
-        "component-name": "HeaderLayout"
-    }, d))), {
+    return x(o ? {
+        topColor: s.colors.backgroundBrandTop
+    } : {}), /* @__PURE__ */ n("div", _object_spread_props(_object_spread({}, j(i, "HeaderLayout")), {
         children: [
-            /* @__PURE__ */ o(g, {
-                isInverse: r,
-                children: /* @__PURE__ */ o(u, {
-                    paddingTop: i ? 0 : {
-                        mobile: t ? 32 : 0,
+            /* @__PURE__ */ t(f, {
+                variant: o ? "inverse" : void 0,
+                children: /* @__PURE__ */ t(u, {
+                    paddingTop: c ? 0 : {
+                        mobile: r ? 32 : 0,
                         desktop: e ? 16 : 48
                     },
                     paddingBottom: {
-                        mobile: i && !m ? 0 : 24,
-                        desktop: m && !c ? 32 : i ? 0 : 48
+                        mobile: c && !m ? 0 : 24,
+                        desktop: m && !a ? 32 : c ? 0 : 48
                     },
-                    children: c ? /* @__PURE__ */ o(k, {
+                    children: a ? /* @__PURE__ */ t(T, {
                         template: "6+6",
-                        left: n,
-                        right: /* @__PURE__ */ o("div", {
-                            className: m ? L : "",
-                            children: /* @__PURE__ */ o(u, {
+                        left: l,
+                        right: /* @__PURE__ */ t("div", {
+                            className: m ? M : "",
+                            children: /* @__PURE__ */ t(u, {
                                 paddingTop: {
-                                    mobile: t ? 24 : 0,
+                                    mobile: r ? 24 : 0,
                                     desktop: 0
                                 },
-                                children: l
+                                children: d
                             })
                         })
-                    }) : /* @__PURE__ */ s(p, {
-                        space: t ? {
+                    }) : /* @__PURE__ */ n(h, {
+                        space: r ? {
                             mobile: 24,
                             desktop: 32
                         } : 0,
                         children: [
-                            n,
-                            !m && l
+                            l,
+                            !m && d
                         ]
                     })
                 })
             }),
-            m && /* @__PURE__ */ o(g, {
-                className: c ? S : "",
-                backgroundColor: `linear-gradient(to bottom, ${a.colors.backgroundBrandBottom} 40px, ${a.colors.background} 0%)`,
-                children: l
+            m && /* @__PURE__ */ t(f, {
+                className: a ? N : "",
+                backgroundColor: `linear-gradient(to bottom, ${s.colors.backgroundBrandBottom} 40px, ${s.colors.background} 0%)`,
+                children: d
             })
         ]
     }));
-}, V = (param)=>{
-    let { isInverse: r = !1, children: e, dataAttributes: t } = param;
-    return T(r ? {
-        topColor: a.colors.backgroundBrandTop
-    } : {}), /* @__PURE__ */ o(g, {
-        isInverse: r,
+}, E = (param)=>{
+    let { isInverse: o = !1, children: e, dataAttributes: r } = param;
+    return x(o ? {
+        topColor: s.colors.backgroundBrandTop
+    } : {}), /* @__PURE__ */ t(f, {
+        variant: o ? "inverse" : void 0,
         dataAttributes: _object_spread({
-            "component-name": "MainSectionHeaderLayout"
-        }, t),
-        children: /* @__PURE__ */ o(k, {
+            "component-name": "MainSectionHeaderLayout",
+            testid: "MainSectionHeaderLayout"
+        }, r),
+        children: /* @__PURE__ */ t(T, {
             template: "6+6",
-            left: /* @__PURE__ */ o(u, {
+            left: /* @__PURE__ */ t(u, {
                 paddingTop: {
                     mobile: 12,
                     desktop: 48
@@ -250,4 +320,4 @@ const P = (param)=>{
         })
     });
 };
-export { P as Header, U as HeaderLayout, Q as MainSectionHeader, V as MainSectionHeaderLayout };
+export { Z as Header, $ as HeaderLayout, _ as MainSectionHeader, E as MainSectionHeaderLayout };

package/dist-es/hero.css-mistica.js

@@ -1,6 +1,6 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./hero.css.ts.vanilla.css-mistica.js";
-var o = "_16rbpto9 _1y2v1nfho _1y2v1nfia _1y2v1nfi4", v = "_16rbpto3 _1y2v1nfho", t = "_1y2v1nfi3 _1y2v1nfis", a = "_16rbpto5", i = "_1y2v1nfhu", _ = "_1y2v1nfis _1y2v1nfho _1y2v1nfi0 _1y2v1nfhu", e = "_16rbptob", y = "_1y2v1nfis", f = "_16rbptoa", p = {
+var v = "_16rbpto9 _1y2v1nfho _1y2v1nfia _1y2v1nfi4", o = "_16rbpto3 _1y2v1nfho", a = "_1y2v1nfi3 _1y2v1nfis", t = "_16rbpto5", _ = "_1y2v1nfhu", i = "_1y2v1nfis _1y2v1nfho _1y2v1nfi0 _1y2v1nfhu", e = "_16rbptob", f = "_1y2v1nfho _1y2v1nfhu", y = "_1y2v1nfis", h = "_16rbptoa", p = {
     height: "var(--_16rbpto0)"
 };
-export { o as actions, v as container, t as containerDesktop, a as containerMinHeight, i as containerMobile, _ as contentContainer, e as expandedContent, y as hero, f as layout, p as vars };
+export { v as actions, o as container, a as containerDesktop, t as containerMinHeight, _ as containerMobile, i as contentContainer, e as expandedContent, f as flexColumn, y as hero, h as layout, p as vars };