@zenpatient-org/healthspan-marketing-ui 0.1.55 → 0.1.57
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),H=require("../../node_modules/@gsap/react/src/index.cjs.js"),d=require("../../node_modules/gsap/index.cjs.js"),u=require("../../node_modules/gsap/ScrollTrigger.cjs.js"),w=require("react"),
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),H=require("../../node_modules/@gsap/react/src/index.cjs.js"),d=require("../../node_modules/gsap/index.cjs.js"),u=require("../../node_modules/gsap/ScrollTrigger.cjs.js"),w=require("react"),V=require("../../components/HighlightedTitle/HighlightedTitle.cjs.js"),n=require("../../components/Typography/Typography.cjs.js"),A=require("../../utils/debounce.cjs.js"),r=require("./expandingDetails.module.css.cjs.js");d.gsap.registerPlugin(u.ScrollTrigger);const $=({colorScheme:h,label:f,title:N,sections:P})=>{const s=w.useRef(null);return H.useGSAP(()=>{if(!s.current)return;const a=()=>{var x;d.gsap.killTweensOf("*"),u.ScrollTrigger.getAll().forEach(e=>e.kill());const o=d.gsap.utils.toArray('[data-scroll-id="section"]'),t=(x=s.current)==null?void 0:x.querySelector('[data-scroll-id="sections"]');if(!t)return;const p=d.gsap.timeline({scrollTrigger:{trigger:s.current,start:"top top",end:()=>`+=${o.length*500}`,scrub:1,markers:!1,pin:!0}}),y=t==null?void 0:t.querySelector('[data-scroll-id="heading"]');if(!y)return;d.gsap.set(t==null?void 0:t.querySelectorAll('[data-scroll-id="section"]'),{height:y.offsetHeight||0}),d.gsap.set(t==null?void 0:t.querySelectorAll('[data-scroll-id="protocol"]'),{scale:.5,yPercent:0}),d.gsap.set(t==null?void 0:t.querySelectorAll('[data-scroll-id="image-circle"]'),{scale:.5,yPercent:5});const m=window.innerWidth<768?1.2:2,S=window.innerWidth<768?1.2:2;o.forEach((e,E)=>{var q,T,j,b,v;const g=e==null?void 0:e.querySelector('[data-scroll-id="heading"]'),i=e==null?void 0:e.querySelector('[data-scroll-id="content"]');!g||!i||(p.to(e,{height:g.offsetHeight+i.offsetHeight}).to(e==null?void 0:e.querySelector('[data-scroll-id="section-title"]'),{scale:m,yPercent:50},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="section-index"]'),{scale:S,yPercent:50},"<").to(i,{height:i.offsetHeight},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="protocol"]'),{scale:1},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="image-circle"]'),{scale:1,yPercent:5},"<"),E<o.length-1&&p.to(e,{height:g.offsetHeight,delay:.5}).to(e.nextElementSibling,{height:g.offsetHeight+i.offsetHeight},"<").to(((q=e.nextElementSibling)==null?void 0:q.querySelector('[data-scroll-id="section-title"]'))||null,{scale:m,yPercent:100},"<").to(((T=e.nextElementSibling)==null?void 0:T.querySelector('[data-scroll-id="section-index"]'))||null,{scale:S,yPercent:100},"<").to(((j=e.nextElementSibling)==null?void 0:j.querySelector('[data-scroll-id="content"]'))||null,{height:i.offsetHeight,yPercent:0},"<").to(((b=e.nextElementSibling)==null?void 0:b.querySelector('[data-scroll-id="protocol"]'))||null,{scale:1},"<").to(((v=e.nextElementSibling)==null?void 0:v.querySelector('[data-scroll-id="image-circle"]'))||null,{scale:1,yPercent:5},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="section-title"]'),{scale:1,yPercent:-15},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="section-index"]'),{scale:1,yPercent:-15},"<").to(i,{height:0,yPercent:0},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="protocol"]'),{scale:0,yPercent:200},"<").to(e==null?void 0:e.querySelector('[data-scroll-id="image-circle"]'),{scale:0,yPercent:200},"<"))})};a();const c=A.default(()=>{a()},200);return window.addEventListener("resize",c),()=>{window.removeEventListener("resize",c),u.ScrollTrigger.getAll().forEach(o=>o.kill()),d.gsap.killTweensOf("*")}},{scope:s,dependencies:[s]}),l.jsx("div",{ref:s,className:`${r.default.root} ${r.default[h]}`,children:l.jsxs("div",{className:r.default.expandingDetailsWrapper,children:[l.jsxs("header",{"data-scroll-id":"header",className:r.default.header,children:[f&&l.jsx(n.Typography,{as:"div",defaultVariant:"labelSm",emphasis:!0,className:r.default.label,children:f}),l.jsx(V.HighlightedTitle,{as:"div",defaultVariant:"displayMd",mobileVariant:"headingXl",colorScheme:h,className:r.default.title,title:N})]}),l.jsx("div",{"data-scroll-id":"sections",className:r.default.sections,children:P.map((a,c)=>l.jsxs("div",{id:`section-${c+1}`,"data-scroll-id":"section",className:r.default.section,children:[l.jsxs("div",{"data-scroll-id":"heading",className:r.default.heading,children:[l.jsx("div",{"data-scroll-id":"section-title",className:r.default.sectionTitleWrapper,children:l.jsx(n.Typography,{as:"h3",defaultVariant:"headingSm",className:r.default.sectionTitle,children:a.title})}),l.jsx("div",{"data-scroll-id":"section-index",className:r.default.sectionIndexWrapper,children:l.jsxs(n.Typography,{as:"p",defaultVariant:"headingSm",className:r.default.sectionIndex,children:["(",String(c+1).padStart(2,"0"),")"]})})]}),l.jsxs("div",{"data-scroll-id":"content",className:r.default.content,children:[l.jsxs("div",{"data-scroll-id":"protocol",className:r.default.protocolWrapper,children:[a.subtitle&&l.jsx(n.Typography,{as:"h4",defaultVariant:"headingLg",mobileVariant:"headingXs",children:a.subtitle}),l.jsx(n.Typography,{as:"p",defaultVariant:"bodyMd",mobileVariant:"bodySm",children:a.description})]}),l.jsx("div",{"data-scroll-id":"image-circle",className:r.default.imageCircle,children:l.jsx("img",{src:a.image,alt:a.title})})]}),l.jsx("div",{className:r.default.leftBorder}),l.jsx("div",{className:r.default.rightBorder})]},a.title))})]})})};exports.ExpandingDetails=$;
|
|
@@ -1,77 +1,78 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as t, jsxs as c } from "react/jsx-runtime";
|
|
3
|
+
import { useGSAP as V } from "../../node_modules/@gsap/react/src/index.es.js";
|
|
4
|
+
import { gsap as i } from "../../node_modules/gsap/index.es.js";
|
|
5
|
+
import { ScrollTrigger as m } from "../../node_modules/gsap/ScrollTrigger.es.js";
|
|
6
|
+
import { useRef as A } from "react";
|
|
6
7
|
import { HighlightedTitle as W } from "../../components/HighlightedTitle/HighlightedTitle.es.js";
|
|
7
|
-
import { Typography as
|
|
8
|
+
import { Typography as h } from "../../components/Typography/Typography.es.js";
|
|
8
9
|
import k from "../../utils/debounce.es.js";
|
|
9
10
|
import l from "./expandingDetails.module.css.es.js";
|
|
10
|
-
|
|
11
|
-
const O = ({ colorScheme: u, label:
|
|
12
|
-
const
|
|
13
|
-
return
|
|
11
|
+
i.registerPlugin(m);
|
|
12
|
+
const O = ({ colorScheme: u, label: f, title: w, sections: T }) => {
|
|
13
|
+
const o = A(null);
|
|
14
|
+
return V(
|
|
14
15
|
() => {
|
|
15
|
-
if (!
|
|
16
|
+
if (!o.current) return;
|
|
16
17
|
const a = () => {
|
|
17
|
-
var
|
|
18
|
-
|
|
19
|
-
const n =
|
|
18
|
+
var v;
|
|
19
|
+
i.killTweensOf("*"), m.getAll().forEach((e) => e.kill());
|
|
20
|
+
const n = i.utils.toArray('[data-scroll-id="section"]'), r = (v = o.current) == null ? void 0 : v.querySelector('[data-scroll-id="sections"]');
|
|
20
21
|
if (!r) return;
|
|
21
|
-
const
|
|
22
|
+
const p = i.timeline({
|
|
22
23
|
scrollTrigger: {
|
|
23
|
-
trigger:
|
|
24
|
+
trigger: o.current,
|
|
24
25
|
start: "top top",
|
|
25
26
|
end: () => `+=${n.length * 500}`,
|
|
26
27
|
scrub: 1,
|
|
27
28
|
markers: !1,
|
|
28
29
|
pin: !0
|
|
29
30
|
}
|
|
30
|
-
}),
|
|
31
|
-
if (!
|
|
32
|
-
|
|
33
|
-
height:
|
|
34
|
-
}),
|
|
31
|
+
}), y = r == null ? void 0 : r.querySelector('[data-scroll-id="heading"]');
|
|
32
|
+
if (!y) return;
|
|
33
|
+
i.set(r == null ? void 0 : r.querySelectorAll('[data-scroll-id="section"]'), {
|
|
34
|
+
height: y.offsetHeight || 0
|
|
35
|
+
}), i.set(r == null ? void 0 : r.querySelectorAll('[data-scroll-id="protocol"]'), {
|
|
35
36
|
scale: 0.5,
|
|
36
37
|
yPercent: 0
|
|
37
|
-
}),
|
|
38
|
+
}), i.set(r == null ? void 0 : r.querySelectorAll('[data-scroll-id="image-circle"]'), {
|
|
38
39
|
scale: 0.5,
|
|
39
40
|
yPercent: 5
|
|
40
41
|
});
|
|
41
|
-
const
|
|
42
|
+
const S = window.innerWidth < 768 ? 1.2 : 2, q = window.innerWidth < 768 ? 1.2 : 2;
|
|
42
43
|
n.forEach((e, H) => {
|
|
43
|
-
var
|
|
44
|
-
const
|
|
45
|
-
!
|
|
44
|
+
var x, N, b, P, E;
|
|
45
|
+
const g = e == null ? void 0 : e.querySelector('[data-scroll-id="heading"]'), d = e == null ? void 0 : e.querySelector('[data-scroll-id="content"]');
|
|
46
|
+
!g || !d || (p.to(e, { height: g.offsetHeight + d.offsetHeight }).to(
|
|
46
47
|
e == null ? void 0 : e.querySelector('[data-scroll-id="section-title"]'),
|
|
47
|
-
{ scale:
|
|
48
|
+
{ scale: S, yPercent: 50 },
|
|
48
49
|
"<"
|
|
49
50
|
).to(
|
|
50
51
|
e == null ? void 0 : e.querySelector('[data-scroll-id="section-index"]'),
|
|
51
|
-
{ scale:
|
|
52
|
+
{ scale: q, yPercent: 50 },
|
|
52
53
|
"<"
|
|
53
|
-
).to(
|
|
54
|
+
).to(d, { height: d.offsetHeight }, "<").to(e == null ? void 0 : e.querySelector('[data-scroll-id="protocol"]'), { scale: 1 }, "<").to(e == null ? void 0 : e.querySelector('[data-scroll-id="image-circle"]'), { scale: 1, yPercent: 5 }, "<"), H < n.length - 1 && p.to(e, { height: g.offsetHeight, delay: 0.5 }).to(
|
|
54
55
|
e.nextElementSibling,
|
|
55
|
-
{ height:
|
|
56
|
+
{ height: g.offsetHeight + d.offsetHeight },
|
|
56
57
|
"<"
|
|
57
58
|
).to(
|
|
58
|
-
((
|
|
59
|
-
{ scale:
|
|
59
|
+
((x = e.nextElementSibling) == null ? void 0 : x.querySelector('[data-scroll-id="section-title"]')) || null,
|
|
60
|
+
{ scale: S, yPercent: 100 },
|
|
60
61
|
"<"
|
|
61
62
|
).to(
|
|
62
63
|
((N = e.nextElementSibling) == null ? void 0 : N.querySelector('[data-scroll-id="section-index"]')) || null,
|
|
63
|
-
{ scale:
|
|
64
|
+
{ scale: q, yPercent: 100 },
|
|
64
65
|
"<"
|
|
65
66
|
).to(
|
|
66
|
-
((
|
|
67
|
-
{ height:
|
|
67
|
+
((b = e.nextElementSibling) == null ? void 0 : b.querySelector('[data-scroll-id="content"]')) || null,
|
|
68
|
+
{ height: d.offsetHeight, yPercent: 0 },
|
|
68
69
|
"<"
|
|
69
70
|
).to(
|
|
70
71
|
((P = e.nextElementSibling) == null ? void 0 : P.querySelector('[data-scroll-id="protocol"]')) || null,
|
|
71
72
|
{ scale: 1 },
|
|
72
73
|
"<"
|
|
73
74
|
).to(
|
|
74
|
-
((
|
|
75
|
+
((E = e.nextElementSibling) == null ? void 0 : E.querySelector('[data-scroll-id="image-circle"]')) || null,
|
|
75
76
|
{ scale: 1, yPercent: 5 },
|
|
76
77
|
"<"
|
|
77
78
|
).to(
|
|
@@ -82,7 +83,7 @@ const O = ({ colorScheme: u, label: E, title: w, sections: T }) => {
|
|
|
82
83
|
e == null ? void 0 : e.querySelector('[data-scroll-id="section-index"]'),
|
|
83
84
|
{ scale: 1, yPercent: -15 },
|
|
84
85
|
"<"
|
|
85
|
-
).to(
|
|
86
|
+
).to(d, { height: 0, yPercent: 0 }, "<").to(e == null ? void 0 : e.querySelector('[data-scroll-id="protocol"]'), { scale: 0, yPercent: 200 }, "<").to(
|
|
86
87
|
e == null ? void 0 : e.querySelector('[data-scroll-id="image-circle"]'),
|
|
87
88
|
{ scale: 0, yPercent: 200 },
|
|
88
89
|
"<"
|
|
@@ -94,16 +95,16 @@ const O = ({ colorScheme: u, label: E, title: w, sections: T }) => {
|
|
|
94
95
|
a();
|
|
95
96
|
}, 200);
|
|
96
97
|
return window.addEventListener("resize", s), () => {
|
|
97
|
-
window.removeEventListener("resize", s),
|
|
98
|
+
window.removeEventListener("resize", s), m.getAll().forEach((n) => n.kill()), i.killTweensOf("*");
|
|
98
99
|
};
|
|
99
100
|
},
|
|
100
101
|
{
|
|
101
|
-
scope:
|
|
102
|
-
dependencies: [
|
|
102
|
+
scope: o,
|
|
103
|
+
dependencies: [o]
|
|
103
104
|
}
|
|
104
|
-
), /* @__PURE__ */ t("div", { ref:
|
|
105
|
-
/* @__PURE__ */
|
|
106
|
-
/* @__PURE__ */ t(
|
|
105
|
+
), /* @__PURE__ */ t("div", { ref: o, className: `${l.root} ${l[u]}`, children: /* @__PURE__ */ c("div", { className: l.expandingDetailsWrapper, children: [
|
|
106
|
+
/* @__PURE__ */ c("header", { "data-scroll-id": "header", className: l.header, children: [
|
|
107
|
+
f && /* @__PURE__ */ t(h, { as: "div", defaultVariant: "labelSm", emphasis: !0, className: l.label, children: f }),
|
|
107
108
|
/* @__PURE__ */ t(
|
|
108
109
|
W,
|
|
109
110
|
{
|
|
@@ -116,32 +117,26 @@ const O = ({ colorScheme: u, label: E, title: w, sections: T }) => {
|
|
|
116
117
|
}
|
|
117
118
|
)
|
|
118
119
|
] }),
|
|
119
|
-
/* @__PURE__ */ t("div", { "data-scroll-id": "sections", className: l.sections, children: T.map((a, s) => /* @__PURE__ */
|
|
120
|
+
/* @__PURE__ */ t("div", { "data-scroll-id": "sections", className: l.sections, children: T.map((a, s) => /* @__PURE__ */ c(
|
|
120
121
|
"div",
|
|
121
122
|
{
|
|
122
123
|
id: `section-${s + 1}`,
|
|
123
124
|
"data-scroll-id": "section",
|
|
124
125
|
className: l.section,
|
|
125
126
|
children: [
|
|
126
|
-
/* @__PURE__ */
|
|
127
|
-
/* @__PURE__ */ t("div", { "data-scroll-id": "section-title", className: l.sectionTitleWrapper, children: /* @__PURE__ */ t(
|
|
128
|
-
/* @__PURE__ */ t("div", { "data-scroll-id": "section-index", className: l.sectionIndexWrapper, children: /* @__PURE__ */
|
|
127
|
+
/* @__PURE__ */ c("div", { "data-scroll-id": "heading", className: l.heading, children: [
|
|
128
|
+
/* @__PURE__ */ t("div", { "data-scroll-id": "section-title", className: l.sectionTitleWrapper, children: /* @__PURE__ */ t(h, { as: "h3", defaultVariant: "headingSm", className: l.sectionTitle, children: a.title }) }),
|
|
129
|
+
/* @__PURE__ */ t("div", { "data-scroll-id": "section-index", className: l.sectionIndexWrapper, children: /* @__PURE__ */ c(h, { as: "p", defaultVariant: "headingSm", className: l.sectionIndex, children: [
|
|
129
130
|
"(",
|
|
130
131
|
String(s + 1).padStart(2, "0"),
|
|
131
132
|
")"
|
|
132
133
|
] }) })
|
|
133
134
|
] }),
|
|
134
|
-
/* @__PURE__ */
|
|
135
|
-
/* @__PURE__ */
|
|
136
|
-
|
|
137
|
-
{
|
|
138
|
-
|
|
139
|
-
defaultVariant: "bodyMd",
|
|
140
|
-
mobileVariant: "bodySm",
|
|
141
|
-
className: l.protocol,
|
|
142
|
-
children: a.protocol
|
|
143
|
-
}
|
|
144
|
-
) }),
|
|
135
|
+
/* @__PURE__ */ c("div", { "data-scroll-id": "content", className: l.content, children: [
|
|
136
|
+
/* @__PURE__ */ c("div", { "data-scroll-id": "protocol", className: l.protocolWrapper, children: [
|
|
137
|
+
a.subtitle && /* @__PURE__ */ t(h, { as: "h4", defaultVariant: "headingLg", mobileVariant: "headingXs", children: a.subtitle }),
|
|
138
|
+
/* @__PURE__ */ t(h, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodySm", children: a.description })
|
|
139
|
+
] }),
|
|
145
140
|
/* @__PURE__ */ t("div", { "data-scroll-id": "image-circle", className: l.imageCircle, children: /* @__PURE__ */ t("img", { src: a.image, alt: a.title }) })
|
|
146
141
|
] }),
|
|
147
142
|
/* @__PURE__ */ t("div", { className: l.leftBorder }),
|
|
@@ -3,11 +3,12 @@ import { TColorScheme } from '../../types/common';
|
|
|
3
3
|
|
|
4
4
|
export type ExpandingDetailsProps = {
|
|
5
5
|
colorScheme: TColorScheme;
|
|
6
|
-
label
|
|
6
|
+
label?: string;
|
|
7
7
|
title: ReactNode;
|
|
8
|
-
sections: {
|
|
8
|
+
sections: Array<{
|
|
9
9
|
title: string;
|
|
10
|
-
|
|
10
|
+
subtitle?: string;
|
|
11
|
+
description?: string;
|
|
11
12
|
image: string;
|
|
12
|
-
}
|
|
13
|
+
}>;
|
|
13
14
|
};
|