hds-web 1.10.5 → 1.10.7

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 (9) hide show
  1. package/dist/index.css +2 -2
  2. package/dist/index.es.css +2 -2
  3. package/dist/index.es.js +4 -4
  4. package/dist/index.js +4 -4
  5. package/package.json +2 -1
  6. package/src/HDS/components/Carousels/customCarousel.js +43 -13
  7. package/src/HDS/components/Carousels/homeCarousel.js +107 -50
  8. package/src/HDS/modules/Cards/dataSourceCard.js +6 -4
  9. package/src/styles/tailwind.css +123 -77
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hds-web",
3
- "version": "1.10.5",
3
+ "version": "1.10.7",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
@@ -18,6 +18,7 @@
18
18
  "react-dom": "^17.0.1",
19
19
  "react-markdown": "^8.0.7",
20
20
  "react-scripts": "5.0.1",
21
+ "smoothscroll-polyfill": "^0.4.4",
21
22
  "uuid": "^9.0.0",
22
23
  "web-vitals": "^2.1.4",
23
24
  "yarn": "^1.22.19"
package/src/HDS/components/Carousels/customCarousel.js CHANGED
@@ -77,25 +77,55 @@ export default function CustomCarousel(props) {
77
77
 
78
78
  const maxVisibleCards = 6;
79
79
 
80
- const arrowStyle = ' text-2xl z-10 bg-black h-10 ml-6 w-10 rounded-full bg-neutral-0 shadow hover:bg-neutral-0 flex items-center justify-center';
80
+ const arrowStyle = ' text-2xl z-10 bg-black h-10 ml-6 w-10 rounded-full bg-neutral-0 shadow hover:bg-neutral-0 flex items-center justify-center shadow-md';
81
81
 
82
- const sliderControl = isLeft => (
82
+ const disableButton = (current, dir) => {
83
+ if (dir === 'isLeft') {
84
+ if (current === 0) return true;
85
+ else return false
86
+ }
87
+
88
+ if (dir === 'isRight') {
89
+ if (current === 2) return true;
90
+ else return false
91
+ }
92
+
93
+
94
+ }
95
+
96
+ const sliderLeftControl = () => (
83
97
  <button
84
98
  type="button"
85
- onClick={isLeft ? previousCard : nextCard}
86
- className={`flex ${arrowStyle} ${isLeft ? '' : ''}`}
87
99
 
100
+ onClick={() => {
101
+
102
+ previousCard();
103
+ }}
104
+ className={`flex bg-blue-600 ${arrowStyle} disabled:bg-neutral-200 `}
105
+ disabled={disableButton(currentCard, 'isLeft')} // Disable the button if it's the last card
88
106
  >
89
- <span role="img" aria-label={`Arrow ${isLeft ? 'left' : 'right'}`}>
90
- {isLeft ?
91
-
107
+ <span role="img" aria-label={`Arrow left `}>
108
+ {(
92
109
  <Icon height={'h-6 w-6'} variant={'chevronleft'} strokeColor='#00288E' />
110
+ )}
111
+ </span>
112
+ </button>
113
+ );
114
+ const sliderRightControl = () => (
115
+ <button
116
+ type="button"
93
117
 
94
- :
95
-
118
+ onClick={() => {
119
+
120
+ nextCard();
121
+ }}
122
+ className={`flex bg-blue-600 ${arrowStyle} disabled:bg-neutral-200 `}
123
+ disabled={disableButton(currentCard, 'isRight')} // Disable the button if it's the last card
124
+ >
125
+ <span role="img" aria-label={`Arrow right `}>
126
+ {(
96
127
  <Icon height={'h-6 w-6'} variant={'chevronright'} strokeColor='#00288E' />
97
-
98
- }
128
+ )}
99
129
  </span>
100
130
  </button>
101
131
  );
@@ -149,8 +179,8 @@ export default function CustomCarousel(props) {
149
179
  <div className="flex items-center justify-center mt-10">
150
180
  {/* {slider()} */}
151
181
  <div className="flex">
152
- {sliderControl(true)}
153
- {sliderControl()}
182
+ {sliderLeftControl()}
183
+ {sliderRightControl()}
154
184
  </div>
155
185
  </div>
156
186
  <div className="justify-center select-none items-center"
package/src/HDS/components/Carousels/homeCarousel.js CHANGED
@@ -1,8 +1,9 @@
1
1
  import React from "react";
2
- import { useRef, useState } from "react";
2
+ import { useRef, useState, useEffect } from "react";
3
3
  import { Icon } from "../common-components/Icon";
4
4
  import { HDSButton } from "../Buttons";
5
5
  import { VideoCard } from '../Cards/VideoCard'
6
+ import smoothscroll from 'smoothscroll-polyfill';
6
7
  const carouselItems = [
7
8
  [
8
9
  "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687016995/optum_Card_17973d6328.png",
@@ -24,17 +25,28 @@ const SideCard = (item) => (
24
25
 
25
26
  export default function HomePageCarousePrimary(props) {
26
27
 
27
- //center carousel
28
- let arr = []
29
- let key1, key2;
30
- for (const key in props.data) {
31
- if (props.data.hasOwnProperty(key)) {
32
- key1 = props.data[key].slideLeftImage.data.attributes.url
33
- key2 = props.data[key].slideRightImage.data.attributes.url
34
- arr.push(key1);
28
+ useEffect(() => {
29
+ smoothscroll.polyfill();
35
30
 
36
- }
37
- }
31
+ }, []);
32
+
33
+ //center carousel
34
+ let arr =
35
+ [
36
+ "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687016994/philips_5bab1602cd.png",
37
+ "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687016996/nutrien_e629b651d5.png",
38
+ "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687016995/optum_Card_17973d6328.png",
39
+
40
+ ]
41
+ // let key1, key2;
42
+ // for (const key in props.data) {
43
+ // if (props.data.hasOwnProperty(key)) {
44
+ // key1 = props.data[key].slideLeftImage.data.attributes.url
45
+ // key2 = props.data[key].slideRightImage.data.attributes.url
46
+ // arr.push(key1);
47
+
48
+ // }
49
+ // }
38
50
 
39
51
  function extractMappedValues(obj) {
40
52
  return {
@@ -69,12 +81,13 @@ export default function HomePageCarousePrimary(props) {
69
81
  videoProps.push(videoProp);
70
82
  }
71
83
  }
84
+
85
+ const [isLastCard, setIsLastCard] = useState(false);
72
86
  const [boolean, setBoolean] = React.useState(null);
73
87
  const carouselRef = useRef(null); // Create a ref using useRef
74
88
  const carouselRef2 = useRef(null); // Create a ref using useRef
75
89
  const [currentCard, setCurrentCard] = React.useState(0);
76
- const [leftDisablebtn, setLeftDisablebtn] = React.useState(false);
77
- const [rightDisablebtn, setRightDisablebtn] = React.useState(false);
90
+
78
91
  const refs = videoProps.reduce((acc, val, i) => {
79
92
  acc[i] = React.createRef();
80
93
  return acc;
@@ -84,6 +97,8 @@ export default function HomePageCarousePrimary(props) {
84
97
  return acc;
85
98
  }, {});
86
99
 
100
+
101
+
87
102
  const totalCards = arr.length;
88
103
 
89
104
  const nextCard = () => {
@@ -100,8 +115,7 @@ export default function HomePageCarousePrimary(props) {
100
115
  left: carouselRef2.current.scrollLeft + carouselRef2.current.children[0].offsetWidth * scrollByAmount2,
101
116
  behavior: "smooth",
102
117
  });
103
- }
104
- else {
118
+ } else {
105
119
  setCurrentCard(0);
106
120
  carouselRef.current.scrollTo({
107
121
  left: 0,
@@ -111,6 +125,7 @@ export default function HomePageCarousePrimary(props) {
111
125
  left: 0,
112
126
  behavior: "smooth",
113
127
  });
128
+ setIsLastCard(true); // Set the state variable to indicate that it's the last card
114
129
  }
115
130
  };
116
131
 
@@ -127,6 +142,7 @@ export default function HomePageCarousePrimary(props) {
127
142
  left: carouselRef2.current.scrollLeft - carouselRef2.current.children[0].offsetWidth * scrollByAmount2,
128
143
  behavior: "smooth",
129
144
  });
145
+ setIsLastCard(false); // Set the state variable to indicate that it's not the last card
130
146
  } else {
131
147
  const lastCardIndex = totalCards - 1;
132
148
  const scrollLeft = carouselRef.current.scrollWidth - carouselRef.current.children[0].offsetWidth * scrollByAmount;
@@ -137,10 +153,11 @@ export default function HomePageCarousePrimary(props) {
137
153
  });
138
154
  const scrollLeft2 = carouselRef2.current.scrollWidth - carouselRef2.current.children[0].offsetWidth * scrollByAmount2;
139
155
  setCurrentCard(lastCardIndex);
140
- carouselRef2.current.scrollTo({ // Update this line to use carouselRef2
156
+ carouselRef2.current.scrollTo({
141
157
  left: scrollLeft2,
142
158
  behavior: "smooth",
143
159
  });
160
+ setIsLastCard(false); // Set the state variable to indicate that it's not the last card
144
161
  }
145
162
  };
146
163
 
@@ -151,19 +168,53 @@ export default function HomePageCarousePrimary(props) {
151
168
 
152
169
  };
153
170
 
154
- const sliderControl = (isLeft) => (
171
+
172
+
173
+ const disableButton = (current, dir) => {
174
+ if (dir === 'isLeft') {
175
+ if (current === 0) return true;
176
+ else return false
177
+ }
178
+
179
+ if (dir === 'isRight') {
180
+ if (current === 2) return true;
181
+ else return false
182
+ }
183
+
184
+
185
+ }
186
+
187
+ const sliderLeftControl = () => (
155
188
  <button
156
189
  type="button"
190
+
157
191
  onClick={() => {
158
- toggleBoolean(); // Call the toggleBoolean function
159
- isLeft ? previousCard() : nextCard(); // Call previousCard or nextCard based on the button clicked
192
+ toggleBoolean();
193
+ previousCard();
160
194
  }}
161
- className={`flex bg-blue-600 ${arrowStyle} ${isLeft ? '' : ''}`}
195
+ className={`flex bg-blue-600 ${arrowStyle} disabled:bg-neutral-200 `}
196
+ disabled={disableButton(currentCard, 'isLeft')} // Disable the button if it's the last card
162
197
  >
163
- <span role="img" aria-label={`Arrow ${isLeft ? 'left' : 'right'}`}>
164
- {isLeft ? (
198
+ <span role="img" aria-label={`Arrow left `}>
199
+ {(
165
200
  <Icon height={'h-6 w-6'} variant={'chevronleft'} strokeColor='#00288E' />
166
- ) : (
201
+ )}
202
+ </span>
203
+ </button>
204
+ );
205
+ const sliderRightControl = () => (
206
+ <button
207
+ type="button"
208
+
209
+ onClick={() => {
210
+ toggleBoolean();
211
+ nextCard();
212
+ }}
213
+ className={`flex bg-blue-600 ${arrowStyle} disabled:bg-neutral-200 `}
214
+ disabled={disableButton(currentCard, 'isRight')} // Disable the button if it's the last card
215
+ >
216
+ <span role="img" aria-label={`Arrow right `}>
217
+ {(
167
218
  <Icon height={'h-6 w-6'} variant={'chevronright'} strokeColor='#00288E' />
168
219
  )}
169
220
  </span>
@@ -171,7 +222,7 @@ export default function HomePageCarousePrimary(props) {
171
222
  );
172
223
  const [isScrollActive, setScrollActive] = useState(false);
173
224
 
174
- console.log(videoProps)
225
+
175
226
  return (
176
227
 
177
228
  <div className="min-[699px]:relative block">
@@ -193,15 +244,25 @@ export default function HomePageCarousePrimary(props) {
193
244
  <div className="hidden min-[699px]:flex z-10 min-[699px]:mt-[70px] justify-center items-center">
194
245
 
195
246
  <div className="flex w-screen gap-6 justify-center ">
196
- {sliderControl(true)}
197
- {sliderControl()}
247
+ <div className="btnDBleft">
248
+
249
+ {sliderLeftControl(true)}
250
+ </div>
251
+ <div className="btnDBright">
252
+
253
+ {sliderRightControl()}
254
+ </div>
198
255
  </div>
199
256
  </div>
200
257
  <div className="max-[369px]:mt-8 min-[400px]:-mt-20 min-[699px]:hidden">
201
258
 
202
259
  <div className="flex w-screen gap-6 justify-center ">
203
- {sliderControl(true)}
204
- {sliderControl()}
260
+
261
+ {sliderLeftControl(true)}
262
+
263
+
264
+ {sliderRightControl()}
265
+
205
266
  </div>
206
267
  </div>
207
268
  <div className="justify-center select-none items-center"
@@ -233,8 +294,8 @@ export default function HomePageCarousePrimary(props) {
233
294
  >
234
295
 
235
296
  {arr.map((item, i) => {
236
-
237
- // toggleBoolean();
297
+
298
+
238
299
  return (
239
300
  <>
240
301
 
@@ -245,7 +306,18 @@ export default function HomePageCarousePrimary(props) {
245
306
  >
246
307
  <div className="select-none rounded-3xl object-contain">
247
308
  <div>
248
- {SideCard(item)}
309
+ {i == 0 && (
310
+ SideCard(arr[i + 1])
311
+ )
312
+
313
+ }
314
+ {i == 1 && (
315
+ SideCard(arr[1])
316
+ )
317
+
318
+ }
319
+
320
+
249
321
 
250
322
  </div>
251
323
  </div>
@@ -257,17 +329,9 @@ export default function HomePageCarousePrimary(props) {
257
329
  >
258
330
  <div className="select-none rounded-3xl object-contain">
259
331
 
260
- {/* {(i + 2) < arr.length && SideCard(arr[i+2])} */}
261
- {(i + 2) < arr.length ?
262
- <>
263
- {SideCard(arr[i + 2])}
264
- </>
265
- :
266
- <>
267
- {SideCard(arr[0])}
268
- </>
332
+ {SideCard(arr[2])}
333
+
269
334
 
270
- }
271
335
 
272
336
  </div>
273
337
  </div>
@@ -278,16 +342,8 @@ export default function HomePageCarousePrimary(props) {
278
342
  >
279
343
  <div className="select-none rounded-3xl object-contain">
280
344
 
281
- {(i + 1) < arr.length ?
282
- <>
283
- {SideCard(arr[i + 1])}
284
- </>
285
- :
286
- <>
287
- {SideCard(arr[0])}
288
- </>
345
+ {SideCard(arr[0])}
289
346
 
290
- }
291
347
  </div>
292
348
  </div>
293
349
 
@@ -314,3 +370,4 @@ export default function HomePageCarousePrimary(props) {
314
370
  );
315
371
  };
316
372
 
373
+
package/src/HDS/modules/Cards/dataSourceCard.js CHANGED
@@ -1,10 +1,11 @@
1
1
  import React from "react";
2
2
  import { Typography } from '../../foundation/Typography'
3
- import { HDSButton} from '../../components/Buttons';
3
+ import { HDSButton } from '../../components/Buttons';
4
4
 
5
5
  export default function DataSourcesCard(props) {
6
6
  return (
7
7
  <>
8
+
8
9
  <div className="flex flex-col-reverse px-6 py-10 db:px-0 db:py-0 db:flex-row db:gap-[132px]">
9
10
 
10
11
  <div className="flex flex-col db:pl-20 db:pt-20 db:pb-[74px]">
@@ -39,7 +40,7 @@ export default function DataSourcesCard(props) {
39
40
  className=" rounded-xl db:rounded-none db:rounded-tl-3xl"
40
41
  />
41
42
  </div>}
42
-
43
+
43
44
  <div className="db:hidden pb-2">
44
45
  <Typography textStyle='h3' className='text-neutral-1000'>{props.title}</Typography>
45
46
  </div>
@@ -49,15 +50,16 @@ export default function DataSourcesCard(props) {
49
50
  )
50
51
  }
51
52
  </div>
53
+
52
54
  </>
53
55
  )
54
56
  }
55
57
 
56
58
  DataSourcesCard.defaultProps = {
57
- title:'100+ Data Sources',
59
+ title: '100+ Data Sources',
58
60
  description: 'description1',
59
61
  CTA: {
60
- text:'Button Label',
62
+ text: 'Button Label',
61
63
  },
62
64
  video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1654760488/samples/sea-turtle.mp4'
63
65
  }