hds-web 1.33.2 → 1.33.3

package/src/HDS/components/common-components/Icon/index.js

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

package/src/HDS/components/common-components/index.js

@@ -0,0 +1,2 @@
+export * from './Card';
+export * from './Icon';

package/src/HDS/components/index.js

@@ -0,0 +1,17 @@
+export * from './Avatars';
+export * from './BadgesCaption';
+export * from './Banners';
+export * from './Breadcrumbs';
+export * from './Buttons';
+export * from './Cards';
+export * from './Checkbox';
+export * from './Headers';
+export * from './common-components';
+export * from './InputFields';
+export * from './Tabs';
+export * from './Tooltip';
+export * from './Hero';
+export * from './Tables';
+export * from './Carousels';
+export * from './Pre-footers';
+export * from './Footers';

package/src/HDS/foundation/Animations/featureCard.js

@@ -0,0 +1,77 @@
+import React from "react";
+import { useRef, useEffect } from "react";
+import { Typography } from "../Typography";
+import { useState } from "react";
+import PropTypes from 'prop-types';
+
+export default function FeatureCard(props) {
+  const [cardHeight, setCardHeight] = useState('auto');
+  const wrapperRef = useRef(null);
+
+  useEffect(() => {
+    if (wrapperRef.current) {
+    // Calculate the max height among all cards
+    const cards = wrapperRef.current.querySelectorAll(".feature-card");
+    if (!cards) return;
+    const heights = Array.from(cards).map((card) => card.clientHeight);
+    const maxHeight = Math.max(...heights);
+
+    // Set the max height as a CSS variable
+    setCardHeight(`${maxHeight}px`);
+    }
+  }, [props.featureCards]);
+
+  return (
+    <div ref={wrapperRef}  className="relative card-animation-wrapper   max-h-[26.25] max-w-[15rem] tb:max-w-[25rem] tb:max-h-[25.25rem]">
+      {props.featureCards.map((feature, index) => (
+        <div
+          key={index}
+          style={{ height: cardHeight }} 
+          className={
+            "feature-card max-w-[18rem] tb:max-w-[21rem] rounded-3xl absolute top-0 left-0 " +
+            (feature.card_bg_color || "")
+          }
+        >
+          <div className="flex justify-center px-6 pt-6 tb:px-8 tb:pt-8  ">
+            <img src={feature.img_url} className='rounded-2xl tb:max-w-[17rem]' alt={feature.title} />
+          </div>
+          <div className={`flex flex-col px-6 pb-6 mt-6 tb:mt-8 tb:px-8 tb:pb-8`}>
+            <Typography
+              textStyle="h5"
+              as="h5"
+              className="text-neutral-0"
+            >
+              {feature.title}
+            </Typography>
+            <Typography textStyle="body1c" className="text-neutral-0 mt-1">
+              {feature.description}
+            </Typography>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+FeatureCard.defaultProps ={
+  featureCards : [
+    {
+      img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683015500/hasura-con-2023/engage_clgotb.png',
+      title: 'Feature 1',
+      description: 'With hands-on workshops and learning about new tools, tips and tricks from real-life use cases,  grow your skill set at HasuraCon.',
+      card_bg_color: 'bg-blue-500',
+    },
+    {
+      img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683015500/hasura-con-2023/engage_clgotb.png',
+      title: 'Feature 2',
+      description: 'With hands-on workshops ',
+      card_bg_color: 'bg-red-500',
+    },
+    {
+      img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683015500/hasura-con-2023/engage_clgotb.png',
+      title: 'Feature 3',
+      description: 'With hands-on workshops and learning about new tools, tips and tricks from real-life use cases,  grow your skill set at HasuraCon.',
+      card_bg_color: 'bg-green-500',
+    },
+  ]
+}

package/src/HDS/foundation/Animations/index.js

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