hds-web 1.22.1 → 1.22.3
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 +5 -5
- package/package.json +1 -1
- package/src/HDS/components/Cards/StoryCard/storyxl.js +108 -91
- package/src/HDS/components/common-components/Icon/IconMap.js +3 -0
- package/src/styles/tailwind.css +28 -0
package/package.json
CHANGED
|
@@ -6,106 +6,123 @@ import { Icon } from "../../common-components";
|
|
|
6
6
|
export default function StoryCardXL(props) {
|
|
7
7
|
return (
|
|
8
8
|
<>
|
|
9
|
-
<div className="flex flex-col-
|
|
9
|
+
<div className="flex flex-col justify-between px-6 py-10 tb-l:px-0 tb-l:py-0 tb-l:max-w-7xl min-h-[855px] tb-l:min-h-[676px]">
|
|
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
|
+
)
|
|
10
24
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
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>
|
|
25
|
+
}
|
|
26
|
+
{props.title &&
|
|
27
|
+
(
|
|
28
|
+
<div className="flex pt-6 flex-col gap-6 tb-l:max-w-[547px] ">
|
|
29
|
+
<Typography textStyle='h3' className='text-neutral-1000 tb-l:block hidden min-h-[144px] overflow-clip'>{props.title}</Typography>
|
|
30
|
+
{props.heroList &&
|
|
31
|
+
(
|
|
32
|
+
<div>
|
|
33
|
+
<div className="flex flex-col gap-4 tb-l:min-h-[224px]">
|
|
34
|
+
{props.heroList.map((value, index) => (
|
|
35
|
+
<div key={index} className='flex gap-5'>
|
|
36
|
+
<Icon
|
|
37
|
+
height='tb:h-8 tb:w-8 h-6 w-6'
|
|
38
|
+
variant={value.iconVariant}
|
|
39
|
+
strokeClass={value.strokeClass ?? 'stroke-neutral-800'} />
|
|
40
|
+
<Typography
|
|
41
|
+
textStyle='sub2' className='text-neutral-700' >
|
|
42
|
+
{value.title}
|
|
43
|
+
</Typography>
|
|
44
|
+
</div>
|
|
45
|
+
))
|
|
46
|
+
}
|
|
41
47
|
</div>
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
48
|
+
</div>
|
|
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
63
|
</div>
|
|
46
|
-
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
|
|
64
|
+
</div>
|
|
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">
|
|
50
111
|
{props.CTA &&
|
|
51
112
|
<div className="mt-16 tb:mt-10 tb:flex">
|
|
52
113
|
<a href={props.CTA['url']}>
|
|
53
114
|
<HDSButton
|
|
54
115
|
label={props.CTA['text']}
|
|
55
|
-
type={
|
|
116
|
+
type={'secondary'}
|
|
56
117
|
size='md'
|
|
57
118
|
rightAnimatedArrowColor="#3970FD"
|
|
58
119
|
/>
|
|
59
120
|
</a>
|
|
60
121
|
</div>}
|
|
61
122
|
</div>
|
|
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
|
-
)}
|
|
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
123
|
</div>
|
|
108
124
|
|
|
125
|
+
|
|
109
126
|
</>
|
|
110
127
|
)
|
|
111
128
|
}
|
|
@@ -116,7 +133,7 @@ StoryCardXL.defaultProps = {
|
|
|
116
133
|
heroIconVariant: 'calendar',
|
|
117
134
|
heroIconStrokeClass: 'stroke-neutral-1000',
|
|
118
135
|
heroListTitle: '100 days from concept to production',
|
|
119
|
-
brandImageURL: 'https://res.cloudinary.com/dh8fp23nd/image/upload/
|
|
136
|
+
brandImageURL: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1690982687/website%20v3/customers/ushor_zewv16.png',
|
|
120
137
|
brandImageAlt: 'optum',
|
|
121
138
|
title: 'Healthcare giant Optum goes from concept to production in 100 days with Hasura',
|
|
122
139
|
description: 'description1',
|
|
@@ -125,16 +142,16 @@ StoryCardXL.defaultProps = {
|
|
|
125
142
|
},
|
|
126
143
|
heroList: [
|
|
127
144
|
{
|
|
128
|
-
|
|
129
|
-
|
|
145
|
+
iconVariant: 'calendar',
|
|
146
|
+
title: '100 days from concept to production, 100 days from concept to production'
|
|
130
147
|
},
|
|
131
148
|
{
|
|
132
|
-
|
|
133
|
-
|
|
149
|
+
iconVariant: 'database03',
|
|
150
|
+
title: 'Vastly improved access to relevant data, 100 days from concept to production'
|
|
134
151
|
},
|
|
135
152
|
{
|
|
136
|
-
|
|
137
|
-
|
|
153
|
+
iconVariant: 'settings01',
|
|
154
|
+
title: 'Simpler data and API management, 100 days from concept to production'
|
|
138
155
|
}
|
|
139
156
|
]
|
|
140
157
|
// video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1654760488/samples/sea-turtle.mp4'
|
|
@@ -2401,6 +2401,9 @@ 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
|
+
}
|
|
2404
2407
|
return (
|
|
2405
2408
|
<div style={{ stroke: `${strokeColor}` }}>
|
|
2406
2409
|
<CurrentActiveIcon
|
package/src/styles/tailwind.css
CHANGED
|
@@ -1748,6 +1748,10 @@ select{
|
|
|
1748
1748
|
max-height: 44px;
|
|
1749
1749
|
}
|
|
1750
1750
|
|
|
1751
|
+
.max-h-\[50px\]{
|
|
1752
|
+
max-height: 50px;
|
|
1753
|
+
}
|
|
1754
|
+
|
|
1751
1755
|
.min-h-\[12px\]{
|
|
1752
1756
|
min-height: 12px;
|
|
1753
1757
|
}
|
|
@@ -1784,6 +1788,18 @@ select{
|
|
|
1784
1788
|
min-height: 64px;
|
|
1785
1789
|
}
|
|
1786
1790
|
|
|
1791
|
+
.min-h-\[518px\]{
|
|
1792
|
+
min-height: 518px;
|
|
1793
|
+
}
|
|
1794
|
+
|
|
1795
|
+
.min-h-\[839px\]{
|
|
1796
|
+
min-height: 839px;
|
|
1797
|
+
}
|
|
1798
|
+
|
|
1799
|
+
.min-h-\[855px\]{
|
|
1800
|
+
min-height: 855px;
|
|
1801
|
+
}
|
|
1802
|
+
|
|
1787
1803
|
.\!w-full{
|
|
1788
1804
|
width: 100% !important;
|
|
1789
1805
|
}
|
|
@@ -11714,6 +11730,14 @@ select{
|
|
|
11714
11730
|
height: 100%;
|
|
11715
11731
|
}
|
|
11716
11732
|
|
|
11733
|
+
.tb-l\:min-h-\[676px\]{
|
|
11734
|
+
min-height: 676px;
|
|
11735
|
+
}
|
|
11736
|
+
|
|
11737
|
+
.tb-l\:min-h-\[224px\]{
|
|
11738
|
+
min-height: 224px;
|
|
11739
|
+
}
|
|
11740
|
+
|
|
11717
11741
|
.tb-l\:w-1\/2{
|
|
11718
11742
|
width: 50%;
|
|
11719
11743
|
}
|
|
@@ -11792,6 +11816,10 @@ select{
|
|
|
11792
11816
|
flex-direction: column;
|
|
11793
11817
|
}
|
|
11794
11818
|
|
|
11819
|
+
.tb-l\:flex-col-reverse{
|
|
11820
|
+
flex-direction: column-reverse;
|
|
11821
|
+
}
|
|
11822
|
+
|
|
11795
11823
|
.tb-l\:items-center{
|
|
11796
11824
|
align-items: center;
|
|
11797
11825
|
}
|