property-practice-ui 0.4.0 → 0.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/index.cjs +9 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +9 -2
- package/dist/index.js.map +1 -1
- package/dist/molecules.cjs +2 -2
- package/dist/molecules.cjs.map +1 -1
- package/dist/molecules.js +2 -2
- package/dist/molecules.js.map +1 -1
- package/dist/organisms.cjs +25 -3
- package/dist/organisms.cjs.map +1 -1
- package/dist/organisms.js +25 -3
- package/dist/organisms.js.map +1 -1
- package/package.json +1 -1
- package/src/molecules/ContentCard/ContentCard.tsx +1 -1
- package/src/molecules/SideNav/SideNav.tsx +1 -1
- package/src/organisms/FeatureCarousel/FeatureCarousel.tsx +3 -1
- package/src/organisms/Header/Header.tsx +27 -2
package/dist/organisms.js
CHANGED
|
@@ -1252,7 +1252,7 @@ var Container10 = styled41.div`
|
|
|
1252
1252
|
gap: 1rem;
|
|
1253
1253
|
background-color: #ffffff;
|
|
1254
1254
|
width: 284px;
|
|
1255
|
-
height:
|
|
1255
|
+
height: 100%;
|
|
1256
1256
|
padding: 1.5rem;
|
|
1257
1257
|
border-radius: 8px;
|
|
1258
1258
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
@@ -2158,12 +2158,13 @@ var CarouselContainer = styled41.div`
|
|
|
2158
2158
|
`;
|
|
2159
2159
|
var CardsWrapper = styled41.div`
|
|
2160
2160
|
display: flex;
|
|
2161
|
+
align-items: stretch;
|
|
2161
2162
|
gap: 1.5rem;
|
|
2162
2163
|
padding: 1rem 0;
|
|
2163
2164
|
|
|
2164
2165
|
/* Desktop: controlled by JS */
|
|
2165
2166
|
@media (min-width: 768px) {
|
|
2166
|
-
overflow
|
|
2167
|
+
overflow: hidden;
|
|
2167
2168
|
}
|
|
2168
2169
|
|
|
2169
2170
|
/* Mobile: native scroll with snap */
|
|
@@ -2180,6 +2181,7 @@ var CardsWrapper = styled41.div`
|
|
|
2180
2181
|
`;
|
|
2181
2182
|
var CardContainer = styled41.div`
|
|
2182
2183
|
display: flex;
|
|
2184
|
+
align-items: stretch;
|
|
2183
2185
|
gap: 1.5rem;
|
|
2184
2186
|
|
|
2185
2187
|
/* Desktop: transform animation */
|
|
@@ -2522,6 +2524,11 @@ var HeaderContainer3 = styled41.header`
|
|
|
2522
2524
|
background-color: #ffffff;
|
|
2523
2525
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
2524
2526
|
padding: 0 1rem;
|
|
2527
|
+
position: sticky;
|
|
2528
|
+
top: 0;
|
|
2529
|
+
z-index: 100;
|
|
2530
|
+
transform: translateY(${(props) => props.$isVisible ? "0" : "-100%"});
|
|
2531
|
+
transition: transform 0.3s ease-in-out;
|
|
2525
2532
|
`;
|
|
2526
2533
|
var LogoWrapper3 = styled41.div`
|
|
2527
2534
|
display: flex;
|
|
@@ -2599,7 +2606,22 @@ var Header3 = ({
|
|
|
2599
2606
|
secondaryBgVariant = "transparent",
|
|
2600
2607
|
secondaryTextVariant = "brand"
|
|
2601
2608
|
}) => {
|
|
2602
|
-
|
|
2609
|
+
const [isVisible, setIsVisible] = useState(true);
|
|
2610
|
+
const lastScrollY = useRef(0);
|
|
2611
|
+
useEffect(() => {
|
|
2612
|
+
const handleScroll = () => {
|
|
2613
|
+
const currentScrollY = window.scrollY;
|
|
2614
|
+
if (currentScrollY < lastScrollY.current) {
|
|
2615
|
+
setIsVisible(true);
|
|
2616
|
+
} else {
|
|
2617
|
+
setIsVisible(false);
|
|
2618
|
+
}
|
|
2619
|
+
lastScrollY.current = currentScrollY;
|
|
2620
|
+
};
|
|
2621
|
+
window.addEventListener("scroll", handleScroll, { passive: true });
|
|
2622
|
+
return () => window.removeEventListener("scroll", handleScroll);
|
|
2623
|
+
}, []);
|
|
2624
|
+
return /* @__PURE__ */ jsxs(HeaderContainer3, { $isVisible: isVisible, children: [
|
|
2603
2625
|
/* @__PURE__ */ jsx(LogoWrapper3, { children: /* @__PURE__ */ jsx("img", { src: logo, alt: "Logo" }) }),
|
|
2604
2626
|
/* @__PURE__ */ jsxs(ButtonGroup3, { children: [
|
|
2605
2627
|
/* @__PURE__ */ jsx(
|