hds-web 1.26.6 → 1.26.8
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/dist/index.css +2 -2
- package/dist/index.es.css +2 -2
- package/dist/index.es.js +5 -5
- package/dist/index.js +3 -3
- package/package.json +1 -1
- package/src/HDS/components/Hero/herolinkcard.js +146 -0
- package/src/HDS/components/Hero/index.js +1 -0
- package/src/HDS/modules/Events/eventListingCard.js +1 -1
- package/src/index.css +50 -0
- package/src/styles/tailwind.css +117 -24
package/package.json
CHANGED
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
import React, { Fragment, useState } from 'react';
|
|
2
|
+
import { Typography } from "../../foundation/Typography";
|
|
3
|
+
import { HDSButton } from "../Buttons";
|
|
4
|
+
import { Icon } from '../common-components/Icon';
|
|
5
|
+
import { HDSColor } from "../../foundation/ColorPalette";
|
|
6
|
+
import { LinkCard } from '../Cards/Link';
|
|
7
|
+
|
|
8
|
+
const tabCard = (Content) => (
|
|
9
|
+
<>
|
|
10
|
+
{Content.title &&
|
|
11
|
+
<Typography
|
|
12
|
+
textStyle='h2'
|
|
13
|
+
as="h2"
|
|
14
|
+
className={` hidden tb:block ${Content.titleTextColor ? HDSColor(Content.titleTextColor) : 'text-neutral-1000'}`}>
|
|
15
|
+
{Content.title}
|
|
16
|
+
</Typography>
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
{Content.subTitle &&
|
|
20
|
+
<Typography
|
|
21
|
+
textStyle='sub1'
|
|
22
|
+
className={`mt-2 ${Content.subTitleTextColor ? HDSColor(Content.subTitleTextColor) : 'text-neutral-700'}`}>
|
|
23
|
+
{Content.subTitle}
|
|
24
|
+
</Typography>
|
|
25
|
+
}
|
|
26
|
+
{
|
|
27
|
+
Content.buttons && (
|
|
28
|
+
<div className='flex items-center flex-wrap flex-row gap-2'>
|
|
29
|
+
{Content.buttons.map((btn, index) => (
|
|
30
|
+
<Fragment key={index}>
|
|
31
|
+
{btn.cta_link && btn.cta_text && btn.cta_type && (
|
|
32
|
+
<a href={btn.cta_link} key={index} className='flex pt-6'>
|
|
33
|
+
<HDSButton
|
|
34
|
+
label={btn.cta_text}
|
|
35
|
+
type={ btn.cta_type}
|
|
36
|
+
leftIconVariant='none'
|
|
37
|
+
rightIconVariant='none'
|
|
38
|
+
state='default'
|
|
39
|
+
size='md'
|
|
40
|
+
rightAnimatedArrow={true}
|
|
41
|
+
rightAnimatedArrowColor='#3970FD'
|
|
42
|
+
animatedHoverStroke='group-hover:stroke-neutral-0'
|
|
43
|
+
className={'flex ' + ((btn.cta_type === 'ghost') ?
|
|
44
|
+
' border-opacity-0 hover:border-opacity-100 border-2 border-purple-800 rounded-full ' : '') }
|
|
45
|
+
// btnTextColorClass={HDSColor('text-neutral-0')}
|
|
46
|
+
btnbgHoverClass={btn.btnBgColorClass}
|
|
47
|
+
/>
|
|
48
|
+
</a>)}
|
|
49
|
+
</Fragment>
|
|
50
|
+
))
|
|
51
|
+
}
|
|
52
|
+
</div>
|
|
53
|
+
)
|
|
54
|
+
}
|
|
55
|
+
</>
|
|
56
|
+
)
|
|
57
|
+
|
|
58
|
+
export default function HeroLinkCard(props) {
|
|
59
|
+
const [showVideo, setShowVideo] = useState(false);
|
|
60
|
+
if (!props) {
|
|
61
|
+
return <div></div>; // Replace with your loading indicator or fallback UI
|
|
62
|
+
}
|
|
63
|
+
const LinkCardsFn = (props) => {
|
|
64
|
+
return (
|
|
65
|
+
props.linkCards && (
|
|
66
|
+
<div className="flex px-8 tb:px-0 tb:justify-center overflow-auto no-scrollbar db:overflow-visible scrollbar-hide flex-row mt-16 gap-6 tb:flex-row ">
|
|
67
|
+
{props.linkCards.map((card, index) => (
|
|
68
|
+
<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]`}>
|
|
69
|
+
<LinkCard
|
|
70
|
+
titleTextColor={card.titleTextColor}
|
|
71
|
+
descTextColor={card.descTextColor}
|
|
72
|
+
linkUrl={card.linkUrl}
|
|
73
|
+
iconVariant={card.iconVariant}
|
|
74
|
+
iconStrokeClass={card.iconStrokeColor}
|
|
75
|
+
iconArrowVariant={card.iconArrowVariant}
|
|
76
|
+
iconArrowStrokeClass={card.iconArrowStrokeColor}
|
|
77
|
+
title={card.title}
|
|
78
|
+
description={card.description}
|
|
79
|
+
/>
|
|
80
|
+
</div>
|
|
81
|
+
))}
|
|
82
|
+
</div>
|
|
83
|
+
)
|
|
84
|
+
);
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
return (
|
|
89
|
+
<div>
|
|
90
|
+
<div className="flex flex-col-reverse tb:flex tb:flex-row tb:justify-between">
|
|
91
|
+
<div className="tb:w-1/2 db:max-w-[535px]">
|
|
92
|
+
{props &&
|
|
93
|
+
tabCard(props)}
|
|
94
|
+
</div>
|
|
95
|
+
<div className="grid items-center relative db:max-w-[500px] tb:w-1/2 transition-opacity duration-700 ease-linear ">
|
|
96
|
+
<Typography
|
|
97
|
+
textStyle="h2"
|
|
98
|
+
as="h2"
|
|
99
|
+
className={`tb:hidden pb-6 ${props.titleTextColor ? HDSColor(props.titleTextColor) : 'text-neutral-1000'}`}
|
|
100
|
+
>
|
|
101
|
+
{props.title}
|
|
102
|
+
</Typography>
|
|
103
|
+
{showVideo ? (
|
|
104
|
+
<>
|
|
105
|
+
{props.videoUrl && (
|
|
106
|
+
<video
|
|
107
|
+
id="hero_vid"
|
|
108
|
+
controls={true}
|
|
109
|
+
autoPlay
|
|
110
|
+
playsInline
|
|
111
|
+
width="500"
|
|
112
|
+
height="500"
|
|
113
|
+
className="tb:w-full w-full rounded-3xl"
|
|
114
|
+
src={props.videoUrl}
|
|
115
|
+
></video>
|
|
116
|
+
)}
|
|
117
|
+
</>
|
|
118
|
+
) : (
|
|
119
|
+
<div className="relative">
|
|
120
|
+
{props.imgUrl && (
|
|
121
|
+
<img src={props.imgUrl} alt="Illustration" loading="lazy" />
|
|
122
|
+
)}
|
|
123
|
+
{props.videoUrl && (
|
|
124
|
+
<div
|
|
125
|
+
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`}
|
|
126
|
+
onClick={() => setShowVideo(true)}
|
|
127
|
+
>
|
|
128
|
+
<Icon
|
|
129
|
+
variant="play"
|
|
130
|
+
height="h-6 w-6"
|
|
131
|
+
strokeColor="#ffffff"
|
|
132
|
+
strokeClass="stroke-neutral-0"
|
|
133
|
+
/>
|
|
134
|
+
</div>
|
|
135
|
+
)}
|
|
136
|
+
</div>
|
|
137
|
+
)}
|
|
138
|
+
</div>
|
|
139
|
+
</div>
|
|
140
|
+
|
|
141
|
+
<div className="">
|
|
142
|
+
{LinkCardsFn(props)}
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
);
|
|
146
|
+
}
|
|
@@ -25,7 +25,7 @@ export default function EventListingCard(props) {
|
|
|
25
25
|
}
|
|
26
26
|
{
|
|
27
27
|
props.title && (
|
|
28
|
-
<
|
|
28
|
+
<div className="text-neutral-1000 text-hds-m-h5 tb:text-hds-t-h5 py-2">{props.title}</div>
|
|
29
29
|
)
|
|
30
30
|
}
|
|
31
31
|
|
package/src/index.css
CHANGED
|
@@ -74,6 +74,56 @@
|
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
76
|
|
|
77
|
+
.video-play-btn {
|
|
78
|
+
z-index: 10;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.video-play-btn:before {
|
|
82
|
+
content: "";
|
|
83
|
+
position: absolute;
|
|
84
|
+
z-index: 0;
|
|
85
|
+
left: 50%;
|
|
86
|
+
top: 50%;
|
|
87
|
+
transform: translateX(-50%) translateY(-50%);
|
|
88
|
+
display: block;
|
|
89
|
+
width: 56px;
|
|
90
|
+
height: 56px;
|
|
91
|
+
/* background: #3970FD; */
|
|
92
|
+
border-radius: 50%;
|
|
93
|
+
animation: pulse-border 1500ms ease-out infinite;
|
|
94
|
+
}
|
|
95
|
+
.video-play-btn:after {
|
|
96
|
+
content: "";
|
|
97
|
+
position: absolute;
|
|
98
|
+
z-index: 1;
|
|
99
|
+
left: 50%;
|
|
100
|
+
top: 50%;
|
|
101
|
+
transform: translateX(-50%) translateY(-50%);
|
|
102
|
+
display: block;
|
|
103
|
+
width: 56px;
|
|
104
|
+
height: 56px;
|
|
105
|
+
/* background: #3970FD; */
|
|
106
|
+
border-radius: 50%;
|
|
107
|
+
transition: all 200ms;
|
|
108
|
+
}
|
|
109
|
+
.video-play-btn>div {
|
|
110
|
+
z-index: 2;
|
|
111
|
+
}
|
|
112
|
+
.video-play-btn svg {
|
|
113
|
+
fill: #fff;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
@keyframes pulse-border {
|
|
117
|
+
0% {
|
|
118
|
+
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
|
|
119
|
+
opacity: 1;
|
|
120
|
+
}
|
|
121
|
+
100% {
|
|
122
|
+
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
|
|
123
|
+
opacity: 0;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
77
127
|
.search-results {
|
|
78
128
|
width: calc(100% - 150px);
|
|
79
129
|
}
|
package/src/styles/tailwind.css
CHANGED
|
@@ -1728,6 +1728,10 @@ select{
|
|
|
1728
1728
|
max-height: 144px;
|
|
1729
1729
|
}
|
|
1730
1730
|
|
|
1731
|
+
.max-h-\[179px\]{
|
|
1732
|
+
max-height: 179px;
|
|
1733
|
+
}
|
|
1734
|
+
|
|
1731
1735
|
.max-h-\[181px\]{
|
|
1732
1736
|
max-height: 181px;
|
|
1733
1737
|
}
|
|
@@ -1768,10 +1772,6 @@ select{
|
|
|
1768
1772
|
max-height: 100vh;
|
|
1769
1773
|
}
|
|
1770
1774
|
|
|
1771
|
-
.max-h-\[179px\]{
|
|
1772
|
-
max-height: 179px;
|
|
1773
|
-
}
|
|
1774
|
-
|
|
1775
1775
|
.min-h-\[12px\]{
|
|
1776
1776
|
min-height: 12px;
|
|
1777
1777
|
}
|
|
@@ -2116,6 +2116,10 @@ select{
|
|
|
2116
2116
|
max-width: 242px;
|
|
2117
2117
|
}
|
|
2118
2118
|
|
|
2119
|
+
.max-w-\[270px\]{
|
|
2120
|
+
max-width: 270px;
|
|
2121
|
+
}
|
|
2122
|
+
|
|
2119
2123
|
.max-w-\[29\.18rem\]{
|
|
2120
2124
|
max-width: 29.18rem;
|
|
2121
2125
|
}
|
|
@@ -2198,10 +2202,6 @@ select{
|
|
|
2198
2202
|
max-width: min-content;
|
|
2199
2203
|
}
|
|
2200
2204
|
|
|
2201
|
-
.max-w-\[270px\]{
|
|
2202
|
-
max-width: 270px;
|
|
2203
|
-
}
|
|
2204
|
-
|
|
2205
2205
|
.flex-1{
|
|
2206
2206
|
flex: 1 1 0%;
|
|
2207
2207
|
}
|
|
@@ -2764,10 +2764,6 @@ select{
|
|
|
2764
2764
|
border-radius: 100px;
|
|
2765
2765
|
}
|
|
2766
2766
|
|
|
2767
|
-
.rounded-\[26px\]{
|
|
2768
|
-
border-radius: 26px;
|
|
2769
|
-
}
|
|
2770
|
-
|
|
2771
2767
|
.rounded-\[32px\]{
|
|
2772
2768
|
border-radius: 32px;
|
|
2773
2769
|
}
|
|
@@ -3444,6 +3440,10 @@ select{
|
|
|
3444
3440
|
border-top-color: rgb(229 231 235 / var(--tw-border-opacity));
|
|
3445
3441
|
}
|
|
3446
3442
|
|
|
3443
|
+
.border-opacity-0{
|
|
3444
|
+
--tw-border-opacity: 0;
|
|
3445
|
+
}
|
|
3446
|
+
|
|
3447
3447
|
.bg-amber-100{
|
|
3448
3448
|
--tw-bg-opacity: 1;
|
|
3449
3449
|
background-color: rgb(255 243 212 / var(--tw-bg-opacity));
|
|
@@ -7735,14 +7735,6 @@ select{
|
|
|
7735
7735
|
transition-delay: 300ms;
|
|
7736
7736
|
}
|
|
7737
7737
|
|
|
7738
|
-
.delay-100{
|
|
7739
|
-
transition-delay: 100ms;
|
|
7740
|
-
}
|
|
7741
|
-
|
|
7742
|
-
.delay-200{
|
|
7743
|
-
transition-delay: 200ms;
|
|
7744
|
-
}
|
|
7745
|
-
|
|
7746
7738
|
.duration-0{
|
|
7747
7739
|
transition-duration: 0s;
|
|
7748
7740
|
}
|
|
@@ -7767,6 +7759,10 @@ select{
|
|
|
7767
7759
|
transition-duration: 500ms;
|
|
7768
7760
|
}
|
|
7769
7761
|
|
|
7762
|
+
.duration-700{
|
|
7763
|
+
transition-duration: 700ms;
|
|
7764
|
+
}
|
|
7765
|
+
|
|
7770
7766
|
.duration-\[1500ms\]{
|
|
7771
7767
|
transition-duration: 1500ms;
|
|
7772
7768
|
}
|
|
@@ -7775,10 +7771,6 @@ select{
|
|
|
7775
7771
|
transition-duration: 350ms;
|
|
7776
7772
|
}
|
|
7777
7773
|
|
|
7778
|
-
.duration-100{
|
|
7779
|
-
transition-duration: 100ms;
|
|
7780
|
-
}
|
|
7781
|
-
|
|
7782
7774
|
.ease-in{
|
|
7783
7775
|
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
|
7784
7776
|
}
|
|
@@ -7787,6 +7779,10 @@ select{
|
|
|
7787
7779
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
7788
7780
|
}
|
|
7789
7781
|
|
|
7782
|
+
.ease-linear{
|
|
7783
|
+
transition-timing-function: linear;
|
|
7784
|
+
}
|
|
7785
|
+
|
|
7790
7786
|
.ease-out{
|
|
7791
7787
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
7792
7788
|
}
|
|
@@ -7861,6 +7857,79 @@ select{
|
|
|
7861
7857
|
}
|
|
7862
7858
|
}
|
|
7863
7859
|
|
|
7860
|
+
.video-play-btn {
|
|
7861
|
+
z-index: 10;
|
|
7862
|
+
}
|
|
7863
|
+
|
|
7864
|
+
.video-play-btn:before {
|
|
7865
|
+
content: "";
|
|
7866
|
+
position: absolute;
|
|
7867
|
+
z-index: 0;
|
|
7868
|
+
left: 50%;
|
|
7869
|
+
top: 50%;
|
|
7870
|
+
-webkit-transform: translateX(-50%) translateY(-50%);
|
|
7871
|
+
transform: translateX(-50%) translateY(-50%);
|
|
7872
|
+
display: block;
|
|
7873
|
+
width: 56px;
|
|
7874
|
+
height: 56px;
|
|
7875
|
+
/* background: #3970FD; */
|
|
7876
|
+
border-radius: 50%;
|
|
7877
|
+
-webkit-animation: pulse-border 1500ms ease-out infinite;
|
|
7878
|
+
animation: pulse-border 1500ms ease-out infinite;
|
|
7879
|
+
}
|
|
7880
|
+
|
|
7881
|
+
.video-play-btn:after {
|
|
7882
|
+
content: "";
|
|
7883
|
+
position: absolute;
|
|
7884
|
+
z-index: 1;
|
|
7885
|
+
left: 50%;
|
|
7886
|
+
top: 50%;
|
|
7887
|
+
-webkit-transform: translateX(-50%) translateY(-50%);
|
|
7888
|
+
transform: translateX(-50%) translateY(-50%);
|
|
7889
|
+
display: block;
|
|
7890
|
+
width: 56px;
|
|
7891
|
+
height: 56px;
|
|
7892
|
+
/* background: #3970FD; */
|
|
7893
|
+
border-radius: 50%;
|
|
7894
|
+
transition: all 200ms;
|
|
7895
|
+
}
|
|
7896
|
+
|
|
7897
|
+
.video-play-btn>div {
|
|
7898
|
+
z-index: 2;
|
|
7899
|
+
}
|
|
7900
|
+
|
|
7901
|
+
.video-play-btn svg {
|
|
7902
|
+
fill: #fff;
|
|
7903
|
+
}
|
|
7904
|
+
|
|
7905
|
+
@-webkit-keyframes pulse-border {
|
|
7906
|
+
0% {
|
|
7907
|
+
-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
|
|
7908
|
+
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
|
|
7909
|
+
opacity: 1;
|
|
7910
|
+
}
|
|
7911
|
+
|
|
7912
|
+
100% {
|
|
7913
|
+
-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
|
|
7914
|
+
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
|
|
7915
|
+
opacity: 0;
|
|
7916
|
+
}
|
|
7917
|
+
}
|
|
7918
|
+
|
|
7919
|
+
@keyframes pulse-border {
|
|
7920
|
+
0% {
|
|
7921
|
+
-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
|
|
7922
|
+
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
|
|
7923
|
+
opacity: 1;
|
|
7924
|
+
}
|
|
7925
|
+
|
|
7926
|
+
100% {
|
|
7927
|
+
-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
|
|
7928
|
+
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
|
|
7929
|
+
opacity: 0;
|
|
7930
|
+
}
|
|
7931
|
+
}
|
|
7932
|
+
|
|
7864
7933
|
.search-results {
|
|
7865
7934
|
width: calc(100% - 150px);
|
|
7866
7935
|
}
|
|
@@ -9106,6 +9175,12 @@ select{
|
|
|
9106
9175
|
background-color: rgb(13 65 198 / var(--tw-bg-opacity));
|
|
9107
9176
|
}
|
|
9108
9177
|
|
|
9178
|
+
.before\:bg-blue-800::before{
|
|
9179
|
+
content: var(--tw-content);
|
|
9180
|
+
--tw-bg-opacity: 1;
|
|
9181
|
+
background-color: rgb(0 40 142 / var(--tw-bg-opacity));
|
|
9182
|
+
}
|
|
9183
|
+
|
|
9109
9184
|
.before\:bg-gradient-to-r::before{
|
|
9110
9185
|
content: var(--tw-content);
|
|
9111
9186
|
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
|
@@ -9246,6 +9321,12 @@ select{
|
|
|
9246
9321
|
background-color: rgb(13 65 198 / var(--tw-bg-opacity));
|
|
9247
9322
|
}
|
|
9248
9323
|
|
|
9324
|
+
.after\:bg-blue-800::after{
|
|
9325
|
+
content: var(--tw-content);
|
|
9326
|
+
--tw-bg-opacity: 1;
|
|
9327
|
+
background-color: rgb(0 40 142 / var(--tw-bg-opacity));
|
|
9328
|
+
}
|
|
9329
|
+
|
|
9249
9330
|
.after\:bg-gradient-to-r::after{
|
|
9250
9331
|
content: var(--tw-content);
|
|
9251
9332
|
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
|
@@ -9468,6 +9549,10 @@ select{
|
|
|
9468
9549
|
--tw-border-opacity: 0;
|
|
9469
9550
|
}
|
|
9470
9551
|
|
|
9552
|
+
.hover\:border-opacity-100:hover{
|
|
9553
|
+
--tw-border-opacity: 1;
|
|
9554
|
+
}
|
|
9555
|
+
|
|
9471
9556
|
.hover\:bg-amber-100:hover{
|
|
9472
9557
|
--tw-bg-opacity: 1;
|
|
9473
9558
|
background-color: rgb(255 243 212 / var(--tw-bg-opacity));
|
|
@@ -12284,6 +12369,10 @@ select{
|
|
|
12284
12369
|
max-width: 500px;
|
|
12285
12370
|
}
|
|
12286
12371
|
|
|
12372
|
+
.db\:max-w-\[535px\]{
|
|
12373
|
+
max-width: 535px;
|
|
12374
|
+
}
|
|
12375
|
+
|
|
12287
12376
|
.db\:max-w-\[540px\]{
|
|
12288
12377
|
max-width: 540px;
|
|
12289
12378
|
}
|
|
@@ -12350,6 +12439,10 @@ select{
|
|
|
12350
12439
|
row-gap: 0.5rem;
|
|
12351
12440
|
}
|
|
12352
12441
|
|
|
12442
|
+
.db\:overflow-visible{
|
|
12443
|
+
overflow: visible;
|
|
12444
|
+
}
|
|
12445
|
+
|
|
12353
12446
|
.db\:rounded-3xl{
|
|
12354
12447
|
border-radius: 1.5rem;
|
|
12355
12448
|
}
|