@npm_leadtech/legal-contracts-ui 0.58.0 → 0.58.2

package/dist/components/ContactBanner.d.ts

@@ -7,5 +7,6 @@ export declare interface ContactBannerProps {
     phoneNumber?: string;
     contactHoursText?: string;
     contactHours?: string;
+    isScrolled?: boolean;
 }
 

package/dist/components/ContactBanner.js

@@ -1,16 +1,28 @@
 import { jsx as e, jsxs as n } from "react/jsx-runtime";
 import "react";
 import { InfoIcon as r } from "./InfoIcon.js";
-const m = ({ contactText: s, phoneNumber: l, contactHoursText: t, contactHours: a }) => /* @__PURE__ */ e("section", { className: "flex w-full justify-center border-b border-neutral-200 bg-neutral-50 px-4 py-2", children: /* @__PURE__ */ n("div", { className: "flex flex-wrap items-center justify-center gap-4 text-center text-neutral-900 md:text-left", children: [
-  s && /* @__PURE__ */ e("p", { className: "text-small hidden sm:block", children: s }),
-  /* @__PURE__ */ e("div", { className: "h-5 w-5", children: /* @__PURE__ */ e(r, {}) }),
-  l && /* @__PURE__ */ e("a", { href: `tel:${l}`, className: "text-small block font-bold sm:hidden", children: l }),
-  l && /* @__PURE__ */ e("p", { className: "text-small hidden font-bold sm:block", children: l }),
-  /* @__PURE__ */ n("div", { className: "text-small flex items-center gap-1", children: [
-    t && /* @__PURE__ */ e("span", { className: "hidden sm:block", children: t }),
-    a && /* @__PURE__ */ e("span", { children: a })
-  ] })
-] }) });
+const o = ({
+  contactText: s,
+  phoneNumber: l,
+  contactHoursText: t,
+  contactHours: a,
+  isScrolled: i
+}) => /* @__PURE__ */ e(
+  "section",
+  {
+    className: `flex w-full justify-center border-b border-neutral-200 bg-neutral-50 px-4 transition-all duration-500 ease-in-out ${i ? "h-0 py-0" : "h-8.75 py-2"}`,
+    children: /* @__PURE__ */ n("div", { className: "flex flex-wrap items-center justify-center gap-4 text-center text-neutral-900 md:text-left", children: [
+      s && /* @__PURE__ */ e("p", { className: "text-small hidden sm:block", children: s }),
+      /* @__PURE__ */ e("div", { className: "h-5 w-5", children: /* @__PURE__ */ e(r, {}) }),
+      l && /* @__PURE__ */ e("a", { href: `tel:${l}`, className: "text-small block font-bold sm:hidden", children: l }),
+      l && /* @__PURE__ */ e("p", { className: "text-small hidden font-bold sm:block", children: l }),
+      /* @__PURE__ */ n("div", { className: "text-small flex items-center gap-1", children: [
+        t && /* @__PURE__ */ e("span", { className: "hidden sm:block", children: t }),
+        a && /* @__PURE__ */ e("span", { children: a })
+      ] })
+    ] })
+  }
+);
 export {
-  m as ContactBanner
+  o as ContactBanner
 };

package/dist/components/Header.d.ts

@@ -2,6 +2,14 @@ import { FC } from 'react';
 import * as React_2 from 'react';
 import { ReactNode } from 'react';
 
+export interface ContactBannerProps {
+    contactText?: string;
+    phoneNumber?: string;
+    contactHoursText?: string;
+    contactHours?: string;
+    isScrolled?: boolean;
+}
+
 export interface FormattedLanguageItem {
     code: string;
     name: string;
@@ -18,6 +26,7 @@ export declare interface HeaderProps {
     languageSelectorProps?: LanguageSelectorProps;
     userActions: ReactNode;
     mobileMenu: Omit<MobileMenuProps, 'logo' | 'userActions' | 'searchBarProps'>;
+    contactBannerProps: Omit<ContactBannerProps, 'isScrolled'>;
 }
 
 export interface LanguageSelectorProps {

package/dist/components/Header.js

@@ -1,44 +1,63 @@
-import { jsxs as r, Fragment as m, jsx as e } from "react/jsx-runtime";
-import "react";
-import { MobileMenu as c } from "./MobileMenu.js";
-import { NavMenu as p } from "./NavMenu.js";
-import { LanguageSelector as s } from "./LanguageSelector.js";
-import { ScalatorIcon as x } from "./ScalatorIcon.js";
-import { SearchBar as o } from "./SearchBar.js";
-const v = ({
-  logo: a,
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { useState as p, useEffect as f } from "react";
+import { ContactBanner as x } from "./ContactBanner.js";
+import { MobileMenu as h } from "./MobileMenu.js";
+import { NavMenu as u } from "./NavMenu.js";
+import { LanguageSelector as w } from "./LanguageSelector.js";
+import { ScalatorIcon as v } from "./ScalatorIcon.js";
+import { SearchBar as g } from "./SearchBar.js";
+const O = ({
+  logo: l,
   navMenu: d,
-  searchBarProps: i,
-  languageSelectorProps: l,
+  searchBarProps: a,
+  languageSelectorProps: i,
   userActions: n,
-  mobileMenu: t
-}) => /* @__PURE__ */ r(m, { children: [
-  /* @__PURE__ */ e("header", { className: "bg-primary-50", children: /* @__PURE__ */ r("div", { className: "flex w-full items-center justify-between px-4 py-4 text-neutral-800 md:px-8", children: [
-    /* @__PURE__ */ r("div", { className: "flex flex-1 items-center gap-8", children: [
-      a,
-      /* @__PURE__ */ e(p, { className: "hidden lg:block", ...d })
-    ] }),
-    /* @__PURE__ */ r("div", { className: "text-medium hidden flex-wrap items-center gap-4 lg:flex xl:gap-6", children: [
-      /* @__PURE__ */ e(o, { ...i }),
-      l && /* @__PURE__ */ e("div", { className: "hidden xl:block", children: /* @__PURE__ */ e(s, { ...l }) }),
-      n
-    ] }),
-    /* @__PURE__ */ r(
-      "button",
+  mobileMenu: t,
+  contactBannerProps: c
+}) => {
+  const [o, m] = p(!1);
+  return f(() => {
+    const s = () => {
+      m(window.scrollY > 10);
+    };
+    return window.addEventListener("scroll", s, { passive: !0 }), () => {
+      window.removeEventListener("scroll", s);
+    };
+  }, []), /* @__PURE__ */ r("div", { className: "sticky top-0 z-1000 flex w-full flex-col", children: [
+    /* @__PURE__ */ e(x, { isScrolled: o, ...c }),
+    /* @__PURE__ */ e(
+      "header",
       {
-        className: "text-small text-primary-500 flex items-center justify-center gap-1 rounded border border-neutral-400 bg-white px-2 py-1 lg:hidden",
-        onClick: t.onOpen,
-        "aria-label": "Open menu",
-        "aria-expanded": t.isOpen,
-        children: [
-          t.openText,
-          /* @__PURE__ */ e(x, {})
-        ]
+        className: `transition-colors duration-300 ease-in-out ${o ? "bg-white shadow-md" : "bg-primary-50"}`,
+        children: /* @__PURE__ */ r("div", { className: "flex w-full items-center justify-between px-4 py-4 text-neutral-800 md:px-8", children: [
+          /* @__PURE__ */ r("div", { className: "flex flex-1 items-center gap-8", children: [
+            l,
+            /* @__PURE__ */ e(u, { className: "hidden lg:block", ...d })
+          ] }),
+          /* @__PURE__ */ r("div", { className: "text-medium hidden flex-wrap items-center gap-4 lg:flex xl:gap-6", children: [
+            /* @__PURE__ */ e(g, { ...a }),
+            i && /* @__PURE__ */ e("div", { className: "hidden xl:block", children: /* @__PURE__ */ e(w, { ...i }) }),
+            n
+          ] }),
+          /* @__PURE__ */ r(
+            "button",
+            {
+              className: "text-small text-primary-500 flex items-center justify-center gap-1 rounded border border-neutral-400 bg-white px-2 py-1 lg:hidden",
+              onClick: t.onOpen,
+              "aria-label": "Open menu",
+              "aria-expanded": t.isOpen,
+              children: [
+                t.openText,
+                /* @__PURE__ */ e(v, {})
+              ]
+            }
+          )
+        ] })
       }
-    )
-  ] }) }),
-  /* @__PURE__ */ e(c, { ...t, logo: a, userActions: n, searchBarProps: i })
-] });
+    ),
+    /* @__PURE__ */ e(h, { ...t, logo: l, userActions: n, searchBarProps: a })
+  ] });
+};
 export {
-  v as Header
+  O as Header
 };