hds-web 1.5.7 → 1.5.9

package/src/HDS/components/Cards/Link/link.js

@@ -6,7 +6,6 @@ import { Typography } from '../../../foundation/Typography'
 
 
 export default function LinkCard(props) {
-    const iconStrokeColor = HDSColor(props.iconStrokeColor);
     const cardBgColorClass = HDSColor(props.cardBgColor)
     const cardHoverClasses = `hover:${HDSColor(props.cardHoverBg)}` + ' hover:shadow-xl';
     return (
@@ -24,6 +23,7 @@ export default function LinkCard(props) {
                                         height={'w-6 h-6 stroke-[1.5px] stroke-blue-400'}
                                         variant={props.iconArrowVariant}
                                         strokeColor={props.iconArrowStrokeColor}
+                                        strokeClass={HDSColor(props.iconArrowStrokeClass)}
                                     />)
                                 }
                             </div>
@@ -40,7 +40,8 @@ export default function LinkCard(props) {
                                         (<Icon
                                             height={'w-6 h-6 mr-2 stroke-[1.5px] '}
                                             variant={props.iconVariant}
-                                            strokeColor={iconStrokeColor}
+                                            strokeColor={props.iconStrokeColor}
+                                            strokeClass={HDSColor(props.iconStrokeClass)}
                                         />)}
                                     <Typography
                                         as="h5"
@@ -54,6 +55,7 @@ export default function LinkCard(props) {
                                         height={'w-6 h-6 stroke-[1.5px] stroke-blue-400'}
                                         variant={props.iconArrowVariant}
                                         strokeColor={props.iconArrowStrokeColor}
+                                        strokeClass={HDSColor(props.iconArrowStrokeClass)}
                                     />)
                                 }
                             </div>

package/src/HDS/components/Headers/v3Header.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import { Fragment } from 'react';
 import { Popover, Transition } from '@headlessui/react';
 import { Icon } from '../common-components/Icon';
@@ -34,6 +34,7 @@ function classNames(...classes) {
 
 export default function V3Header(props) {
 
+    const [isShowing, setIsShowing] = useState(false)
 
     const dropdown = (solutions) => (
         <Transition
@@ -46,9 +47,7 @@ export default function V3Header(props) {
             leaveTo="opacity-0 translate-y-1"
         >
             <Popover.Panel className="fixed left-0 ml z-10 mt-3 transform ">
-                <div className='ml-[9.55rem]'>
-                    <Icon variant='triangle' height='h-6 w-6 fill-neutral-100' strokeClass='stroke-neutral-100' />
-                </div>
+
                 <div className=" p-2 bg-neutral-100 rounded-lg">
 
                     <V3Dropdown
@@ -117,17 +116,28 @@ export default function V3Header(props) {
     (
         <>
             {HEADER_LIST.map((item, index) => (
-                <Popover className="relative">
-                    {({ open }) => (
+                <Popover className="relative" key={index}>
+                    {({ open  }) => (
                         <>
                             <Popover.Button
                                 className={classNames(
                                     open ? '' : 'text-gray-500',
                                     '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'
                                 )}
+                                onMouseEnter={() => setIsShowing(true)}
+                                onMouseLeave={() => setIsShowing(false)}
+                                
                             >
+                                <div className='flex flex-col items-center'>
                                 <Typography textStyle='body3c-medium' className=''>{`${item['title']}`}</Typography>
-                                {/* <Icon height='h-5' variant={'home03'} strokeColor={'#1EA7FD'} /> */}
+                                {open && (
+                                <div className='absolute z-20 top-8'>
+                                    <Icon variant='triangle' height='h-4 w-4' strokeClass='stroke-neutral-1000' />
+                                
+                                </div>
+                                
+                                )}
+                                </div>
                             </Popover.Button>
                             <div className=''>
                                 {dropdown(item['titleDropdown'])}

package/src/styles/tailwind.css

@@ -939,6 +939,10 @@ select {
   top: 0.5rem;
 }
 
+.top-8 {
+  top: 2rem;
+}
+
 .isolate {
   isolation: isolate;
 }
@@ -951,6 +955,10 @@ select {
   z-index: 10;
 }
 
+.z-20 {
+  z-index: 20;
+}
+
 .z-50 {
   z-index: 50;
 }
@@ -1213,10 +1221,6 @@ select {
   margin-left: 30px;
 }
 
-.ml-\[9\.55rem\] {
-  margin-left: 9.55rem;
-}
-
 .mr-1 {
   margin-right: 0.25rem;
 }
@@ -4758,10 +4762,6 @@ select {
   --tw-gradient-to-position:  ;
 }
 
-.fill-neutral-100 {
-  fill: #F3F4F6;
-}
-
 .stroke-amber-100 {
   stroke: #FFF3D4;
 }