hds-web 1.1.5 → 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.
- package/dist/index.css +2 -2
- package/dist/index.es.css +2 -2
- package/dist/index.es.js +4 -4
- package/dist/index.js +6 -6
- package/package.json +1 -1
- package/src/HDS/components/BadgesCaption/badges.js +7 -7
- package/src/HDS/components/Buttons/button.js +1 -1
- package/src/HDS/components/Cards/Misc/iconCard.js +81 -9
- package/src/HDS/components/Cards/Misc/talkCard.js +1 -1
- package/src/HDS/components/Headers/v3Header.js +21 -40
- package/src/HDS/components/Tables/tableA.js +6 -13
- package/src/styles/tailwind.css +20 -0
package/package.json
CHANGED
|
@@ -14,14 +14,14 @@ const iconClasses = {
|
|
|
14
14
|
};
|
|
15
15
|
|
|
16
16
|
const colorVariants = {
|
|
17
|
-
blue: 'bg-blue-200 text-blue-800 group-hover:bg-blue-300
|
|
18
|
-
grey: 'bg-neutral-200 text-neutral-800 group-hover:bg-neutral-300
|
|
19
|
-
purple: 'bg-purple-200 text-purple-800 group-hover:bg-purple-300
|
|
20
|
-
pink: 'bg-pink-200 text-pink-800 group-hover:bg-pink-300
|
|
21
|
-
amber: 'bg-amber-200 text-amber-800 group-hover:bg-amber-300
|
|
22
|
-
cyan: 'bg-cyan-200 text-cyan-800 group-hover:bg-cyan-300
|
|
17
|
+
blue: 'bg-blue-200 text-blue-800 group-hover:bg-blue-300 ',
|
|
18
|
+
grey: 'bg-neutral-200 text-neutral-800 group-hover:bg-neutral-300 ',
|
|
19
|
+
purple: 'bg-purple-200 text-purple-800 group-hover:bg-purple-300 ',
|
|
20
|
+
pink: 'bg-pink-200 text-pink-800 group-hover:bg-pink-300 ',
|
|
21
|
+
amber: 'bg-amber-200 text-amber-800 group-hover:bg-amber-300 ',
|
|
22
|
+
cyan: 'bg-cyan-200 text-cyan-800 group-hover:bg-cyan-300 ',
|
|
23
23
|
cyan200: 'bg-cyan-200 text-cyan-600 border border-cyan-400 border border-cyan-400 ',
|
|
24
|
-
green: 'bg-green-200 text-green-800 group-hover:bg-green-300
|
|
24
|
+
green: 'bg-green-200 text-green-800 group-hover:bg-green-300 ',
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
export default function Badge({
|
|
@@ -28,7 +28,7 @@ const Buttonclasses = {
|
|
|
28
28
|
},
|
|
29
29
|
'tonal': {
|
|
30
30
|
'default': {
|
|
31
|
-
'base': 'db:w-fit tb:w-fit w-full justify-center bg-blue-
|
|
31
|
+
'base': 'db:w-fit tb:w-fit w-full justify-center bg-blue-200 text-blue-600',
|
|
32
32
|
'hover': 'hover:bg-blue-700 hover:text-neutral-0 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-300',
|
|
33
33
|
'focus': 'focus:bg-blue-100 focus:text-blue-600 focus:shadow-[0px_0px_0px_4px_#DFE8FF] focus:outline-none',
|
|
34
34
|
},
|
|
@@ -1,22 +1,94 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Icon } from "../../common-components/Icon";
|
|
3
|
-
import {HDSColor} from '../../../foundation/ColorPalette'
|
|
3
|
+
import { HDSColor } from '../../../foundation/ColorPalette'
|
|
4
4
|
import { Typography } from '../../../foundation/Typography'
|
|
5
|
+
import { HDSButton } from "../../Buttons";
|
|
5
6
|
|
|
7
|
+
const cardVariant = {
|
|
8
|
+
"withButton": {
|
|
9
|
+
'cardStyle': 'p-10 ',
|
|
10
|
+
'iconWidthStyle': 'h-20 w-20',
|
|
11
|
+
'iconStyle': 'h-10 w-10',
|
|
12
|
+
},
|
|
13
|
+
"withoutButton": {
|
|
14
|
+
'cardStyle': 'p-6',
|
|
15
|
+
'iconWidthStyle': 'h-12 w-12',
|
|
16
|
+
'iconStyle': 'h-6 w-6',
|
|
17
|
+
}
|
|
18
|
+
}
|
|
6
19
|
|
|
7
|
-
export default function
|
|
20
|
+
export default function IconCard(props) {
|
|
8
21
|
const iconBG = HDSColor(props.iconBg);
|
|
9
22
|
return (
|
|
10
|
-
<div
|
|
11
|
-
|
|
12
|
-
|
|
23
|
+
<div
|
|
24
|
+
className={`bg-neutral-0 rounded-3xl shadow ${cardVariant[props.cardType]['cardStyle']}`}
|
|
25
|
+
>
|
|
26
|
+
<div
|
|
27
|
+
className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 flex items-center justify-center rounded-full mb-6`}
|
|
28
|
+
>
|
|
29
|
+
<Icon
|
|
30
|
+
height={`stroke-[1.5px] ${cardVariant[props.cardType]['iconStyle']}`}
|
|
31
|
+
variant={props.iconVariant}
|
|
32
|
+
strokeColor={props.iconStroke}
|
|
33
|
+
strokeClass={HDSColor(props.iconStrokeClass)} />
|
|
13
34
|
</div>
|
|
14
|
-
<div
|
|
15
|
-
|
|
16
|
-
|
|
35
|
+
<div
|
|
36
|
+
className="flex-1">
|
|
37
|
+
{props.cardType === 'withoutButton' ? (
|
|
38
|
+
<>
|
|
39
|
+
<Typography
|
|
40
|
+
textStyle="h5"
|
|
41
|
+
as="h5"
|
|
42
|
+
className="mb-1 text-blue-600">
|
|
43
|
+
{props.title}
|
|
44
|
+
</Typography>
|
|
45
|
+
<Typography
|
|
46
|
+
textStyle="body1"
|
|
47
|
+
className="text-neutral-1000">
|
|
48
|
+
{props.description}
|
|
49
|
+
</Typography>
|
|
50
|
+
</>
|
|
51
|
+
)
|
|
52
|
+
:
|
|
53
|
+
(
|
|
54
|
+
<>
|
|
55
|
+
<Typography
|
|
56
|
+
textStyle="h4"
|
|
57
|
+
as="h4"
|
|
58
|
+
className="mb-1 text-blue-800">
|
|
59
|
+
{props.title}
|
|
60
|
+
</Typography>
|
|
61
|
+
<Typography
|
|
62
|
+
textStyle="body1c"
|
|
63
|
+
className="text-neutral-1000">
|
|
64
|
+
{props.description}
|
|
65
|
+
</Typography>
|
|
66
|
+
</>
|
|
67
|
+
)
|
|
68
|
+
}
|
|
69
|
+
{props.cardType === 'withButton' && (
|
|
70
|
+
<div className="flex mt-7">
|
|
71
|
+
<HDSButton
|
|
72
|
+
label='Start free'
|
|
73
|
+
type='secondary'
|
|
74
|
+
leftIconVariant='none'
|
|
75
|
+
rightIconVariant='none'
|
|
76
|
+
state='default'
|
|
77
|
+
size='sm'
|
|
78
|
+
rightAnimatedArrow={true}
|
|
79
|
+
rightAnimatedArrowColor='#3970FD'
|
|
80
|
+
className=' mt-7'
|
|
81
|
+
/>
|
|
82
|
+
</div>
|
|
83
|
+
)}
|
|
84
|
+
|
|
17
85
|
</div>
|
|
18
|
-
</div>
|
|
19
86
|
|
|
87
|
+
</div>
|
|
20
88
|
)
|
|
89
|
+
}
|
|
21
90
|
|
|
91
|
+
IconCard.defaultProps = {
|
|
92
|
+
cardType: 'withoutButton',
|
|
93
|
+
iconStrokeClass: 'stroke-neutral-1000'
|
|
22
94
|
}
|
|
@@ -15,7 +15,7 @@ export default function TalkCard(props) {
|
|
|
15
15
|
|
|
16
16
|
<div className=" ">
|
|
17
17
|
<div className={`${CardClass} rounded-3xl bg-neutral-0 grid-cols-1 tb:grid-cols-2 border border-neutral-200 w-full max-w-[882px]`}>
|
|
18
|
-
<div className="px-8 py-6 border-b border-b-neutral-150 tb:border-0 tb:border-r tb:border-r-neutral-150" >
|
|
18
|
+
<div className="px-8 py-6 border-b rounded-3xl border-b-neutral-150 tb:border-0 tb:border-r tb:border-r-neutral-150" >
|
|
19
19
|
<Badges
|
|
20
20
|
size={props.badges.size}
|
|
21
21
|
color={props.badges.color}
|
|
@@ -175,17 +175,17 @@ export default function V3Header(props) {
|
|
|
175
175
|
leaveFrom="opacity-100 scale-100"
|
|
176
176
|
leaveTo="opacity-0 scale-95"
|
|
177
177
|
>
|
|
178
|
-
<Popover.Panel focus className="absolute bg-
|
|
179
|
-
<div className=" rounded-lg bg-white shadow-lg">
|
|
180
|
-
<div className="
|
|
178
|
+
<Popover.Panel focus className="absolute h-[calc(100%-112px)] bg-base-0 z-[1] inset-x-0 top-0 origin-top-right transform transition md:hidden">
|
|
179
|
+
<div className=" rounded-lg bg-white h-[calc(100%-112px)] shadow-lg">
|
|
180
|
+
<div className="">
|
|
181
181
|
<div className="flex items-center justify-end">
|
|
182
|
-
<div className="
|
|
182
|
+
<div className="">
|
|
183
183
|
<Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 w-full">
|
|
184
184
|
<Icon height={'h-5 w-5'} variant={'xclose'} strokeColor={'#3970FD'} />
|
|
185
185
|
</Popover.Button>
|
|
186
186
|
</div>
|
|
187
187
|
</div>
|
|
188
|
-
<div className="mt-6 ">
|
|
188
|
+
<div className="mt-6 abcdefhgk flex flex-col gap-6">
|
|
189
189
|
<div className='flex flex-col items-center'>
|
|
190
190
|
<img
|
|
191
191
|
className="inline-block w-full px-4 "
|
|
@@ -194,62 +194,43 @@ export default function V3Header(props) {
|
|
|
194
194
|
/>
|
|
195
195
|
</div>
|
|
196
196
|
|
|
197
|
-
<nav className="grid
|
|
197
|
+
<nav className="grid divide-y divide-neutral-200 border border-neutral-200 rounded-3xl ">
|
|
198
198
|
{props.HEADER_LIST.map((item) => (
|
|
199
199
|
<a
|
|
200
200
|
key={item['title']}
|
|
201
|
-
|
|
202
|
-
className="
|
|
201
|
+
|
|
202
|
+
className="flex justify-between items-center p-4"
|
|
203
203
|
>
|
|
204
204
|
|
|
205
|
-
<div className="flex
|
|
205
|
+
<div className="flex items-center justify-center gap-2 ">
|
|
206
206
|
|
|
207
207
|
<Icon height='h-5 w-5' variant={'home03'} strokeColor={'#3970FD'} />
|
|
208
208
|
|
|
209
|
+
|
|
210
|
+
<Typography textStyle='body3c-medium' className='text-neutral-900'>
|
|
211
|
+
{`${item['title']}`}
|
|
212
|
+
</Typography>
|
|
209
213
|
</div>
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
</Typography>
|
|
214
|
+
|
|
215
|
+
<Icon height='h-5 w-5 stroke-[1.5px]' variant={'chevronright'} strokeClass='stroke-neutral-500' />
|
|
213
216
|
</a>
|
|
214
217
|
))}
|
|
215
218
|
</nav>
|
|
216
219
|
</div>
|
|
217
220
|
</div>
|
|
218
|
-
<div className="py-6 px-5">
|
|
219
|
-
|
|
220
|
-
<a href="#" className="text-base font-medium text-gray-900 hover:text-gray-700">
|
|
221
|
-
Pricing
|
|
222
|
-
</a>
|
|
223
|
-
|
|
224
|
-
<a href="#" className="text-base font-medium text-gray-900 hover:text-gray-700">
|
|
225
|
-
Docs
|
|
226
|
-
</a>
|
|
227
|
-
|
|
228
|
-
<a href="#" className="text-base font-medium text-gray-900 hover:text-gray-700">
|
|
229
|
-
Enterprise
|
|
230
|
-
</a>
|
|
231
|
-
{resources.map((item) => (
|
|
232
|
-
<a
|
|
233
|
-
key={item.name}
|
|
234
|
-
href={item.href}
|
|
235
|
-
className="text-base font-medium text-gray-900 hover:text-gray-700"
|
|
236
|
-
>
|
|
237
|
-
{item.name}
|
|
238
|
-
</a>
|
|
239
|
-
))}
|
|
240
|
-
</div> */}
|
|
241
|
-
<div className="mt-6">
|
|
221
|
+
<div className="py-6 px-5 ">
|
|
222
|
+
<div className="mt-6 ">
|
|
242
223
|
<div className='flex flex-row justify-around'>
|
|
243
|
-
<div className='w-full'>
|
|
224
|
+
<div className='w-full '>
|
|
244
225
|
<HDSButton
|
|
245
226
|
label="Log In"
|
|
246
|
-
type='
|
|
227
|
+
type='tonal'
|
|
247
228
|
leftIconVariant='none'
|
|
248
229
|
rightIconVariant='none'
|
|
249
230
|
state='default'
|
|
250
231
|
size='sm'
|
|
251
232
|
rightAnimatedArrow='true'
|
|
252
|
-
rightAnimatedArrowColor='#
|
|
233
|
+
rightAnimatedArrowColor='#3970FD'
|
|
253
234
|
animatedHoverStroke='group-hover:stroke-neutral-0'
|
|
254
235
|
|
|
255
236
|
/>
|
|
@@ -351,6 +332,6 @@ V3Header.defaultProps = {
|
|
|
351
332
|
},
|
|
352
333
|
]
|
|
353
334
|
},
|
|
354
|
-
|
|
335
|
+
|
|
355
336
|
]
|
|
356
337
|
}
|
|
@@ -15,14 +15,7 @@ export default function TableA(props) {
|
|
|
15
15
|
<h1 className="text-base font-semibold leading-6 text-gray-900">{head}</h1>
|
|
16
16
|
<p className="mt-2 text-sm text-gray-700">{description}</p>
|
|
17
17
|
</div>
|
|
18
|
-
|
|
19
|
-
<button
|
|
20
|
-
type="button"
|
|
21
|
-
className="block rounded-md bg-indigo-600 py-2 px-3 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
|
22
|
-
>
|
|
23
|
-
Add user
|
|
24
|
-
</button>
|
|
25
|
-
</div> */}
|
|
18
|
+
|
|
26
19
|
</div>
|
|
27
20
|
|
|
28
21
|
<div>
|
|
@@ -42,14 +35,14 @@ export default function TableA(props) {
|
|
|
42
35
|
</tr>
|
|
43
36
|
</thead>
|
|
44
37
|
<tbody className="divide-y divide-gray-200 bg-white">
|
|
45
|
-
{tableValue.map((
|
|
46
|
-
<tr key={
|
|
47
|
-
{Object.keys(
|
|
38
|
+
{tableValue.map((value,index) => (
|
|
39
|
+
<tr key={index}>
|
|
40
|
+
{Object.keys(value).map((key, index2) => (
|
|
48
41
|
<td
|
|
49
|
-
key={
|
|
42
|
+
key={index2+index}
|
|
50
43
|
className=" py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-3"
|
|
51
44
|
>
|
|
52
|
-
{``}{
|
|
45
|
+
{``}{value[key]}
|
|
53
46
|
|
|
54
47
|
</td>
|
|
55
48
|
))}
|
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
|
}
|
|
@@ -5095,6 +5111,10 @@ select {
|
|
|
5095
5111
|
padding: 0px 8px 0px 0px;;
|
|
5096
5112
|
}
|
|
5097
5113
|
|
|
5114
|
+
.p-10 {
|
|
5115
|
+
padding: 2.5rem;
|
|
5116
|
+
}
|
|
5117
|
+
|
|
5098
5118
|
.px-0 {
|
|
5099
5119
|
padding-left: 0px;
|
|
5100
5120
|
padding-right: 0px;
|