hds-web 1.1.0 → 1.1.1
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 +2 -2
- package/dist/index.js +3 -3
- package/package.json +1 -1
- package/src/HDS/assets/icons/check-circle.svg +1 -1
- package/src/HDS/components/Tables/tableB.js +160 -37
- package/src/HDS/components/Tabs/tab.js +2 -2
- package/src/styles/tailwind.css +92 -13
package/package.json
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M7.5 12L10.5 15L16.5 9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke-
|
|
2
|
+
<path d="M7.5 12L10.5 15L16.5 9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
3
|
</svg>
|
|
@@ -1,9 +1,45 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { useState } from 'react';
|
|
2
3
|
import { Typography } from '../../foundation/Typography'
|
|
3
4
|
import { Icon } from '../common-components/Icon'
|
|
4
5
|
import { HDSColor } from '../../foundation/ColorPalette';
|
|
6
|
+
import { Tab } from '../Tabs'
|
|
5
7
|
import ReactMarkdown from "react-markdown";
|
|
6
8
|
|
|
9
|
+
const tabs = [
|
|
10
|
+
{ name: 'Level 1', href: '', current: false },
|
|
11
|
+
{ name: 'Level 2', href: '', current: false },
|
|
12
|
+
{ name: 'Level 3', href: '', current: true },
|
|
13
|
+
]
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
const levelCalc = (arr, index) => {
|
|
18
|
+
|
|
19
|
+
const keyIndex = 'key' + `${index}`;
|
|
20
|
+
console.log(keyIndex);
|
|
21
|
+
if (arr[keyIndex] && arr[keyIndex]['text'] && arr[keyIndex]['text'] !== null) {
|
|
22
|
+
return (
|
|
23
|
+
<>
|
|
24
|
+
|
|
25
|
+
{arr[keyIndex]['text']}
|
|
26
|
+
|
|
27
|
+
</>
|
|
28
|
+
)
|
|
29
|
+
}
|
|
30
|
+
if (arr[keyIndex] && arr[keyIndex]['text'] === null && arr[keyIndex]['iconVariant'] && arr[keyIndex]['iconVariant'] !== null && (arr[keyIndex]['iconStrokeClass']) !== null) {
|
|
31
|
+
|
|
32
|
+
return (
|
|
33
|
+
<>
|
|
34
|
+
<Icon height='h-5 w-5 stroke-[1.5px]' variant={arr[keyIndex]['iconVariant']} strokeClass={HDSColor(arr[keyIndex]['iconStrokeClass'])} />
|
|
35
|
+
</>
|
|
36
|
+
)
|
|
37
|
+
}
|
|
38
|
+
else return(
|
|
39
|
+
<></>
|
|
40
|
+
) ;
|
|
41
|
+
}
|
|
42
|
+
|
|
7
43
|
export default function TableB(props) {
|
|
8
44
|
const {
|
|
9
45
|
title,
|
|
@@ -13,31 +49,112 @@ export default function TableB(props) {
|
|
|
13
49
|
TABLE_VALUE,
|
|
14
50
|
TABLE_HEADER,
|
|
15
51
|
} = props;
|
|
52
|
+
const [activeTab, setActiveTab] = useState(3);
|
|
53
|
+
|
|
54
|
+
function handleTabClick(tab) {
|
|
55
|
+
if(tab.name === 'Level 1') setActiveTab(1);
|
|
56
|
+
if(tab.name === 'Level 2') setActiveTab(2);
|
|
57
|
+
if(tab.name === 'Level 3') setActiveTab(3);
|
|
58
|
+
|
|
59
|
+
console.log(`Tab "${tab.name}" updatedTabs`);
|
|
60
|
+
// Perform any other actions based on the clicked tab
|
|
61
|
+
}
|
|
62
|
+
|
|
16
63
|
return (
|
|
17
64
|
<div className=" max-w-7xl px-4 sm:px-6 lg:px-8 ">
|
|
18
|
-
<div className="sm:flex sm:items-center ">
|
|
19
|
-
<div className="
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
65
|
+
<div className="sm:flex sm:items-center flex justify-around ">
|
|
66
|
+
<div className="w-full flex-col items-center flex justify-around tb-l:flex tb-l:flex-col tb-l:items-center">
|
|
67
|
+
<div>
|
|
68
|
+
{title && (
|
|
69
|
+
<Typography
|
|
70
|
+
textStyle='h3'
|
|
71
|
+
className={HDSColor(title_color)}
|
|
72
|
+
>
|
|
73
|
+
{title}
|
|
74
|
+
</Typography>
|
|
75
|
+
)}
|
|
76
|
+
{description && (
|
|
77
|
+
<Typography
|
|
78
|
+
textStyle='body1c'
|
|
79
|
+
className={HDSColor(desc_color)}
|
|
80
|
+
>
|
|
81
|
+
{description}
|
|
82
|
+
</Typography>
|
|
83
|
+
)}
|
|
84
|
+
</div>
|
|
85
|
+
<div className=' mt-11 rounded-full shadow tb-l:hidden'>
|
|
86
|
+
<Tab onTabClick={handleTabClick} tabs={tabs} />
|
|
87
|
+
</div>
|
|
39
88
|
</div>
|
|
89
|
+
|
|
40
90
|
</div>
|
|
91
|
+
|
|
92
|
+
{/* code for mobile */}
|
|
93
|
+
|
|
94
|
+
<div className='tb-l:hidden'>
|
|
95
|
+
<div className="mt-8 bg-neutral-0 rounded-3xl ">
|
|
96
|
+
<div className=" shadow rounded-3xl ">
|
|
97
|
+
|
|
98
|
+
<div className='flex border-x px-8 py-[1.625rem] border-neutral-200 rounded-t-3xl flex-col justify-center items-center text-center'>
|
|
99
|
+
<div className={'flex items-center gap-2'}>
|
|
100
|
+
{TABLE_HEADER[activeTab]['icon'] &&
|
|
101
|
+
(
|
|
102
|
+
<Icon
|
|
103
|
+
height='h-6 w-6'
|
|
104
|
+
variant={TABLE_HEADER[activeTab]['icon']}
|
|
105
|
+
strokeClass={TABLE_HEADER[activeTab]['iconStrokeClass']} />
|
|
106
|
+
)
|
|
107
|
+
}
|
|
108
|
+
{
|
|
109
|
+
TABLE_HEADER[activeTab]['title'] && activeTab == 0 && (
|
|
110
|
+
<Typography
|
|
111
|
+
textStyle='h5'
|
|
112
|
+
className={TABLE_HEADER[activeTab]['title_text_color']}>
|
|
113
|
+
{TABLE_HEADER[activeTab]['title']}
|
|
114
|
+
</Typography>)
|
|
115
|
+
}
|
|
116
|
+
{
|
|
117
|
+
TABLE_HEADER[activeTab]['title'] && activeTab != 0 && (
|
|
118
|
+
<Typography
|
|
119
|
+
textStyle='h5'
|
|
120
|
+
className={TABLE_HEADER[activeTab]['title_text_color']}>
|
|
121
|
+
{TABLE_HEADER[activeTab]['title']}
|
|
122
|
+
</Typography>)
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
</div>
|
|
127
|
+
<div className=' max-w-[10rem]'>
|
|
128
|
+
{TABLE_HEADER[activeTab]['descr'] && (
|
|
129
|
+
<Typography
|
|
130
|
+
textStyle='body1'
|
|
131
|
+
className={TABLE_HEADER[activeTab]['descr_text_color']}>
|
|
132
|
+
{TABLE_HEADER[activeTab]['descr']}
|
|
133
|
+
</Typography>)}
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
<div className="divide-y divide-neutral-200 rounded-b-3xl">
|
|
139
|
+
<div className='flex flex-col border border-neutral-200 divide-y divide-neutral-200 rounded-b-3xl items-center'>
|
|
140
|
+
{TABLE_VALUE.map((key, index) => (
|
|
141
|
+
<React.Fragment key={index}>
|
|
142
|
+
<div className='flex w-full p-4 gap-4 items-center'>
|
|
143
|
+
<Typography as='div' textStyle='bodyc' className='text-neutral-700 flex items-start gap-4'>
|
|
144
|
+
{levelCalc(key, activeTab)} {key['rowTitle']}
|
|
145
|
+
</Typography>
|
|
146
|
+
</div>
|
|
147
|
+
</React.Fragment>
|
|
148
|
+
))}
|
|
149
|
+
</div>
|
|
150
|
+
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
|
|
156
|
+
{/* code for mobile */}
|
|
157
|
+
|
|
41
158
|
<div className='hidden tb-l:block' >
|
|
42
159
|
<div className="-mx-4 mt-8 sm:-mx-0 bg-neutral-0 rounded-3xl ">
|
|
43
160
|
<table className="min-w-full shadow rounded-3xl ">
|
|
@@ -94,38 +211,39 @@ export default function TableB(props) {
|
|
|
94
211
|
<tbody className="divide-y divide-neutral-200 rounded-b-3xl">
|
|
95
212
|
{TABLE_VALUE.map((value, index) => (
|
|
96
213
|
<tr className='divide-x divide-neutral-200' key={index}>
|
|
97
|
-
{Object.keys(value).map((
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
214
|
+
{Object.keys(value).map((keyIndex) => (
|
|
215
|
+
|
|
216
|
+
<React.Fragment key={index}>
|
|
217
|
+
{keyIndex !== null && keyIndex === 'rowTitle' && (<td
|
|
218
|
+
key={index}
|
|
219
|
+
className="px-8 py-7 w-[22.5rem]"
|
|
102
220
|
>
|
|
103
|
-
<Typography className='max-w-[22rem] text-neutral-700' textStyle='body1c'><ReactMarkdown>{value[
|
|
221
|
+
<Typography className='max-w-[22rem] text-neutral-700' textStyle='body1c'><ReactMarkdown>{value[keyIndex]}</ReactMarkdown></Typography>
|
|
104
222
|
|
|
105
223
|
</td>)}
|
|
106
224
|
|
|
107
|
-
{
|
|
225
|
+
{keyIndex !== null && keyIndex !== 'rowTitle' && value[keyIndex] !== null && (
|
|
108
226
|
<td
|
|
109
|
-
key={
|
|
227
|
+
key={keyIndex}
|
|
110
228
|
className="px-8 py-7 text-center"
|
|
111
229
|
>
|
|
112
|
-
{value &&
|
|
113
|
-
<div
|
|
230
|
+
{value && keyIndex && value[keyIndex] && value[keyIndex]['text'] === null && !value[keyIndex]['iconVariant'] && value[keyIndex]['iconVariant'] === null && (
|
|
231
|
+
<div></div>
|
|
114
232
|
|
|
115
233
|
)}
|
|
116
|
-
{value[
|
|
117
|
-
<Typography className='text-neutral-700' textStyle='body1c'>{value[
|
|
234
|
+
{value[keyIndex]['text'] !== null && value[keyIndex]['text'] && (
|
|
235
|
+
<Typography className='text-neutral-700' textStyle='body1c'>{value[keyIndex]['text']}</Typography>
|
|
118
236
|
|
|
119
237
|
)}
|
|
120
|
-
{!value[
|
|
238
|
+
{(value[keyIndex]['text'] === null || !value[keyIndex]['text']) && value[keyIndex]['iconVariant'] && (
|
|
121
239
|
<div className='flex justify-center'>
|
|
122
|
-
<Icon height='h-5 w-5 stroke-[1.5px]' variant={value[
|
|
240
|
+
<Icon height='h-5 w-5 stroke-[1.5px]' variant={value[keyIndex]['iconVariant']} strokeClass={HDSColor(value[keyIndex]['iconStrokeClass'])} />
|
|
123
241
|
</div>
|
|
124
242
|
)}
|
|
125
243
|
</td>)}
|
|
126
|
-
{
|
|
244
|
+
{keyIndex === null && (
|
|
127
245
|
<td
|
|
128
|
-
key={
|
|
246
|
+
key={index}
|
|
129
247
|
className="px-8 py-7 text-center"
|
|
130
248
|
>
|
|
131
249
|
</td>
|
|
@@ -143,3 +261,8 @@ export default function TableB(props) {
|
|
|
143
261
|
</div>
|
|
144
262
|
)
|
|
145
263
|
}
|
|
264
|
+
|
|
265
|
+
TableB.defaultProps = {
|
|
266
|
+
title_color: 'text-blue-800',
|
|
267
|
+
desc_color: 'text-blue-600'
|
|
268
|
+
}
|
|
@@ -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
|
-
? 'bg-blue-
|
|
39
|
+
? 'bg-blue-500 text-neutral-0'
|
|
40
40
|
: 'text-neutral-500 bg-neutral-0 hover:bg-neutral-100 flex-nowrap transition-all duration-500'
|
|
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-10 bg-blue-
|
|
50
|
+
className="absolute left-0 -z-10 bg-blue-500 rounded-full transition-all ease-in-out duration-500"
|
|
51
51
|
style={{
|
|
52
52
|
left: `${activeTab.index * 100}%`,
|
|
53
53
|
width: `${activeTab.width}px`, // Use the width of the clicked tab
|
package/src/styles/tailwind.css
CHANGED
|
@@ -1237,6 +1237,10 @@ select {
|
|
|
1237
1237
|
margin-top: 2.25rem;
|
|
1238
1238
|
}
|
|
1239
1239
|
|
|
1240
|
+
.mt-11 {
|
|
1241
|
+
margin-top: 2.75rem;
|
|
1242
|
+
}
|
|
1243
|
+
|
|
1240
1244
|
.block {
|
|
1241
1245
|
display: block;
|
|
1242
1246
|
}
|
|
@@ -1676,6 +1680,42 @@ select {
|
|
|
1676
1680
|
animation: bounce 1s infinite;
|
|
1677
1681
|
}
|
|
1678
1682
|
|
|
1683
|
+
@-webkit-keyframes pulse {
|
|
1684
|
+
50% {
|
|
1685
|
+
opacity: .5;
|
|
1686
|
+
}
|
|
1687
|
+
}
|
|
1688
|
+
|
|
1689
|
+
@keyframes pulse {
|
|
1690
|
+
50% {
|
|
1691
|
+
opacity: .5;
|
|
1692
|
+
}
|
|
1693
|
+
}
|
|
1694
|
+
|
|
1695
|
+
.animate-pulse {
|
|
1696
|
+
-webkit-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
1697
|
+
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
1698
|
+
}
|
|
1699
|
+
|
|
1700
|
+
@-webkit-keyframes spin {
|
|
1701
|
+
to {
|
|
1702
|
+
-webkit-transform: rotate(360deg);
|
|
1703
|
+
transform: rotate(360deg);
|
|
1704
|
+
}
|
|
1705
|
+
}
|
|
1706
|
+
|
|
1707
|
+
@keyframes spin {
|
|
1708
|
+
to {
|
|
1709
|
+
-webkit-transform: rotate(360deg);
|
|
1710
|
+
transform: rotate(360deg);
|
|
1711
|
+
}
|
|
1712
|
+
}
|
|
1713
|
+
|
|
1714
|
+
.animate-spin {
|
|
1715
|
+
-webkit-animation: spin 1s linear infinite;
|
|
1716
|
+
animation: spin 1s linear infinite;
|
|
1717
|
+
}
|
|
1718
|
+
|
|
1679
1719
|
.cursor-pointer {
|
|
1680
1720
|
cursor: pointer;
|
|
1681
1721
|
}
|
|
@@ -1942,6 +1982,18 @@ select {
|
|
|
1942
1982
|
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
|
|
1943
1983
|
}
|
|
1944
1984
|
|
|
1985
|
+
.divide-x-2 > :not([hidden]) ~ :not([hidden]) {
|
|
1986
|
+
--tw-divide-x-reverse: 0;
|
|
1987
|
+
border-right-width: calc(2px * var(--tw-divide-x-reverse));
|
|
1988
|
+
border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
|
|
1989
|
+
}
|
|
1990
|
+
|
|
1991
|
+
.divide-y-2 > :not([hidden]) ~ :not([hidden]) {
|
|
1992
|
+
--tw-divide-y-reverse: 0;
|
|
1993
|
+
border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
|
|
1994
|
+
border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
|
|
1995
|
+
}
|
|
1996
|
+
|
|
1945
1997
|
.divide-blue-600\/10 > :not([hidden]) ~ :not([hidden]) {
|
|
1946
1998
|
border-color: rgb(30 86 227 / 0.1);
|
|
1947
1999
|
}
|
|
@@ -2092,6 +2144,11 @@ select {
|
|
|
2092
2144
|
border-width: 1.5px;
|
|
2093
2145
|
}
|
|
2094
2146
|
|
|
2147
|
+
.border-x {
|
|
2148
|
+
border-left-width: 1px;
|
|
2149
|
+
border-right-width: 1px;
|
|
2150
|
+
}
|
|
2151
|
+
|
|
2095
2152
|
.border-b {
|
|
2096
2153
|
border-bottom-width: 1px;
|
|
2097
2154
|
}
|
|
@@ -5224,6 +5281,21 @@ select {
|
|
|
5224
5281
|
padding-bottom: 1.75rem;
|
|
5225
5282
|
}
|
|
5226
5283
|
|
|
5284
|
+
.py-\[26px\] {
|
|
5285
|
+
padding-top: 26px;
|
|
5286
|
+
padding-bottom: 26px;
|
|
5287
|
+
}
|
|
5288
|
+
|
|
5289
|
+
.py-\[1\.625\] {
|
|
5290
|
+
padding-top: 1.625;
|
|
5291
|
+
padding-bottom: 1.625;
|
|
5292
|
+
}
|
|
5293
|
+
|
|
5294
|
+
.py-\[1\.625rem\] {
|
|
5295
|
+
padding-top: 1.625rem;
|
|
5296
|
+
padding-bottom: 1.625rem;
|
|
5297
|
+
}
|
|
5298
|
+
|
|
5227
5299
|
.pb-10 {
|
|
5228
5300
|
padding-bottom: 2.5rem;
|
|
5229
5301
|
}
|
|
@@ -5356,6 +5428,10 @@ select {
|
|
|
5356
5428
|
padding-top: 1.5rem;
|
|
5357
5429
|
}
|
|
5358
5430
|
|
|
5431
|
+
.pt-11 {
|
|
5432
|
+
padding-top: 2.75rem;
|
|
5433
|
+
}
|
|
5434
|
+
|
|
5359
5435
|
.text-left {
|
|
5360
5436
|
text-align: left;
|
|
5361
5437
|
}
|
|
@@ -6365,6 +6441,10 @@ select {
|
|
|
6365
6441
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
6366
6442
|
}
|
|
6367
6443
|
|
|
6444
|
+
.ease-linear {
|
|
6445
|
+
transition-timing-function: linear;
|
|
6446
|
+
}
|
|
6447
|
+
|
|
6368
6448
|
/* Typography classes */
|
|
6369
6449
|
|
|
6370
6450
|
@-webkit-keyframes pill-move-left {
|
|
@@ -7391,12 +7471,6 @@ select {
|
|
|
7391
7471
|
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
|
|
7392
7472
|
}
|
|
7393
7473
|
|
|
7394
|
-
@-webkit-keyframes pulse {
|
|
7395
|
-
50% {
|
|
7396
|
-
opacity: .5;
|
|
7397
|
-
}
|
|
7398
|
-
}
|
|
7399
|
-
|
|
7400
7474
|
@keyframes pulse {
|
|
7401
7475
|
50% {
|
|
7402
7476
|
opacity: .5;
|
|
@@ -7408,13 +7482,6 @@ select {
|
|
|
7408
7482
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
7409
7483
|
}
|
|
7410
7484
|
|
|
7411
|
-
@-webkit-keyframes spin {
|
|
7412
|
-
to {
|
|
7413
|
-
-webkit-transform: rotate(360deg);
|
|
7414
|
-
transform: rotate(360deg);
|
|
7415
|
-
}
|
|
7416
|
-
}
|
|
7417
|
-
|
|
7418
7485
|
@keyframes spin {
|
|
7419
7486
|
to {
|
|
7420
7487
|
-webkit-transform: rotate(360deg);
|
|
@@ -8523,6 +8590,10 @@ select {
|
|
|
8523
8590
|
display: flex;
|
|
8524
8591
|
}
|
|
8525
8592
|
|
|
8593
|
+
.tb-l\:hidden {
|
|
8594
|
+
display: none;
|
|
8595
|
+
}
|
|
8596
|
+
|
|
8526
8597
|
.tb-l\:w-1\/2 {
|
|
8527
8598
|
width: 50%;
|
|
8528
8599
|
}
|
|
@@ -8535,6 +8606,14 @@ select {
|
|
|
8535
8606
|
min-width: 400px;
|
|
8536
8607
|
}
|
|
8537
8608
|
|
|
8609
|
+
.tb-l\:flex-col {
|
|
8610
|
+
flex-direction: column;
|
|
8611
|
+
}
|
|
8612
|
+
|
|
8613
|
+
.tb-l\:items-center {
|
|
8614
|
+
align-items: center;
|
|
8615
|
+
}
|
|
8616
|
+
|
|
8538
8617
|
.tb-l\:justify-start {
|
|
8539
8618
|
justify-content: flex-start;
|
|
8540
8619
|
}
|