hds-web 1.1.4 → 1.1.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 (17) hide show
  1. package/dist/index.css +2 -2
  2. package/dist/index.es.css +2 -2
  3. package/dist/index.es.js +6 -6
  4. package/dist/index.js +6 -6
  5. package/package.json +1 -1
  6. package/src/HDS/components/BadgesCaption/badges.js +7 -7
  7. package/src/HDS/components/Buttons/button.js +1 -1
  8. package/src/HDS/components/Cards/BrandCard/brandCard.js +41 -0
  9. package/src/HDS/components/Cards/BrandCard/index.js +1 -0
  10. package/src/HDS/components/Cards/Dropdown/index.js +0 -0
  11. package/src/HDS/components/Cards/Misc/iconCard.js +81 -9
  12. package/src/HDS/components/Cards/Misc/talkCard.js +11 -6
  13. package/src/HDS/components/Cards/index.js +6 -1
  14. package/src/HDS/components/Headers/v3Header.js +180 -194
  15. package/src/HDS/components/Tables/tableA.js +6 -13
  16. package/src/HDS/components/Tables/tableB.js +92 -74
  17. package/src/styles/tailwind.css +49 -9
package/src/HDS/components/Tables/tableB.js CHANGED
@@ -15,25 +15,43 @@ const tabs = [
15
15
 
16
16
 
17
17
  const levelCalc = (arr, index) => {
18
-
18
+
19
19
  const keyIndex = 'key' + `${index}`;
20
- if (arr[keyIndex] && arr[keyIndex]['text'] && arr[keyIndex]['text'] !== null) {
20
+ if (arr[keyIndex] && (arr[keyIndex]['text'] || arr[keyIndex]['iconVariant'])) {
21
21
  return (
22
22
  <>
23
- <Typography as='div' textStyle='bodyc' className='text-neutral-700 flex items-start gap-4'> {`${arr[keyIndex]['text']}`}</Typography>
24
-
25
-
26
- </>
27
- )
28
- }
29
- if (arr[keyIndex] && arr[keyIndex]['text'] === null && arr[keyIndex]['iconVariant'] && arr[keyIndex]['iconVariant'] !== null && (arr[keyIndex]['iconStrokeClass']) !== null) {
30
-
31
- return (
32
- <>
33
- <Icon height='h-5 w-5 stroke-[1.5px]' variant={arr[keyIndex]['iconVariant']} strokeClass={HDSColor(arr[keyIndex]['iconStrokeClass'])} />
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
+
34
51
  </>
35
52
  )
36
53
  }
54
+
37
55
  }
38
56
 
39
57
  export default function TableB(props) {
@@ -48,9 +66,9 @@ export default function TableB(props) {
48
66
  const [activeTab, setActiveTab] = useState(1);
49
67
 
50
68
  function handleTabClick(tab) {
51
- if(tab.name === 'Level 1') setActiveTab(1);
52
- if(tab.name === 'Level 2') setActiveTab(2);
53
- if(tab.name === 'Level 3') setActiveTab(3);
69
+ if (tab.name === 'Level 1') setActiveTab(1);
70
+ if (tab.name === 'Level 2') setActiveTab(2);
71
+ if (tab.name === 'Level 3') setActiveTab(3);
54
72
  // Perform any other actions based on the clicked tab
55
73
  }
56
74
 
@@ -84,68 +102,68 @@ export default function TableB(props) {
84
102
  </div>
85
103
 
86
104
  {/* code for mobile */}
87
-
88
- <div className='tb-l:hidden'>
89
- <div className="mt-8 bg-neutral-0 rounded-3xl ">
90
- <div className=" shadow rounded-3xl transition-opacity duration-200 ">
91
-
92
- <div className='flex border-x px-8 py-[1.625rem] border-neutral-200 rounded-t-3xl flex-col justify-center items-center text-center'>
93
- <div className={'flex items-center gap-2'}>
94
- {TABLE_HEADER[activeTab]['icon'] &&
95
- (
96
- <Icon
97
- height='h-6 w-6'
98
- variant={TABLE_HEADER[activeTab]['icon']}
99
- strokeClass={TABLE_HEADER[activeTab]['iconStrokeClass']} />
100
- )
101
- }
102
- {
103
- TABLE_HEADER[activeTab]['title'] && activeTab == 0 && (
104
- <Typography
105
- textStyle='h5'
106
- className={TABLE_HEADER[activeTab]['title_text_color']}>
107
- {`${TABLE_HEADER[activeTab]['title']}`}
108
- </Typography>)
109
- }
110
- {
111
- TABLE_HEADER[activeTab]['title'] && activeTab != 0 && (
112
- <Typography
113
- textStyle='h5'
114
- className={TABLE_HEADER[activeTab]['title_text_color']}>
115
- {`${TABLE_HEADER[activeTab]['title']}`}
116
- </Typography>)
117
- }
118
105
 
106
+ <div className='tb-l:hidden'>
107
+ <div className="mt-8 bg-neutral-0 rounded-3xl ">
108
+ <div className=" shadow rounded-3xl ">
119
109
 
120
- </div>
121
- <div className=' max-w-[10rem]'>
122
- {TABLE_HEADER[activeTab]['descr'] && (
123
- <Typography
124
- textStyle='body1'
125
- className={TABLE_HEADER[activeTab]['descr_text_color']}>
126
- {`${TABLE_HEADER[activeTab]['descr']}`}
127
- </Typography>)}
128
- </div>
129
- </div>
130
-
131
- <div className="divide-y divide-neutral-200 rounded-b-3xl">
132
- <div className='flex flex-col border border-neutral-200 divide-y divide-neutral-200 rounded-b-3xl items-center'>
110
+ <div className='flex border-x px-8 py-[1.625rem] border-neutral-200 rounded-t-3xl flex-col justify-center items-center text-center'>
111
+ <div className={'flex items-center gap-2'}>
112
+ {TABLE_HEADER[activeTab]['icon'] &&
113
+ (
114
+ <Icon
115
+ height='h-6 w-6'
116
+ variant={TABLE_HEADER[activeTab]['icon']}
117
+ strokeClass={TABLE_HEADER[activeTab]['iconStrokeClass']} />
118
+ )
119
+ }
120
+ {
121
+ TABLE_HEADER[activeTab]['title'] && activeTab == 0 && (
122
+ <Typography
123
+ textStyle='h5'
124
+ className={TABLE_HEADER[activeTab]['title_text_color']}>
125
+ {`${TABLE_HEADER[activeTab]['title']}`}
126
+ </Typography>)
127
+ }
128
+ {
129
+ TABLE_HEADER[activeTab]['title'] && activeTab != 0 && (
130
+ <Typography
131
+ textStyle='h5'
132
+ className={TABLE_HEADER[activeTab]['title_text_color']}>
133
+ {`${TABLE_HEADER[activeTab]['title']}`}
134
+ </Typography>)
135
+ }
136
+
137
+
138
+ </div>
139
+ <div className=' max-w-[10rem]'>
140
+ {TABLE_HEADER[activeTab]['descr'] && (
141
+ <Typography
142
+ textStyle='body1'
143
+ className={TABLE_HEADER[activeTab]['descr_text_color']}>
144
+ {`${TABLE_HEADER[activeTab]['descr']}`}
145
+ </Typography>)}
146
+ </div>
147
+ </div>
148
+
149
+ <div className="divide-y divide-neutral-200 rounded-b-3xl">
150
+ <div className='flex flex-col border border-neutral-200 divide-y divide-neutral-200 rounded-b-3xl items-center'>
151
+ <div className='flex divide-y divide-neutral-200 flex-col w-full gap-2 items-start'>
133
152
  {TABLE_VALUE.map((key, index) => (
134
153
  <React.Fragment key={index}>
135
- <div className='flex w-full p-4 gap-2 items-start'>
136
-
137
- {levelCalc(key, activeTab)}{key['rowTitle']}
138
-
139
- </div>
154
+
155
+ {levelCalc(key, activeTab)}
156
+
140
157
  </React.Fragment>
141
158
  ))}
142
159
  </div>
143
-
144
160
  </div>
161
+
145
162
  </div>
146
163
  </div>
147
164
  </div>
148
-
165
+ </div>
166
+
149
167
  {/* code for mobile */}
150
168
 
151
169
  <div className='hidden tb-l:block' >
@@ -206,18 +224,18 @@ export default function TableB(props) {
206
224
  <tr className='divide-x divide-neutral-200' key={index}>
207
225
  {Object.keys(value).map((keyIndex) => (
208
226
 
209
- <React.Fragment key={index+keyIndex}>
227
+ <React.Fragment key={index + keyIndex}>
210
228
  {keyIndex !== null && keyIndex === 'rowTitle' && (<td
211
-
229
+
212
230
  className="px-8 py-7 w-[22.5rem]"
213
231
  >
214
- <Typography className='max-w-[22rem] text-neutral-700' textStyle='body1c'><ReactMarkdown>{value[keyIndex]}</ReactMarkdown></Typography>
232
+ <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>
215
233
 
216
234
  </td>)}
217
-
235
+
218
236
  {keyIndex !== null && keyIndex !== 'rowTitle' && value[keyIndex] !== null && (
219
237
  <td
220
-
238
+
221
239
  className="px-8 py-7 border-table text-center "
222
240
  >
223
241
  {value && keyIndex && value[keyIndex] && value[keyIndex]['text'] === null && !value[keyIndex]['iconVariant'] && value[keyIndex]['iconVariant'] === null && (
@@ -233,9 +251,9 @@ export default function TableB(props) {
233
251
  <Icon height='h-5 w-5 stroke-[1.5px]' variant={value[keyIndex]['iconVariant']} strokeClass={HDSColor(value[keyIndex]['iconStrokeClass'])} />
234
252
  </div>
235
253
  )}
236
- </td>)
254
+ </td>)
237
255
  }
238
-
256
+
239
257
  {keyIndex === null && (
240
258
  <td
241
259
  key={index}
package/src/styles/tailwind.css CHANGED
@@ -1237,6 +1237,10 @@ select {
1237
1237
  margin-top: 2.25rem;
1238
1238
  }
1239
1239
 
1240
+ .mt-7 {
1241
+ margin-top: 1.75rem;
1242
+ }
1243
+
1240
1244
  .block {
1241
1245
  display: block;
1242
1246
  }
@@ -1357,6 +1361,14 @@ select {
1357
1361
  height: 100%;
1358
1362
  }
1359
1363
 
1364
+ .h-\[calc\(100\%-112px\)\] {
1365
+ height: calc(100% - 112px);
1366
+ }
1367
+
1368
+ .h-20 {
1369
+ height: 5rem;
1370
+ }
1371
+
1360
1372
  .max-h-\[26\.25\] {
1361
1373
  max-height: 26.25;
1362
1374
  }
@@ -1483,6 +1495,10 @@ select {
1483
1495
  width: 100vw;
1484
1496
  }
1485
1497
 
1498
+ .w-20 {
1499
+ width: 5rem;
1500
+ }
1501
+
1486
1502
  .min-w-\[15rem\] {
1487
1503
  min-width: 15rem;
1488
1504
  }
@@ -1547,10 +1563,6 @@ select {
1547
1563
  max-width: min-content;
1548
1564
  }
1549
1565
 
1550
- .max-w-xs {
1551
- max-width: 20rem;
1552
- }
1553
-
1554
1566
  .flex-1 {
1555
1567
  flex: 1 1 0%;
1556
1568
  }
@@ -5099,6 +5111,10 @@ select {
5099
5111
  padding: 0px 8px 0px 0px;;
5100
5112
  }
5101
5113
 
5114
+ .p-10 {
5115
+ padding: 2.5rem;
5116
+ }
5117
+
5102
5118
  .px-0 {
5103
5119
  padding-left: 0px;
5104
5120
  padding-right: 0px;
@@ -5366,6 +5382,10 @@ select {
5366
5382
  padding-top: 1.5rem;
5367
5383
  }
5368
5384
 
5385
+ .pr-1 {
5386
+ padding-right: 0.25rem;
5387
+ }
5388
+
5369
5389
  .text-left {
5370
5390
  text-align: left;
5371
5391
  }
@@ -8438,11 +8458,6 @@ select {
8438
8458
  padding: 2rem;
8439
8459
  }
8440
8460
 
8441
- .sm\:px-0 {
8442
- padding-left: 0px;
8443
- padding-right: 0px;
8444
- }
8445
-
8446
8461
  .sm\:px-3 {
8447
8462
  padding-left: 0.75rem;
8448
8463
  padding-right: 0.75rem;
@@ -9036,4 +9051,29 @@ select {
9036
9051
 
9037
9052
  .last\:\[\&\>\*\]\:mb-0>*:last-child {
9038
9053
  margin-bottom: 0px;
9054
+ }
9055
+
9056
+ .\[\&\>p\]\:pb-2>p {
9057
+ padding-bottom: 0.5rem;
9058
+ }
9059
+
9060
+ .\[\&\>span\]\:pb-2>span {
9061
+ padding-bottom: 0.5rem;
9062
+ }
9063
+
9064
+ .\[\&\>ul\>li\]\:list-disc>ul>li {
9065
+ list-style-type: disc;
9066
+ }
9067
+
9068
+ .\[\&\>ul\>li\]\:pb-2>ul>li {
9069
+ padding-bottom: 0.5rem;
9070
+ }
9071
+
9072
+ .\[\&\>ul\>li\]\:last\:pb-0:last-child>ul>li {
9073
+ padding-bottom: 0px;
9074
+ }
9075
+
9076
+ .\[\&\>ul\]\:ps-4>ul {
9077
+ -webkit-padding-start: 1rem;
9078
+ padding-inline-start: 1rem;
9039
9079
  }