hds-web 1.35.4 → 1.35.5

package/package.json

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

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

@@ -1,36 +1,34 @@
-import React from "react";
-import { HDSColor } from "../../../foundation/ColorPalette";
-import { FlyoutB, FlyoutA, FlyoutC, FlyoutD } from "../Menu";
+import React from "react"
+import { HDSColor } from "../../../foundation/ColorPalette"
+import { FlyoutB, FlyoutA, FlyoutC, FlyoutD } from '../Menu';
 
 export default function DropdownA(props) {
   return (
     <div>
-      <div className="tb-l:flex mb-2 tb-l:mb-0 flex w-full tb-l:bg-neutral-150 flex-col tb-l:flex-row max-w-7xl tb-l:gap-2 rounded-2xl ">
-        {props.primaryCard && (
+
+      <div className='tb-l:flex mb-2 tb-l:mb-0 flex w-full tb-l:bg-neutral-150 flex-col tb-l:flex-row max-w-7xl tb-l:gap-2 rounded-2xl '>
+
+        {props.primaryCard &&
           <div className="">
-            <div className=" bg-neutral-0 rounded-2xl h-full w-full min-w-[250px]">
-              <FlyoutB {...props.primaryCard} />
+            <div className=' bg-neutral-0 rounded-2xl h-full w-full min-w-[250px]'>
+              <FlyoutB
+                {...props.primaryCard}
+              />
             </div>
+
           </div>
-        )}
+        }
         <div className="tb-l:flex-row tb-l:flex mt-2 flex flex-col gap-2 tb-l:mt-0">
-          {props.secondaryCardArr &&
-            props.secondaryCardArr.map((item, index) => (
-              <div
-                key={index}
-                className={
-                  "rounded-2xl " + item.card_bg
-                    ? "bg-neutral-0 rounded-2xl"
-                    : HDSColor(item.card_bg)
-                }
-              >
-                <FlyoutA
-                  label={item.label}
-                  childArray={item.childArray}
-                  split={item.split}
-                />
-              </div>
-            ))}
+          {props.secondaryCardArr && props.secondaryCardArr.map((item, index) => (
+
+            <div key={index} className={'rounded-2xl ' + (item.card_bg) ? 'bg-neutral-0 rounded-2xl' : (HDSColor(item.card_bg))}>
+              <FlyoutA
+                label={item.label}
+                childArray={item.childArray}
+                split={item.split}
+              />
+            </div>
+          ))}
         </div>
         {/* {props.tertiaryCard && <div className="mt-2 pl-2 tb:mt-0">
 
@@ -52,56 +50,65 @@ export default function DropdownA(props) {
           </div>
         </div>
         } */}
-        {props.flyoutD && (
-          <>
-            <div className=" bg-neutral-0 shadow rounded-2xl w-full tb-l:w-[170px]  tb-xl:w-[223px] px-6 py-6 mt-2  tb-l:mt-0">
-              <div>
-                <FlyoutD {...props.flyoutD} />
+        {props.flyoutD &&
+        <>
+          <div className=' bg-neutral-0 shadow rounded-2xl w-full tb-l:w-[170px]  tb-xl:w-[223px] px-6 py-6 mt-2  tb-l:mt-0'>
+            <div>
+
+            <FlyoutD
+              {...props.flyoutD}
+              />
               </div>
-            </div>
-          </>
-        )}
+          </div>
+        </>
+
+        }
+
+
       </div>
     </div>
-  );
+  )
 }
 
 DropdownA.defaultProps = {
-  secondaryCardArr: [
-    {
-      childArray: [
-        {
-          description: "",
-          href: "#",
-          icon: "cube01",
-          name: "Analytics",
-        },
-        {
-          description: "",
-          href: "#",
-          icon: "cube01",
-          name: "Engagement",
-        },
-        {
-          description: "",
-          href: "#",
-          icon: "cube01",
-          name: "Security",
-        },
-        {
-          description: "",
-          href: "#",
-          icon: "cube01",
-          name: "Security",
-        },
-        {
-          description: "",
-          href: "#",
-          icon: "cube01",
-          name: "Security",
-        },
-      ],
-      label: "Label1",
-    },
-  ],
-};
+
+
+  secondaryCardArr: [{
+    childArray: [
+      {
+        description: '',
+        href: '#',
+        icon: 'cube01',
+        name: 'Analytics'
+      },
+      {
+        description: '',
+        href: '#',
+        icon: 'cube01',
+        name: 'Engagement'
+      },
+      {
+        description: '',
+        href: '#',
+        icon: 'cube01',
+        name: 'Security'
+      },
+      {
+        description: '',
+        href: '#',
+        icon: 'cube01',
+        name: 'Security'
+      },
+      {
+        description: '',
+        href: '#',
+        icon: 'cube01',
+        name: 'Security'
+      },
+    ],
+    label: "Label1"
+  },
+
+
+  ]
+}

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

@@ -2,50 +2,42 @@ import React from "react";
 import { Typography } from "../../../foundation/Typography";
 import { Icon } from "../../common-components";
 export default function FlyoutD(props) {
-  return (
-    <a
-      href={props.link}
-      className="flex flex-col gap-4 tb-l:gap-0 tb-l:flex-col w-full h-full justify-between group/icon"
-    >
-      {props.IconVariant && (
-        <div className="w-full h-full tb-l:pb-6">
-          <div className=" p-2.5 rounded-2xl w-14 h-14 tb-l:w-full tb-xl:w-[175px] tb-l:h-[124px] bg-neutral-150 items-center justify-center transition-all duration-300 flex group-hover/icon:bg-blue-200">
-            <Icon
-              height=" tb-l:h-12 tb-l:w-12 h-6 w-6"
-              variant={props.IconVariant}
-              className=" stroke-neutral-800 group-hover/icon:stroke-blue-600 cursor-pointer transition-all duration-300"
-            />
-          </div>
-        </div>
-      )}
-      <div className="flex flex-col gap-1 w-full h-full">
-        {props.btnLabel && (
-          <div className="flex items-center">
-            <Typography
-              textStyle="body3c-medium"
-              className="text-neutral-900 whitespace-nowrap group-hover/icon:text-blue-600 transition-all duration-300 "
-            >
-              {props.btnLabel}
-            </Typography>
+    return (
+        <a href={props.link} className="flex flex-col gap-4 tb-l:gap-0 tb-l:flex-col w-full h-full justify-between group/icon">
+            {props.IconVariant && 
+            <div className="w-full h-full tb-l:pb-6">
 
-            <div className="flex group-hover/icon:translate-x-1 transform transition-all duration-200 ease-in-out invisible group-hover/icon:visible ">
-              <Icon
-                height={"h-4 w-4 stroke-2 transition-all ease-in-out   "}
-                variant={"chevronright"}
-                strokeClass={"stroke-blue-500"}
-              />
+            <div
+                className=" p-2.5 rounded-2xl w-14 h-14 tb-l:w-full tb-xl:w-[175px] tb-l:h-[124px] bg-neutral-150 items-center justify-center transition-all duration-300 flex group-hover/icon:bg-blue-200"
+                >
+                <Icon
+                    height=' tb-l:h-12 tb-l:w-12 h-6 w-6'
+                    variant={props.IconVariant}
+                    className=' stroke-neutral-800 group-hover/icon:stroke-blue-600 cursor-pointer transition-all duration-300'
+                    />
+                    </div>
             </div>
-          </div>
-        )}
-        {props.description && (
-          <Typography
-            textStyle="body3c"
-            className="text-neutral-600 line-clamp-5"
-          >
-            {props.description}
-          </Typography>
-        )}
-      </div>
-    </a>
-  );
-}
+            }
+            <div className="flex flex-col gap-1 w-full h-full">
+                {props.btnLabel && 
+                <div className="flex items-center">
+                    <Typography textStyle='body3c-medium' className='text-neutral-900 whitespace-nowrap group-hover/icon:text-blue-600 transition-all duration-300 '>
+                        {props.btnLabel}
+                    </Typography>
+
+                        <div className="flex group-hover/icon:translate-x-1 transform transition-all duration-200 ease-in-out invisible group-hover/icon:visible ">
+                        <Icon
+                            height={'h-4 w-4 stroke-2 transition-all ease-in-out   '}
+                            variant={'chevronright'}
+                            strokeClass={'stroke-blue-500'}
+                        />
+                    </div>
+                </div>
+                }
+                {props.description && <Typography textStyle='body3c' className='text-neutral-600 line-clamp-5'>
+                    {props.description}
+                </Typography>}
+            </div>
+        </a>
+    )
+}

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

@@ -542,16 +542,24 @@ V3Header.defaultProps = {
       title: "Product",
       primaryCard: {
         iconVariant: "layersthree01",
-        mainDescription: `Enable your backend team to deliver an incredible unified API on all your data effortlessly.`,
-        primaryBtnLabel: "Hasura API platform",
+        mainDescription: `Discover Hasura's core capabilities for automating the building, securing, optimizing, and deploying of APIs.`,
+        primaryBtnLabel: "Hasura Data API Platform",
         primaryBtnCTA: "/products",
         strokeClass: "stroke-neutral-800",
-        secondaryBtn: [
+        tertiaryBtn: [
           {
             cta_leftVariantIcon: "checksquarebroken",
             cta_leftVariantIconColor: "#6C737F",
             cta_text: "Compare Plans",
-            cta_link: "/pricing/v3",
+            cta_link: "/pricing",
+          },
+        ],
+        secondaryBtn: [
+          {
+            cta_leftVariantIcon: "zap",
+            cta_leftVariantIconColor: "#6C737F",
+            cta_text: "Deployment Options",
+            cta_link: "/products/deployment",
           },
         ],
       },
@@ -560,32 +568,71 @@ V3Header.defaultProps = {
           childArray: [
             {
               description: "",
-              href: "/connectors",
-              icon: "checksquare",
-              name: "Connectors",
+              href: "/products/instant-api",
+              icon: "lightning01",
+              name: "Instant API",
               strokeClass: "stroke-neutral-500",
             },
+            {
+              description: "",
+              href: "/products/authorization",
+              icon: "eye",
+              name: "Authorization",
+              strokeClass: "stroke-neutral-500",
+            },
+            {
+              description: "",
+              href: "/products/performance",
+              icon: "speedometer03",
+              name: "Performance",
+              strokeClass: "stroke-neutral-500",
+            },
+            {
+              description: "",
+              href: "/products/federation",
+              icon: "data",
+              name: "Federation",
+              strokeClass: "stroke-neutral-500",
+            },
+            {
+              description: "",
+              href: "/products/api-security",
+              icon: "shieldtick",
+              name: "API Security",
+              strokeClass: "stroke-neutral-500",
+            },
+            {
+              description: "",
+              href: "/products/observability",
+              icon: "piechart01",
+              name: "Observability",
+              strokeClass: "stroke-neutral-500",
+            },
+          ],
+          label: "CAPABILITIES",
+        },
+        {
+          childArray: [
             {
               description: "",
               href: "/graphql/database",
               icon: "database01",
-              name: "All DBs",
+              name: "All Databases",
               strokeClass: "stroke-neutral-500",
             },
             {
               description: "",
               href: "/graphql/database?category=planned",
-              icon: "database01",
-              name: "Planned DBs",
+              icon: "checksquare",
+              name: "Planned Databases",
               strokeClass: "stroke-neutral-500",
             },
           ],
-          label: "INTEGRATIONS",
+          label: "Data sources",
         },
       ],
       flyoutD: {
         link: "https://hasura.io/ai",
-        cardImg: `https://res.cloudinary.com/dh8fp23nd/image/upload/v1711965728/ai-img_bhy2bz.png`,
         IconVariant: "aibot",
         btnLabel: "AI with Hasura",
         description: