hds-web 1.1.8 → 1.2.0

package/package.json

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

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

@@ -28,7 +28,7 @@ const Buttonclasses = {
   },
   'tonal': {
     'default': {
-      'base': 'db:w-fit tb:w-fit w-full  justify-center bg-blue-200 text-blue-600',
+      'base': 'db:w-fit tb:w-fit w-full justify-center bg-blue-200 text-blue-600',
       'hover': 'hover:bg-blue-700 hover:text-neutral-0 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-300',
       'focus': 'focus:bg-blue-100 focus:text-blue-600 focus:shadow-[0px_0px_0px_4px_#DFE8FF] focus:outline-none',
     },

package/src/HDS/components/Cards/Misc/talkCard.js

@@ -26,7 +26,7 @@ export default function TalkCard(props) {
                     />
 
                     <Typography className='my-2 text-blue-800' textStyle='h5'>{props.title}</Typography>
-                    {props.para && <Typography className='my-2 text-neutral-700 [&>p]:pb-2 [&>p]:last:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 [&>ul>li]:last:pb-0' textStyle='body1'>
+                    {props.para && <Typography className='text-neutral-700 [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 [&>ul>li]:last:pb-0' textStyle='body1'>
                       <ReactMarkdown>{props.para}</ReactMarkdown>
                     </Typography>}
 

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

@@ -142,14 +142,14 @@ export default function V3Header(props) {
     )
 
     return (
-        <Popover className="relative bg-white">
+        <Popover className="relative">
             <div className="flex items-center bg-neutral-50 justify-between p-6 md:justify-start md:space-x-6">
                 <div>
-                    <a href="#" className="flex items-center">
-                        <Icon variant={'hasuraPrimary'} strokeColor={''} />
+                    <a href={props.headerUrl} className="flex items-center">
+                        <Icon height='w-[103px] h-[33px]' variant={'hasuraPrimary'} strokeColor={''} />
                     </a>
                 </div>
-                <div className="-my-2 -mr-2 md:hidden">
+                <div className="tb:hidden">
                     <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
                         <span className="sr-only">Open menu</span>
                         <div className=' gap-6 flex'>
@@ -158,7 +158,7 @@ export default function V3Header(props) {
                         </div>
                     </Popover.Button>
                 </div>
-                <div className="hidden md:flex md:flex-1 md:items-center md:justify-between">
+                <div className="hidden tb:flex tb:flex-1 tb:items-center tb:justify-between">
                     <Popover.Group as="nav" className="flex space-x-6">
                         {headerListfn(props.HEADER_LIST)}
                     </Popover.Group>
@@ -364,5 +364,6 @@ V3Header.defaultProps = {
             ]
         },
 
-    ]
+    ],
+    headerUrl:'https://hasura.io/'
 }

package/src/HDS/components/Hero/h2.js

@@ -9,6 +9,19 @@ import { v4 as uuidv4 } from 'uuid';
 
 export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize }) {
   const [valumeMuteIcon, setValumeMuteIcon] = useState("volumex");
+
+  const scrollToNextDiv = (element) => {
+    const nextDiv = element.nextElementSibling;
+    if (nextDiv) {
+      nextDiv.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+  
+  const handleClick = (event) => {
+    const arrowIcon = event.target;
+    const arrowContainer = arrowIcon.parentNode;
+    scrollToNextDiv(arrowContainer);
+  };
   const videoMute = () => {
     if (heroData.video_url) {
       const videoEle = document.getElementById("hero_vid");
@@ -95,34 +108,34 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
   const heroButton = () => (
     heroData.buttons && (
       <div className={" gap-6 flex items-center tb:justify-center tb-l:justify-start db:justify-start pt-6" + ((heroData.video_url) ? " tb:justify-center" : " tb:justify-start")}>
-        
-        
-            {heroData.buttons[0] &&
-            <HDSButton
+
+
+        {heroData.buttons[0] &&
+          <HDSButton
             type="secondary"
             btnTextColorClass={HDSColor('text-neutral-0')}
-              leftIconVariant='none'
-              rightIconVariant='none'
-              label={heroData.buttons[0].cta_text}
-              state='default'
-              size='lg'
-              rightAnimatedArrow='true'
-              rightAnimatedArrowColor='#ffffff'
-            />
-      }
-            {heroData.buttons[1] && <HDSButton
-            type="primaryLink"
-            btnTextColorClass={HDSColor('text-neutral-0')}
-              leftIconVariant='none'
-              rightIconVariant='none'
-              label={heroData.buttons[1].cta_text}
-              state='default'
-              size='lg'
-              rightAnimatedArrow='true'
-              rightAnimatedArrowColor='#ffffff'
-            />}
-      
-        
+            leftIconVariant='none'
+            rightIconVariant='none'
+            label={heroData.buttons[0].cta_text}
+            state='default'
+            size='lg'
+            rightAnimatedArrow='true'
+            rightAnimatedArrowColor='#ffffff'
+          />
+        }
+        {heroData.buttons[1] && <HDSButton
+          type="primaryLink"
+          btnTextColorClass={HDSColor('text-neutral-0')}
+          leftIconVariant='none'
+          rightIconVariant='none'
+          label={heroData.buttons[1].cta_text}
+          state='default'
+          size='lg'
+          rightAnimatedArrow='true'
+          rightAnimatedArrowColor='#ffffff'
+        />}
+
+
       </div>
     )
   )
@@ -153,20 +166,20 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
 
   const imageCard = (heroData) => (
     heroData.imageUrl && (
-      <div className="w-1/2 tb-l:w-full tb:flex tb:flex-col tb:justify-center">
-        <img src={heroData.imageUrl} alt={heroData.imageAlt} className='w-full ' />
+      <div className="">
+        <img src={heroData.imageUrl} alt={heroData.imageAlt} className='w-full' />
       </div>
     )
   )
-  
+
   const videoGradientBg = HDSColor(heroData.video_gradient_bg);
   return (
     <div className="">
       <div className="">
         <div className={"max-w-7xl mx-auto px-20 py-20 rounded-3xl overflow-hidden " + ((heroData.bg_color) ? heroData.bg_color : "")} >
           <div className="w-full">
-            <div className={"tb-l:flex tb-l:items-center tb-l:flex-row db:w-full flex flex-col-reverse tb:gap-x-16 db:gap-x-10 min-[1880px]:gap-x-72" + ((heroData.video_url) ? " " : " tb:flex")}>
-              <div className='w-full tb:flex items-start tb:flex-col mt-4 tb:mt-0'
+            <div className={"tb-l:flex tb-l:justify-between tb-l:items-center tb-l:flex-row db:w-full flex flex-col-reverse tb:gap-x-16 db:gap-x-10 min-[1880px]:gap-x-72" + ((heroData.video_url) ? " " : " tb:flex")}>
+              <div className='max-w-[29.18rem] w-full tb:flex items-start tb:flex-col mt-4 tb:mt-0'
               >
                 {
                   heroData.tag_line && (
@@ -188,14 +201,18 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
 
                 {
                   heroData.description && (
-                    <Typography textStyle="sub1" className="tb-l:text-center db:text-left text-neutral-0 [&>*]:mb-8 last:[&>*]:mb-0">{heroData.description}</Typography>
+                    <Typography textStyle="sub1" className="db:text-left text-neutral-0 [&>*]:mb-8 last:[&>*]:mb-0">{heroData.description}</Typography>
                   )
                 }
                 {heroButton(heroData)}
 
-                
+
               </div>
+              <div className="">
+
+              
               {imageCard(heroData)}
+              </div>
             </div>
 
             {LinkCardsFn(heroData)}
@@ -203,9 +220,12 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
           </div>
         </div>
         {
-          scrollArrow && (
-            <>
-            </>
+          heroData.scrollArrow && (
+            <div className="flex justify-center flex-row" onClick={(e) => scrollToNextDiv(e.currentTarget)}>
+              <div className="flex bg-neutral-0 shadow-md -mt-5 animate-bounce justify-center rounded-full items-center w-12 h-12" >
+                <Icon variant='chevrondowndouble' strokeClass='stroke-neutral-800' height='h-6 w-6' />
+              </div>
+            </div>
           )
         }
       </div>

package/src/styles/tailwind.css

@@ -1365,6 +1365,10 @@ select {
   height: 100%;
 }
 
+.h-\[33px\] {
+  height: 33px;
+}
+
 .max-h-\[26\.25\] {
   max-height: 26.25;
 }
@@ -1491,6 +1495,14 @@ select {
   width: 100vw;
 }
 
+.w-\[104px\] {
+  width: 104px;
+}
+
+.w-\[103px\] {
+  width: 103px;
+}
+
 .min-w-\[15rem\] {
   min-width: 15rem;
 }
@@ -1559,6 +1571,10 @@ select {
   max-width: min-content;
 }
 
+.max-w-\[29\.18rem\] {
+  max-width: 29.18rem;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -8015,6 +8031,10 @@ select {
     max-width: 530px;
   }
 
+  .tb\:flex-1 {
+    flex: 1 1 0%;
+  }
+
   .tb\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -8043,6 +8063,10 @@ select {
     justify-content: center;
   }
 
+  .tb\:justify-between {
+    justify-content: space-between;
+  }
+
   .tb\:gap-0 {
     gap: 0px;
   }
@@ -8572,6 +8596,14 @@ select {
     justify-content: flex-start;
   }
 
+  .tb-l\:justify-end {
+    justify-content: flex-end;
+  }
+
+  .tb-l\:justify-between {
+    justify-content: space-between;
+  }
+
   .tb-l\:gap-0 {
     gap: 0px;
   }
@@ -9056,6 +9088,10 @@ select {
   padding-bottom: 0px;
 }
 
+.last\:\[\&\>p\]\:pb-0>p:last-child {
+  padding-bottom: 0px;
+}
+
 .\[\&\>span\]\:pb-2>span {
   padding-bottom: 0.5rem;
 }