hds-web 1.8.8 → 1.9.0

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

@@ -1,4 +1,5 @@
 export {default as Carousel} from './carousel';
 export {default as CarouselCard} from './carouselCard';
-export {default as HomepageCarousel} from './homepageCarousel';
-export {default as HomepageCarousel2} from './homeCarousel2';
+export {default as CarouselB} from './carouselB';
+export {default as HomepageCarouselPrimary} from './homeCarousel';
+export {default as CustomCarousel} from './customCarousel';

package/src/HDS/components/Footers/v3Footer.js

@@ -54,7 +54,7 @@ const socialShare = [
   },
 ]
 
-export default function V3Header(props) {
+export default function V3Footer(props) {
   const [isError, setIsError] = useState(false);
   const [isItems, setIsItems] = useState(null);
   useEffect(() => {
@@ -118,3 +118,187 @@ export default function V3Header(props) {
     </div>
   )
 }
+
+
+V3Footer.defaultProps = {
+  brandUrl: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1686659126/website%20v3/hasura-primary_y9cdnn.svg',
+  brandAlt: 'Hasura',
+  brandLink: 'https://hasura.io/',
+  footerLinks: [
+    {
+      title: 'Platform',
+      links: [
+        {
+          linkText: 'Hasura CE Edition',
+          linkUrl: 'https://hasura.io/opensource/',
+        },
+        {
+          linkText: 'Hasura EE',
+          linkUrl: 'https://hasura.io/enterprise/',
+        },
+        {
+          linkText: 'Hasura Cloud',
+          linkUrl: 'https://hasura.io/cloud/',
+        },
+        {
+          linkText: 'Pricing',
+          linkUrl: 'https://hasura.io/pricing/',
+        },
+      ]
+    },
+    {
+      title: 'Capabilities',
+      links: [
+        {
+          linkText: 'Performance',
+          linkUrl: 'https://hasura.io/product/performance/',
+        },
+        {
+          linkText: 'Instant API',
+          linkUrl: 'https://hasura.io/product/instant-api/',
+        },
+        {
+          linkText: 'Authorization',
+          linkUrl: 'https://hasura.io/product/authorization/',
+        },
+        {
+          linkText: 'API Security',
+          linkUrl: 'https://hasura.io/product/api-security/',
+        },
+        {
+          linkText: 'Federation',
+          linkUrl: 'https://hasura.io/product/federation/',
+        },
+        {
+          linkText: 'Observability',
+          linkUrl: 'https://hasura.io/product/observability/',
+        },
+      ]
+    },
+    {
+      title: 'Build',
+      links: [
+        {
+          linkText: 'Docs',
+          linkUrl: 'https://hasura.io/docs/latest/index/',
+        },
+        {
+          linkText: 'Hasura Hub',
+          linkUrl: 'https://hasura.io/hub/',
+        },
+        // {
+        //   linkText: 'GraphQL Hub',
+        //   linkUrl: '#',
+        // },
+        // {
+        //   linkText: 'Guides',
+        //   linkUrl: '#',
+        // },
+        {
+          linkText: 'Changelog',
+          linkUrl: 'https://github.com/hasura/graphql-engine/releases/',
+        },
+        {
+          linkText: 'GraphiQL',
+          linkUrl: 'https://cloud.hasura.io/public/graphiql',
+        },
+      ]
+    },
+    {
+      title: 'Learn',
+      links: [
+        {
+          linkText: 'Blog',
+          linkUrl: 'https://hasura.io/blog/',
+        },
+        // {
+        //   linkText: 'Tech Talks',
+        //   linkUrl: '#',
+        // },
+        {
+          linkText: 'Tutorials',
+          linkUrl: 'https://hasura.io/learn/',
+        },
+        {
+          linkText: 'Events',
+          linkUrl: 'https://hasura.io/events/',
+        },
+      ]
+    },
+    {
+      title: 'Company',
+      links: [
+        {
+          linkText: 'Our Story',
+          linkUrl: 'https://hasura.io/about/',
+        },
+        // {
+        //   linkText: 'Newsroom',
+        //   linkUrl: '#',
+        // },
+        {
+          linkText: 'Careers',
+          linkUrl: 'https://hasura.io/careers/',
+        },
+        // {
+        //   linkText: 'Partners',
+        //   linkUrl: '#',
+        // },
+        {
+          linkText: 'Legal',
+          linkUrl: 'https://hasura.io/legal/',
+        },
+        {
+          linkText: 'Brand',
+          linkUrl: 'https://hasura.io/brand/',
+        },
+      ]
+    },
+    {
+      title: 'Connect',
+      links: [
+        {
+          linkText: 'Community',
+          linkUrl: 'https://hasura.io/community/',
+        },
+        {
+          linkText: 'Discord',
+          linkUrl: 'https://discord.com/invite/hasura',
+        },
+        // {
+        //   linkText: 'Forum',
+        //   linkUrl: '#',
+        // },
+        // {
+        //   linkText: 'Meetup',
+        //   linkUrl: '#',
+        // },
+        // {
+        //   linkText: 'Support',
+        //   linkUrl: '#',
+        // },
+      ]
+    },
+    {
+      title: 'Community',
+      links: [
+        {
+          linkText: 'Docs',
+          linkUrl: 'https://hasura.io/docs/latest/index/',
+        },
+        {
+          linkText: 'Help',
+          linkUrl: 'https://hasura.io/help/',
+        },
+        {
+          linkText: 'Github',
+          linkUrl: 'https://github.com/hasura',
+        },
+        {
+          linkText: 'Contact Sales',
+          linkUrl: 'https://hasura.io/contact-us/',
+        },
+      ]
+    },
+  ],
+}

package/src/HDS/components/index.js

@@ -15,4 +15,4 @@ export * from './Hero';
 export * from './Tables';
 export * from './Carousels';
 export * from './Pre-footers';
-export * from './Footers';
+export * from './Footers';

package/src/HDS/helpers/index.js

@@ -1,3 +1,2 @@
 export * from './Translations';
 export * from './Media';
-export * from './Sliders'

package/src/HDS/modules/TextCard/textIconCard.js

@@ -14,30 +14,27 @@ export default function TextIconCard(props) {
           <Typography textStyle="h3" as="h3" className="pb-2 text-neutral-1000">{props.title}</Typography>
           <Typography textStyle="sub2" className="pb-6 text-neutral-600">{props.description}</Typography>
           {props.button &&
-            <div className="flex gap-6 items-center">
-              {props.button.map((btn, index) => (
-                <a href={btn.cta_link} key={index} className="flex ">
-                  <HDSButton
-                    label={btn.cta_text}
-                    type={btn.cta_type || 'secondary'}
-                    leftIconVariant='none'
-                    rightIconVariant='none'
-                    state='default'
-                    size='md'
-                    rightAnimatedArrow={true}
-                    rightAnimatedArrowColor={btn.rightAnimatedArrowColor || '#3970FD'}
-                  />
-                </a>))
-              }
-            </div>
+            <a href={props.button.cta_link} className="flex ">
+              <HDSButton
+                label={props.button.cta_text}
+                type={props.button.cta_type || 'secondary'}
+                leftIconVariant='none'
+                rightIconVariant='none'
+                state='default'
+                size='md'
+                rightAnimatedArrow={true}
+                rightAnimatedArrowColor={props.button.rightAnimatedArrowColor || '#3970FD'}
+              />
+            </a>
           }
+
       </div>
       <div className="flex-1 pt-14 tb-m:pt-0">
         {
           props.iconCards.map((card, index) => (
-            <div className="tb:pb-10 tb-l:pb-16 last:pb-0 flex" key={index}>
-              <div className={`${HDSColor(card.iconBg)} w-12 h-12 min-w-[48px] rounded-full flex justify-center items-center mr-5`}>
-                <Icon height={'h-6 w-6'} variant={card.iconVariant} strokeClass={`${HDSColor(card.iconStrokeClass)}`} />
+            <div className="pb-6 tb:pb-10 tb-l:pb-16 last:pb-0 flex" key={index}>
+              <div className={`bg-blue-300 w-12 h-12 min-w-[48px] rounded-full flex justify-center items-center mr-5`}>
+                <Icon height={'h-6 w-6 stroke-[1.5px]'} variant={((card.iconName) ? card.iconName : 'cube02')} strokeClass='stroke-neutral-1000' />
               </div>
               <div>
               <Typography textStyle="h4" as="h4" className="pb-2 text-neutral-1000">{card.title}</Typography>
@@ -49,4 +46,4 @@ export default function TextIconCard(props) {
       </div>
     </div>
   )
-}
+}

package/src/styles/tailwind.css

@@ -985,6 +985,34 @@ select{
   left: 410px;
 }
 
+.-top-\[190px\]{
+  top: -190px;
+}
+
+.left-\[170px\]{
+  left: 170px;
+}
+
+.-top-\[15px\]{
+  top: -15px;
+}
+
+.left-\[400px\]{
+  left: 400px;
+}
+
+.top-\[15px\]{
+  top: 15px;
+}
+
+.top-\[18px\]{
+  top: 18px;
+}
+
+.left-\[415px\]{
+  left: 415px;
+}
+
 .isolate{
   isolation: isolate;
 }
@@ -1566,6 +1594,10 @@ select{
   height: 630px;
 }
 
+.h-16{
+  height: 4rem;
+}
+
 .max-h-\[26\.25\]{
   max-height: 26.25;
 }
@@ -1582,6 +1614,14 @@ select{
   max-height: 441px;
 }
 
+.max-h-\[181px\]{
+  max-height: 181px;
+}
+
+.max-h-\[20px\]{
+  max-height: 20px;
+}
+
 .min-h-\[20px\]{
   min-height: 20px;
 }
@@ -1594,6 +1634,14 @@ select{
   min-height: 441px;
 }
 
+.min-h-\[258px\]{
+  min-height: 258px;
+}
+
+.min-h-\[245px\]{
+  min-height: 245px;
+}
+
 .w-1\/2{
   width: 50%;
 }
@@ -1764,6 +1812,10 @@ select{
   width: 100vw;
 }
 
+.w-\[763px\]{
+  width: 763px;
+}
+
 .min-w-\[11\.5rem\]{
   min-width: 11.5rem;
 }
@@ -1810,6 +1862,10 @@ select{
   min-width: 100%;
 }
 
+.min-w-\[763px\]{
+  min-width: 763px;
+}
+
 .max-w-2xl{
   max-width: 42rem;
 }
@@ -1904,6 +1960,26 @@ select{
   max-width: min-content;
 }
 
+.max-w-\[290px\]{
+  max-width: 290px;
+}
+
+.max-w-\[763px\]{
+  max-width: 763px;
+}
+
+.max-w-\[400px\]{
+  max-width: 400px;
+}
+
+.max-w-\[700px\]{
+  max-width: 700px;
+}
+
+.max-w-\[920px\]{
+  max-width: 920px;
+}
+
 .flex-1{
   flex: 1 1 0%;
 }
@@ -2345,6 +2421,11 @@ select{
   row-gap: 1.5rem;
 }
 
+.gap-x-10{
+  -webkit-column-gap: 2.5rem;
+          column-gap: 2.5rem;
+}
+
 .-space-x-1 > :not([hidden]) ~ :not([hidden]){
   --tw-space-x-reverse: 0;
   margin-right: calc(-0.25rem * var(--tw-space-x-reverse));
@@ -6352,6 +6433,10 @@ select{
   padding-top: 200px;
 }
 
+.pt-7{
+  padding-top: 1.75rem;
+}
+
 .text-left{
   text-align: left;
 }
@@ -6687,6 +6772,10 @@ select{
   font-style: normal;
 }
 
+.leading-\[27px\]{
+  line-height: 27px;
+}
+
 .text-amber-100{
   --tw-text-opacity: 1;
   color: rgb(255 243 212 / var(--tw-text-opacity));
@@ -7339,6 +7428,10 @@ select{
   transition-delay: 300ms;
 }
 
+.delay-200{
+  transition-delay: 200ms;
+}
+
 .duration-100{
   transition-duration: 100ms;
 }
@@ -10705,6 +10798,10 @@ select{
     margin-top: 68px;
   }
 
+  .db-s\:mb-0{
+    margin-bottom: 0px;
+  }
+
   .db-s\:flex{
     display: flex;
   }

package/src/HDS/helpers/Sliders/index.js

@@ -1 +0,0 @@
-export { default as ScrollSlider } from './scrollSlider';

package/src/HDS/helpers/Sliders/scrollSlider.js

@@ -1,134 +0,0 @@
-import React, { useState } from 'react';
-import { VideoCard } from "../../components/Cards/VideoCard";
-import { HomepageCarousel2, CarouselCard } from '../../components/Carousels';
-
-
-const SideCard = () => (
-    <div className='bg-green-500 w-[300px] flex flex-col items-center justify-between rounded-3xl max-h-[338px]'>
-        <div className='w-[300px] flex justify-center'>
-            <img src='https://res.cloudinary.com/dh8fp23nd/image/upload/v1686737531/hasura-design-system/icons/optum_zn0bhw.png' alt='imgb' className='p-5 ' />
-        </div>
-        <div className='w-[300px] flex justify-center'>
-            <img src='https://res.cloudinary.com/dh8fp23nd/image/upload/v1685596743/website%20v3/capabilities-pre-footer_qxqlon.png' alt='imga' className='p-2 w-[194px]' />
-        </div>
-    </div>
-)
-
-const carouselItems = [
-    {
-        name: "John Smith",
-        designation: "CEO",
-        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
-        size: 'w-full'
-    },
-    {
-        name: "Jane Doe",
-        designation: "CTO",
-        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
-        size: 'w-full'
-    },
-    {
-        name: "Bob Johnson",
-        designation: "COO",
-        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
-        size: 'w-full'
-    },
-    {
-        name: "Gourav",
-        designation: "SDE",
-        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
-        size: 'w-full'
-    },
-    {
-        name: "Gourav",
-        designation: "SDE",
-        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
-        size: 'w-full'
-    },
-    {
-        name: "Gourav",
-        designation: "SDE",
-        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
-        size: 'w-full'
-    },
-    {
-        name: "Bob Johnson",
-        designation: "COO",
-        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
-        size: 'w-full'
-    },
-    {
-        name: "Gourav",
-        designation: "SDE",
-        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
-        size: 'w-full'
-    },
-    {
-        name: "Gourav",
-        designation: "SDE",
-        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
-        size: 'w-full'
-    },
-    {
-        name: "Gourav",
-        designation: "SDE",
-        imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
-        size: 'w-full'
-    }
-];
-
-export default function ScrollSlider() {
-    const [isScrollActive, setScrollActive] = useState(false);
-
-    const handleMouseEnter = () => {
-        setScrollActive(true); // Mouse entered, scroll is active
-    };
-
-    const handleMouseLeave = () => {
-        setScrollActive(false); // Mouse left, scroll is inactive
-    };
-    return (
-        // <div>
-
-        //     <div className='absolute z-[1]'>
-        //         <div
-        //             className={`flex flex-row gap-4 w-screen h-screen items-center  justify-center`}
-        //             onMouseEnter={handleMouseEnter}
-        //             onMouseLeave={handleMouseLeave}
-        //         >
-        //             <div className={`${isScrollActive ? 'translate-y-0' : ''}  -translate-y-36 transition-all duration-[1500ms]`}>
-        //                 <SideCard />
-        //             </div>
-        //             <div className='w-[643px] '>
-        //                 <HomepageCarousel
-        //                     cards={carouselItems}
-        //                     component={VideoCard}
-        //                     length={carouselItems.length}
-
-        //                 />
-        //             </div>
-        //             <div className={`${isScrollActive ? '-translate-y-0' : ''} translate-y-36  transition-all duration-[1500ms]`}>
-        //                 <SideCard />
-        //             </div>
-        //         </div>
-        //     </div>
-        //     <div className='absolute z-[1] left-[227px] top-[83px]  '>
-        //         <div className='h-screen items-center flex'>
-        //             <div className='w-[1279px]'>
-
-        //                 <HomepageCarousel
-        //                     cards={carouselItems}
-        //                     component={SideCard}
-        //                     length={carouselItems.length}
-
-        //                 />
-        //             </div>
-        //         </div>
-        //     </div>
-        // </div>
-
-        <div>
-            <HomepageCarousel2 />
-        </div>
-    );
-}