hds-web 1.35.3 → 1.35.4

package/package.json

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

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

@@ -1,34 +1,36 @@
-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">
 
@@ -50,65 +52,56 @@ 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,42 +2,50 @@ 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">
+  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>
 
-            <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 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 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>
-    )
-}
+          </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,24 +542,16 @@ V3Header.defaultProps = {
       title: "Product",
       primaryCard: {
         iconVariant: "layersthree01",
-        mainDescription: `Discover Hasura's core capabilities for automating the building, securing, optimizing, and deploying of APIs.`,
-        primaryBtnLabel: "Hasura Data API Platform",
+        mainDescription: `Enable your backend team to deliver an incredible unified API on all your data effortlessly.`,
+        primaryBtnLabel: "Hasura API platform",
         primaryBtnCTA: "/products",
         strokeClass: "stroke-neutral-800",
-        tertiaryBtn: [
+        secondaryBtn: [
           {
             cta_leftVariantIcon: "checksquarebroken",
             cta_leftVariantIconColor: "#6C737F",
             cta_text: "Compare Plans",
-            cta_link: "/pricing",
-          },
-        ],
-        secondaryBtn: [
-          {
-            cta_leftVariantIcon: "zap",
-            cta_leftVariantIconColor: "#6C737F",
-            cta_text: "Deployment Options",
-            cta_link: "/products/deployment",
+            cta_link: "/pricing/v3",
           },
         ],
       },
@@ -568,71 +560,32 @@ V3Header.defaultProps = {
           childArray: [
             {
               description: "",
-              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",
+              href: "/connectors",
+              icon: "checksquare",
+              name: "Connectors",
               strokeClass: "stroke-neutral-500",
             },
-          ],
-          label: "CAPABILITIES",
-        },
-        {
-          childArray: [
             {
               description: "",
               href: "/graphql/database",
               icon: "database01",
-              name: "All Databases",
+              name: "All DBs",
               strokeClass: "stroke-neutral-500",
             },
             {
               description: "",
               href: "/graphql/database?category=planned",
-              icon: "checksquare",
-              name: "Planned Databases",
+              icon: "database01",
+              name: "Planned DBs",
               strokeClass: "stroke-neutral-500",
             },
           ],
-          label: "Data sources",
+          label: "INTEGRATIONS",
         },
       ],
       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:

package/src/styles/tailwind.css

@@ -2859,6 +2859,11 @@ select{
   border-radius: 0.75rem;
 }
 
+.rounded-b-2xl{
+  border-bottom-right-radius: 1rem;
+  border-bottom-left-radius: 1rem;
+}
+
 .rounded-b-3xl{
   border-bottom-right-radius: 1.5rem;
   border-bottom-left-radius: 1.5rem;
@@ -2899,6 +2904,11 @@ select{
   border-bottom-right-radius: 0.75rem;
 }
 
+.rounded-t-2xl{
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+}
+
 .rounded-t-3xl{
   border-top-left-radius: 1.5rem;
   border-top-right-radius: 1.5rem;
@@ -2909,16 +2919,6 @@ select{
   border-top-right-radius: 0.375rem;
 }
 
-.rounded-t-2xl{
-  border-top-left-radius: 1rem;
-  border-top-right-radius: 1rem;
-}
-
-.rounded-b-2xl{
-  border-bottom-right-radius: 1rem;
-  border-bottom-left-radius: 1rem;
-}
-
 .rounded-tl-2xl{
   border-top-left-radius: 1rem;
 }