hds-web 1.6.6 → 1.6.8

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 (53) hide show
  1. package/dist/index.css +2 -5
  2. package/dist/index.es.css +2 -5
  3. package/dist/index.es.js +13 -13
  4. package/dist/index.js +13 -13
  5. package/package.json +1 -1
  6. package/src/HDS/assets/icons/calendar-plus-01.svg +1 -1
  7. package/src/HDS/assets/icons/calendar-plus-02.svg +1 -1
  8. package/src/HDS/components/Avatars/hasConAv.js +10 -9
  9. package/src/HDS/components/Avatars/profileAvatar.js +29 -10
  10. package/src/HDS/components/BadgesCaption/badges.js +4 -7
  11. package/src/HDS/components/Buttons/button.js +14 -25
  12. package/src/HDS/components/Cards/Dropdown/v3Dropdown.js +1 -1
  13. package/src/HDS/components/Cards/Feedback/feedback.js +1 -1
  14. package/src/HDS/components/Cards/Link/link.js +13 -19
  15. package/src/HDS/components/Cards/Menu/flyout.js +4 -5
  16. package/src/HDS/components/Cards/Menu/flyoutA.js +4 -5
  17. package/src/HDS/components/Cards/Menu/flyoutFull.js +0 -1
  18. package/src/HDS/components/Cards/Misc/iconCard.js +60 -71
  19. package/src/HDS/components/Cards/Misc/index.js +0 -1
  20. package/src/HDS/components/Cards/Misc/talkCard.js +18 -19
  21. package/src/HDS/components/Cards/TalkDetailCard/talkDetailCard.js +52 -83
  22. package/src/HDS/components/Carousels/carouselCard.js +90 -101
  23. package/src/HDS/components/Headers/v3Header.js +85 -111
  24. package/src/HDS/components/Hero/h2.js +36 -58
  25. package/src/HDS/components/Hero/index.js +1 -2
  26. package/src/HDS/components/Tables/index.js +1 -2
  27. package/src/HDS/components/Tables/tableB.js +10 -10
  28. package/src/HDS/components/Tables/tableC.js +23 -20
  29. package/src/HDS/components/Tabs/tab.js +16 -47
  30. package/src/HDS/components/common-components/Icon/IconMap.js +0 -6
  31. package/src/HDS/components/index.js +1 -2
  32. package/src/HDS/foundation/ColorPalette/color.js +1 -193
  33. package/src/HDS/foundation/Typography/Typography.js +1 -2
  34. package/src/HDS/helpers/index.js +1 -2
  35. package/src/HDS/modules/TextCard/textCard.js +71 -8
  36. package/src/HDS/modules/index.js +1 -2
  37. package/src/index.css +1 -39
  38. package/src/styles/tailwind.css +1842 -3151
  39. package/tailwind.config.js +3 -6
  40. package/src/HDS/assets/icons/hasura-1.svg +0 -3
  41. package/src/HDS/assets/icons/hasura-2.svg +0 -3
  42. package/src/HDS/assets/icons/hasura-3.svg +0 -3
  43. package/src/HDS/components/Cards/ImageBox/imagebox.js +0 -51
  44. package/src/HDS/components/Cards/ImageBox/index.js +0 -1
  45. package/src/HDS/components/Cards/Misc/talkcard2.js +0 -118
  46. package/src/HDS/components/Hero/h3.js +0 -413
  47. package/src/HDS/components/Tables/tableD.js +0 -326
  48. package/src/HDS/helpers/Grid/grid.js +0 -64
  49. package/src/HDS/helpers/Grid/index.js +0 -1
  50. package/src/HDS/helpers/Media/index.js +0 -1
  51. package/src/HDS/helpers/Media/mediabox.js +0 -75
  52. package/src/HDS/modules/navCard/index.js +0 -1
  53. package/src/HDS/modules/navCard/navCard.js +0 -82
package/src/HDS/components/Tables/tableD.js DELETED
@@ -1,326 +0,0 @@
1
- import React from 'react';
2
- import { Typography } from '../../foundation/Typography'
3
- import { Icon } from '../common-components/Icon'
4
- import { HDSColor } from '../../foundation/ColorPalette';
5
- import ReactMarkdown from "react-markdown";
6
- import { HDSButton } from "../Buttons"
7
-
8
- export default function PricingTableB(props) {
9
- const {
10
- title,
11
- title_color,
12
- description,
13
- desc_color,
14
- TABLE_VALUE,
15
- TABLE_HEADER,
16
- } = props;
17
- const tableValuesm = (section, keyIndex) => {
18
-
19
- let columnSize = '';
20
- let scrapData;
21
- if (section[keyIndex][0]) {
22
- scrapData = section[keyIndex][0];
23
- }
24
-
25
- const firstKeys = section[keyIndex].map(item => Object.keys(item)[0]);
26
- const rowTitleKey = firstKeys[0];
27
- if (section[keyIndex].length) {
28
- columnSize = section[keyIndex].length;
29
- }
30
- return (
31
- <>
32
- {section[keyIndex].map((value, index) => (
33
- <tr className='' key={index}>
34
- {Object.keys(value).map((keyIndex) => (
35
- <React.Fragment key={index + keyIndex}>
36
- {keyIndex !== null
37
- && keyIndex === rowTitleKey
38
- && index != (columnSize - 1)
39
- && index != 0 && (
40
- <td
41
-
42
- className="pl-[30px] border-80 "
43
- >
44
- <div className=' '>
45
- <Typography className='py-4 text-neutral-700' textStyle='body1c'>{value[keyIndex]}</Typography>
46
- </div>
47
- </td>)}
48
- {keyIndex !== null
49
- && keyIndex === rowTitleKey
50
- && index != (columnSize - 1)
51
- && index == 0 && (
52
- <td
53
- className="pl-[30px] border-80 "
54
- >
55
- <div className=' '>
56
- <Typography className='pb-4 pt-12 text-neutral-700' textStyle='body1c'>{value[keyIndex]}</Typography>
57
- </div>
58
-
59
-
60
- </td>)}
61
-
62
- {keyIndex !== null
63
- && keyIndex === rowTitleKey
64
- && index == (columnSize - 1) && (
65
- <td
66
-
67
- className="pl-[30px] border-80 "
68
- >
69
- <div className=' '>
70
- <Typography className='pt-4 pb-12 text-neutral-700' textStyle='body1c'>{value[keyIndex]}</Typography>
71
- </div>
72
-
73
-
74
- </td>)}
75
-
76
- {keyIndex !== null && keyIndex !== rowTitleKey && value[keyIndex] !== null && index != 0 && index != (columnSize - 1) && (
77
- <td
78
-
79
- className="px-8 text-left ml-[30px] border-80 "
80
- >
81
- {value && keyIndex && value[keyIndex] && value[keyIndex]['text'] === null && !value[keyIndex]['iconVariant'] && value[keyIndex]['iconVariant'] === null && (
82
- <div className=''></div>
83
-
84
- )}
85
- {value[keyIndex]['text'] !== null && value[keyIndex]['text'] && (
86
- <div className=' '>
87
- <Typography className='text-neutral-700 py-4' textStyle='body1c'>{value[keyIndex]['text']}</Typography>
88
- </div>
89
-
90
-
91
- )}
92
- {(value[keyIndex]['text'] === null || !value[keyIndex]['text']) && value[keyIndex]['iconVariant'] && (
93
- <div className='flex '>
94
- <Icon height='h-5 w-5 stroke-[1.5px]' variant={value[keyIndex]['iconVariant']} strokeClass={HDSColor(value[keyIndex]['iconStrokeClass'])} />
95
- </div>
96
- )}
97
- </td>)
98
- }
99
- {keyIndex !== null && keyIndex !== rowTitleKey && value[keyIndex] !== null && index == 0 && (
100
- <td
101
-
102
- className="px-8 text-left ml-[30px] border-80 "
103
- >
104
- {value && keyIndex && value[keyIndex] && value[keyIndex]['text'] === null && !value[keyIndex]['iconVariant'] && value[keyIndex]['iconVariant'] === null && (
105
- <div className=''></div>
106
-
107
- )}
108
- {value[keyIndex]['text'] !== null && value[keyIndex]['text'] && (
109
- <div className=' '>
110
- <Typography className='text-neutral-700 pb-4 pt-12' textStyle='body1c'>{value[keyIndex]['text']}</Typography>
111
- </div>
112
-
113
-
114
- )}
115
- {(value[keyIndex]['text'] === null || !value[keyIndex]['text']) && value[keyIndex]['iconVariant'] && (
116
- <div className='flex pb-4 pt-12'>
117
- <Icon height='h-5 w-5 stroke-[1.5px]' variant={value[keyIndex]['iconVariant']} strokeClass={HDSColor(value[keyIndex]['iconStrokeClass'])} />
118
- </div>
119
- )}
120
- </td>)
121
- }
122
- {keyIndex !== null && keyIndex !== rowTitleKey && value[keyIndex] !== null && index == (columnSize - 1) && (
123
- <td
124
-
125
- className="px-8 text-left ml-[30px] border-80 "
126
- >
127
- {value && keyIndex && value[keyIndex] && value[keyIndex]['text'] === null && !value[keyIndex]['iconVariant'] && value[keyIndex]['iconVariant'] === null && (
128
- <div className=''></div>
129
-
130
- )}
131
- {value[keyIndex]['text'] !== null && value[keyIndex]['text'] && (
132
- <div className=' '>
133
- <Typography className='text-neutral-700 pt-4 pb-12' textStyle='body1c'>{value[keyIndex]['text']}</Typography>
134
- </div>
135
-
136
-
137
- )}
138
- {(value[keyIndex]['text'] === null || !value[keyIndex]['text']) && value[keyIndex]['iconVariant'] && (
139
- <div className='flex pt-4 pb-12 '>
140
- <Icon height='h-5 w-5 stroke-[1.5px]' variant={value[keyIndex]['iconVariant']} strokeClass={HDSColor(value[keyIndex]['iconStrokeClass'])} />
141
- </div>
142
- )}
143
- </td>)
144
- }
145
-
146
- {keyIndex === null && (
147
- <td
148
- key={index}
149
- className="px-8 py-7 border-table text-center"
150
- >
151
- </td>
152
- )}
153
-
154
-
155
- </React.Fragment>
156
- ))}
157
- </tr>
158
- ))}
159
- </>
160
- )
161
- }
162
- return (
163
- <div className='px-10'>
164
- <div className=" flex justify-around ">
165
- <div className="w-full flex-col items-center flex justify-around tb-l:flex tb-l:flex-col tb-l:items-center">
166
- <div>
167
- {title && (
168
- <Typography
169
- textStyle='h3'
170
- className={HDSColor(title_color)}
171
- >
172
- {title}
173
- </Typography>
174
- )}
175
- {description && (
176
- <Typography
177
- textStyle='body1c'
178
- className={HDSColor(desc_color)}
179
- >
180
- {description}
181
- </Typography>
182
- )}
183
- </div>
184
- </div>
185
- </div>
186
- <div className='hidden tb:block' >
187
- <div className=" mt-[70px] rounded-3xl ">
188
- <table className="rounded-3xl w-full table-fixed ">
189
- <thead>
190
- <tr className=' text-left first:pr-20 '>
191
- {Object.keys(TABLE_HEADER).map((key, index) => (
192
- <th
193
- key={index}
194
- scope="col"
195
- className="px-8 pb-[54px] sm:table-cell text-left"
196
- >
197
- <div className='flex text-left'>
198
- <div className='flex flex-col text-center'>
199
- <div className={'flex gap-2'}>
200
- {TABLE_HEADER[key]['icon'] &&
201
- (
202
- <Icon
203
- height='h-6 w-6 stroke-[1.5px]'
204
- variant={TABLE_HEADER[key]['icon']}
205
- strokeClass={HDSColor(TABLE_HEADER[key]['iconStrokeClass'])} />
206
- )
207
- }
208
- {
209
- TABLE_HEADER[key]['title'] && key == 0 && (
210
- <Typography
211
- textStyle='h3'
212
- className={` w-1/2 text-left ${HDSColor(TABLE_HEADER[key]['title_text_color'])}`}>
213
- {TABLE_HEADER[key]['title']}
214
- </Typography>)
215
- }
216
- {
217
- TABLE_HEADER[key]['title'] && key != 0 && (
218
- <Typography
219
- textStyle='h5'
220
- className={` text-left ${HDSColor(TABLE_HEADER[key]['title_text_color'])}`}>
221
- <ReactMarkdown>{TABLE_HEADER[key]['title']}</ReactMarkdown>
222
- </Typography>)
223
- }
224
- </div>
225
- <div className=''>
226
- {TABLE_HEADER[key]['descr'] && (
227
- <Typography
228
- textStyle='body1'
229
- className={` text-left ${HDSColor(TABLE_HEADER[key]['descr_text_color'])}`}>
230
- {TABLE_HEADER[key]['descr']}
231
- </Typography>)}
232
-
233
- {TABLE_HEADER[key]['button_title'] &&
234
- (
235
- <a href={TABLE_HEADER[key]['button_link']}>
236
- <HDSButton
237
- label={TABLE_HEADER[key]['button_title']}
238
- type='secondary'
239
- leftIconVariant='none'
240
- rightIconVariant='none'
241
- state='default'
242
- size='sm'
243
- rightAnimatedArrow={true}
244
- rightAnimatedArrowColor='#3970FD'
245
- className='mt-4'
246
- />
247
- </a>
248
-
249
- )
250
-
251
- }
252
- </div>
253
- </div>
254
- </div>
255
- </th>
256
- ))}
257
- </tr>
258
- </thead>
259
- {TABLE_VALUE.map((section, index) => (
260
- <tbody key={index} className="border-90">
261
- {Object.keys(section).map((keyIndex) => (
262
- <>
263
- <tr key={index + keyIndex} className=''>
264
- {Object.keys(section[keyIndex][0]).map((keyIndex2) => (
265
- <React.Fragment key={keyIndex2 + keyIndex + index}>
266
- {keyIndex2 !== null && (
267
- <th
268
- className='bg-neutral-100 first:rounded-l-full last:rounded-r-full px-8'
269
- >
270
- <Typography
271
- textStyle='h5'
272
- className='text-neutral-900 py-3.5 text-left'
273
- >
274
- {keyIndex2}
275
- </Typography>
276
- </th>
277
- )}
278
- </React.Fragment>
279
- ))}
280
- </tr>
281
- {tableValuesm(section, keyIndex)}
282
- </>
283
- ))
284
- }
285
- </tbody>
286
- ))
287
- }
288
- {TABLE_HEADER && (
289
- <>
290
- <tbody>
291
- <tr>
292
- <td></td>
293
- {TABLE_HEADER.map((value, index) => (
294
- <React.Fragment key={index}>
295
- {index != 0 && value['button_title'] &&
296
- <td key={index} className='px-8'>
297
- <a href={value['button_link']}>
298
- <HDSButton
299
- label={value['button_title']}
300
- type='secondary'
301
- leftIconVariant='none'
302
- rightIconVariant='none'
303
- state='default'
304
- size='sm'
305
- rightAnimatedArrow={true}
306
- rightAnimatedArrowColor='#3970FD'
307
- className='mt-4 mb-16'
308
- />
309
- </a>
310
-
311
- </td>}
312
- </React.Fragment>
313
- ))
314
- }
315
-
316
- </tr>
317
- </tbody>
318
- </>
319
- )}
320
- </table>
321
- </div>
322
- </div>
323
- </div>
324
- )
325
- }
326
-
package/src/HDS/helpers/Grid/grid.js DELETED
@@ -1,64 +0,0 @@
1
- import React from 'react';
2
-
3
- const GridComponent = ({ cards, gridSize }) => {
4
- const numCards = cards.length;
5
- const cardsLeftInLastRow = numCards % gridSize;
6
- const renderCards = () => {
7
- let cardClass = '';
8
- if(cards.length === 4 ){
9
- cardClass = 'grid grid-cols-2'
10
- }
11
- else cardClass = 'gridAutoClass';
12
- return cards.map((card, index) => (
13
- <div
14
- className={cardClass}
15
- key={index}
16
- >
17
- {/* Render card content */}
18
- {card}
19
- </div>
20
- ));
21
- };
22
-
23
- return (
24
- <div className='flex flex-wrap'>
25
- {renderCards()}
26
- </div>
27
- );
28
- };
29
-
30
- export default GridComponent;
31
-
32
-
33
-
34
-
35
- // 2x2, 3x3, 4x4
36
- // odd even
37
-
38
- //2x2 -odd grid grid-cols-2
39
- //case 1: NOC = 3
40
- // .... ....
41
- // ......... colr-span-2
42
-
43
-
44
- //3x3 -odd
45
- //case 1: noc:5
46
- /// ... ... ...
47
- // ..... ..... col-span-1.5 col-span-1.5
48
- //case 2: noc:4
49
- /// ... ... ...
50
- // ........... col-span-3
51
-
52
-
53
-
54
- //4x4
55
-
56
- // case1: noc 5:
57
- // .. .. .. ..
58
- // ........... col-span-4
59
- // case2: noc 6:
60
- // .. .. .. ..
61
- // ..... ..... col-span-2 col span-2
62
- // case1: noc 7:
63
- // .. .. .. ..
64
- // ... ... ... col-span-4/3 col-span-4/3 col-span-4/3
package/src/HDS/helpers/Grid/index.js DELETED
@@ -1 +0,0 @@
1
- export {default as GridComponent} from './grid';
package/src/HDS/helpers/Media/index.js DELETED
@@ -1 +0,0 @@
1
- export {default as MediaBox} from './mediabox';
package/src/HDS/helpers/Media/mediabox.js DELETED
@@ -1,75 +0,0 @@
1
- import React, { useState } from 'react';
2
- import { Icon } from '../../components/common-components/Icon';
3
-
4
- export default function MediaViewer ({ img_url, video_url, video_poster, width }){
5
- const [isVideoPlaying, setIsVideoPlaying] = useState(false);
6
-
7
- const handleVideoClick = () => {
8
- setIsVideoPlaying(true);
9
- };
10
-
11
- const handleVideoClose = () => {
12
- setIsVideoPlaying(false);
13
- };
14
-
15
- return (
16
- <div>
17
- {img_url && (
18
- <div className='flex justify-center'>
19
- <img src={img_url} alt="Image" className='rounded-2xl' onClick={handleVideoClick} />
20
- </div>
21
- )}
22
-
23
- {video_url && !img_url && video_poster && (
24
- <div>
25
- {!isVideoPlaying ? (
26
- <div className='relative flex justify-center'>
27
- <div className='flex items-center'>
28
-
29
- <a
30
- className=" left-[45%] z-10 cursor-pointer absolute w-12 h-12 flex justify-center items-center rounded-full border border-neutral-0"
31
- onClick={() => {
32
- setIsVideoPlaying(true);
33
- }}
34
- >
35
-
36
- <Icon variant='play' height='h-6 w-6' strokeClass='stroke-neutral-0' />
37
- </a>
38
- </div>
39
- <div>
40
- <img
41
- src={video_poster}
42
- alt="Video Poster"
43
- onClick={handleVideoClick}
44
- className="cursor-pointer rounded-2xl"
45
- />
46
- </div>
47
- </div>
48
- ) : (
49
- <div className="fixed inset-0 flex justify-center items-center z-50">
50
- <div className="relative w-screen h-screen flex items-start p-10">
51
- <a
52
- className=" z-10 cursor-pointer left-14 top-2 relative w-12 h-12 bg-neutral-0 flex justify-center items-center rounded-full"
53
- onClick={handleVideoClose}
54
- >
55
- <Icon variant='xclose' height='h-6 w-6' strokeClass='stroke-neutral-800' />
56
- </a>
57
- <video
58
- controls={false}
59
- autoPlay
60
- muted
61
- className="object-contain max-w-full max-h-full"
62
- >
63
- <source src={video_url} type="video/mp4" />
64
- </video>
65
-
66
- </div>
67
- </div>
68
- )}
69
- </div>
70
- )}
71
- </div>
72
- );
73
- };
74
-
75
-
package/src/HDS/modules/navCard/index.js DELETED
@@ -1 +0,0 @@
1
- export {default as NavCard} from './navCard'
package/src/HDS/modules/navCard/navCard.js DELETED
@@ -1,82 +0,0 @@
1
- import React, { useState, useEffect } from 'react';
2
- import { MediaBox } from '../../helpers/Media';
3
- import { Typography } from '../../foundation/Typography';
4
- import { HDSButton } from '../../components/Buttons';
5
- import { HDSColor } from '../../foundation/ColorPalette';
6
- import { Tab } from '../../components/Tabs';
7
- import PropTypes from 'prop-types';
8
-
9
- const tabCard = (tabContent) => (
10
- <>
11
- <div className='px-3'>
12
- {tabContent.title && <Typography textStyle='h4' className={HDSColor(tabContent.title_color)}>{tabContent.title}</Typography>}
13
-
14
- {tabContent.sub_title && <Typography textStyle='body1c' className={HDSColor(tabContent.sub_title_color)}>{tabContent.sub_title}</Typography>}
15
- </div>
16
- {tabContent.btnLabel &&
17
- <div className='flex pl-3 pt-6 pb-8'>
18
- <HDSButton
19
- label={tabContent.btnLabel}
20
- type='secondaryLink'
21
- leftIconVariant='none'
22
- rightIconVariant='none'
23
- state='default'
24
- size='sm'
25
- rightAnimatedArrow={true}
26
- rightAnimatedArrowColor='#1E56E3'
27
- animatedHoverStroke='group-hover:stroke-blue-600'
28
- className='flex'
29
- btnTextColorClass='text-blue-600'
30
- />
31
- </div>
32
- }
33
- <div className='mt-8'>
34
- <MediaBox
35
- img_url={tabContent.img_url}
36
- video_url={tabContent.video_url}
37
- video_poster={tabContent.video_poster}
38
- />
39
- </div>
40
- </>
41
- )
42
-
43
- export default function NavCard(props) {
44
- const [activeTab, setActiveTab] = useState('');
45
-
46
- useEffect(() => {
47
- if (props.tabContent) {
48
- const tabNames = Object.keys(props.tabContent);
49
- setActiveTab(tabNames[0]);
50
- }
51
- }, [props.tabContent]);
52
-
53
- const handleTabClick = (tab) => {
54
- if (tab.name) {
55
- setActiveTab(tab.name);
56
- }
57
- else return;
58
- // Perform any other actions based on the clicked tab
59
- }
60
-
61
- return (
62
- <div>
63
- {props.navTabs &&
64
-
65
- <div className='max-w-[44.44rem] p-16 bg-neutral-0 shadow rounded-2xl'>
66
-
67
- <div className='flex justify-center pb-8'>
68
- <Tab
69
- onTabClick={handleTabClick}
70
- tabs={props.navTabs}
71
- />
72
- </div>
73
- <div className=''>
74
- {props.tabContent &&
75
- props.tabContent[activeTab] &&
76
- tabCard(props.tabContent[activeTab])}
77
- </div>
78
-
79
- </div>}
80
- </div>
81
- )
82
- }