hds-web 1.3.6 → 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
+ }
@@ -1408,6 +1408,10 @@ select {
1408
1408
  min-height: 96px;
1409
1409
  }
1410
1410
 
1411
+ .min-h-\[116px\] {
1412
+ min-height: 116px;
1413
+ }
1414
+
1411
1415
  .w-1\/2 {
1412
1416
  width: 50%;
1413
1417
  }
@@ -1564,6 +1568,14 @@ select {
1564
1568
  min-width: 100%;
1565
1569
  }
1566
1570
 
1571
+ .min-w-\[144px\] {
1572
+ min-width: 144px;
1573
+ }
1574
+
1575
+ .min-w-\[11\.25rem\] {
1576
+ min-width: 11.25rem;
1577
+ }
1578
+
1567
1579
  .max-w-2xl {
1568
1580
  max-width: 42rem;
1569
1581
  }
@@ -1622,6 +1634,10 @@ select {
1622
1634
  max-width: min-content;
1623
1635
  }
1624
1636
 
1637
+ .max-w-\[22\.313rem\] {
1638
+ max-width: 22.313rem;
1639
+ }
1640
+
1625
1641
  .flex-1 {
1626
1642
  flex: 1 1 0%;
1627
1643
  }
@@ -2050,10 +2066,18 @@ select {
2050
2066
  overflow: hidden;
2051
2067
  }
2052
2068
 
2069
+ .overflow-clip {
2070
+ overflow: clip;
2071
+ }
2072
+
2053
2073
  .overflow-visible {
2054
2074
  overflow: visible;
2055
2075
  }
2056
2076
 
2077
+ .overflow-scroll {
2078
+ overflow: scroll;
2079
+ }
2080
+
2057
2081
  .overflow-y-auto {
2058
2082
  overflow-y: auto;
2059
2083
  }
@@ -2156,6 +2180,16 @@ select {
2156
2180
  border-top-right-radius: 0.375rem;
2157
2181
  }
2158
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
+
2159
2193
  .rounded-tl-2xl {
2160
2194
  border-top-left-radius: 1rem;
2161
2195
  }
@@ -5468,6 +5502,14 @@ select {
5468
5502
  padding-top: 1.5rem;
5469
5503
  }
5470
5504
 
5505
+ .pr-0 {
5506
+ padding-right: 0px;
5507
+ }
5508
+
5509
+ .pt-8 {
5510
+ padding-top: 2rem;
5511
+ }
5512
+
5471
5513
  .text-left {
5472
5514
  text-align: left;
5473
5515
  }
@@ -7424,15 +7466,53 @@ select {
7424
7466
  margin-left: 0px;
7425
7467
  }
7426
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
+
7427
7483
  .first\:bg-blue-500:first-child {
7428
7484
  --tw-bg-opacity: 1;
7429
7485
  background-color: rgb(57 112 253 / var(--tw-bg-opacity));
7430
7486
  }
7431
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
+
7432
7498
  .last\:mr-0:last-child {
7433
7499
  margin-right: 0px;
7434
7500
  }
7435
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
+
7436
7516
  .last\:border-b-0:last-child {
7437
7517
  border-bottom-width: 0px;
7438
7518
  }
@@ -8025,6 +8105,16 @@ select {
8025
8105
  stroke: #FFFFFF;
8026
8106
  }
8027
8107
 
8108
+ @media (max-width: 1140px) {
8109
+ .max-\[1140px\]\:shrink-0 {
8110
+ flex-shrink: 0;
8111
+ }
8112
+
8113
+ .max-\[1140px\]\:snap-center {
8114
+ scroll-snap-align: center;
8115
+ }
8116
+ }
8117
+
8028
8118
  @media (min-width: 360px) {
8029
8119
  .mb-s\:flex-row {
8030
8120
  flex-direction: row;
@@ -8142,6 +8232,10 @@ select {
8142
8232
  max-width: 530px;
8143
8233
  }
8144
8234
 
8235
+ .tb\:snap-always {
8236
+ scroll-snap-stop: always;
8237
+ }
8238
+
8145
8239
  .tb\:grid-cols-2 {
8146
8240
  grid-template-columns: repeat(2, minmax(0, 1fr));
8147
8241
  }
@@ -8190,6 +8284,14 @@ select {
8190
8284
  gap: 0.75rem;
8191
8285
  }
8192
8286
 
8287
+ .tb\:gap-1 {
8288
+ gap: 0.25rem;
8289
+ }
8290
+
8291
+ .tb\:gap-6 {
8292
+ gap: 1.5rem;
8293
+ }
8294
+
8193
8295
  .tb\:gap-x-16 {
8194
8296
  -webkit-column-gap: 4rem;
8195
8297
  column-gap: 4rem;
@@ -8244,6 +8346,11 @@ select {
8244
8346
  padding-right: 2rem;
8245
8347
  }
8246
8348
 
8349
+ .tb\:px-0 {
8350
+ padding-left: 0px;
8351
+ padding-right: 0px;
8352
+ }
8353
+
8247
8354
  .tb\:pb-14 {
8248
8355
  padding-bottom: 3.5rem;
8249
8356
  }
@@ -8268,6 +8375,14 @@ select {
8268
8375
  padding-top: 2.875rem;
8269
8376
  }
8270
8377
 
8378
+ .tb\:pl-0 {
8379
+ padding-left: 0px;
8380
+ }
8381
+
8382
+ .tb\:pt-14 {
8383
+ padding-top: 3.5rem;
8384
+ }
8385
+
8271
8386
  .tb\:text-left {
8272
8387
  text-align: left;
8273
8388
  }
@@ -8723,6 +8838,10 @@ select {
8723
8838
  gap: 9rem;
8724
8839
  }
8725
8840
 
8841
+ .tb-l\:gap-6 {
8842
+ gap: 1.5rem;
8843
+ }
8844
+
8726
8845
  .tb-l\:space-x-6 > :not([hidden]) ~ :not([hidden]) {
8727
8846
  --tw-space-x-reverse: 0;
8728
8847
  margin-right: calc(1.5rem * var(--tw-space-x-reverse));