hds-web 1.5.6 → 1.5.8

package/package.json

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

package/src/HDS/components/Cards/Dropdown/v3Dropdown.js

@@ -5,7 +5,7 @@ import { FlyoutB, FlyoutA } from '../Menu'
 
 export default function DropdownA(props) {
     return (
-        <div className='flex flex-col tb:flex-row gap-2'>
+        <div className='flex mx-auto w-screen flex-col tb:flex-row gap-2'>
             <div className='  bg-neutral-0 rounded-2xl tb:min-w-[28.063rem]'>
                 <FlyoutB
                    {...props.primaryCard}

package/src/HDS/components/Cards/ImageBox/imagebox.js

@@ -0,0 +1,50 @@
+import React from "react";
+import { HDSButton } from "../../Buttons";
+import { Typography } from "../../../foundation/Typography";
+import { HDSColor } from "../../../foundation/ColorPalette";
+
+export default function ImageBox(props) {
+    const {
+        button,
+        cta_text,
+        description,
+        className,
+        imgUrl,
+        imgAlt,
+        titleTextColor = 'text-neutral-1000',
+        imageClasses,
+    } = props;
+    return (
+        <div className={className}>
+            {imgUrl &&
+            <div>
+                <img src={imgUrl} alt={imgAlt} className={imageClasses} />
+                </div>}
+            {title && (
+                <Typography textStyle='h3' className={HDSColor(titleTextColor)}>{title}</Typography>
+            )
+            }
+            {description && (
+                <Typography textStyle='body1'>{description}</Typography>
+            )
+
+            }
+            {button.btnLabel && (
+                <a href={button.cta_link}>
+                    <HDSButton
+                        label={button.cta_text}
+                        type={button.cta_type}
+                        leftIconVariant='none'
+                        rightIconVariant='none'
+                        state='default'
+                        size='md'
+                        rightAnimatedArrow={true}
+                        rightAnimatedArrowColor='#3970FD'
+                    />
+                </a>
+            )
+
+            }
+        </div>
+    )
+}

package/src/HDS/components/Cards/ImageBox/index.js

@@ -0,0 +1 @@
+export {default as ImageBox} from './imagebox'

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/HDS/components/Hero/h3.js

@@ -47,7 +47,6 @@ const tabCard = (Content) => (
 )
 
 export default function HeroCapability(props) {
-    console.log(props.heroData);
 
     const LinkCardsFn = (heroData) => {
         return (
@@ -160,3 +159,246 @@ export default function HeroCapability(props) {
         </div>
     )
 }
+
+HeroCapability.defaultProps={
+ heroData :  {
+        tabContent: {
+          'Performance': {
+            heroBgColor:'bg-green-500',
+            title: 'Blazing-fast APIs at Global Scale ',
+            subTitle: 'Hasura optimizes your API performance up to 10x faster with end-to-end caching, while scaling both vertically and horizontally.',
+            videoUrl: "https://res.cloudinary.com/dh8fp23nd/video/upload/v1683307555/hasura-con-2023/tg_hascon23_homepage_ue29jn.mp4",
+            videoPoster: "https://res.cloudinary.com/dh8fp23nd/image/upload/v1685017301/Group_2608667_gu6idw.png",
+            subTitleTextColor: 'text-neutral-0',
+            titleTextColor: 'text-neutral-0',
+            bgColorTab: 'bg-neutral-1000',
+            pillColor:'bg-pink-500',
+            button: [
+              {
+                cta_text: 'Get Started',
+                btnBg: '',
+                bg_color: 'bg-blue-900',
+                
+                cta_link: '',
+                cta_type:''
+              },
+              {
+                cta_text: 'Get Started',
+                btnBg: '',
+                bg_color: 'bg-blue-900',
+                cta_link: '',
+                cta_type:''
+              }
+            ],
+            linkCards: [
+              {
+                titleTextColor: 'text-neutral-0',
+                descTextColor: 'text-neutral-0',
+                iconVariant: 'videorecorder',
+                iconStrokeColor: '#3970FD',
+                iconArrowVariant: 'arrownarrowupright',
+                iconArrowStrokeColor: 'blue-400',
+                title: 'Webinar',
+                description: 'Model Level Authorization System for GraphQL with Hasura',
+        
+        
+              },
+              {
+                cardBgColor: 'bg-pink-300',
+                cardHoverBg: 'bg-pink-900',
+                iconVariant: 'videorecorder',
+                iconStrokeColor: '#3970FD',
+                iconArrowVariant: 'arrownarrowupright',
+                iconArrowStrokeColor: 'blue-400',
+                title: 'Webinar',
+                description: 'Model Level Authorization System for GraphQL with Hasura',
+        
+        
+              },
+              {
+                cardBgColor: 'bg-pink-300',
+                cardHoverBg: 'bg-pink-900',
+                iconVariant: 'videorecorder',
+                iconStrokeColor: '#3970FD',
+                iconArrowVariant: 'arrownarrowupright',
+                iconArrowStrokeColor: 'blue-400',
+                title: 'Webinar',
+                description: 'Model Level Authorization System for GraphQL with Hasura',
+        
+        
+              },
+            ],
+    
+    
+    
+    
+          },
+          'Company': {
+            heroBgColor:'bg-blue-500',
+            title: 'Leverage Hasura’s Authorization Engine',
+            subTitle: 'Hasura optimizes your API performance up to 10x faster with end-to-end caching, while scaling both vertically and horizontally.ss',
+            videoUrl: "https://res.cloudinary.com/dh8fp23nd/video/upload/v1683307555/hasura-con-2023/tg_hascon23_homepage_ue29jn.mp4",
+            videoPoster: "https://res.cloudinary.com/dh8fp23nd/image/upload/v1685017301/Group_2608667_gu6idw.png",
+            imgUrl:'',
+            subTitleTextColor: 'text-neutral-0',
+            titleTextColor: 'text-neutral-0',
+            bgColorTab: 'bg-neutral-1000',
+            pillColor:'bg-amber-500',
+            button: [
+              {
+                cta_text: 'Get Started',
+                btnBg: '',
+                bg_color: 'bg-blue-900',
+                
+                cta_link: '',
+                cta_type:''
+              },
+              {
+                cta_text: 'Get Started',
+                btnBg: '',
+                bg_color: 'bg-blue-900',
+                cta_link: '',
+                cta_type:''
+              }
+            ],
+            linkCards: [
+              {
+                titleTextColor: 'text-neutral-0',
+                descTextColor: 'text-neutral-0',
+                iconVariant: 'videorecorder',
+                iconStrokeColor: '#3970FD',
+                iconArrowVariant: 'arrownarrowupright',
+                iconArrowStrokeColor: 'blue-400',
+                title: 'Webinar',
+                description: 'Model Level Authorization System for GraphQL with Hasura',
+        
+        
+              },
+              {
+                cardBgColor: 'bg-pink-300',
+                cardHoverBg: 'bg-pink-900',
+                iconVariant: 'videorecorder',
+                iconStrokeColor: '#3970FD',
+                iconArrowVariant: 'arrownarrowupright',
+                iconArrowStrokeColor: 'blue-400',
+                title: 'Webinar',
+                description: 'Model Level Authorization System for GraphQL with Hasura',
+        
+        
+              },
+              {
+                cardBgColor: 'bg-pink-300',
+                cardHoverBg: 'bg-pink-900',
+                iconVariant: 'videorecorder',
+                iconStrokeColor: '#3970FD',
+                iconArrowVariant: 'arrownarrowupright',
+                iconArrowStrokeColor: 'blue-400',
+                title: 'Webinar',
+                description: 'Model Level Authorization System for GraphQL with Hasura',
+        
+        
+              },
+            ],
+    
+    
+    
+    
+          },
+          'Authorization': {
+            heroBgColor:'bg-cyan-500',
+            title: 'Blazing-fast APIs at Global Scale ',
+            subTitle: 'Hasura optimizes your API performance up to 10x faster with end-to-end caching, while scaling both vertically and horizontally.',
+            videoUrl: "https://res.cloudinary.com/dh8fp23nd/video/upload/v1683307555/hasura-con-2023/tg_hascon23_homepage_ue29jn.mp4",
+            videoPoster: "https://res.cloudinary.com/dh8fp23nd/image/upload/v1685017301/Group_2608667_gu6idw.png",
+            imgUrl:'',
+            subTitleTextColor: 'text-neutral-0',
+            titleTextColor: 'text-neutral-0',
+            bgColorTab: 'bg-pink-500',
+            pillColor:'bg-neutral-500',
+            button: [
+              {
+                cta_text: 'Get Started',
+                btnBg: '',
+                bg_color: 'bg-blue-900',
+                
+                cta_link: '',
+                cta_type:''
+              },
+              {
+                cta_text: 'Get Started',
+                btnBg: '',
+                bg_color: 'bg-blue-900',
+                cta_link: '',
+                cta_type:''
+              }
+            ],
+            linkCards: [
+              {
+                titleTextColor: 'text-neutral-0',
+                descTextColor: 'text-neutral-0',
+                iconVariant: 'videorecorder',
+                iconStrokeColor: '#3970FD',
+                iconArrowVariant: 'arrownarrowupright',
+                iconArrowStrokeColor: 'blue-400',
+                title: 'Webinar',
+                description: 'Model Level Authorization System for GraphQL with Hasura',
+        
+        
+              },
+              {
+                cardBgColor: 'bg-pink-300',
+                cardHoverBg: 'bg-pink-900',
+                iconVariant: 'videorecorder',
+                iconStrokeColor: '#3970FD',
+                iconArrowVariant: 'arrownarrowupright',
+                iconArrowStrokeColor: 'blue-400',
+                title: 'Webinar',
+                description: 'Model Level Authorization System for GraphQL with Hasura',
+        
+        
+              },
+              {
+                cardBgColor: 'bg-pink-300',
+                cardHoverBg: 'bg-pink-900',
+                iconVariant: 'videorecorder',
+                iconStrokeColor: '#3970FD',
+                iconArrowVariant: 'arrownarrowupright',
+                iconArrowStrokeColor: 'blue-400',
+                title: 'Webinar',
+                description: 'Model Level Authorization System for GraphQL with Hasura',
+        
+        
+              },
+            ],
+    
+    
+    
+    
+          },
+        },
+      
+        navTabs: [
+          {
+            current: true,
+            name: 'Performance'
+          },
+          {
+            current: 'false',
+            name: 'Company'
+          },
+          {
+            current: 'false',
+            name: 'Authorization'
+          },
+          {
+            current: 'false',
+            name: 'Observability'
+          },
+          {
+            current: 'false',
+            name: 'API Security'
+          }
+        ]
+      }
+    
+}

package/src/HDS/components/Tabs/tab.js

@@ -40,9 +40,6 @@ export default function Tab(props) {
   function tabClass(name) {
     let classActive = ' text-neutral-0 transition-all rounded-full ' + pillColorClass;
     let clasnInActive = ' text-neutral-500 flex-nowrap rounded-full';
-
-    console.log(classActive, clasnInActive, 'heeelo');
-
     if (activeTab.name === name) {
       return classActive;
     }

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