hds-web 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/HDS/components/Avatars/hasConAv.js

@@ -6,18 +6,18 @@ import { Icon } from '../common-components/Icon';
 export default function HasConAvatar({ name, designation, size, imageUrl }) {
     const hasImageUrl = imageUrl && imageUrl.length > 0;
     return (
-        <div className="group flex-shrink-0 rounded-2xl flex items-center justify-between bg-neutral-0 desk:inline-flex desk:flex-col shadow hover:shadow-xl">
+        <div className={`${size} sm:w-52 group flex-shrink-0 rounded-2xl flex items-center justify-between bg-neutral-0 desk:inline-flex desk:flex-col shadow hover:shadow-xl desk:min-w-[18rem]`}>
 
-            <div className="ml-5 desk:flex-col desk:flex desk:items-center desk:p-8 desk:ml-0 bg-neutral-0">
+            <div className="mx-5 desk:flex-col desk:flex desk:items-center desk:p-8 desk:ml-0 bg-neutral-0">
                 <Typography textStyle='body1c-bold' className='text-blue-400'>{name}</Typography>
                 <Typography textStyle='body3c-medium' className='text-blue-800'>{designation}</Typography>
             </div>
-            <div className='relative'>
+            <div className='relative '>
                 <img
-                    className={`inline-block max-w-[150px] desk:max-w-[289px] desk:rounded-2xl  border-neutral-0 rounded-r-2xl  hover:bg-gradient-to-t hover:from-amber-200 hover:from-0% hover:to-95% hover:to-neutral-0`}
+                    className={`inline-block w-[9rem] desk:min-w-[18rem] desk:rounded-2xl border-neutral-0 rounded-r-2xl `}
                     src={imageUrl}
                 />
-                 <div className="absolute rounded-2xl inset-0 group-hover:bg-gradient-to-t group-hover:from-amber-200 group-hover:to-transparent group-hover:opacity-30" ></div>
+                 <div className="absolute rounded-b-2xl inset-0 group-hover:bg-gradient-to-t group-hover:from-amber-200 group-hover:to-transparent group-hover:opacity-30" ></div>
             </div>
 
 

package/src/HDS/components/Buttons/button.js

@@ -19,11 +19,13 @@ const Buttonclasses = {
     },
     'disabled': 'bg-neutral-200 text-neutral-400',
   },
-  'outline': {
+  'secondary': {
     'default': {
-      'base': 'desk:w-fit tab:w-fit w-full  justify-center border border-neutral-400 bg-neutral-0 text-neutral-800',
-      'hover': 'hover:text-neutral-800 hover:bg-neutral-100 hover:border hover:border-neutral-400 hover:drop-shadow-[0px 1px 3px rgba(28, 38, 63, 0.1), 0px 1px 2px rgba(28, 38, 63, 0.06)]',
-      'focus': 'focus:bg-neutral-0 focus:text-neutral-800 focus:border border-neutral-400 focus:shadow-[0px_0px_0px_4px_#F3F4F6] focus:outline-none',
+      'base': 'desk:w-fit tab:w-fit w-full justify-center border-2 border-blue-500 bg-neutral-0 text-blue-500',
+
+      'hover': 'hover:text-neutral-800 hover:bg-blue-200 hover:border-2 hover:border-blue-500 hover:shadow hover:text-blue-500',
+      
+      'focus': 'focus:bg-blue-200 focus:text-neutral-800 focus:border-2 border-blue-500 focus:shadow-[0px_0px_0px_4px_#DFE8FF] focus:outline-none focus:text-blue-500',
     },
     'disabled': 'bg-neutral-200 text-neutral-400',
   },
@@ -53,7 +55,7 @@ const Buttonclasses = {
   },
   'iconOnly': {
     'default': {
-      'base': 'desk:w-fit tab:w-fit w-full justify-center justify-center bg-blue-200 rounded-full',
+      'base': 'w-fit justify-center justify-center bg-blue-200 rounded-full p-1.5',
 
       'hover': 'hover:bg-blue-600 hover:shadow',
 

package/src/HDS/components/Carousels/carouselCard.js

@@ -80,15 +80,40 @@ export default function Carouseltest(props) {
         </button>
     );
     return (
-        <div>
-               <div className="flex">
-                    {sliderControl(true)}
-                    {sliderControl()}
-                </div>
-            <div className=" justify-center select-none  items-center">
-             
+        <div className="">
+            <div className="block sm:hidden">
+            {props.cards.map((item, i) => (
+                            <div className="my-5" key={i} ref={refs[i]}>
+                                <div className="rounded-3xl ">
+                                    {React.createElement(props.component, item)}
+                                </div>
+
+                            </div>
+                        ))}
+            </div>
+
+            <div className="invisible sm:visible">
+            <div className="flex ">
+                {sliderControl(true)}
+                {sliderControl()}
+            </div>
+            <div className="justify-center select-none  items-center"
+            onTouchStart={handleTouchStart}
+            onTouchMove={handleTouchMove}
+            onTouchEnd={handleTouchEnd}
+            onMouseDown={e => setTouchStart(e.clientX)}
+            onMouseUp={e => {
+              if (touchStart - e.clientX > 50) {
+                nextCard();
+              }
+          
+              if (touchStart - e.clientX < -50) {
+                previousCard();
+              }
+            }}
+            >
                 <div className="">
-                    <div className="snap-x w-1/2 inline-flex select-none overflow-x-hidden scrollbar-hide">
+                    <div className={`snap-x ${props.carouselWidth} inline-flex select-none overflow-x-hidden scrollbar-hide`}>
 
                         {props.cards.map((item, i) => (
                             <div className="snap-center mx-5 shrink-0" key={i} ref={refs[i]}>
@@ -98,10 +123,12 @@ export default function Carouseltest(props) {
 
                             </div>
                         ))}
-                        
+
                     </div>
                 </div>
             </div>
+            </div>
+
         </div>
     );
 };

package/src/index.css

@@ -2,11 +2,13 @@
 @tailwind components;
 @tailwind utilities;
 /* Typography classes */
+
 .scrollbar-hide::-webkit-scrollbar {
     width: 0;
     height: 0;
 }
-  
+
+
 .display-2xl-bold {
     @apply text-7xl font-bold;
     letter-spacing: -0.015em;
@@ -178,38 +180,38 @@
 }
 
 .code-lg {
-    @apply text-lg font-normal ;
-   
+    @apply text-lg font-normal;
+
 }
 
 .code-md {
-    @apply text-base font-normal ;
+    @apply text-base font-normal;
 }
 
 .code-sm {
-    @apply text-sm font-normal ;
+    @apply text-sm font-normal;
 }
 
 
-.button-sm{
-    @apply text-sm-medium py-2 px-4 rounded-full;
+.button-sm {
+    @apply text-hds-d-body3c-medium py-1.5 px-4 rounded-full;
 
 }
 
-.button-md{
-    @apply text-sm-medium rounded-full py-2.5 px-5;
+.button-md {
+    @apply text-hds-d-body3c-medium rounded-full py-2.5 px-5;
 }
 
-.button-lg{
-    @apply text-md-medium rounded-full py-2.5 px-6;
+.button-lg {
+    @apply text-hds-d-body1c-medium rounded-full py-3 px-6;
 
 }
 
-.button-xl{
+.button-xl {
     @apply text-md-medium rounded-full py-3 px-7;
 }
 
-.button-2xl{
+.button-2xl {
     @apply text-lg-medium rounded-full py-4 px-8;
 
 }
@@ -217,8 +219,8 @@
 .language-javascript {
     background-color: transparent !important;
     padding: 0 !important;
-  }
+}
 
-  .token.operator {
+.token.operator {
     background: none !important;
 }