hds-web 1.32.4 → 1.32.6
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/package.json
CHANGED
|
@@ -64,7 +64,7 @@ const Buttonclasses = {
|
|
|
64
64
|
},
|
|
65
65
|
'ghostBlue': {
|
|
66
66
|
'default': {
|
|
67
|
-
'base': 'db:w-fit tb:w-fit w-full justify-center border-
|
|
67
|
+
'base': 'db:w-fit tb:w-fit w-full justify-center border-none hover:border-opacity-100 hover:border-2 rounded-full text-blue-500',
|
|
68
68
|
'hover': 'hover:bg-blue-700 hover:text-neutral-0 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-300',
|
|
69
69
|
'focus': 'focus:outline-none',
|
|
70
70
|
},
|
|
@@ -25,14 +25,14 @@ const tabCard = (Content) => (
|
|
|
25
25
|
}
|
|
26
26
|
{
|
|
27
27
|
Content.buttons && (
|
|
28
|
-
<div className='flex items-center flex-wrap flex-row gap-2'>
|
|
28
|
+
<div className='flex items-center flex-wrap flex-row gap-2 pt-6'>
|
|
29
29
|
{Content.buttons.map((btn, index) => (
|
|
30
30
|
<Fragment key={index}>
|
|
31
31
|
{btn.url && btn.text && btn.type && (
|
|
32
|
-
<a href={btn.url} key={index} className='flex
|
|
32
|
+
<a href={btn.url} key={index} className='flex '>
|
|
33
33
|
<HDSButton
|
|
34
34
|
label={btn.text}
|
|
35
|
-
type={
|
|
35
|
+
type={btn.type}
|
|
36
36
|
leftIconVariant='none'
|
|
37
37
|
rightIconVariant='none'
|
|
38
38
|
state='default'
|
|
@@ -47,8 +47,8 @@ const tabCard = (Content) => (
|
|
|
47
47
|
btnbgHoverClass={btn.btnBgColorClass}
|
|
48
48
|
/>
|
|
49
49
|
</a>)}
|
|
50
|
-
|
|
51
|
-
|
|
50
|
+
</Fragment>
|
|
51
|
+
))
|
|
52
52
|
}
|
|
53
53
|
</div>
|
|
54
54
|
)
|
|
@@ -57,91 +57,91 @@ const tabCard = (Content) => (
|
|
|
57
57
|
)
|
|
58
58
|
|
|
59
59
|
export default function HeroLinkCard(props) {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
return (
|
|
66
|
-
props.linkCards && (
|
|
67
|
-
<div className="flex tb-m:justify-center overflow-auto no-scrollbar db:overflow-visible scrollbar-hide flex-row mt-10 tb:mt-12 db:mt-16 gap-6 tb:flex-row ">
|
|
68
|
-
{props.linkCards.map((card, index) => (
|
|
69
|
-
<div key={index} className={`${HDSColor(card.cardBorderClass)} ${HDSColor(card.cardBgColor)} ${HDSColor(card.cardHoverBg)} transition-all ease-out duration-300 hover:shadow-2xl hover:border-opacity-0 border rounded-2xl w-full min-w-[11.5rem] max-w-[22.313rem]`}>
|
|
70
|
-
<LinkCard
|
|
71
|
-
titleTextColor={card.titleTextColor}
|
|
72
|
-
descTextColor={card.descTextColor}
|
|
73
|
-
linkUrl={card.linkUrl}
|
|
74
|
-
iconVariant={card.iconVariant}
|
|
75
|
-
iconStrokeClass={card.iconStrokeColor}
|
|
76
|
-
iconArrowVariant={card.iconArrowVariant}
|
|
77
|
-
iconArrowStrokeClass={card.iconArrowStrokeColor}
|
|
78
|
-
title={card.title}
|
|
79
|
-
description={card.description}
|
|
80
|
-
/>
|
|
81
|
-
</div>
|
|
82
|
-
))}
|
|
83
|
-
</div>
|
|
84
|
-
)
|
|
85
|
-
);
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
|
|
60
|
+
const [showVideo, setShowVideo] = useState(false);
|
|
61
|
+
if (!props) {
|
|
62
|
+
return <div></div>; // Replace with your loading indicator or fallback UI
|
|
63
|
+
}
|
|
64
|
+
const LinkCardsFn = (props) => {
|
|
89
65
|
return (
|
|
90
|
-
|
|
91
|
-
<div className="flex
|
|
92
|
-
|
|
93
|
-
{
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
<video
|
|
108
|
-
id="hero_vid"
|
|
109
|
-
controls={true}
|
|
110
|
-
autoPlay
|
|
111
|
-
playsInline
|
|
112
|
-
width="500"
|
|
113
|
-
height="500"
|
|
114
|
-
className="tb:w-full w-full rounded-3xl"
|
|
115
|
-
src={props.videoUrl}
|
|
116
|
-
></video>
|
|
117
|
-
)}
|
|
118
|
-
</>
|
|
119
|
-
) : (
|
|
120
|
-
<div className="relative">
|
|
121
|
-
{props.imgUrl && (
|
|
122
|
-
<img src={props.imgUrl} alt="Illustration" loading="lazy" />
|
|
123
|
-
)}
|
|
124
|
-
{props.videoUrl && (
|
|
125
|
-
<div
|
|
126
|
-
className={`${props.currentPlayBtnClass} w-14 h-14 cursor-pointer video-play-btn rounded-full flex items-center justify-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-neutral-1000 shadow-2xl`}
|
|
127
|
-
onClick={() => setShowVideo(true)}
|
|
128
|
-
>
|
|
129
|
-
<Icon
|
|
130
|
-
variant="play"
|
|
131
|
-
height="h-6 w-6"
|
|
132
|
-
strokeColor="#ffffff"
|
|
133
|
-
strokeClass="stroke-neutral-0"
|
|
134
|
-
/>
|
|
135
|
-
</div>
|
|
136
|
-
)}
|
|
137
|
-
</div>
|
|
138
|
-
)}
|
|
139
|
-
</div>
|
|
66
|
+
props.linkCards && (
|
|
67
|
+
<div className="flex tb-m:justify-center overflow-auto no-scrollbar db:overflow-visible scrollbar-hide flex-row mt-10 tb:mt-12 db:mt-16 gap-6 tb:flex-row ">
|
|
68
|
+
{props.linkCards.map((card, index) => (
|
|
69
|
+
<div key={index} className={`${HDSColor(card.cardBorderClass)} ${HDSColor(card.cardBgColor)} ${HDSColor(card.cardHoverBg)} transition-all ease-out duration-300 hover:shadow-2xl hover:border-opacity-0 border rounded-2xl w-full min-w-[11.5rem] max-w-[22.313rem]`}>
|
|
70
|
+
<LinkCard
|
|
71
|
+
titleTextColor={card.titleTextColor}
|
|
72
|
+
descTextColor={card.descTextColor}
|
|
73
|
+
linkUrl={card.linkUrl}
|
|
74
|
+
iconVariant={card.iconVariant}
|
|
75
|
+
iconStrokeClass={card.iconStrokeColor}
|
|
76
|
+
iconArrowVariant={card.iconArrowVariant}
|
|
77
|
+
iconArrowStrokeClass={card.iconArrowStrokeColor}
|
|
78
|
+
title={card.title}
|
|
79
|
+
description={card.description}
|
|
80
|
+
/>
|
|
81
|
+
</div>
|
|
82
|
+
))}
|
|
140
83
|
</div>
|
|
84
|
+
)
|
|
85
|
+
);
|
|
86
|
+
};
|
|
87
|
+
|
|
141
88
|
|
|
142
|
-
|
|
143
|
-
|
|
89
|
+
return (
|
|
90
|
+
<div>
|
|
91
|
+
<div className="flex flex-col-reverse tb-l:flex tb-l:flex-row tb-l:justify-between gap-4">
|
|
92
|
+
<div className={`max-w-[435px] db:max-w-[${props.contentWd ? props.contentWd : '535px'}]`}>
|
|
93
|
+
{props &&
|
|
94
|
+
tabCard(props)}
|
|
95
|
+
</div>
|
|
96
|
+
<div className="grid items-center relative db:max-w-[500px] tb:w-1/2 transition-opacity duration-700 ease-linear ">
|
|
97
|
+
<Typography
|
|
98
|
+
textStyle="h2"
|
|
99
|
+
as="h2"
|
|
100
|
+
className={`tb:hidden pb-6 ${props.titleTextColor ? HDSColor(props.titleTextColor) : 'text-neutral-1000'}`}
|
|
101
|
+
>
|
|
102
|
+
{props.title}
|
|
103
|
+
</Typography>
|
|
104
|
+
{showVideo ? (
|
|
105
|
+
<>
|
|
106
|
+
{props.videoUrl && (
|
|
107
|
+
<video
|
|
108
|
+
id="hero_vid"
|
|
109
|
+
controls={true}
|
|
110
|
+
autoPlay
|
|
111
|
+
playsInline
|
|
112
|
+
width="500"
|
|
113
|
+
height="500"
|
|
114
|
+
className="tb:w-full w-full rounded-3xl"
|
|
115
|
+
src={props.videoUrl}
|
|
116
|
+
></video>
|
|
117
|
+
)}
|
|
118
|
+
</>
|
|
119
|
+
) : (
|
|
120
|
+
<div className="relative">
|
|
121
|
+
{props.imgUrl && (
|
|
122
|
+
<img src={props.imgUrl} alt="Illustration" loading="lazy" />
|
|
123
|
+
)}
|
|
124
|
+
{props.videoUrl && (
|
|
125
|
+
<div
|
|
126
|
+
className={`${props.currentPlayBtnClass} w-14 h-14 cursor-pointer video-play-btn rounded-full flex items-center justify-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-neutral-1000 shadow-2xl`}
|
|
127
|
+
onClick={() => setShowVideo(true)}
|
|
128
|
+
>
|
|
129
|
+
<Icon
|
|
130
|
+
variant="play"
|
|
131
|
+
height="h-6 w-6"
|
|
132
|
+
strokeColor="#ffffff"
|
|
133
|
+
strokeClass="stroke-neutral-0"
|
|
134
|
+
/>
|
|
135
|
+
</div>
|
|
136
|
+
)}
|
|
137
|
+
</div>
|
|
138
|
+
)}
|
|
144
139
|
</div>
|
|
145
140
|
</div>
|
|
146
|
-
|
|
141
|
+
|
|
142
|
+
<div className="">
|
|
143
|
+
{LinkCardsFn(props)}
|
|
144
|
+
</div>
|
|
145
|
+
</div>
|
|
146
|
+
);
|
|
147
147
|
}
|