hds-web 1.1.3 → 1.1.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.
Files changed (19) 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/Cards/BrandCard/brandCard.js +41 -0
  7. package/src/HDS/components/Cards/BrandCard/index.js +1 -0
  8. package/src/HDS/components/Cards/Dropdown/index.js +0 -0
  9. package/src/HDS/components/Cards/Link/resources.js +0 -1
  10. package/src/HDS/components/Cards/Misc/talkCard.js +10 -5
  11. package/src/HDS/components/Cards/index.js +6 -1
  12. package/src/HDS/components/Carousels/carousel.js +0 -1
  13. package/src/HDS/components/Carousels/carouselCard.js +4 -4
  14. package/src/HDS/components/Headers/v3Header.js +164 -159
  15. package/src/HDS/components/Snippet/CodeSnippet.js +0 -1
  16. package/src/HDS/components/Tables/tableB.js +92 -74
  17. package/src/HDS/foundation/ColorPalette/color.js +0 -1
  18. package/src/HDS/modules/TextCard/textCard.js +0 -1
  19. package/src/styles/tailwind.css +29 -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/HDS/foundation/ColorPalette/color.js CHANGED
@@ -580,7 +580,6 @@ const HDSColors = {
580
580
  export default function HDSColor(color = '') {
581
581
  if (!HDSColors[color]) {
582
582
  HDSColors[color] = color;
583
- console.log(color);
584
583
  }
585
584
  return HDSColors[color];
586
585
  }
package/src/HDS/modules/TextCard/textCard.js CHANGED
@@ -6,7 +6,6 @@ import { Icon } from '../../components/common-components/Icon';
6
6
 
7
7
  export default function TextCard(props) {
8
8
  const titleColor = HDSColor(props.title_color);
9
- console.log(props.descriptions);
10
9
  return (
11
10
  <>
12
11
  {
package/src/styles/tailwind.css CHANGED
@@ -1547,10 +1547,6 @@ select {
1547
1547
  max-width: min-content;
1548
1548
  }
1549
1549
 
1550
- .max-w-xs {
1551
- max-width: 20rem;
1552
- }
1553
-
1554
1550
  .flex-1 {
1555
1551
  flex: 1 1 0%;
1556
1552
  }
@@ -5366,6 +5362,10 @@ select {
5366
5362
  padding-top: 1.5rem;
5367
5363
  }
5368
5364
 
5365
+ .pr-1 {
5366
+ padding-right: 0.25rem;
5367
+ }
5368
+
5369
5369
  .text-left {
5370
5370
  text-align: left;
5371
5371
  }
@@ -8438,11 +8438,6 @@ select {
8438
8438
  padding: 2rem;
8439
8439
  }
8440
8440
 
8441
- .sm\:px-0 {
8442
- padding-left: 0px;
8443
- padding-right: 0px;
8444
- }
8445
-
8446
8441
  .sm\:px-3 {
8447
8442
  padding-left: 0.75rem;
8448
8443
  padding-right: 0.75rem;
@@ -9036,4 +9031,29 @@ select {
9036
9031
 
9037
9032
  .last\:\[\&\>\*\]\:mb-0>*:last-child {
9038
9033
  margin-bottom: 0px;
9034
+ }
9035
+
9036
+ .\[\&\>p\]\:pb-2>p {
9037
+ padding-bottom: 0.5rem;
9038
+ }
9039
+
9040
+ .\[\&\>span\]\:pb-2>span {
9041
+ padding-bottom: 0.5rem;
9042
+ }
9043
+
9044
+ .\[\&\>ul\>li\]\:list-disc>ul>li {
9045
+ list-style-type: disc;
9046
+ }
9047
+
9048
+ .\[\&\>ul\>li\]\:pb-2>ul>li {
9049
+ padding-bottom: 0.5rem;
9050
+ }
9051
+
9052
+ .\[\&\>ul\>li\]\:last\:pb-0:last-child>ul>li {
9053
+ padding-bottom: 0px;
9054
+ }
9055
+
9056
+ .\[\&\>ul\]\:ps-4>ul {
9057
+ -webkit-padding-start: 1rem;
9058
+ padding-inline-start: 1rem;
9039
9059
  }