hds-web 1.3.7 → 1.3.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.
@@ -0,0 +1,427 @@
1
+ import React from 'react';
2
+ import { useState } from 'react';
3
+ import { Typography } from '../../foundation/Typography'
4
+ import { Icon } from '../common-components/Icon'
5
+ import { HDSColor } from '../../foundation/ColorPalette';
6
+ import { Tab } from '../Tabs'
7
+ import ReactMarkdown from "react-markdown";
8
+ import { HDSButton } from '../Buttons'
9
+ const tabs = [
10
+ { name: 'Level 1', href: '', current: true },
11
+ { name: 'Level 2', href: '', current: false },
12
+ ]
13
+
14
+
15
+
16
+ const levelCalc = (arr, index) => {
17
+
18
+ const keyIndex = 'key' + `${index}`;
19
+
20
+ if (arr[keyIndex] && (arr[keyIndex]['text'] || arr[keyIndex]['iconVariant'])) {
21
+ return (
22
+ <>
23
+ <div className='flex gap-4 p-4 w-full'>
24
+ {(arr[keyIndex]['text'] || arr[keyIndex]['iconVariant']) && (
25
+ <Icon height='h-5 w-5 stroke-[1.5px]' variant='checkcircle' strokeClass='stroke-green-500' />
26
+ )
27
+ }
28
+ <>
29
+ <Typography textStyle='body1c'
30
+ className='text-neutral-700 [&>span]:pb-2 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 [&>ul>li]:last:pb-0'>
31
+
32
+ {arr[keyIndex]['text'] && arr[keyIndex]['text'] !== null && (
33
+ <>
34
+ {`${arr[keyIndex]['text']} `}
35
+ </>
36
+ )
37
+ }
38
+ {arr['rowTitle'] && (arr[keyIndex]['text'] || arr[keyIndex]['iconVariant']) && (
39
+ <>
40
+ <ReactMarkdown components={{ p: 'span' }}>
41
+ {`${arr['rowTitle']}`}
42
+ </ReactMarkdown>
43
+ </>
44
+
45
+ )}
46
+ </Typography>
47
+ </>
48
+
49
+ </div>
50
+
51
+ </>
52
+ )
53
+ }
54
+
55
+ }
56
+
57
+ export default function TableB(props) {
58
+ const {
59
+ title,
60
+ title_color,
61
+ description,
62
+ desc_color,
63
+ TABLE_VALUE,
64
+ TABLE_HEADER,
65
+ } = props;
66
+ const [activeTab, setActiveTab] = useState(1);
67
+ console.log(TABLE_VALUE, TABLE_VALUE[0], 'hh');
68
+
69
+ const tableValuesm = (section, keyIndex) =>
70
+ (
71
+ <>
72
+ {section[keyIndex].map((value, index) => (
73
+ <tr className='divide-x divide-neutral-200' key={index}>
74
+ {Object.keys(value).map((keyIndex) => (
75
+
76
+ <React.Fragment key={index + keyIndex}>
77
+ {keyIndex !== null && keyIndex === 'rowTitle' && (<td
78
+
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
+
83
+ </td>)}
84
+
85
+ {keyIndex !== null && keyIndex !== 'rowTitle' && value[keyIndex] !== null && (
86
+ <td
87
+
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
+
93
+ )}
94
+ {value[keyIndex]['text'] !== null && value[keyIndex]['text'] && (
95
+ <Typography className='text-neutral-700' textStyle='body1c'>{value[keyIndex]['text']}</Typography>
96
+
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
+
106
+ {keyIndex === null && (
107
+ <td
108
+ key={index}
109
+ className="px-8 py-7 border-table text-center"
110
+ >
111
+ </td>
112
+ )}
113
+
114
+
115
+ </React.Fragment>
116
+ ))}
117
+ </tr>
118
+ ))}
119
+ </>
120
+
121
+ )
122
+
123
+
124
+
125
+
126
+ function handleTabClick(tab) {
127
+ if (tab.name === 'Level 1') setActiveTab(1);
128
+ if (tab.name === 'Level 2') setActiveTab(2);
129
+ if (tab.name === 'Level 3') setActiveTab(3);
130
+ // Perform any other actions based on the clicked tab
131
+ }
132
+
133
+ return (
134
+ <div className=" max-w-7xl px-4 sm:px-6 lg:px-8 ">
135
+ <div className=" flex justify-around ">
136
+ <div className="w-full flex-col items-center flex justify-around tb-l:flex tb-l:flex-col tb-l:items-center">
137
+ <div>
138
+ {title && (
139
+ <Typography
140
+ textStyle='h3'
141
+ className={HDSColor(title_color)}
142
+ >
143
+ {title}
144
+ </Typography>
145
+ )}
146
+ {description && (
147
+ <Typography
148
+ textStyle='body1c'
149
+ className={HDSColor(desc_color)}
150
+ >
151
+ {description}
152
+ </Typography>
153
+ )}
154
+ </div>
155
+ <div className=' mt-11 rounded-full shadow tb-l:hidden'>
156
+ <Tab onTabClick={handleTabClick} tabs={tabs} />
157
+ </div>
158
+ </div>
159
+
160
+ </div>
161
+
162
+ {/* code for mobile */}
163
+
164
+ <div className='tb-l:hidden'>
165
+ <div className="mt-8 bg-neutral-0 rounded-3xl ">
166
+ <div className=" shadow rounded-3xl ">
167
+
168
+ <div className='flex border-x px-8 py-[1.625rem] border-neutral-200 rounded-t-3xl flex-col justify-center items-center text-center'>
169
+ <div className={'flex items-center gap-2'}>
170
+ {TABLE_HEADER[activeTab]['icon'] &&
171
+ (
172
+ <Icon
173
+ height='h-6 w-6'
174
+ variant={TABLE_HEADER[activeTab]['icon']}
175
+ strokeClass={TABLE_HEADER[activeTab]['iconStrokeClass']} />
176
+ )
177
+ }
178
+ {
179
+ TABLE_HEADER[activeTab]['title'] && activeTab == 0 && (
180
+ <Typography
181
+ textStyle='h5'
182
+ className={TABLE_HEADER[activeTab]['title_text_color']}>
183
+ {`${TABLE_HEADER[activeTab]['title']}`}
184
+ </Typography>)
185
+ }
186
+ {
187
+ TABLE_HEADER[activeTab]['title'] && activeTab != 0 && (
188
+ <Typography
189
+ textStyle='h5'
190
+ className={TABLE_HEADER[activeTab]['title_text_color']}>
191
+ {`${TABLE_HEADER[activeTab]['title']}`}
192
+ </Typography>)
193
+ }
194
+
195
+
196
+ </div>
197
+ <div className=' max-w-[10rem]'>
198
+ {TABLE_HEADER[activeTab]['descr'] && (
199
+ <Typography
200
+ textStyle='body1'
201
+ className={TABLE_HEADER[activeTab]['descr_text_color']}>
202
+ {`${TABLE_HEADER[activeTab]['descr']}`}
203
+ </Typography>)}
204
+ </div>
205
+ </div>
206
+
207
+ <div className="divide-y divide-neutral-200 rounded-b-3xl">
208
+ <div className='flex flex-col border border-neutral-200 divide-y divide-neutral-200 rounded-b-3xl items-center'>
209
+ <div className='flex divide-y divide-neutral-200 flex-col w-full gap-2 items-start'>
210
+ {TABLE_VALUE.map((msection, index) => (
211
+ <React.Fragment key={index}>
212
+ {Object.keys(msection).map((keyIndex) => (
213
+
214
+ <>
215
+ {msection[keyIndex].map((tem2, index) =>(
216
+ <>
217
+ {levelCalc(tem2,index)}
218
+ </>
219
+ ))
220
+
221
+ }
222
+
223
+
224
+
225
+ </>
226
+ ))}
227
+
228
+
229
+ </React.Fragment>
230
+ ))}
231
+ </div>
232
+ </div>
233
+
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+
239
+ {/* code for mobile */}
240
+
241
+ <div className='hidden tb-l:block' >
242
+ <div className="mt-12 rounded-3xl ">
243
+ <table className="min-w-full shadow tableclss rounded-3xl ">
244
+ <thead>
245
+ <tr className=' text-center rounded-t-3xl'>
246
+ {Object.keys(TABLE_HEADER).map((key, index) => (
247
+ <th
248
+ key={index}
249
+ scope="col"
250
+ className="px-8 py-6 sm:table-cell"
251
+ >
252
+ <div className=''>
253
+ <div className='flex flex-col justify-center items-center text-center'>
254
+ <div className={'flex items-center gap-2'}>
255
+ {TABLE_HEADER[key]['icon'] &&
256
+ (
257
+ <Icon
258
+ height='h-6 w-6 stroke-[1.5px]'
259
+ variant={TABLE_HEADER[key]['icon']}
260
+ strokeClass={HDSColor(TABLE_HEADER[key]['iconStrokeClass'])} />
261
+ )
262
+ }
263
+ {
264
+ TABLE_HEADER[key]['title'] && key == 0 && (
265
+ <Typography
266
+ textStyle='h5'
267
+ className={HDSColor(TABLE_HEADER[key]['title_text_color'])}>
268
+ {TABLE_HEADER[key]['title']}
269
+ </Typography>)
270
+ }
271
+ {
272
+ TABLE_HEADER[key]['title'] && key != 0 && (
273
+ <Typography
274
+ textStyle='h5'
275
+ className={HDSColor(TABLE_HEADER[key]['title_text_color'])}>
276
+ <ReactMarkdown>{TABLE_HEADER[key]['title']}</ReactMarkdown>
277
+ </Typography>)
278
+ }
279
+ </div>
280
+ <div className=' max-w-[10rem]'>
281
+ {TABLE_HEADER[key]['descr'] && (
282
+ <Typography
283
+ textStyle='body1'
284
+ className={HDSColor(TABLE_HEADER[key]['descr_text_color'])}>
285
+ {TABLE_HEADER[key]['descr']}
286
+ </Typography>)}
287
+
288
+ {TABLE_HEADER[key]['button_title'] &&
289
+ (
290
+ <HDSButton
291
+ label={TABLE_HEADER[key]['button_title']}
292
+ type='secondary'
293
+ leftIconVariant='none'
294
+ rightIconVariant='none'
295
+ state='default'
296
+ size='sm'
297
+ rightAnimatedArrow={true}
298
+ rightAnimatedArrowColor='#6C737F'
299
+ className='mt-4'
300
+ />
301
+
302
+ )
303
+
304
+ }
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </th>
309
+ ))}
310
+ </tr>
311
+ </thead>
312
+ {TABLE_VALUE.map((section, index) => (
313
+ <tbody key={index} className="divide-y divide-neutral-200">
314
+
315
+
316
+ {Object.keys(section).map((keyIndex) => (
317
+ <>
318
+ <tr className=''>
319
+ {Object.keys(section[keyIndex][0]).map((keyIndex2) => (
320
+ <React.Fragment key={keyIndex2}>
321
+ {keyIndex2 !== null && (
322
+ <th
323
+ className='bg-neutral-100 first:rounded-l-full last:rounded-r-full'
324
+ >
325
+ <Typography textStyle='h5' className='text-neutral-900'>
326
+
327
+ { keyIndex2 }
328
+ </Typography>
329
+
330
+
331
+ </th>
332
+ )}
333
+ </React.Fragment>
334
+ ))}
335
+ </tr>
336
+
337
+
338
+
339
+ {tableValuesm(section, keyIndex)}
340
+ </>
341
+
342
+
343
+
344
+
345
+ ))
346
+ }
347
+
348
+
349
+ </tbody>
350
+
351
+ ))
352
+
353
+ }
354
+ {/* <tbody className="divide-y divide-neutral-200">
355
+ <tr className=''>
356
+ {Object.keys(TABLE_VALUE[0]).map((keyIndex) => (
357
+ <th
358
+ className='bg-neutral-100 first:rounded-l-full last:rounded-r-full'
359
+ >
360
+ <Typography textStyle='h5' className='text-neutral-900'>
361
+ {keyIndex}
362
+ </Typography>
363
+ </th>
364
+ ))
365
+ }
366
+ </tr>
367
+
368
+ {TABLE_VALUE.map((value, index) => (
369
+ <tr className='' key={index}>
370
+ {Object.keys(value).map((keyIndex) => (
371
+
372
+ <React.Fragment key={index + keyIndex}>
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>
392
+
393
+ )}
394
+ {(value[keyIndex]['text'] === null || !value[keyIndex]['text']) && value[keyIndex]['iconVariant'] && (
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
+ }
401
+
402
+ {keyIndex === null && (
403
+ <td
404
+ key={index}
405
+ className="px-8 py-7 border-table text-center"
406
+ >
407
+ </td>
408
+ )}
409
+
410
+
411
+ </React.Fragment>
412
+ ))}
413
+ </tr>
414
+ ))}
415
+ </tbody> */}
416
+
417
+ </table>
418
+ </div>
419
+ </div>
420
+ </div>
421
+ )
422
+ }
423
+
424
+ TableB.defaultProps = {
425
+ title_color: 'text-blue-800',
426
+ desc_color: 'text-blue-600'
427
+ }
@@ -1572,6 +1572,10 @@ select {
1572
1572
  min-width: 144px;
1573
1573
  }
1574
1574
 
1575
+ .min-w-\[11\.25rem\] {
1576
+ min-width: 11.25rem;
1577
+ }
1578
+
1575
1579
  .max-w-2xl {
1576
1580
  max-width: 42rem;
1577
1581
  }
@@ -1630,6 +1634,10 @@ select {
1630
1634
  max-width: min-content;
1631
1635
  }
1632
1636
 
1637
+ .max-w-\[22\.313rem\] {
1638
+ max-width: 22.313rem;
1639
+ }
1640
+
1633
1641
  .flex-1 {
1634
1642
  flex: 1 1 0%;
1635
1643
  }
@@ -2058,10 +2066,18 @@ select {
2058
2066
  overflow: hidden;
2059
2067
  }
2060
2068
 
2069
+ .overflow-clip {
2070
+ overflow: clip;
2071
+ }
2072
+
2061
2073
  .overflow-visible {
2062
2074
  overflow: visible;
2063
2075
  }
2064
2076
 
2077
+ .overflow-scroll {
2078
+ overflow: scroll;
2079
+ }
2080
+
2065
2081
  .overflow-y-auto {
2066
2082
  overflow-y: auto;
2067
2083
  }
@@ -2164,6 +2180,16 @@ select {
2164
2180
  border-top-right-radius: 0.375rem;
2165
2181
  }
2166
2182
 
2183
+ .rounded-l {
2184
+ border-top-left-radius: 0.25rem;
2185
+ border-bottom-left-radius: 0.25rem;
2186
+ }
2187
+
2188
+ .rounded-l-full {
2189
+ border-top-left-radius: 9999px;
2190
+ border-bottom-left-radius: 9999px;
2191
+ }
2192
+
2167
2193
  .rounded-tl-2xl {
2168
2194
  border-top-left-radius: 1rem;
2169
2195
  }
@@ -5476,6 +5502,14 @@ select {
5476
5502
  padding-top: 1.5rem;
5477
5503
  }
5478
5504
 
5505
+ .pr-0 {
5506
+ padding-right: 0px;
5507
+ }
5508
+
5509
+ .pt-8 {
5510
+ padding-top: 2rem;
5511
+ }
5512
+
5479
5513
  .text-left {
5480
5514
  text-align: left;
5481
5515
  }
@@ -7432,15 +7466,53 @@ select {
7432
7466
  margin-left: 0px;
7433
7467
  }
7434
7468
 
7469
+ .first\:rounded-full:first-child {
7470
+ border-radius: 9999px;
7471
+ }
7472
+
7473
+ .first\:rounded-r-full:first-child {
7474
+ border-top-right-radius: 9999px;
7475
+ border-bottom-right-radius: 9999px;
7476
+ }
7477
+
7478
+ .first\:rounded-l-full:first-child {
7479
+ border-top-left-radius: 9999px;
7480
+ border-bottom-left-radius: 9999px;
7481
+ }
7482
+
7435
7483
  .first\:bg-blue-500:first-child {
7436
7484
  --tw-bg-opacity: 1;
7437
7485
  background-color: rgb(57 112 253 / var(--tw-bg-opacity));
7438
7486
  }
7439
7487
 
7488
+ .first\:bg-purple-500:first-child {
7489
+ --tw-bg-opacity: 1;
7490
+ background-color: rgb(140 73 250 / var(--tw-bg-opacity));
7491
+ }
7492
+
7493
+ .first\:bg-neutral-200:first-child {
7494
+ --tw-bg-opacity: 1;
7495
+ background-color: rgb(229 231 235 / var(--tw-bg-opacity));
7496
+ }
7497
+
7440
7498
  .last\:mr-0:last-child {
7441
7499
  margin-right: 0px;
7442
7500
  }
7443
7501
 
7502
+ .last\:rounded-3xl:last-child {
7503
+ border-radius: 1.5rem;
7504
+ }
7505
+
7506
+ .last\:rounded-r-3xl:last-child {
7507
+ border-top-right-radius: 1.5rem;
7508
+ border-bottom-right-radius: 1.5rem;
7509
+ }
7510
+
7511
+ .last\:rounded-r-full:last-child {
7512
+ border-top-right-radius: 9999px;
7513
+ border-bottom-right-radius: 9999px;
7514
+ }
7515
+
7444
7516
  .last\:border-b-0:last-child {
7445
7517
  border-bottom-width: 0px;
7446
7518
  }
@@ -8212,6 +8284,14 @@ select {
8212
8284
  gap: 0.75rem;
8213
8285
  }
8214
8286
 
8287
+ .tb\:gap-1 {
8288
+ gap: 0.25rem;
8289
+ }
8290
+
8291
+ .tb\:gap-6 {
8292
+ gap: 1.5rem;
8293
+ }
8294
+
8215
8295
  .tb\:gap-x-16 {
8216
8296
  -webkit-column-gap: 4rem;
8217
8297
  column-gap: 4rem;
@@ -8266,6 +8346,11 @@ select {
8266
8346
  padding-right: 2rem;
8267
8347
  }
8268
8348
 
8349
+ .tb\:px-0 {
8350
+ padding-left: 0px;
8351
+ padding-right: 0px;
8352
+ }
8353
+
8269
8354
  .tb\:pb-14 {
8270
8355
  padding-bottom: 3.5rem;
8271
8356
  }
@@ -8290,6 +8375,14 @@ select {
8290
8375
  padding-top: 2.875rem;
8291
8376
  }
8292
8377
 
8378
+ .tb\:pl-0 {
8379
+ padding-left: 0px;
8380
+ }
8381
+
8382
+ .tb\:pt-14 {
8383
+ padding-top: 3.5rem;
8384
+ }
8385
+
8293
8386
  .tb\:text-left {
8294
8387
  text-align: left;
8295
8388
  }
@@ -8745,6 +8838,10 @@ select {
8745
8838
  gap: 9rem;
8746
8839
  }
8747
8840
 
8841
+ .tb-l\:gap-6 {
8842
+ gap: 1.5rem;
8843
+ }
8844
+
8748
8845
  .tb-l\:space-x-6 > :not([hidden]) ~ :not([hidden]) {
8749
8846
  --tw-space-x-reverse: 0;
8750
8847
  margin-right: calc(1.5rem * var(--tw-space-x-reverse));