hds-web 1.4.3 → 1.4.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 +4 -4
- package/dist/index.js +4 -4
- package/package.json +1 -1
- package/src/HDS/components/Avatars/hasConAv.js +6 -6
- package/src/HDS/components/Avatars/profileAvatar.js +1 -1
- package/src/HDS/components/Cards/Misc/talkcard2.js +6 -6
- package/src/HDS/components/Carousels/carousel.js +1 -1
- package/src/HDS/components/Tables/tableD.js +87 -133
- package/src/HDS/components/Tabs/tab.js +2 -2
- package/src/styles/tailwind.css +159 -15
- package/tailwind.config.js +1 -0
package/package.json
CHANGED
|
@@ -5,15 +5,15 @@ import {Typography} from '../../foundation/Typography'
|
|
|
5
5
|
export default function HasConAvatar({ name, designation, size, imageUrl }) {
|
|
6
6
|
const hasImageUrl = imageUrl && imageUrl.length > 0;
|
|
7
7
|
return (
|
|
8
|
-
<div className={`
|
|
8
|
+
<div className={`shadow group rounded-2xl tb:rounded-3xl flex flex-col-reverse mb-m:flex-row mb-m:flex mb-m:items-center mb-m:justify-between bg-neutral-0 tb:inline-flex tb:flex-col tb:max-w-[289px] tb:min-w-[18rem]`}>
|
|
9
9
|
|
|
10
|
-
<div className="px-5 py-[30px] tb:p-0 text-left tb:flex-col min-h-[120px] tb:flex tb:items-center tb:px-8 tb:pb-8 tb:mt-8 tb:ml-0 tb:text-center">
|
|
10
|
+
<div className="px-6 pb-6 pt-3 mb-m:px-5 mb-m:py-[30px] tb:p-0 text-left tb:flex-col mb-m:min-h-[120px] tb:flex tb:items-center tb:px-8 tb:pb-8 tb:mt-8 tb:ml-0 tb:text-center">
|
|
11
11
|
<div className=' text-hds-m-body1c-bold tb:text-hds-t-h5 db:text-hds-d-h5 text-blue-400'>{name}</div>
|
|
12
|
-
<div className=' text-hds-m-body3c-medium tb:text-hds-t-h7 db:text-hds-d-h7 text-blue-800 uppercase'>{designation}</div>
|
|
12
|
+
<div className=' text-hds-m-body3c-medium tb:text-hds-t-h7 db:text-hds-d-h7 text-blue-800 capitalize tb:uppercase'>{designation}</div>
|
|
13
13
|
</div>
|
|
14
|
-
<div className='relative self-center'>
|
|
14
|
+
<div className='relative pt-6 mb-m:pt-0 pl-6 mb-m:pl-0 mb-m:self-center'>
|
|
15
15
|
<img
|
|
16
|
-
className={`inline-block min-w-[144px] w-[9rem] tb:min-w-[18rem] tb:rounded-3xl border-neutral-0`}
|
|
16
|
+
className={`inline-block max-[420px]:bg-blue-400 rounded-r-xl max-[420px]:rounded-full w-[60px] mb-m:min-w-[144px] mb-m:w-[9rem] tb:min-w-[18rem] tb:rounded-3xl border-neutral-0`}
|
|
17
17
|
src={imageUrl}
|
|
18
18
|
/>
|
|
19
19
|
{/* <div className="absolute tb-l:rounded-b-3xl inset-0 group-hover:bg-gradient-to-t group-hover:from-amber-200 group-hover:to-transparent group-hover:opacity-30" ></div> */}
|
|
@@ -32,5 +32,5 @@ HasConAvatar.propTypes = {
|
|
|
32
32
|
HasConAvatar.defaultProps = {
|
|
33
33
|
name: 'Names',
|
|
34
34
|
designation: 'Product Marketing, Hasura',
|
|
35
|
-
imageUrl:
|
|
35
|
+
imageUrl: ``
|
|
36
36
|
};
|
|
@@ -52,5 +52,5 @@ ProfileAvatar.propTypes = {
|
|
|
52
52
|
ProfileAvatar.defaultProps = {
|
|
53
53
|
name: 'Names',
|
|
54
54
|
designation: 'Product Marketing, Hasura',
|
|
55
|
-
imageUrl:
|
|
55
|
+
imageUrl: ``
|
|
56
56
|
};
|
|
@@ -19,8 +19,8 @@ export default function TalkCard2(props) {
|
|
|
19
19
|
|
|
20
20
|
<div className="grid">
|
|
21
21
|
<div className={`flex flex-col tb-l:flex-row tb-l:justify-between `}>
|
|
22
|
-
<div className={"px-
|
|
23
|
-
<div className="flex flex-
|
|
22
|
+
<div className={"px-6 pt-6 tb-l:px-8 tb-l:pb-6 tb-l:border-r tb-l:border-r-neutral-200"}>
|
|
23
|
+
<div className="flex flex-row flex-wrap tb:gap-3 gap-2">
|
|
24
24
|
{props.badges &&
|
|
25
25
|
props.badges.map((value, index) => (
|
|
26
26
|
<div key={index} className='flex whitespace-nowrap'>
|
|
@@ -38,7 +38,7 @@ export default function TalkCard2(props) {
|
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
</div>
|
|
41
|
-
<div className="tb-l:w-[380px] db:w-[520px]
|
|
41
|
+
<div className="tb-l:w-[380px] db:w-[520px] flex flex-col tb:justify-between">
|
|
42
42
|
<div>
|
|
43
43
|
<Typography className='my-2 text-blue-800' textStyle='h5'>{props.title}</Typography>
|
|
44
44
|
{props.para &&
|
|
@@ -62,7 +62,7 @@ export default function TalkCard2(props) {
|
|
|
62
62
|
size='md'
|
|
63
63
|
rightAnimatedArrow={true}
|
|
64
64
|
rightAnimatedArrowColor='#3970FD'
|
|
65
|
-
className='mt-
|
|
65
|
+
className='mt-2'
|
|
66
66
|
btnTextColorClass='text-blue-500'
|
|
67
67
|
animatedHoverStroke='stroke-blue-500'
|
|
68
68
|
/>
|
|
@@ -75,7 +75,7 @@ export default function TalkCard2(props) {
|
|
|
75
75
|
<div className={`${CardClass} divide-y divide-neutral-150 flex tb-l:w-full flex-col pt-0`} >
|
|
76
76
|
{
|
|
77
77
|
props.speakerSet && (
|
|
78
|
-
<div className="px-
|
|
78
|
+
<div className="px-6 pt-6 border-t border-neutral-200 tb-l:border-0 flex gap-6 tb-l:pt-12 tb:mt-0 tb-l:pb-12 pb-6 flex-col ">
|
|
79
79
|
{props.speakerSet.map((value, i) => (
|
|
80
80
|
<div key={i} className="block">
|
|
81
81
|
|
|
@@ -91,7 +91,7 @@ export default function TalkCard2(props) {
|
|
|
91
91
|
</div>
|
|
92
92
|
)
|
|
93
93
|
}
|
|
94
|
-
{props.eventTime && <div className=" w-full pl-
|
|
94
|
+
{props.eventTime && <div className=" w-full pl-6 p-6 flex flex-row justify-between items-center">
|
|
95
95
|
<Typography textStyle='h6' className='text-blue-800 uppercase'>{props.eventTime}</Typography>
|
|
96
96
|
{props.addCalendarUrl &&
|
|
97
97
|
<a href={props.addCalendarUrl}>
|
|
@@ -16,7 +16,7 @@ const tabs = [
|
|
|
16
16
|
const levelCalc = (arr, index) => {
|
|
17
17
|
|
|
18
18
|
const keyIndex = 'key' + `${index}`;
|
|
19
|
-
|
|
19
|
+
|
|
20
20
|
if (arr[keyIndex] && (arr[keyIndex]['text'] || arr[keyIndex]['iconVariant'])) {
|
|
21
21
|
return (
|
|
22
22
|
<>
|
|
@@ -66,60 +66,60 @@ export default function TableB(props) {
|
|
|
66
66
|
const [activeTab, setActiveTab] = useState(1);
|
|
67
67
|
console.log(TABLE_VALUE, TABLE_VALUE[0], 'hh');
|
|
68
68
|
|
|
69
|
-
const tableValuesm = (section, keyIndex) =>
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
69
|
+
const tableValuesm = (section, keyIndex) =>
|
|
70
|
+
(
|
|
71
|
+
<>
|
|
72
|
+
{section[keyIndex].map((value, index) => (
|
|
73
|
+
<tr className='' key={index}>
|
|
74
|
+
{Object.keys(value).map((keyIndex) => (
|
|
75
75
|
|
|
76
|
-
|
|
77
|
-
|
|
76
|
+
<React.Fragment key={index + keyIndex}>
|
|
77
|
+
{keyIndex !== null && keyIndex === 'rowTitle' && (<td
|
|
78
78
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
79
|
+
className="px-8 py-7 w-[22.5rem]"
|
|
80
|
+
>
|
|
81
|
+
<Typography className='max-w-[22rem] text-neutral-700 [&>p]:pb-2 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 [&>ul>li]:last:pb-0' textStyle='body1c'><ReactMarkdown>{value[keyIndex]}</ReactMarkdown></Typography>
|
|
82
82
|
|
|
83
|
-
|
|
83
|
+
</td>)}
|
|
84
84
|
|
|
85
|
-
|
|
86
|
-
|
|
85
|
+
{keyIndex !== null && keyIndex !== 'rowTitle' && value[keyIndex] !== null && (
|
|
86
|
+
<td
|
|
87
87
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
88
|
+
className="px-8 py-7 border-table text-center "
|
|
89
|
+
>
|
|
90
|
+
{value && keyIndex && value[keyIndex] && value[keyIndex]['text'] === null && !value[keyIndex]['iconVariant'] && value[keyIndex]['iconVariant'] === null && (
|
|
91
|
+
<></>
|
|
92
92
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
93
|
+
)}
|
|
94
|
+
{value[keyIndex]['text'] !== null && value[keyIndex]['text'] && (
|
|
95
|
+
<Typography className='text-neutral-700' textStyle='body1c'>{value[keyIndex]['text']}</Typography>
|
|
96
96
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
97
|
+
)}
|
|
98
|
+
{(value[keyIndex]['text'] === null || !value[keyIndex]['text']) && value[keyIndex]['iconVariant'] && (
|
|
99
|
+
<div className='flex justify-center'>
|
|
100
|
+
<Icon height='h-5 w-5 stroke-[1.5px]' variant={value[keyIndex]['iconVariant']} strokeClass={HDSColor(value[keyIndex]['iconStrokeClass'])} />
|
|
101
|
+
</div>
|
|
102
|
+
)}
|
|
103
|
+
</td>)
|
|
104
|
+
}
|
|
105
105
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
106
|
+
{keyIndex === null && (
|
|
107
|
+
<td
|
|
108
|
+
key={index}
|
|
109
|
+
className="px-8 py-7 border-table text-center"
|
|
110
|
+
>
|
|
111
|
+
</td>
|
|
112
|
+
)}
|
|
113
113
|
|
|
114
114
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
115
|
+
</React.Fragment>
|
|
116
|
+
))}
|
|
117
|
+
</tr>
|
|
118
|
+
))}
|
|
119
|
+
</>
|
|
120
|
+
|
|
121
|
+
)
|
|
122
|
+
|
|
123
123
|
|
|
124
124
|
|
|
125
125
|
|
|
@@ -212,19 +212,15 @@ export default function TableB(props) {
|
|
|
212
212
|
{Object.keys(msection).map((keyIndex) => (
|
|
213
213
|
|
|
214
214
|
<>
|
|
215
|
-
|
|
215
|
+
{msection[keyIndex].map((tem2, index) => (
|
|
216
216
|
<>
|
|
217
|
-
|
|
217
|
+
{levelCalc(tem2, index)}
|
|
218
218
|
</>
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
219
|
+
))
|
|
220
|
+
}
|
|
225
221
|
</>
|
|
226
222
|
))}
|
|
227
|
-
|
|
223
|
+
|
|
228
224
|
|
|
229
225
|
</React.Fragment>
|
|
230
226
|
))}
|
|
@@ -310,11 +306,11 @@ export default function TableB(props) {
|
|
|
310
306
|
</tr>
|
|
311
307
|
</thead>
|
|
312
308
|
{TABLE_VALUE.map((section, index) => (
|
|
313
|
-
<tbody key={index} className="
|
|
314
|
-
|
|
309
|
+
<tbody key={index} className="">
|
|
315
310
|
|
|
316
|
-
|
|
317
|
-
|
|
311
|
+
|
|
312
|
+
{Object.keys(section).map((keyIndex) => (
|
|
313
|
+
<>
|
|
318
314
|
<tr className=''>
|
|
319
315
|
{Object.keys(section[keyIndex][0]).map((keyIndex2) => (
|
|
320
316
|
<React.Fragment key={keyIndex2}>
|
|
@@ -322,9 +318,11 @@ export default function TableB(props) {
|
|
|
322
318
|
<th
|
|
323
319
|
className='bg-neutral-100 first:rounded-l-full last:rounded-r-full'
|
|
324
320
|
>
|
|
325
|
-
<Typography
|
|
326
|
-
|
|
327
|
-
|
|
321
|
+
<Typography
|
|
322
|
+
textStyle='h5'
|
|
323
|
+
className='text-neutral-900'
|
|
324
|
+
>
|
|
325
|
+
{keyIndex2}
|
|
328
326
|
</Typography>
|
|
329
327
|
|
|
330
328
|
|
|
@@ -333,87 +331,43 @@ export default function TableB(props) {
|
|
|
333
331
|
</React.Fragment>
|
|
334
332
|
))}
|
|
335
333
|
</tr>
|
|
334
|
+
{tableValuesm(section, keyIndex)}
|
|
335
|
+
</>
|
|
336
336
|
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
{tableValuesm(section, keyIndex)}
|
|
340
|
-
</>
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
))
|
|
346
|
-
}
|
|
347
|
-
|
|
348
|
-
|
|
337
|
+
))
|
|
338
|
+
}
|
|
349
339
|
</tbody>
|
|
350
|
-
|
|
351
340
|
))
|
|
352
|
-
|
|
353
341
|
}
|
|
354
|
-
|
|
355
|
-
<
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
<
|
|
361
|
-
{
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
{keyIndex !== null && keyIndex === 'rowTitle' && (<td
|
|
374
|
-
|
|
375
|
-
className="px-8 py-7 w-[22.5rem]"
|
|
376
|
-
>
|
|
377
|
-
<Typography className='max-w-[22rem] text-neutral-700 [&>p]:pb-2 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 [&>ul>li]:last:pb-0' textStyle='body1c'><ReactMarkdown>{value[keyIndex]}</ReactMarkdown></Typography>
|
|
378
|
-
|
|
379
|
-
</td>)}
|
|
380
|
-
|
|
381
|
-
{keyIndex !== null && keyIndex !== 'rowTitle' && value[keyIndex] !== null && (
|
|
382
|
-
<td
|
|
383
|
-
|
|
384
|
-
className="px-8 py-7 border-table text-center "
|
|
385
|
-
>
|
|
386
|
-
{value && keyIndex && value[keyIndex] && value[keyIndex]['text'] === null && !value[keyIndex]['iconVariant'] && value[keyIndex]['iconVariant'] === null && (
|
|
387
|
-
<></>
|
|
388
|
-
|
|
389
|
-
)}
|
|
390
|
-
{value[keyIndex]['text'] !== null && value[keyIndex]['text'] && (
|
|
391
|
-
<Typography className='text-neutral-700' textStyle='body1c'>{value[keyIndex]['text']}</Typography>
|
|
342
|
+
<tr>
|
|
343
|
+
<td></td>
|
|
344
|
+
{TABLE_HEADER.map((value, index) => (
|
|
345
|
+
<>
|
|
346
|
+
{index!=0 &&
|
|
347
|
+
<td className=''>
|
|
348
|
+
<HDSButton
|
|
349
|
+
label={value['button_title'] }
|
|
350
|
+
type='secondary'
|
|
351
|
+
leftIconVariant='none'
|
|
352
|
+
rightIconVariant='none'
|
|
353
|
+
state='default'
|
|
354
|
+
size='sm'
|
|
355
|
+
rightAnimatedArrow={true}
|
|
356
|
+
rightAnimatedArrowColor='#6C737F'
|
|
357
|
+
className='mt-4'
|
|
358
|
+
/>
|
|
359
|
+
|
|
360
|
+
</td>}
|
|
392
361
|
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
<div className='flex justify-center'>
|
|
396
|
-
<Icon height='h-5 w-5 stroke-[1.5px]' variant={value[keyIndex]['iconVariant']} strokeClass={HDSColor(value[keyIndex]['iconStrokeClass'])} />
|
|
397
|
-
</div>
|
|
398
|
-
)}
|
|
399
|
-
</td>)
|
|
400
|
-
}
|
|
362
|
+
</>
|
|
363
|
+
|
|
401
364
|
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
key={index}
|
|
405
|
-
className="px-8 py-7 border-table text-center"
|
|
406
|
-
>
|
|
407
|
-
</td>
|
|
408
|
-
)}
|
|
365
|
+
))
|
|
366
|
+
}
|
|
409
367
|
|
|
410
368
|
|
|
411
|
-
</React.Fragment>
|
|
412
|
-
))}
|
|
413
|
-
</tr>
|
|
414
|
-
))}
|
|
415
|
-
</tbody> */}
|
|
416
369
|
|
|
370
|
+
</tr>
|
|
417
371
|
</table>
|
|
418
372
|
</div>
|
|
419
373
|
</div>
|
|
@@ -36,7 +36,7 @@ export default function Tab(props) {
|
|
|
36
36
|
href="#"
|
|
37
37
|
className={`px-3 py-1 font-medium text-sm rounded-full ${
|
|
38
38
|
activeTab === tab
|
|
39
|
-
? ' first:bg-blue-500 text-neutral-0 transition-all
|
|
39
|
+
? ' first:bg-blue-500 text-neutral-0 transition-all'
|
|
40
40
|
: 'text-neutral-500 transition-all flex-nowrap '
|
|
41
41
|
}`}
|
|
42
42
|
aria-current={activeTab === tab ? 'page' : undefined}
|
|
@@ -47,7 +47,7 @@ export default function Tab(props) {
|
|
|
47
47
|
))}
|
|
48
48
|
<span
|
|
49
49
|
ref={pillRef}
|
|
50
|
-
className="absolute left-0 z-[1] bg-blue-500 rounded-full transition-all ease-in-out duration-
|
|
50
|
+
className="absolute left-0 z-[1] bg-blue-500 rounded-full transition-all ease-in-out duration-300"
|
|
51
51
|
style={{
|
|
52
52
|
left: `${activeTab.index * 100}%`,
|
|
53
53
|
width: `${activeTab.width}px`, // Use the width of the clicked tab
|