hds-web 1.22.3 → 1.22.5
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 +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/HDS/components/Cards/StoryCard/storyxl.js +88 -102
package/package.json
CHANGED
|
@@ -6,122 +6,108 @@ 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="tb-l:flex hidden justify-start">
|
|
20
|
+
<img src={props.brandImageURL} alt={props.brandImageAlt} className=" " />
|
|
21
|
+
</div>
|
|
22
|
+
)
|
|
23
|
+
|
|
24
|
+
}
|
|
25
|
+
{props.title &&
|
|
26
|
+
(
|
|
27
|
+
<div className="flex pt-3 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'
|
|
37
|
+
variant={value.iconVariant}
|
|
38
|
+
strokeClass={value.strokeClass ?? 'stroke-neutral-800'}
|
|
39
|
+
/>
|
|
40
|
+
<Typography
|
|
41
|
+
textStyle='sub2' className='text-neutral-700' >
|
|
42
|
+
{value.title}
|
|
43
|
+
</Typography>
|
|
47
44
|
</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>}
|
|
45
|
+
))
|
|
46
|
+
}
|
|
47
|
+
</div>
|
|
63
48
|
</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">
|
|
49
|
+
)
|
|
50
|
+
}
|
|
51
|
+
</div>
|
|
52
|
+
)}
|
|
111
53
|
{props.CTA &&
|
|
112
54
|
<div className="mt-16 tb:mt-10 tb:flex">
|
|
113
55
|
<a href={props.CTA['url']}>
|
|
114
56
|
<HDSButton
|
|
115
57
|
label={props.CTA['text']}
|
|
116
|
-
type={'secondary'}
|
|
58
|
+
type={props.CTA['type'] || 'secondary'}
|
|
117
59
|
size='md'
|
|
118
60
|
rightAnimatedArrowColor="#3970FD"
|
|
119
61
|
/>
|
|
120
62
|
</a>
|
|
121
63
|
</div>}
|
|
122
64
|
</div>
|
|
123
|
-
|
|
65
|
+
{(props.heroImageURL &&
|
|
66
|
+
props.heroImageAlt) ?
|
|
67
|
+
(
|
|
68
|
+
<>
|
|
69
|
+
<div className="flex justify-center tb:justify-start tb-l:justify-end tb-l:pt-20 tb:max-w-[600px]">
|
|
70
|
+
<img
|
|
71
|
+
src={props.heroImageURL}
|
|
72
|
+
alt={props.heroImageAlt}
|
|
73
|
+
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] "
|
|
74
|
+
/>
|
|
75
|
+
</div>
|
|
76
|
+
</>
|
|
77
|
+
)
|
|
78
|
+
:
|
|
79
|
+
(
|
|
80
|
+
<>
|
|
81
|
+
{props.video_url && (
|
|
82
|
+
<div className="flex mt-4 tb:mt-0 tb:items-end tb:max-w-[600px] tb-l:min-w-[550px]">
|
|
83
|
+
<video
|
|
84
|
+
autoPlay
|
|
85
|
+
loop
|
|
86
|
+
playsInline
|
|
87
|
+
muted
|
|
88
|
+
src={props.video_url}
|
|
89
|
+
className=" rounded-xl tb-l:rounded-none tb-l:rounded-br-3xl tb-l:rounded-tl-3xl"
|
|
90
|
+
/>
|
|
91
|
+
</div>)}
|
|
92
|
+
</>
|
|
93
|
+
)}
|
|
124
94
|
|
|
95
|
+
<div className="tb-l:hidden pb-6">
|
|
96
|
+
{props.brandImageURL &&
|
|
97
|
+
props.brandImageAlt && (
|
|
98
|
+
<div className="pb-1 ">
|
|
99
|
+
<img src={props.brandImageURL} alt={props.brandImageAlt} className="max-h-[64px]" />
|
|
100
|
+
</div>
|
|
101
|
+
)
|
|
102
|
+
}
|
|
103
|
+
<div className='text-neutral-1000 text-hds-m-h4 tb:text-hds-t-h3 db:text-hds-d-h3'>{props.title}</div>
|
|
104
|
+
</div>
|
|
105
|
+
{
|
|
106
|
+
props.tagline && (
|
|
107
|
+
<Typography textStyle='h6' className='text-blue-400 tb-l:hidden uppercase'>{props.tagline}</Typography>
|
|
108
|
+
)
|
|
109
|
+
}
|
|
110
|
+
</div>
|
|
125
111
|
|
|
126
112
|
</>
|
|
127
113
|
)
|
|
@@ -133,7 +119,7 @@ StoryCardXL.defaultProps = {
|
|
|
133
119
|
heroIconVariant: 'calendar',
|
|
134
120
|
heroIconStrokeClass: 'stroke-neutral-1000',
|
|
135
121
|
heroListTitle: '100 days from concept to production',
|
|
136
|
-
brandImageURL: 'https://res.cloudinary.com/
|
|
122
|
+
brandImageURL: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1690982762/pulley_pcj45e_8fd10af212.png',
|
|
137
123
|
brandImageAlt: 'optum',
|
|
138
124
|
title: 'Healthcare giant Optum goes from concept to production in 100 days with Hasura',
|
|
139
125
|
description: 'description1',
|