hds-web 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -59,6 +59,7 @@
     "@babel/preset-react": "^7.12.10",
     "@rollup/plugin-commonjs": "^24.1.0",
     "@rollup/plugin-image": "^3.0.2",
+    "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^11.1.0",
     "@storybook/addon-actions": "^6.5.16",
@@ -90,8 +91,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
-    "tailwindcss": "^3.2.4",
-    "typescript": "^5.0.4"
+    "tailwindcss": "^3.2.4"
   },
   "peerDependencies": {
     "react": "^17.0.1",

package/rollup.config.js

@@ -7,7 +7,7 @@ import image from '@rollup/plugin-image';
 import svgr from '@svgr/rollup'
 import url from '@rollup/plugin-url'
 import commonjs from '@rollup/plugin-commonjs';
-
+import json from '@rollup/plugin-json';
 export default [
   {
     input: './src/index.js',
@@ -24,6 +24,7 @@ export default [
       },
     ],
     plugins: [
+      json(),
       postcss({
         extensions: ['.css'],
         extract: true,

package/src/HDS/assets/icons/hasura.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.90242 4.54755L7.31044 5.17685C8.69886 4.27665 10.3575 3.75351 12.1427 3.75351C13.9278 3.75351 15.5864 4.27665 16.9749 5.17685L16.9753 5.17712C17.7616 5.68623 18.8113 5.5224 19.3973 4.78435L19.4205 4.75511L19.4407 4.72371L20.4859 3.09894C20.7832 3.70359 21.0075 4.58795 21.1085 5.56141C21.2297 6.72912 21.1571 7.86576 20.9257 8.57919L20.9256 8.57948C20.6977 9.28328 20.6295 10.0391 20.7649 10.7837L20.7656 10.7873C20.8793 11.3956 20.98 12.0679 20.98 12.5018C20.98 17.3253 17.0299 21.2502 12.1404 21.2502C7.25292 21.2502 3.30071 17.3274 3.30071 12.5018C3.30071 12.0679 3.40144 11.3956 3.51518 10.7873L3.51536 10.7863C3.65353 10.0418 3.58819 9.28511 3.35967 8.57948L3.35949 8.57893C3.12825 7.86674 3.05558 6.73078 3.17677 5.56302C3.2778 4.58962 3.50216 3.70474 3.79965 3.09928L4.84456 4.72371L4.86593 4.75693L4.89067 4.78773C5.47582 5.516 6.52292 5.68922 7.31143 5.17621L6.90242 4.54755ZM6.90242 4.54755C6.43885 4.84916 5.82074 4.74787 5.47533 4.31797L3.37457 2.33707C2.38099 3.80178 2.09419 7.11061 2.64616 8.81055C2.83931 9.40701 2.89158 10.0372 2.77796 10.6494C2.66434 11.2572 2.55071 11.9909 2.55071 12.5018C2.55071 17.7484 6.84561 22.0002 12.1404 22.0002C17.4374 22.0002 21.73 17.7462 21.73 12.5018C21.73 11.9909 21.6164 11.2572 21.5028 10.6494C21.3914 10.0372 21.446 9.40701 21.6391 8.81055C22.1911 7.10851 21.9043 3.79969 20.9108 2.33684C20.8129 2.19276 20.641 2.12476 20.4674 2.13837C20.2979 2.15166 20.1444 2.24341 20.0525 2.38638L18.81 4.31797C18.4668 4.75012 17.8487 4.84916 17.3829 4.54755C15.8763 3.57071 14.0765 3.00351 12.1427 3.00351C10.2088 3.00351 8.40904 3.57071 6.90242 4.54755Z"  stroke-width="1.5"/>
+<path d="M12.4 12.5L10 15M10.8 10L14 15"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -56,6 +56,17 @@ export default function Carouseltest(props) {
             scrollToCard(currentCard - 1);
         }
     };
+    const slider = () => {
+     return(
+        <div className=' '>
+        <div
+            className='bg-blue-100 w-96 rounded-md content-center h-1'>
+            <div className="bg-blue-600 rounded-md h-1 w-6">
+            </div>
+        </div>
+    </div>
+     )
+    };
 
     const arrowStyle = ' text-2xl z-10 bg-black h-10 w-10 rounded-full bg-neutral-0 flex items-center justify-center';
 
@@ -80,28 +91,58 @@ export default function Carouseltest(props) {
         </button>
     );
     return (
-        <div>
-               <div className="flex">
-                    {sliderControl(true)}
-                    {sliderControl()}
+        <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 flex flex-col-reverse  sm:visible">
+                <div className="flex items-center justify-around mt-20 ">
+                    {slider()}
+                    <div className="flex">
+                        {sliderControl(true)}
+                        {sliderControl()}
+                    </div>
                 </div>
-            <div className=" justify-center select-none  items-center">
-             
-                <div className="">
-                    <div className="snap-x w-1/2 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]}>
-                                <div className="w-full select-none rounded-3xl object-contain">
-                                    {React.createElement(props.component, item)}
+                <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 ${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]}>
+                                    <div className="w-full select-none rounded-3xl object-contain">
+                                        {React.createElement(props.component, item)}
+                                    </div>
+
                                 </div>
+                            ))}
 
-                            </div>
-                        ))}
-                        
+                        </div>
                     </div>
                 </div>
             </div>
+
         </div>
     );
 };

package/src/HDS/components/common-components/Icon/IconMap.js

@@ -1172,9 +1172,10 @@ import {ReactComponent as PlaceholderIcon } from "../../../assets/icons/placehol
 import {ReactComponent as Home03Icon } from "../../../assets/icons/home-03.svg"
 import {ReactComponent as HasuraBlueLogoIcon } from "../../../assets/V3/HasuraBlueLogo.svg"
 import {ReactComponent as Minus01Icon } from "../../../assets/icons/minus-01.svg"
-
+import {ReactComponent as HasuraIcon } from "../../../assets/icons/hasura.svg"
 
 const iconReferenceMap = {
+    hasura: HasuraIcon,
     minus01: Minus01Icon,
     clockrewind: ClockrewindIcon,
     passport: PassportIcon,

package/src/HDS/foundation/ColorPalette/color.js

@@ -0,0 +1,19 @@
+import resolveConfig from 'tailwindcss/resolveConfig';
+import tailwindConfig from '../../../../tailwind.config';
+const fullConfig = resolveConfig(tailwindConfig);
+var HDSColors = {};
+let textCode = "";
+let colorCode = "";
+for (const x in fullConfig.theme.colors) {
+    for (const y in fullConfig.theme.colors[x]) {
+        colorCode = "bg-" + x + "-" + y;
+        textCode = "text-" + x + "-" + y;
+        HDSColors[colorCode] = colorCode;
+        HDSColors[textCode] = textCode;
+    }
+}
+export default function HDSColor(color = 'bg-blue-600') {
+    return HDSColors[color];
+}
+
+

package/src/HDS/foundation/ColorPalette/index.js

@@ -1,23 +1 @@
-
-import React from 'react';
-const ColorBox = ({ applyclass }) => {
-  return (
-    <div className=' flex place-content-evenly flex-wrap border-rose-500' >
-      {Object.entries(applyclass).map(([key, value]) => (
-        <div>
-          <div className='w-24'>
-            <div key={key} className={`bg-${key}`}>
-              <div className={`bg-${key}  h-24 my-5 text-sm-bold flex place-content-around items-center flex-wrap rounded`}>  </div>
-            </div>
-            <div className='flex place-content-around items-center text-sm-bold '> {value} <br /> {key}</div>
-          </div>
-        </div>
-
-      ))}
-
-    </div>
-  );
-};
-export default ColorBox;
-
-
+export {default as HDSColor} from './color';

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;
 }