hds-web 1.5.7 → 1.5.8
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.css +1 -1
- package/dist/index.es.css +1 -1
- package/dist/index.es.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/HDS/components/Cards/Dropdown/v3Dropdown.js +1 -1
- package/src/HDS/components/Cards/ImageBox/imagebox.js +50 -0
- package/src/HDS/components/Cards/ImageBox/index.js +1 -0
- package/src/HDS/components/Headers/v3Header.js +17 -7
- package/src/styles/tailwind.css +8 -8
@@ -1,4 +1,4 @@
|
|
1
|
-
import React from 'react';
|
1
|
+
import React, {useState} from 'react';
|
2
2
|
import { Fragment } from 'react';
|
3
3
|
import { Popover, Transition } from '@headlessui/react';
|
4
4
|
import { Icon } from '../common-components/Icon';
|
@@ -34,6 +34,7 @@ function classNames(...classes) {
|
|
34
34
|
|
35
35
|
export default function V3Header(props) {
|
36
36
|
|
37
|
+
const [isShowing, setIsShowing] = useState(false)
|
37
38
|
|
38
39
|
const dropdown = (solutions) => (
|
39
40
|
<Transition
|
@@ -46,9 +47,7 @@ export default function V3Header(props) {
|
|
46
47
|
leaveTo="opacity-0 translate-y-1"
|
47
48
|
>
|
48
49
|
<Popover.Panel className="fixed left-0 ml z-10 mt-3 transform ">
|
49
|
-
|
50
|
-
<Icon variant='triangle' height='h-6 w-6 fill-neutral-100' strokeClass='stroke-neutral-100' />
|
51
|
-
</div>
|
50
|
+
|
52
51
|
<div className=" p-2 bg-neutral-100 rounded-lg">
|
53
52
|
|
54
53
|
<V3Dropdown
|
@@ -117,17 +116,28 @@ export default function V3Header(props) {
|
|
117
116
|
(
|
118
117
|
<>
|
119
118
|
{HEADER_LIST.map((item, index) => (
|
120
|
-
<Popover className="relative">
|
121
|
-
{({ open
|
119
|
+
<Popover className="relative" key={index}>
|
120
|
+
{({ open }) => (
|
122
121
|
<>
|
123
122
|
<Popover.Button
|
124
123
|
className={classNames(
|
125
124
|
open ? '' : 'text-gray-500',
|
126
125
|
'group inline-flex items-center rounded-md bg-white hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2'
|
127
126
|
)}
|
127
|
+
onMouseEnter={() => setIsShowing(true)}
|
128
|
+
onMouseLeave={() => setIsShowing(false)}
|
129
|
+
|
128
130
|
>
|
131
|
+
<div className='flex flex-col items-center'>
|
129
132
|
<Typography textStyle='body3c-medium' className=''>{`${item['title']}`}</Typography>
|
130
|
-
{
|
133
|
+
{open && (
|
134
|
+
<div className='absolute z-20 top-8'>
|
135
|
+
<Icon variant='triangle' height='h-4 w-4' strokeClass='stroke-neutral-1000' />
|
136
|
+
|
137
|
+
</div>
|
138
|
+
|
139
|
+
)}
|
140
|
+
</div>
|
131
141
|
</Popover.Button>
|
132
142
|
<div className=''>
|
133
143
|
{dropdown(item['titleDropdown'])}
|
package/src/styles/tailwind.css
CHANGED
@@ -939,6 +939,10 @@ select {
|
|
939
939
|
top: 0.5rem;
|
940
940
|
}
|
941
941
|
|
942
|
+
.top-8 {
|
943
|
+
top: 2rem;
|
944
|
+
}
|
945
|
+
|
942
946
|
.isolate {
|
943
947
|
isolation: isolate;
|
944
948
|
}
|
@@ -951,6 +955,10 @@ select {
|
|
951
955
|
z-index: 10;
|
952
956
|
}
|
953
957
|
|
958
|
+
.z-20 {
|
959
|
+
z-index: 20;
|
960
|
+
}
|
961
|
+
|
954
962
|
.z-50 {
|
955
963
|
z-index: 50;
|
956
964
|
}
|
@@ -1213,10 +1221,6 @@ select {
|
|
1213
1221
|
margin-left: 30px;
|
1214
1222
|
}
|
1215
1223
|
|
1216
|
-
.ml-\[9\.55rem\] {
|
1217
|
-
margin-left: 9.55rem;
|
1218
|
-
}
|
1219
|
-
|
1220
1224
|
.mr-1 {
|
1221
1225
|
margin-right: 0.25rem;
|
1222
1226
|
}
|
@@ -4758,10 +4762,6 @@ select {
|
|
4758
4762
|
--tw-gradient-to-position: ;
|
4759
4763
|
}
|
4760
4764
|
|
4761
|
-
.fill-neutral-100 {
|
4762
|
-
fill: #F3F4F6;
|
4763
|
-
}
|
4764
|
-
|
4765
4765
|
.stroke-amber-100 {
|
4766
4766
|
stroke: #FFF3D4;
|
4767
4767
|
}
|