hds-web 1.38.9 → 1.39.1

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

@@ -21,7 +21,7 @@ const updatePGParam = (originalLink, websiteKey) => {
 };
 
 export default function V3Header(props) {
-  // const listSize = props.HEADER_LIST.length;
+  const listSize = props.HEADER_LIST.length;
 
   const [mobileNavOpen, setmobileNavOpen] = useState(false);
 
@@ -29,19 +29,17 @@ export default function V3Header(props) {
 
   const [isDeveloper, setIsDeveloper] = useState(false);
 
-  const [isResources, setIsResources] = useState(false);
-
   const [isCompany, setIsCompany] = useState(false);
 
   const [currentTab, setCurrentTab] = useState("");
 
-  // const [isShown, setIsShown] = useState(false);
+  const [isShown, setIsShown] = useState(false);
 
   const [isArrowActive, setIsArrowActive] = useState(false);
 
   const signUpLink = props.signUpLink
     ? props.signUpLink
-    : "https://console.hasura.io";
+    : "https://cloud.hasura.io/signup?pg=sample-apps&plcmt=header&cta=try-hasura&tech=default";
 
   const logInLink = props.logInLink
     ? props.logInLink
@@ -174,7 +172,6 @@ export default function V3Header(props) {
     <>
       {renderDropdownContainer(headerList, 0)}
       {renderDropdownContainer(headerList, 1)}
-      {renderDropdownContainer(headerList, 2)}
       {
         <a href="/customers">
           <Typography
@@ -189,6 +186,8 @@ export default function V3Header(props) {
           </Typography>
         </a>
       }
+      {renderDropdownContainer(headerList, 3)}
+
       {
         <a href="/pricing">
           <Typography
@@ -227,21 +226,10 @@ export default function V3Header(props) {
               primaryCard={HEADER_LIST[1]["primaryCard"]}
               secondaryCardArr={HEADER_LIST[1]["secondaryCardArr"]}
               tertiaryCard={HEADER_LIST[1]["tertiaryCard"]}
-              flyoutD={HEADER_LIST[1]["flyoutD"]}
-            />
-          </div>
-        )}
-        {isResources && (
-          <div className="product_resources">
-            <V3Dropdown
-              primaryCard={HEADER_LIST[2]["primaryCard"]}
-              secondaryCardArr={HEADER_LIST[2]["secondaryCardArr"]}
-              tertiaryCard={HEADER_LIST[2]["tertiaryCard"]}
-              flyoutD={HEADER_LIST[2]["flyoutD"]}
             />
           </div>
         )}
-        {/* {isCompany && (
+        {isCompany && (
           <div className="product_company">
             <V3Dropdown
               primaryCard={HEADER_LIST[3]["primaryCard"]}
@@ -249,7 +237,7 @@ export default function V3Header(props) {
               tertiaryCard={HEADER_LIST[3]["tertiaryCard"]}
             />
           </div>
-        )} */}
+        )}
       </div>
     </div>
   );
@@ -271,7 +259,6 @@ export default function V3Header(props) {
   function handleMbDropdownClose() {
     setmobileNavOpen(!mobileNavOpen);
     setIsDeveloper(false);
-    setIsResources(false);
     setIsCompany(false);
     setIsProduct(false);
     setCurrentTab("");
@@ -282,7 +269,6 @@ export default function V3Header(props) {
   }
   function handleBackClick() {
     setIsDeveloper(false);
-    setIsResources(false);
     setIsCompany(false);
     setIsProduct(false);
     setCurrentTab("");
@@ -299,9 +285,6 @@ export default function V3Header(props) {
     if (title === "Developer") {
       setIsDeveloper(true);
     }
-    if (title === "Resources") {
-      setIsResources(true);
-    }
     if (title === "Customers") {
       window.location.href = "/customers";
     }
@@ -321,12 +304,10 @@ export default function V3Header(props) {
       setCurrentTab("Product");
     } else if (isDeveloper) {
       setCurrentTab("Developer");
-    } else if (isResources) {
-      setCurrentTab("Resources");
     } else if (isCompany) {
       setCurrentTab("Company");
     }
-  }, [isProduct, isDeveloper, isCompany, isResources]);
+  }, [isProduct, isDeveloper, isCompany]);
 
   // **************************** //
 
@@ -355,7 +336,7 @@ export default function V3Header(props) {
             <div className={"h-full " + (mobileNavOpen ? " hds-hidden" : "")}>
               {!props.hideSearch && <AlgoliaSearch {...props} />}
             </div>
-            {!(isCompany || isDeveloper || isProduct || isResources) && (
+            {!(isCompany || isDeveloper || isProduct) && (
               <motion.div
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
@@ -454,7 +435,7 @@ export default function V3Header(props) {
           >
             <div className="bg-neutral-100 h-[calc(100%-80px)] rounded-2xl overflow-y-scroll scrollbar-hide">
               <div className="pt-6 pb-4 tb:mr-[12px] mr-[30px] min-h-[36px] flex flex-row justify-between items-center sticky top-0 bg-neutral-100 z-50 ">
-                {(isCompany || isDeveloper || isProduct || isResources) && (
+                {(isCompany || isDeveloper || isProduct) && (
                   <div
                     className=" flex flex-row justify-start z-10"
                     onClick={() => handleBackClick()}
@@ -479,7 +460,7 @@ export default function V3Header(props) {
                     {currentTab}
                   </Typography>
                 </motion.div>
-                {(isCompany || isDeveloper || isProduct || isResources) && (
+                {(isCompany || isDeveloper || isProduct) && (
                   <motion.div
                     initial={{ opacity: 0 }}
                     animate={{ opacity: 1 }}
@@ -496,7 +477,7 @@ export default function V3Header(props) {
                 )}
               </div>
               <AnimatePresence mode="wait" exit={false}>
-                {isProduct || isDeveloper || isCompany || isResources ? (
+                {isProduct || isDeveloper || isCompany ? (
                   <motion.div
                     key="hey"
                     exit={{ opacity: 0, y: [0, 300] }}
@@ -506,7 +487,7 @@ export default function V3Header(props) {
                       exit: { duration: 0.3 },
                       opacity: { ease: "easeIn" },
                     }}
-                    when={isProduct || isDeveloper || isCompany || isResources}
+                    when={isProduct || isDeveloper || isCompany}
                     className="flex flex-col justify-between "
                   >
                     <div className="flex flex-col justify-between rounded-2xl h-full">
@@ -650,7 +631,8 @@ V3Header.defaultProps = {
             cta_leftVariantIcon: "zap",
             cta_leftVariantIconColor: "#6C737F",
             cta_text: "Get Started",
-            cta_link: "https://console.hasura.io/",
+            cta_link:
+              "https://cloud.hasura.io/signup?pg=nav&plcmt=product-dropdown&cta=get-started",
           },
         ],
       },
@@ -667,51 +649,44 @@ V3Header.defaultProps = {
             },
             {
               description: "",
-              href: "/graphql/database/mysql",
-              icon: "database01",
-              name: "MySQL",
-              strokeClass: "stroke-blue-500",
-            },
-            {
-              description: "",
-              href: "/graphql/database/elasticsearch",
+              href: "/graphql/database/mongodb",
               icon: "database01",
-              name: "Elasticsearch",
+              name: "MongoDB",
               strokeClass: "stroke-blue-500",
             },
             {
               description: "",
-              href: "/graphql/database/sql-server",
+              href: "/graphql/database/mysql",
               icon: "database01",
-              name: "SQL Server",
+              name: "MySQL",
               strokeClass: "stroke-blue-500",
             },
             {
               description: "",
-              href: "/graphql/database/mongodb",
+              href: "/graphql/database/snowflake",
               icon: "database01",
-              name: "MongoDB",
+              name: "Snowflake",
               strokeClass: "stroke-blue-500",
             },
             {
               description: "",
-              href: "/graphql/database/snowflake",
+              href: "/graphql/database/oracle",
               icon: "database01",
-              name: "Snowflake",
+              name: "Oracle",
               strokeClass: "stroke-blue-500",
             },
             {
               description: "",
-              href: "/graphql/database/clickhouse",
+              href: "/graphql/database/sql-server",
               icon: "database01",
-              name: "ClickHouse",
+              name: "SQL Server",
               strokeClass: "stroke-blue-500",
             },
             {
               description: "",
               href: "/graphql/database",
               icon: "database01",
-              name: "More",
+              name: "See all",
               strokeClass: "stroke-blue-500",
             },
           ],
@@ -719,8 +694,7 @@ V3Header.defaultProps = {
       ],
       flyoutD: {
         link: "https://hasura.io/ddn",
-        cardImg: `https://res.cloudinary.com/dh8fp23nd/image/upload/v1721205269/Frame_2610016_1_jluh5u.png`,
-        cardImgAlt: "Hasura DDN",
+        cardImg: `https://res.cloudinary.com/dh8fp23nd/image/upload/v1716906625/Frame_12754_2_iaixzx.png`,
       },
     },
     {
@@ -730,16 +704,56 @@ V3Header.defaultProps = {
           childArray: [
             {
               description: "",
-              href: "/docs/3.0/index/",
+              href: "/docs/latest/index/",
               icon: "file02",
               name: "Documentation",
               strokeClass: "stroke-neutral-500",
             },
             {
               description: "",
-              href: "/connectors",
+              href: "/hub",
+              icon: "hasura",
+              name: "Hasura Hub",
+              strokeClass: "stroke-neutral-500",
+            },
+            {
+              description: "",
+              href: "/reference-app/",
               icon: "route",
-              name: "Connector Hub",
+              name: "Guides",
+              strokeClass: "stroke-neutral-500",
+            },
+            {
+              description: "",
+              href: "/graphql/",
+              icon: "asterisk02",
+              name: "GraphQL Hub",
+              strokeClass: "stroke-neutral-500",
+            },
+            {
+              description: "",
+              href: "https://cloud.hasura.io/public/graphiql",
+              icon: "codebrowser",
+              name: "GraphiQL",
+              strokeClass: "stroke-neutral-500",
+            },
+            {
+              description: "",
+              href: "/changelog",
+              icon: "gitpullrequest",
+              name: "Changelog",
+              strokeClass: "stroke-neutral-500",
+            },
+          ],
+          label: "BUILD",
+        },
+        {
+          childArray: [
+            {
+              description: "",
+              href: "/blog",
+              icon: "bookopen01",
+              name: "Blog",
               strokeClass: "stroke-neutral-500",
             },
             {
@@ -749,8 +763,22 @@ V3Header.defaultProps = {
               name: "Tutorials",
               strokeClass: "stroke-neutral-500",
             },
+            {
+              description: "",
+              href: "/events",
+              icon: "calendarplus02",
+              name: "Events",
+              strokeClass: "stroke-neutral-500",
+            },
+            {
+              description: "",
+              href: "/sample-apps/",
+              icon: "box",
+              name: "Resources",
+              strokeClass: "stroke-neutral-500",
+            },
           ],
-          label: "BUILD",
+          label: "Learn",
         },
         {
           childArray: [
@@ -786,64 +814,107 @@ V3Header.defaultProps = {
           label: "Connect",
         },
       ],
-      flyoutD: {
-        link: "https://hasura.io/events/community-call/latest",
-        cardImg: `https://res.cloudinary.com/dh8fp23nd/image/upload/v1721210357/cc-blog-july_2_1_k8k22u.png`,
-        cardImgAlt: "Hasura Community Call",
-      },
+      tertiaryCard: [
+        {
+          title: "HasuraCon 2023 is here!",
+
+          title_colorClass: "text-neutral-900",
+          img_url:
+            "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/hascon_211daeb83a.png",
+        },
+        {
+          title: "Top 6 Architecture Trends for API Development",
+
+          title_colorClass: "text-neutral-900",
+          img_url:
+            "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/api_trends_0a035678d8.png",
+        },
+        {
+          title: "Announcing Hasura integration with Snowflake",
+
+          title_colorClass: "text-neutral-900",
+          img_url:
+            "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/snowflake_def20494db.png",
+        },
+      ],
     },
     {
-      title: "Resources",
+      title: "Customers",
+      href: "",
+    },
+
+    {
+      title: "Company",
       secondaryCardArr: [
         {
           childArray: [
             {
               description: "",
-              href: "/blog",
-              icon: "bookopen01",
-              name: "Blogs",
-              strokeClass: "stroke-neutral-500",
-            },
-            {
-              description: "",
-              href: "/events?category=Webinar#wall-section",
-              icon: "videorecorder",
-              name: "Webinars",
+              href: "/about/",
+              icon: "pentool02",
+              name: "Our Story",
               strokeClass: "stroke-neutral-500",
             },
             {
               description: "",
-              href: "/graphql/",
-              icon: "home04",
-              name: "GraphQL Hub",
+              href: "/partners",
+              icon: "intersectcircle",
+              name: "Partners",
               strokeClass: "stroke-neutral-500",
             },
             {
               description: "",
-              href: "/events",
-              icon: "calendarplus02",
-              name: "Events",
-              strokeClass: "stroke-neutral-500",
-            },
-            {
-              description: "",
-              href: "/",
-              icon: "file05",
-              name: "Whitepapers",
-              strokeClass: "stroke-neutral-500",
-            },
-            {
-              description: "",
-              href: "https://supergraph.io/",
-              icon: "beziercurve02",
-              name: "Supergraph Manifesto",
+              href: "/careers/",
+              icon: "hearthand",
+              name: "Work at Hasura",
               strokeClass: "stroke-neutral-500",
             },
+            // {
+            //     description: '',
+            //     href: '/press/',
+            //     icon: 'headingsquare',
+            //     name: 'Newsroom',
+            //     strokeClass: 'stroke-neutral-500'
+            // },
+            // {
+            //     description: '',
+            //     href: '/brand',
+            //     icon: 'star06',
+            //     name: 'Brand',
+            //     strokeClass: 'stroke-neutral-500'
+            // },
           ],
-          label: "RESOURCES",
+          label: "Company",
+        },
+      ],
+      tertiaryCard: [
+        {
+          title: "HasuraCon 2023 is here!",
+
+          title_colorClass: "text-neutral-900",
+          img_url:
+            "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/hascon_211daeb83a.png",
+        },
+        {
+          title: "Top 6 Architecture Trends for API Development",
+
+          title_colorClass: "text-neutral-900",
+          img_url:
+            "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/api_trends_0a035678d8.png",
+        },
+        {
+          title: "Announcing Hasura integration with Snowflake",
+
+          title_colorClass: "text-neutral-900",
+          img_url:
+            "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/snowflake_def20494db.png",
         },
       ],
     },
+    {
+      title: "Pricing",
+      href: "",
+    },
   ],
   headerUrl: "/",
 };

package/src/styles/tailwind.css

@@ -1527,10 +1527,6 @@ select{
   margin-top: 70px;
 }
 
-.ml-10{
-  margin-left: 2.5rem;
-}
-
 .line-clamp-3{
   overflow: hidden;
   display: -webkit-box;
@@ -11160,10 +11156,6 @@ select{
     min-width: 18rem;
   }
 
-  .tb\:min-w-\[200px\]{
-    min-width: 200px;
-  }
-
   .tb\:min-w-\[310px\]{
     min-width: 310px;
   }
@@ -11911,18 +11903,6 @@ select{
 }
 
 @media (min-width: 768px){
-  .md\:ml-10{
-    margin-left: 2.5rem;
-  }
-
-  .md\:ml-16{
-    margin-left: 4rem;
-  }
-
-  .md\:flex-row{
-    flex-direction: row;
-  }
-
   .md\:px-6{
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -12349,10 +12329,6 @@ select{
 }
 
 @media (min-width: 1024px){
-  .lg\:ml-0{
-    margin-left: 0px;
-  }
-
   .lg\:flex{
     display: flex;
   }
@@ -12365,18 +12341,6 @@ select{
     height: auto;
   }
 
-  .lg\:max-w-\[716px\]{
-    max-width: 716px;
-  }
-
-  .lg\:max-w-\[714px\]{
-    max-width: 714px;
-  }
-
-  .lg\:max-w-\[712px\]{
-    max-width: 712px;
-  }
-
   .lg\:grid-cols-2{
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -12408,10 +12372,6 @@ select{
     padding-top: 0.5rem;
   }
 
-  .lg\:pl-0{
-    padding-left: 0px;
-  }
-
   .db-s\:mb-0{
     margin-bottom: 0px;
   }
@@ -12602,14 +12562,6 @@ select{
     max-width: 625px;
   }
 
-  .db\:max-w-\[716px\]{
-    max-width: 716px;
-  }
-
-  .db\:max-w-\[714px\]{
-    max-width: 714px;
-  }
-
   .db\:snap-center{
     scroll-snap-align: center;
   }
@@ -13041,16 +12993,6 @@ select{
   }
 }
 
-@media (min-width: 1536px){
-  .\32xl\:max-w-\[914px\]{
-    max-width: 914px;
-  }
-
-  .\32xl\:max-w-\[916px\]{
-    max-width: 916px;
-  }
-}
-
 .\[\&\>\*\]\:mb-8>*{
   margin-bottom: 2rem;
 }

package/src/HDS/components/Cards/Menu/ResourcesDropdown.js

@@ -1,106 +0,0 @@
-import React from "react";
-import { Icon } from "../../common-components/Icon";
-import { Typography } from "../../../foundation/Typography";
-
-export default function ResourcesDropdown(props) {
-  const { split } = props;
-
-  const cardLayout = (label, childArray) => (
-    <div className=" group h-full">
-      <div className={`w-full  h-full ` + (split ? " " : " rounded-2xl")}>
-        <div className={`w-full py-6 px-4`}>
-          {label ? (
-            <Typography
-              textStyle="h6"
-              className=" uppercase group-hover/split:text-neutral-1000 group-hover:text-neutral-1000 group-hover-transition text-neutral-500 mb-4"
-            >
-              {label}
-            </Typography>
-          ) : (
-            <div className="mb-8"></div>
-          )}
-          <div className={` tb:tb:grid tb:tb:grid-cols-1  tb:min-w-[200px] `}>
-            {childArray &&
-              childArray.map((item) => (
-                <div
-                  key={item.name}
-                  className="relative pb-2 flex rounded-lg items-center"
-                >
-                  <a href={item.href} className="w-full">
-                    <div className="flex group/icon pl-2 py-2 pr-3 hover:pl-[9px] hover:bg-neutral-100  rounded-lg flex-row w-full justify-between items-center">
-                      <div className="flex gap-2 flex-row items-center">
-                        <div className="flex rounded-lg items-center group-hover:bg-white">
-                          {item.icon && (
-                            <Icon
-                              height={
-                                "h-5 w-5 stroke-2 " +
-                                (item.icon === "discord" ||
-                                item.icon === "octoface" ||
-                                item.icon === "meetup"
-                                  ? ""
-                                  : "group-hover/icon:stroke-blue-500 ")
-                              }
-                              variant={item.icon}
-                              strokeClass={item.strokeClass}
-                            />
-                          )}
-                        </div>
-                        <Typography
-                          textStyle="body3c-medium"
-                          className="text-neutral-1000  group-hover/icon:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip"
-                        >
-                          {item.name}
-                        </Typography>
-                      </div>
-                      <div className="flex group-hover/icon:translate-x-1 transform transition-all duration-200 ease-in-out tb-l:-ml-1">
-                        <Icon
-                          height={
-                            "h-4 w-4 stroke-2 invisible group-hover/icon:visible transition-all ease-in-out   "
-                          }
-                          variant={"chevronright"}
-                          strokeClass={"stroke-blue-500"}
-                        />
-                      </div>
-                    </div>
-                  </a>
-                </div>
-              ))}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-
-  return (
-    <>
-      {split ? (
-        <>
-          <div className="hds-hidden tb-l:flex h-full">
-            <div className="rounded-l-2xl">
-              {cardLayout(
-                props.label,
-                props.childArray.slice(
-                  0,
-                  Math.ceil(props.childArray.length / 2)
-                )
-              )}
-            </div>
-            <div className="group/split rounded-r-2xl tb-l:-ml-6">
-              {cardLayout(
-                null,
-                props.childArray.slice(Math.ceil(props.childArray.length / 2))
-              )}
-            </div>
-          </div>
-          <div className="hds-hidden-tbl  h-full rounded-2xl">
-            {cardLayout(props.label, props.childArray)}
-          </div>
-        </>
-      ) : (
-        <div className=" shadow h-full rounded-2xl">
-          {cardLayout(props.label, props.childArray)}
-        </div>
-      )}
-    </>
-  );
-}