hds-web 1.22.2 → 1.22.4
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 +2 -2
- package/dist/index.js +2 -2
- package/package.json +1 -1
- package/src/HDS/components/Cards/StoryCard/storyxl.js +84 -101
- package/src/HDS/components/common-components/Icon/IconMap.js +0 -3
- package/src/styles/tailwind.css +4 -0
package/package.json
CHANGED
|
@@ -6,122 +6,105 @@ import { Icon } from "../../common-components";
|
|
|
6
6
|
export default function StoryCardXL(props) {
|
|
7
7
|
return (
|
|
8
8
|
<>
|
|
9
|
-
<div className="flex flex-col
|
|
10
|
-
<div className="flex flex-col-reverse ">
|
|
11
|
-
<div className="flex flex-col-reverse tb-l:flex-row tb-l:gap-10 db:gap-32">
|
|
12
|
-
<div className="flex flex-col justify-between tb-l:pl-20 tb-l:pt-20 tb-l:pb-14">
|
|
13
|
-
{
|
|
14
|
-
props.tagline && (
|
|
15
|
-
<Typography textStyle='h6' className='text-blue-400 tb-l:block uppercase mb-2 hidden '>{props.tagline}</Typography>
|
|
16
|
-
)
|
|
17
|
-
}
|
|
18
|
-
{props.brandImageURL &&
|
|
19
|
-
props.brandImageAlt && (
|
|
20
|
-
<div className="justify-start tb-l:flex hidden">
|
|
21
|
-
<img src={props.brandImageURL} alt={props.brandImageAlt} className=" " />
|
|
22
|
-
</div>
|
|
23
|
-
)
|
|
9
|
+
<div className="flex flex-col-reverse px-6 py-10 tb-l:px-0 tb-l:py-0 tb-l:flex-row tb-l:gap-10 db:gap-32 tb-l:max-w-7xl min-h-[518px]">
|
|
24
10
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
11
|
+
<div className="flex flex-col tb-l:pl-20 tb-l:pt-20 tb-l:pb-14">
|
|
12
|
+
{
|
|
13
|
+
props.tagline && (
|
|
14
|
+
<Typography textStyle='h6' className='text-blue-400 tb-l:block uppercase mb-2 hidden '>{props.tagline}</Typography>
|
|
15
|
+
)
|
|
16
|
+
}
|
|
17
|
+
{props.brandImageURL &&
|
|
18
|
+
props.brandImageAlt && (
|
|
19
|
+
<div className="flex justify-start">
|
|
20
|
+
<img src={props.brandImageURL} alt={props.brandImageAlt} className=" tb-l:flex hidden " />
|
|
21
|
+
</div>
|
|
22
|
+
)
|
|
23
|
+
|
|
24
|
+
}
|
|
25
|
+
{props.title &&
|
|
26
|
+
(
|
|
27
|
+
<div className="flex pt-6 flex-col gap-6 tb-l:max-w-[547px] ">
|
|
28
|
+
<Typography textStyle='h3' className='text-neutral-1000 tb-l:block hidden min-h-[144px] overflow-clip'>{props.title}</Typography>
|
|
29
|
+
{props.heroList &&
|
|
30
|
+
(
|
|
31
|
+
<div>
|
|
32
|
+
<div className="flex flex-col gap-4">
|
|
33
|
+
{props.heroList.map((value, index) => (
|
|
34
|
+
<div key={index} className='flex gap-5'>
|
|
35
|
+
<Icon
|
|
36
|
+
height='tb:h-8 tb:w-8 h-6 w-6' variant={value.iconVariant} strokeClass='stroke-neutral-800' />
|
|
37
|
+
<Typography
|
|
38
|
+
textStyle='sub2' className='text-neutral-700' >
|
|
39
|
+
{value.title}
|
|
40
|
+
</Typography>
|
|
47
41
|
</div>
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
<div className="tb-l:flex hidden">
|
|
52
|
-
{props.CTA &&
|
|
53
|
-
<div className="mt-16 tb:mt-10 tb:flex">
|
|
54
|
-
<a href={props.CTA['url']}>
|
|
55
|
-
<HDSButton
|
|
56
|
-
label={props.CTA['text']}
|
|
57
|
-
type={'secondary'}
|
|
58
|
-
size='md'
|
|
59
|
-
rightAnimatedArrowColor="#3970FD"
|
|
60
|
-
/>
|
|
61
|
-
</a>
|
|
62
|
-
</div>}
|
|
42
|
+
))
|
|
43
|
+
}
|
|
44
|
+
</div>
|
|
63
45
|
</div>
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
</div>
|
|
69
|
-
{(props.heroImageURL &&
|
|
70
|
-
props.heroImageAlt) ?
|
|
71
|
-
(
|
|
72
|
-
<>
|
|
73
|
-
<div className="flex justify-center tb:justify-start tb-l:justify-end tb-l:pt-20 tb:max-w-[600px]">
|
|
74
|
-
<img
|
|
75
|
-
src={props.heroImageURL}
|
|
76
|
-
alt={props.heroImageAlt}
|
|
77
|
-
className="rounded-xl tb-l:rounded-none tb-l:rounded-br-3xl tb-l:rounded-tl-3xl w-full h-auto object-cover db-s:max-w-[650px] tb-l:max-w-[600px] tb:max-w-[420px] "
|
|
78
|
-
/>
|
|
79
|
-
</div>
|
|
80
|
-
</>
|
|
81
|
-
)
|
|
82
|
-
:
|
|
83
|
-
(
|
|
84
|
-
<>
|
|
85
|
-
{props.video_url && (
|
|
86
|
-
<div className="flex mt-4 tb:mt-0 tb:items-end tb:max-w-[600px] tb-l:min-w-[550px]">
|
|
87
|
-
<video
|
|
88
|
-
autoPlay
|
|
89
|
-
loop
|
|
90
|
-
playsInline
|
|
91
|
-
muted
|
|
92
|
-
src={props.video_url}
|
|
93
|
-
className=" rounded-xl tb-l:rounded-none tb-l:rounded-br-3xl tb-l:rounded-tl-3xl"
|
|
94
|
-
/>
|
|
95
|
-
</div>)}
|
|
96
|
-
</>
|
|
97
|
-
)}
|
|
98
|
-
</div>
|
|
99
|
-
<div className="tb-l:hidden pb-6">
|
|
100
|
-
{props.brandImageURL &&
|
|
101
|
-
props.brandImageAlt && (
|
|
102
|
-
<div className="pb-4 ">
|
|
103
|
-
<img src={props.brandImageURL} alt={props.brandImageAlt} className="max-h-[28px]" />
|
|
104
|
-
</div>
|
|
105
|
-
)
|
|
106
|
-
}
|
|
107
|
-
<div className='text-neutral-1000 text-hds-m-h4 tb:text-hds-t-h3 db:text-hds-d-h3'>{props.title}</div>
|
|
108
|
-
</div>
|
|
109
|
-
</div>
|
|
110
|
-
<div className="tb-l:hidden block">
|
|
46
|
+
)
|
|
47
|
+
}
|
|
48
|
+
</div>
|
|
49
|
+
)}
|
|
111
50
|
{props.CTA &&
|
|
112
51
|
<div className="mt-16 tb:mt-10 tb:flex">
|
|
113
52
|
<a href={props.CTA['url']}>
|
|
114
53
|
<HDSButton
|
|
115
54
|
label={props.CTA['text']}
|
|
116
|
-
type={'secondary'}
|
|
55
|
+
type={props.CTA['type'] || 'secondary'}
|
|
117
56
|
size='md'
|
|
118
57
|
rightAnimatedArrowColor="#3970FD"
|
|
119
58
|
/>
|
|
120
59
|
</a>
|
|
121
60
|
</div>}
|
|
122
61
|
</div>
|
|
123
|
-
|
|
62
|
+
{(props.heroImageURL &&
|
|
63
|
+
props.heroImageAlt) ?
|
|
64
|
+
(
|
|
65
|
+
<>
|
|
66
|
+
<div className="flex justify-center tb:justify-start tb-l:justify-end tb-l:pt-20 tb:max-w-[600px]">
|
|
67
|
+
<img
|
|
68
|
+
src={props.heroImageURL}
|
|
69
|
+
alt={props.heroImageAlt}
|
|
70
|
+
className="rounded-xl tb-l:rounded-none tb-l:rounded-br-3xl tb-l:rounded-tl-3xl w-full h-auto object-cover db-s:max-w-[650px] tb-l:max-w-[600px] tb:max-w-[420px] "
|
|
71
|
+
/>
|
|
72
|
+
</div>
|
|
73
|
+
</>
|
|
74
|
+
)
|
|
75
|
+
:
|
|
76
|
+
(
|
|
77
|
+
<>
|
|
78
|
+
{props.video_url && (
|
|
79
|
+
<div className="flex mt-4 tb:mt-0 tb:items-end tb:max-w-[600px] tb-l:min-w-[550px]">
|
|
80
|
+
<video
|
|
81
|
+
autoPlay
|
|
82
|
+
loop
|
|
83
|
+
playsInline
|
|
84
|
+
muted
|
|
85
|
+
src={props.video_url}
|
|
86
|
+
className=" rounded-xl tb-l:rounded-none tb-l:rounded-br-3xl tb-l:rounded-tl-3xl"
|
|
87
|
+
/>
|
|
88
|
+
</div>)}
|
|
89
|
+
</>
|
|
90
|
+
)}
|
|
124
91
|
|
|
92
|
+
<div className="tb-l:hidden pb-6">
|
|
93
|
+
{props.brandImageURL &&
|
|
94
|
+
props.brandImageAlt && (
|
|
95
|
+
<div className="pb-4 ">
|
|
96
|
+
<img src={props.brandImageURL} alt={props.brandImageAlt} className="max-h-[28px]" />
|
|
97
|
+
</div>
|
|
98
|
+
)
|
|
99
|
+
}
|
|
100
|
+
<div className='text-neutral-1000 text-hds-m-h4 tb:text-hds-t-h3 db:text-hds-d-h3'>{props.title}</div>
|
|
101
|
+
</div>
|
|
102
|
+
{
|
|
103
|
+
props.tagline && (
|
|
104
|
+
<Typography textStyle='h6' className='text-blue-400 tb-l:hidden uppercase'>{props.tagline}</Typography>
|
|
105
|
+
)
|
|
106
|
+
}
|
|
107
|
+
</div>
|
|
125
108
|
|
|
126
109
|
</>
|
|
127
110
|
)
|
|
@@ -2401,9 +2401,6 @@ export default function Icon ({ variant, height, strokeColor, strokeClass, class
|
|
|
2401
2401
|
if (variant === 'meetup') {
|
|
2402
2402
|
IconStrokeCLass = 'fill-neutral-500 group-hover/icon:fill-pink-meetup'
|
|
2403
2403
|
}
|
|
2404
|
-
if (variant === 'graphQL') {
|
|
2405
|
-
IconStrokeCLass = ''
|
|
2406
|
-
}
|
|
2407
2404
|
return (
|
|
2408
2405
|
<div style={{ stroke: `${strokeColor}` }}>
|
|
2409
2406
|
<CurrentActiveIcon
|