hds-web 1.0.5 → 1.0.6
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 +4 -4
- package/dist/index.js +3 -3
- package/package.json +1 -1
- package/src/HDS/components/Tables/tableB.js +21 -132
package/package.json
CHANGED
|
@@ -1,20 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { v4 as uuidv4 } from 'uuid';
|
|
3
3
|
import { Typography } from '../../foundation/Typography'
|
|
4
4
|
import { Icon } from '../common-components/Icon'
|
|
5
|
-
import { Tab } from '../Tabs'
|
|
6
|
-
|
|
7
|
-
const tabs = [
|
|
8
|
-
{ name: 'My Account', href: '', current: false },
|
|
9
|
-
{ name: 'Company', href: '', current: false },
|
|
10
|
-
{ name: 'Team Members', href: '', current: true },
|
|
11
|
-
{ name: 'Billing', href: '', current: false },
|
|
12
|
-
]
|
|
13
|
-
|
|
14
|
-
function handleTabClick(tab) {
|
|
15
|
-
console.log(`Tab "${tab.name}" updatedTabs`);
|
|
16
|
-
// Perform any other actions based on the clicked tab
|
|
17
|
-
}
|
|
18
5
|
|
|
19
6
|
export default function TableB(props) {
|
|
20
7
|
const {
|
|
@@ -23,126 +10,28 @@ export default function TableB(props) {
|
|
|
23
10
|
TABLE_VALUE,
|
|
24
11
|
TABLE_HEADER,
|
|
25
12
|
children
|
|
26
|
-
} = props;
|
|
27
|
-
const [activeTab, setActiveTab] = useState(2);
|
|
28
|
-
return (
|
|
29
|
-
<div className=" max-w-7xl">
|
|
30
|
-
<div className="sm:flex sm:items-center flex justify-around ">
|
|
31
|
-
|
|
32
|
-
<div className="w-full items-center flex justify-around md:flex md:flex-col md:items-center">
|
|
33
|
-
<div>
|
|
34
13
|
|
|
14
|
+
} = props;
|
|
35
15
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
16
|
+
return (
|
|
17
|
+
<div className=" max-w-7xl px-4 sm:px-6 lg:px-8 ">
|
|
18
|
+
<div className="sm:flex sm:items-center ">
|
|
19
|
+
<div className="sm:flex-auto flex flex-col items-center">
|
|
20
|
+
{title && (
|
|
21
|
+
<Typography
|
|
22
|
+
textStyle='h2'>
|
|
23
|
+
{title}
|
|
24
|
+
</Typography>
|
|
25
|
+
)
|
|
26
|
+
}
|
|
27
|
+
{description && (
|
|
44
28
|
<Typography
|
|
45
29
|
textStyle='body1c'>
|
|
46
30
|
{description}
|
|
47
31
|
</Typography>
|
|
48
32
|
)
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
<div className=''>
|
|
52
|
-
<Tab onTabClick={handleTabClick} tabs={tabs} />
|
|
53
|
-
</div>
|
|
54
|
-
</div>
|
|
55
|
-
</div>
|
|
56
|
-
|
|
57
|
-
<div className=''>
|
|
58
|
-
<div className="-mx-4 mt-8 sm:-mx-0 bg-neutral-0 rounded-3xl ">
|
|
59
|
-
<table className="min-w-full shadow rounded-3xl ">
|
|
60
|
-
<thead>
|
|
61
|
-
<tr className='divide-x divide-neutral-200 text-center rounded-t-3xl'>
|
|
62
|
-
<th
|
|
63
|
-
key={activeTab}
|
|
64
|
-
scope="col"
|
|
65
|
-
className="px-8 py-6 sm:table-cell"
|
|
66
|
-
>
|
|
67
|
-
<div className=''>
|
|
68
|
-
<div className='flex flex-col justify-center items-center text-center'>
|
|
69
|
-
<div className={'flex items-center gap-2'}>
|
|
70
|
-
{TABLE_HEADER[activeTab]['icon'] &&
|
|
71
|
-
(
|
|
72
|
-
<Icon
|
|
73
|
-
height='h-6 w-6'
|
|
74
|
-
variant={TABLE_HEADER[activeTab]['icon']}
|
|
75
|
-
strokeClass={TABLE_HEADER[activeTab]['iconStrokeClass']} />
|
|
76
|
-
)
|
|
77
|
-
}
|
|
78
|
-
{
|
|
79
|
-
TABLE_HEADER[activeTab]['title'] && activeTab == 0 && (
|
|
80
|
-
<Typography
|
|
81
|
-
textStyle='h5'
|
|
82
|
-
className={TABLE_HEADER[activeTab]['title_text_color']}>
|
|
83
|
-
{TABLE_HEADER[activeTab]['title']}
|
|
84
|
-
</Typography>)
|
|
85
|
-
}
|
|
86
|
-
{
|
|
87
|
-
TABLE_HEADER[activeTab]['title'] && activeTab != 0 && (
|
|
88
|
-
<Typography
|
|
89
|
-
textStyle='h5'
|
|
90
|
-
className={TABLE_HEADER[activeTab]['title_text_color']}>
|
|
91
|
-
{TABLE_HEADER[activeTab]['title']}
|
|
92
|
-
</Typography>)
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
</div>
|
|
97
|
-
<div className=' max-w-[10rem]'>
|
|
98
|
-
{TABLE_HEADER[activeTab]['descr'] && (
|
|
99
|
-
<Typography
|
|
100
|
-
textStyle='body1'
|
|
101
|
-
className={TABLE_HEADER[activeTab]['descr_text_color']}>
|
|
102
|
-
{TABLE_HEADER[activeTab]['descr']}
|
|
103
|
-
</Typography>)}
|
|
104
|
-
</div>
|
|
105
|
-
</div>
|
|
106
|
-
</div>
|
|
107
|
-
</th>
|
|
108
|
-
</tr>
|
|
109
|
-
</thead>
|
|
110
|
-
<tbody className="divide-y divide-neutral-200 rounded-b-3xl">
|
|
111
|
-
{TABLE_VALUE.map((value, index) => (
|
|
112
|
-
<tr className='divide-x divide-neutral-200' key={index}>
|
|
113
|
-
{Object.keys(value).map((key, index) => (
|
|
114
|
-
<React.Fragment key={index}>
|
|
115
|
-
{key === 'rowTitle' && (<td
|
|
116
|
-
key={key}
|
|
117
|
-
className="px-8 py-7 w-[22.5rem] whitespace-pre-line "
|
|
118
|
-
>
|
|
119
|
-
<Typography className='max-w-[22rem] text-neutral-700' textStyle='body1c'>{value[key]}</Typography>
|
|
120
|
-
|
|
121
|
-
</td>)}
|
|
122
|
-
|
|
123
|
-
{key !== 'rowTitle' && (
|
|
124
|
-
<td
|
|
125
|
-
key={key}
|
|
126
|
-
className="px-8 py-7 text-center"
|
|
127
|
-
>
|
|
128
|
-
{value[key]['text'] && (
|
|
129
|
-
<Typography className='text-neutral-700' textStyle='body1c'>{value[key]['text']}</Typography>
|
|
130
|
-
|
|
131
|
-
)}
|
|
132
|
-
{!value[key]['text'] && (
|
|
133
|
-
<div className='flex justify-center'>
|
|
134
|
-
<Icon height='h-5 w-5' variant={value[key]['iconVariant']} strokeClass={value[key]['iconStrokeClass']} />
|
|
135
|
-
</div>
|
|
136
|
-
)}
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
</td>)}
|
|
140
|
-
</React.Fragment>
|
|
141
|
-
))}
|
|
142
|
-
</tr>
|
|
143
|
-
))}
|
|
144
|
-
</tbody>
|
|
145
|
-
</table>
|
|
33
|
+
}
|
|
34
|
+
|
|
146
35
|
</div>
|
|
147
36
|
</div>
|
|
148
37
|
|
|
@@ -202,12 +91,12 @@ export default function TableB(props) {
|
|
|
202
91
|
</tr>
|
|
203
92
|
</thead>
|
|
204
93
|
<tbody className="divide-y divide-neutral-200 rounded-b-3xl">
|
|
205
|
-
{TABLE_VALUE.map((value
|
|
206
|
-
<tr className='divide-x divide-neutral-200' key={
|
|
94
|
+
{TABLE_VALUE.map((value) => (
|
|
95
|
+
<tr className='divide-x divide-neutral-200' key={uuidv4()}>
|
|
207
96
|
{Object.keys(value).map((key) => (
|
|
208
|
-
<React.Fragment key={
|
|
97
|
+
<React.Fragment key={uuidv4()}>
|
|
209
98
|
{key === 'rowTitle' && (<td
|
|
210
|
-
key={
|
|
99
|
+
key={uuidv4()}
|
|
211
100
|
className="px-8 py-7 w-[22.5rem] whitespace-pre-line "
|
|
212
101
|
>
|
|
213
102
|
<Typography className='max-w-[22rem] text-neutral-700' textStyle='body1c'>{value[key]}</Typography>
|
|
@@ -216,7 +105,7 @@ export default function TableB(props) {
|
|
|
216
105
|
|
|
217
106
|
{key !== 'rowTitle' && (
|
|
218
107
|
<td
|
|
219
|
-
key={
|
|
108
|
+
key={uuidv4()}
|
|
220
109
|
className="px-8 py-7 text-center"
|
|
221
110
|
>
|
|
222
111
|
{value[key]['text'] && (
|