hds-web 1.9.9 → 1.10.1

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.
Files changed (12) hide show
  1. package/dist/index.css +2 -2
  2. package/dist/index.es.css +2 -2
  3. package/dist/index.es.js +6 -6
  4. package/dist/index.js +6 -6
  5. package/package.json +1 -1
  6. package/src/HDS/components/BadgesCaption/badges.js +4 -1
  7. package/src/HDS/components/Cards/Misc/imageBadgeCard.js +1 -1
  8. package/src/HDS/components/Carousels/customCarousel.js +2 -2
  9. package/src/HDS/components/Carousels/homeCarousel.js +88 -238
  10. package/src/HDS/modules/Cards/dataSourceCard.js +14 -3
  11. package/src/HDS/modules/TextCard/textIconCard.js +53 -33
  12. package/src/styles/tailwind.css +90 -114
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hds-web",
3
- "version": "1.9.9",
3
+ "version": "1.10.1",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/HDS/components/BadgesCaption/badges.js CHANGED
@@ -23,7 +23,10 @@ const colorVariants = {
23
23
  cyan: 'bg-cyan-200 text-cyan-800 group-hover:bg-cyan-300 ',
24
24
  cyan200: 'bg-cyan-200 text-cyan-600 border border-cyan-400 border border-cyan-400 ',
25
25
  green: 'bg-green-200 text-green-800 group-hover:bg-green-300 ',
26
- purple500: 'bg-purple-500 shadow-sm'
26
+ purple500: 'bg-purple-500 shadow-sm',
27
+ blue500:'bg-blue-500 shadow-sm',
28
+ green500:'bg-green-500 shadow-sm'
29
+
27
30
  }
28
31
 
29
32
  export default function Badge({
package/src/HDS/components/Cards/Misc/imageBadgeCard.js CHANGED
@@ -6,7 +6,7 @@ export default function ImageBadgeCard (card){
6
6
 
7
7
  return(
8
8
  <>
9
- <div className={`${HDSColor(card.cardBg)}bg-neutral-0 max-w-[700px] min-h-[245px] rounded-3xl p-8`}>
9
+ <div className={`${HDSColor(card.cardBg)}bg-neutral-0 min-w-[312px] tb:max-w-[700px] min-h-[245px] rounded-3xl tb:p-8 p-4`}>
10
10
  <div className='flex flex-col tb:flex-row justify-between gap-4'>
11
11
  <div className='tb:max-w-[400px]'>
12
12
  <Badges
package/src/HDS/components/Carousels/customCarousel.js CHANGED
@@ -101,11 +101,11 @@ export default function CustomCarousel(props) {
101
101
  );
102
102
  return (
103
103
  <div className="">
104
- <div className="block tb:hidden">
104
+ <div className="flex flex-row overflow-scroll scrollbar-hide gap-4 tb:hidden">
105
105
  {showAllCards
106
106
  ? props.cards.map((item, i) => (
107
107
  <div className="my-5" key={i} ref={refs[i]}>
108
- <div className="rounded-3xl overflow-hidden">
108
+ <div className="rounded-3xl min-w-[312px] overflow-hidden">
109
109
  {React.createElement(props.component, item)}
110
110
  </div>
111
111
  </div>
package/src/HDS/components/Carousels/homeCarousel.js CHANGED
@@ -4,259 +4,86 @@ import { Icon } from "../common-components/Icon";
4
4
  import { HDSButton } from "../Buttons";
5
5
  import { VideoCard } from '../Cards/VideoCard'
6
6
  const carouselItems = [
7
- {
8
- name: "John Smith",
9
- designation: "CEO",
10
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
11
- size: 'w-full'
12
- },
13
- {
14
- name: "Jane Doe",
15
- designation: "CTO",
16
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
17
- size: 'w-full'
18
- },
19
- {
20
- name: "Bob Johnson",
21
- designation: "COO",
22
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
23
- size: 'w-full'
24
- },
25
- {
26
- name: "Gourav",
27
- designation: "SDE",
28
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
29
- size: 'w-full'
30
- },
31
- {
32
- name: "Gourav",
33
- designation: "SDE",
34
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
35
- size: 'w-full'
36
- },
37
- {
38
- name: "Gourav",
39
- designation: "SDE",
40
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
41
- size: 'w-full'
42
- },
43
- {
44
- name: "Bob Johnson",
45
- designation: "COO",
46
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
47
- size: 'w-full'
48
- },
49
- {
50
- name: "Gourav",
51
- designation: "SDE",
52
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
53
- size: 'w-full'
54
- },
55
- {
56
- name: "Gourav",
57
- designation: "SDE",
58
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
59
- size: 'w-full'
60
- },
61
- {
62
- name: "Gourav",
63
- designation: "SDE",
64
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
65
- size: 'w-full'
66
- }
67
- ];
68
- const carouselItems2 = [
69
- {
70
- name: "John Smith",
71
- designation: "CEO",
72
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
73
- size: 'w-full'
74
- },
75
- {
76
- name: "Jane Doe",
77
- designation: "CTO",
78
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
79
- size: 'w-full'
80
- },
81
- {
82
- name: "Bob Johnson",
83
- designation: "COO",
84
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
85
- size: 'w-full'
86
- },
87
- {
88
- name: "Gourav",
89
- designation: "SDE",
90
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
91
- size: 'w-full'
92
- },
93
- {
94
- name: "Gourav",
95
- designation: "SDE",
96
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
97
- size: 'w-full'
98
- },
99
- {
100
- name: "Gourav",
101
- designation: "SDE",
102
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
103
- size: 'w-full'
104
- },
105
- {
106
- name: "Bob Johnson",
107
- designation: "COO",
108
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
109
- size: 'w-full'
110
- },
111
- {
112
- name: "Gourav",
113
- designation: "SDE",
114
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
115
- size: 'w-full'
116
- },
117
- {
118
- name: "Gourav",
119
- designation: "SDE",
120
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
121
- size: 'w-full'
122
- },
123
- {
124
- name: "Gourav",
125
- designation: "SDE",
126
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
127
- size: 'w-full'
128
- }
129
- ];
130
-
131
- const video_props =
132
7
  [
133
- {
134
- video_url: 'https://nutrien-prod-asset.s3.us-east-2.amazonaws.com/s3fs-public/video-thumbnails/2019-05/Nutrien-Banner-Loop-V4.mp4',
135
- //video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1654760488/samples/sea-turtle.mp4',
8
+ "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687016995/optum_Card_17973d6328.png",
9
+ "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687016994/philips_5bab1602cd.png",
10
+ "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687016996/nutrien_e629b651d5.png",
11
+ ]
136
12
 
137
- testimonial: {
138
- card: {
139
- cardBg: '',
140
- title_img: "Optum",
141
- img_alt: 'optum',
142
- subtitle: '“Optum goes from concept to production in 100 days with Hasura”',
143
- avatar: {
144
- img_url: '',
145
- name: 'Nagaraja Nayak',
146
- designation: 'Optum',
147
- avatarBgColor: 'bg-yellow-400'
148
- }
149
- },
150
- cardHover: {
151
- cardBg: 'bg-green-500',
152
- img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1679302435/main-web/roadshow/nagaraja-nayak_l4xte5.png',
153
- img_alt: '',
154
- title: 'Optum goes from concept to production in 100 days with Hasura',
155
- button: {
156
- cta_text: 'Read the case Study'
157
- }
13
+ ];
158
14
 
159
15
 
160
- }
161
- }
162
- },
163
- {
164
- video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1654760488/samples/sea-turtle.mp4',
16
+ const SideCard = (item) => (
17
+ <div className="h-full">
165
18
 
166
- testimonial: {
167
- card: {
168
- cardBg: '',
169
- title_img: "Optum",
170
- img_alt: 'optum',
171
- subtitle: '“Optum goes from concept to production in 100 days with Hasura”',
172
- avatar: {
173
- img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1679302435/main-web/roadshow/nagaraja-nayak_l4xte5.png',
174
- name: 'Nagaraja Nayak',
175
- designation: 'Optum',
176
- avatarBgColor: 'bg-yellow-400'
177
- }
178
- },
179
- cardHover: {
180
- cardBg: 'bg-green-500',
181
- img_url: '',
182
- img_alt: '',
183
- title: 'Optum goes from concept to production in 100 days with Hasura',
184
- button: {
185
- cta_text: 'Read the case Study'
186
- }
19
+ <div className=' w-[300px] flex flex-col items-center justify-between rounded-3xl h-[338px] '>
20
+ <img src={item} alt='img' className='w-[300px]' />
21
+ </div>
22
+ </div>
23
+ )
187
24
 
25
+ export default function HomePageCarousePrimary(props) {
26
+ let arr = []
27
+ let key1, key2;
28
+ for (const key in props.data) {
29
+ if (props.data.hasOwnProperty(key)) {
30
+ key1 = props.data[key].slideLeftImage.data.attributes.url
31
+ key2 = props.data[key].slideRightImage.data.attributes.url
32
+ arr.push(key1);
188
33
 
189
- }
190
- }
191
- },
192
- {
193
- video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1654760488/samples/sea-turtle.mp4',
34
+ }
35
+ }
36
+ function extractMappedValues(obj) {
37
+ return {
38
+ video_url: obj.video.data.attributes.url || "",
194
39
  testimonial: {
195
40
  card: {
196
- cardBg: '',
197
- title_img: "Optum",
198
- img_alt: 'optum',
199
- subtitle: '“Optum goes from concept to production in 100 days with Hasura”',
41
+ title_img: obj.slideLogo?.data?.attributes?.url || "",
42
+ subtitle: obj.slideQuoteText || "",
200
43
  avatar: {
201
- img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1679302435/main-web/roadshow/nagaraja-nayak_l4xte5.png',
202
- name: 'Nagaraja Nayak',
203
- designation: 'Optum',
204
- avatarBgColor: 'bg-yellow-400'
44
+ img_url: obj.slideAuthorImage?.data?.attributes?.url || "",
45
+ name: obj.slideAuthorName || "",
46
+ designation: obj.slideAuthorTitle || ""
205
47
  }
206
48
  },
207
49
  cardHover: {
208
- cardBg: 'bg-green-500',
209
- img_url: '',
210
- img_alt: '',
211
- title: 'Optum goes from concept to production in 100 days with Hasura',
50
+ cardBg: obj.slideHoverColor || "",
51
+ img_url: obj.slideHoverImage?.data?.attributes?.url || "",
52
+ title: obj.slideHoverText || "",
212
53
  button: {
213
- cta_text: 'Read the case Study'
54
+ cta_text: obj.slideCTAText || ""
214
55
  }
215
-
216
-
217
56
  }
218
57
  }
219
- },
220
- ]
221
- const SideCard = () => (
222
- <div className="h-full">
58
+ };
59
+ }
223
60
 
224
- <div className='bg-green-500 w-[300px] flex flex-col items-center justify-between rounded-3xl h-[338px] '>
225
- <div className='w-[300px] flex justify-center'>
226
- <img src='https://res.cloudinary.com/dh8fp23nd/image/upload/v1686737531/hasura-design-system/icons/optum_zn0bhw.png' alt='imgb' className='p-5 ' />
227
- </div>
228
- <div className='w-[300px] flex justify-center'>
229
- <img src='https://res.cloudinary.com/dh8fp23nd/image/upload/v1685596743/website%20v3/capabilities-pre-footer_qxqlon.png' alt='imga' className='p-2 w-[194px]' />
230
- </div>
231
- </div>
232
- </div>
233
- )
234
- export default function HomePageCarousePrimary(props) {
235
- const {
236
- cards = carouselItems,
237
- cards2 = carouselItems2,
238
- } = props;
239
61
 
62
+ const videoProps = [];
63
+ for (const key in props.data) {
64
+ if (props.data.hasOwnProperty(key)) {
65
+ const videoProp = extractMappedValues(props.data[key]);
66
+ videoProps.push(videoProp);
67
+ }
68
+ }
240
69
  const [boolean, setBoolean] = React.useState(null);
241
70
  const carouselRef = useRef(null); // Create a ref using useRef
242
71
  const carouselRef2 = useRef(null); // Create a ref using useRef
243
72
  const [currentCard, setCurrentCard] = React.useState(0);
244
- const refs = cards.reduce((acc, val, i) => {
73
+ const refs = videoProps.reduce((acc, val, i) => {
245
74
  acc[i] = React.createRef();
246
75
  return acc;
247
76
  }, {});
248
- const refs2 = cards2.reduce((acc, val, i) => {
77
+ const refs2 = carouselItems.reduce((acc, val, i) => {
249
78
  acc[i] = React.createRef();
250
79
  return acc;
251
80
  }, {});
252
81
 
253
-
254
-
255
- const totalCards = carouselItems.length;
82
+ const totalCards = arr.length;
256
83
 
257
84
  const nextCard = () => {
258
85
  let scrollByAmount = 1;
259
- let scrollByAmount2 = 5;
86
+ let scrollByAmount2 = 1.5;
260
87
 
261
88
  if (currentCard < totalCards - scrollByAmount) {
262
89
  setCurrentCard(currentCard + scrollByAmount);
@@ -284,7 +111,7 @@ export default function HomePageCarousePrimary(props) {
284
111
 
285
112
  const previousCard = () => {
286
113
  let scrollByAmount = 1;
287
- let scrollByAmount2 = 5;
114
+ let scrollByAmount2 = 1.5;
288
115
  if (currentCard > 0) {
289
116
  setCurrentCard(currentCard - scrollByAmount);
290
117
  carouselRef.current.scrollTo({
@@ -305,18 +132,18 @@ export default function HomePageCarousePrimary(props) {
305
132
  });
306
133
  const scrollLeft2 = carouselRef2.current.scrollWidth - carouselRef2.current.children[0].offsetWidth * scrollByAmount2;
307
134
  setCurrentCard(lastCardIndex);
308
- carouselRef.current.scrollTo({
135
+ carouselRef2.current.scrollTo({ // Update this line to use carouselRef2
309
136
  left: scrollLeft2,
310
137
  behavior: "smooth",
311
138
  });
312
139
  }
313
140
  };
314
141
 
315
- const arrowStyle = ' text-2xl z-10 bg-black h-10 ml-6 w-10 rounded-full bg-neutral-0 hover:bg-neutral-0 flex items-center justify-center';
142
+ const arrowStyle = ' text-2xl z-10 bg-black h-10 w-10 rounded-full bg-neutral-0 hover:bg-neutral-200 flex items-center justify-center';
316
143
 
317
144
  const toggleBoolean = () => {
318
145
  setBoolean((prevBoolean) => !prevBoolean); // Toggle the boolean value
319
- console.log(boolean)
146
+
320
147
  };
321
148
 
322
149
  const sliderControl = (isLeft) => (
@@ -351,10 +178,12 @@ export default function HomePageCarousePrimary(props) {
351
178
  onMouseEnter={handleMouseEnter}
352
179
  onMouseLeave={handleMouseLeave}
353
180
  >
354
- <div className="hidden tb:flex-col-reverse tb:flex items-center">
355
- <div className="flex z-20 justify-center items-center">
181
+
182
+
183
+ <div className=" flex flex-col-reverse tb:flex-col-reverse tb:flex items-center">
184
+ <div className="flex z-50 justify-center items-center">
356
185
  {/* {slider()} */}
357
- <div className="flex w-screen justify-center ">
186
+ <div className="flex w-screen gap-6 justify-center ">
358
187
  {sliderControl(true)}
359
188
  {sliderControl()}
360
189
  </div>
@@ -363,13 +192,13 @@ export default function HomePageCarousePrimary(props) {
363
192
 
364
193
  >
365
194
  <div className="w-screen flex justify-center">
366
- <div className="absolute z-30">
367
- <div className={`snap-x w-[643px] h-[800px] items-center z-10 inline-flex select-none overflow-x-hidden bg-neutral-100 scrollbar-hide`}
195
+ <div className="db:absolute z-30">
196
+ <div className={`snap-x w-screen tb:w-[643px] bg-neutral-100 tb:h-[513px] db:h-[800px] items-center z-10 inline-flex select-none overflow-x-hidden scrollbar-hide`}
368
197
  ref={carouselRef}
369
198
  >
370
- {video_props.map((item, i) => (
199
+ {videoProps.map((item, i) => (
371
200
  <div className=" db:snap-center snap-center tb-m:snap-start mx-5 " key={i} ref={refs[i]}>
372
- <div className=" select-none rounded-3xl object-contain ">
201
+ <div className="select-none rounded-3xl object-contain ">
373
202
  {React.createElement(VideoCard, item)}
374
203
  </div>
375
204
 
@@ -378,25 +207,27 @@ export default function HomePageCarousePrimary(props) {
378
207
 
379
208
  </div>
380
209
  </div>
381
- <div className={` snap-x w-screen tb-l:max-w-[980px] min-[1300px]:max-w-7xl h-[800px] items-center flex min-[1300px]:gap-[160px] select-none overflow-x-hidden scrollbar-hide`}
210
+ <div className={`hidden snap-x w-screen tb-l:max-w-[980px] min-[1300px]:max-w-7xl h-[675px] items-center db:flex min-[1300px]:gap-[160px] select-none overflow-x-hidden scrollbar-hide relative top-[90px]`}
382
211
  ref={carouselRef2}
383
212
 
384
213
  >
385
214
 
386
- {cards.map((item, i) => {
215
+ {arr.map((item, i) => {
387
216
 
388
217
  // toggleBoolean();
389
218
  return (
390
219
  <>
391
220
 
392
221
  <div
393
- className={`${isScrollActive ? '' : '-translate-y-36'} transition-all duration-[1500ms] z-[1] snap-center tb-m:snap-start `}
222
+ className={`${isScrollActive ? '' : '-translate-y-36'} transition-all duration-[1500ms] z-[1] snap-center tb-m:snap-start `}
394
223
  key={i + 'x'}
395
224
  ref={refs2[i]}
396
225
  >
397
226
  <div className="select-none rounded-3xl object-contain">
398
- <SideCard />
227
+ <div>
228
+ {SideCard(item)}
399
229
 
230
+ </div>
400
231
  </div>
401
232
  </div>
402
233
  <div
@@ -405,7 +236,18 @@ export default function HomePageCarousePrimary(props) {
405
236
  ref={refs2[i]}
406
237
  >
407
238
  <div className="select-none rounded-3xl object-contain">
408
- <SideCard />
239
+
240
+ {/* {(i + 2) < arr.length && SideCard(arr[i+2])} */}
241
+ {(i + 2) < arr.length ?
242
+ <>
243
+ {SideCard(arr[i + 2])}
244
+ </>
245
+ :
246
+ <>
247
+ {SideCard(arr[0])}
248
+ </>
249
+
250
+ }
409
251
 
410
252
  </div>
411
253
  </div>
@@ -415,8 +257,17 @@ export default function HomePageCarousePrimary(props) {
415
257
  ref={refs2[i]}
416
258
  >
417
259
  <div className="select-none rounded-3xl object-contain">
418
- <SideCard />
419
260
 
261
+ {(i + 1) < arr.length ?
262
+ <>
263
+ {SideCard(arr[i + 1])}
264
+ </>
265
+ :
266
+ <>
267
+ {SideCard(arr[0])}
268
+ </>
269
+
270
+ }
420
271
  </div>
421
272
  </div>
422
273
 
@@ -434,4 +285,3 @@ export default function HomePageCarousePrimary(props) {
434
285
  );
435
286
  };
436
287
 
437
-
package/src/HDS/modules/Cards/dataSourceCard.js CHANGED
@@ -7,7 +7,12 @@ export default function DataSourcesCard(props) {
7
7
  <>
8
8
  <div className="flex flex-col-reverse px-6 py-10 db:px-0 db:py-0 db:flex-row db:gap-[132px]">
9
9
 
10
- <div className="flex flex-col db:pl-20 db:pt-[104px] db:pb-[74px]">
10
+ <div className="flex flex-col db:pl-20 db:pt-20 db:pb-[74px]">
11
+ {
12
+ props.tagline && (
13
+ <Typography textStyle='h6' className='text-blue-400 db:block uppercase mb-2 hidden '>{props.tagline}</Typography>
14
+ )
15
+ }
11
16
  {props.title && props.description
12
17
  && (<div className="flex flex-col gap-4">
13
18
  <Typography textStyle='h3' className='text-neutral-1000 db:block hidden'>{props.title}</Typography>
@@ -25,7 +30,7 @@ export default function DataSourcesCard(props) {
25
30
  </a>
26
31
  </div>}
27
32
  </div>
28
- {props.video_url && <div className="flex mt-4 tb:mt-0 tb:items-end db:min-w-[550px]">
33
+ {props.video_url && <div className="flex mt-4 tb:mt-0 tb:items-end tb:max-w-[600px] db:min-w-[550px]">
29
34
  <video
30
35
  autoPlay
31
36
  loop
@@ -34,9 +39,15 @@ export default function DataSourcesCard(props) {
34
39
  className=" rounded-xl db:rounded-none db:rounded-tl-3xl"
35
40
  />
36
41
  </div>}
37
- <div className="db:hidden pb-2 pt-10">
42
+
43
+ <div className="db:hidden pb-2">
38
44
  <Typography textStyle='h3' className='text-neutral-1000'>{props.title}</Typography>
39
45
  </div>
46
+ {
47
+ props.tagline && (
48
+ <Typography textStyle='h6' className='text-blue-400 db:hidden uppercase'>{props.tagline}</Typography>
49
+ )
50
+ }
40
51
  </div>
41
52
  </>
42
53
  )
package/src/HDS/modules/TextCard/textIconCard.js CHANGED
@@ -8,42 +8,62 @@ export default function TextIconCard(props) {
8
8
  return (
9
9
  <div className="tb-m:flex gap-14 gap-y-14 gap-x-14 tb:gap-12 db-s:gap-20 db:gap-24">
10
10
  <div className="db-s:max-w-[524px] tb-m:w-1/2 w-full">
11
- <div className="pb-6 tb:pb-8 db:pb-12">
12
- <img className="max-w-[210px]" src={props.imgUrl} alt={props.title} />
13
- </div>
14
- <Typography textStyle="h3" as="h3" className="pb-2 text-neutral-1000">{props.title}</Typography>
15
- <Typography textStyle="sub2" className="pb-6 text-neutral-600">{props.description}</Typography>
16
- {props.button &&
17
- <a href={props.button.cta_link} className="flex ">
18
- <HDSButton
19
- label={props.button.cta_text}
20
- type={props.button.cta_type || 'secondary'}
21
- leftIconVariant='none'
22
- rightIconVariant='none'
23
- state='default'
24
- size='md'
25
- rightAnimatedArrow={true}
26
- rightAnimatedArrowColor={props.button.rightAnimatedArrowColor || '#3970FD'}
27
- />
28
- </a>
29
- }
30
-
31
- </div>
32
- <div className="flex-1 pt-14 tb-m:pt-0">
33
11
  {
34
- props.iconCards.map((card, index) => (
35
- <div className="pb-6 tb:pb-10 tb-l:pb-16 last:pb-0 flex" key={index}>
36
- <div className={`bg-blue-300 w-12 h-12 min-w-[48px] rounded-full flex justify-center items-center mr-5`}>
37
- <Icon height={'h-6 w-6 stroke-[1.5px]'} variant={((card.iconName) ? card.iconName : 'cube02')} strokeClass='stroke-neutral-1000' />
38
- </div>
39
- <div>
40
- <Typography textStyle="h4" as="h4" className="pb-2 text-neutral-1000">{card.title}</Typography>
41
- <Typography textStyle="body1" className="text-neutral-600">{card.description}</Typography>
42
- </div>
43
- </div>
44
- ))
12
+ props.tagline && (
13
+ <Typography textStyle="h6" as="h6" className="pb-2 uppercase text-blue-400">{props.tagline}</Typography>
14
+ )
15
+ }
16
+ {
17
+ props.title && (
18
+ <Typography textStyle="h3" as="h3" className="pb-2 text-neutral-1000">{props.title}</Typography>
19
+ )
20
+ }
21
+ {
22
+ props.description && (
23
+ <Typography textStyle="sub2" className="pb-6 text-neutral-600">{props.description}</Typography>
24
+ )
25
+ }
26
+ {props.button &&
27
+ <a href={props.button.cta_link} className="flex ">
28
+ <HDSButton
29
+ label={props.button.cta_text}
30
+ type={props.button.cta_type || 'secondary'}
31
+ leftIconVariant='none'
32
+ rightIconVariant='none'
33
+ state='default'
34
+ size='md'
35
+ rightAnimatedArrow={true}
36
+ rightAnimatedArrowColor={props.button.rightAnimatedArrowColor || '#3970FD'}
37
+ />
38
+ </a>
39
+ }
40
+ {
41
+ props.imgUrl && (
42
+ <div className="pt-6 tb:pt-8 db:pt-12">
43
+ <img className="max-w-[210px]" src={props.imgUrl} alt={((props.title) ? props.title : "Illu")} />
44
+ </div>
45
+ )
45
46
  }
46
47
  </div>
48
+ {
49
+ props.iconCards && (
50
+ <div className="flex-1 pt-14 tb-m:pt-0">
51
+ {
52
+ props.iconCards.map((card, index) => (
53
+ <div className="pb-6 tb:pb-10 tb-l:pb-16 last:pb-0 flex" key={index}>
54
+ <div className={"w-12 h-12 min-w-[48px] rounded-full flex justify-center items-center mr-5 " + ((card.iconBgClass) ? HDSColor(card.iconBgClass) : "bg-blue-300")}>
55
+ <Icon height={'h-6 w-6 stroke-[1.5px]'} variant={((card.iconName) ? card.iconName : 'cube02')} strokeClass='stroke-neutral-1000' />
56
+ </div>
57
+ <div>
58
+ <Typography textStyle="h4" as="h4" className="pb-2 text-neutral-1000">{card.title}</Typography>
59
+ <Typography textStyle="body1" className="text-neutral-600">{card.description}</Typography>
60
+ </div>
61
+ </div>
62
+ ))
63
+ }
64
+ </div>
65
+ )
66
+ }
47
67
  </div>
48
68
  )
49
69
  }