hds-web 1.0.0 → 1.0.2

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';

package/src/HDS/foundation/ColorPalette/color.js

@@ -479,7 +479,102 @@ const HDSColors = {
     "to-red-500": "to-red-500",
     "to-red-600": "to-red-600",
     "to-red-700": "to-red-700",
-    "to-red-800": "to-red-800"
+    "to-red-800": "to-red-800",
+    "stroke-base-0": "stroke-base-0",
+    "stroke-base-1000": "stroke-base-1000",
+    "stroke-neutral-0": "stroke-neutral-0",
+    "stroke-neutral-50": "stroke-neutral-50",
+    "stroke-neutral-100": "stroke-neutral-100",
+    "stroke-neutral-150": "stroke-neutral-150",
+    "stroke-neutral-200": "stroke-neutral-200",
+    "stroke-neutral-300": "stroke-neutral-300",
+    "stroke-neutral-400": "stroke-neutral-400",
+    "stroke-neutral-500": "stroke-neutral-500",
+    "stroke-neutral-600": "stroke-neutral-600",
+    "stroke-neutral-700": "stroke-neutral-700",
+    "stroke-neutral-800": "stroke-neutral-800",
+    "stroke-neutral-850": "stroke-neutral-850",
+    "stroke-neutral-900": "stroke-neutral-900",
+    "stroke-neutral-950": "stroke-neutral-950",
+    "stroke-neutral-1000": "stroke-neutral-1000",
+    "stroke-blue-100": "stroke-blue-100",
+    "stroke-blue-200": "stroke-blue-200",
+    "stroke-blue-300": "stroke-blue-300",
+    "stroke-blue-400": "stroke-blue-400",
+    "stroke-blue-500": "stroke-blue-500",
+    "stroke-blue-600": "stroke-blue-600",
+    "stroke-blue-700": "stroke-blue-700",
+    "stroke-blue-800": "stroke-blue-800",
+    "stroke-blue-900": "stroke-blue-900",
+    "stroke-purple-100": "stroke-purple-100",
+    "stroke-purple-200": "stroke-purple-200",
+    "stroke-purple-300": "stroke-purple-300",
+    "stroke-purple-400": "stroke-purple-400",
+    "stroke-purple-500": "stroke-purple-500",
+    "stroke-purple-600": "stroke-purple-600",
+    "stroke-purple-700": "stroke-purple-700",
+    "stroke-purple-800": "stroke-purple-800",
+    "stroke-purple-900": "stroke-purple-900",
+    "stroke-cyan-100": "stroke-cyan-100",
+    "stroke-cyan-200": "stroke-cyan-200",
+    "stroke-cyan-300": "stroke-cyan-300",
+    "stroke-cyan-400": "stroke-cyan-400",
+    "stroke-cyan-500": "stroke-cyan-500",
+    "stroke-cyan-600": "stroke-cyan-600",
+    "stroke-cyan-700": "stroke-cyan-700",
+    "stroke-cyan-800": "stroke-cyan-800",
+    "stroke-cyan-900": "stroke-cyan-900",
+    "stroke-green-100": "stroke-green-100",
+    "stroke-green-200": "stroke-green-200",
+    "stroke-green-300": "stroke-green-300",
+    "stroke-green-400": "stroke-green-400",
+    "stroke-green-500": "stroke-green-500",
+    "stroke-green-600": "stroke-green-600",
+    "stroke-green-700": "stroke-green-700",
+    "stroke-green-800": "stroke-green-800",
+    "stroke-green-900": "stroke-green-900",
+    "stroke-pink-100": "stroke-pink-100",
+    "stroke-pink-200": "stroke-pink-200",
+    "stroke-pink-300": "stroke-pink-300",
+    "stroke-pink-400": "stroke-pink-400",
+    "stroke-pink-500": "stroke-pink-500",
+    "stroke-pink-600": "stroke-pink-600",
+    "stroke-pink-700": "stroke-pink-700",
+    "stroke-pink-800": "stroke-pink-800",
+    "stroke-pink-900": "stroke-pink-900",
+    "stroke-amber-100": "stroke-amber-100",
+    "stroke-amber-200": "stroke-amber-200",
+    "stroke-amber-300": "stroke-amber-300",
+    "stroke-amber-400": "stroke-amber-400",
+    "stroke-amber-500": "stroke-amber-500",
+    "stroke-amber-600": "stroke-amber-600",
+    "stroke-amber-700": "stroke-amber-700",
+    "stroke-amber-800": "stroke-amber-800",
+    "stroke-amber-900": "stroke-amber-900",
+    "stroke-yellow-100": "stroke-yellow-100",
+    "stroke-yellow-200": "stroke-yellow-200",
+    "stroke-yellow-300": "stroke-yellow-300",
+    "stroke-yellow-400": "stroke-yellow-400",
+    "stroke-yellow-500": "stroke-yellow-500",
+    "stroke-yellow-600": "stroke-yellow-600",
+    "stroke-yellow-700": "stroke-yellow-700",
+    "stroke-yellow-800": "stroke-yellow-800",
+    "stroke-orange-100": "stroke-orange-100",
+    "stroke-orange-200": "stroke-orange-200",
+    "stroke-orange-300": "stroke-orange-300",
+    "stroke-orange-400": "stroke-orange-400",
+    "stroke-orange-500": "stroke-orange-500",
+    "stroke-orange-600": "stroke-orange-600",
+    "stroke-orange-700": "stroke-orange-700",
+    "stroke-orange-800": "stroke-orange-800",
+    "stroke-red-100": "stroke-red-100",
+    "stroke-red-200": "stroke-red-200",
+    "stroke-red-300": "stroke-red-300",
+    "stroke-red-400": "stroke-red-400",
+    "stroke-red-500": "stroke-red-500",
+    "stroke-red-600": "stroke-red-600",
+    "stroke-red-700": "stroke-red-700",
+    "stroke-red-800": "stroke-red-800"
 };
 
 export default function HDSColor(color = 'bg-blue-600') {

package/src/HDS/index.js

@@ -1,3 +1,4 @@
 export * from './foundation';
 export * from './helpers';
-export * from './components';
+export * from './components';
+export * from './modules';

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

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

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

@@ -0,0 +1,132 @@
+import React from "react";
+import { Typography } from "../../foundation/Typography";
+import { HDSColor } from "../../foundation/ColorPalette";
+import { HDSButton } from '../../components/Buttons';
+import { Icon } from '../../components/common-components/Icon';
+
+export default function TextCard(props) {
+  const titleColor = HDSColor(props.title_color);
+  console.log(props.descriptions);
+  return (
+    <>
+      {
+        props.feature_cards_links && (<Typography textStyle="h3" as="h3" className={`${titleColor} pb-8 tb-l:w-1/2`}>{props.title}</Typography>)
+      }
+      <div className={'grid grid-cols-1 tb:grid-cols-2 gap-10' + ((props.feature_cards_links) ? ' tb:gap-0 tb-l:gap-0' : ' tb:gap-16 tb-l:gap-36')}>
+        <div>
+          {
+            !props.feature_cards_links && (<Typography textStyle="h3" as="h3" className={`${titleColor} pb-6`}>{props.title}</Typography>)
+          }
+          {
+            props.descriptions && props.descriptions.map((desc, i) => (
+              <Typography key={i} textStyle="body1" className="pb-6">{desc.description}</Typography>
+            ))
+          }
+          {
+            props.descriptions_list && (
+              <div className="pb-6">
+              {
+                props.descriptions_list && props.descriptions_list.map((descList, j) => {
+                  const iconBgColor = HDSColor(descList.icon_bg_color);
+                  const iconColor = HDSColor(descList.icon_color);
+                  return (
+                    <div className='flex items-start pb-4 last:pb-0' key={j}>
+                      <div className={`${iconBgColor} w-6 h-6 rounded-full mr-2 flex items-center justify-center`}>
+                        <Icon
+                          height={`h-3 w-3 stroke-[1.5px]` }
+                          variant={descList.icon_name}
+                          strokeColor={iconColor}
+                        />
+                      </div>
+                      <Typography textStyle='body1' className='text-neutral-1000'>{descList.description}</Typography>
+                    </div>
+                  )
+                })
+              }
+              </div>
+            )
+          }
+          {
+            props.feature_cards_links && (
+              <div className='border border-neutral-150 rounded-2xl tb:rounded-e-none'>
+                {
+                  props.feature_cards_links.map((list, i) => {
+                    const currentStrokeColor = HDSColor(list.icon_color)
+                    return (
+                      <div className='border-b border-b-neutral-150 last:border-b-0'>
+                        <div className='m-2 p-6 rounded-lg hover:bg-neutral-100' key={i}>
+                          <div className='flex items-center pb-4'>
+                            <Icon
+                              height={`w-6 h-6 mr-2 stroke-[1.5px]` }
+                              variant={list.icon_name}
+                              strokeColor={currentStrokeColor}
+                            />
+                            <Typography textStyle='h5' as='h5' className='text-neutral-1000'>{list.title}</Typography>
+                          </div>
+                          {list.description && <Typography textStyle='body3' className='pb-4 text-neutral-1000'>{list.description}</Typography>}
+                          {
+                            list.descriptions_list && list.descriptions_list.map((descList, j) => {
+                              const iconBgColor = HDSColor(descList.icon_bg_color);
+                              const iconColor = HDSColor(descList.icon_color);
+                              return (
+                                <div className='flex items-start pb-4 last:pb-0' key={j}>
+                                  <div className={`${iconBgColor} w-5 h-5 rounded-full mr-2 flex items-center justify-center`}>
+                                    <Icon
+                                      height={`h-3 w-3 stroke-[1.5px]` }
+                                      variant={descList.icon_name}
+                                      strokeColor={iconColor}
+                                    />
+                                  </div>
+                                  <Typography textStyle='body3' className='text-neutral-1000'>{descList.description}</Typography>
+                                </div>
+                              )
+                            })
+                          }
+                          {
+                            props.button && (
+                              <HDSButton
+                                label={props.button.cta_text}
+                                type='primaryLink'
+                                leftIconVariant='none'
+                                rightIconVariant='none'
+                                state='default'
+                                size='md'
+                                rightAnimatedArrow={true}
+                                rightAnimatedArrowColor='#3970FD'
+                              />
+                            )
+                          }
+                        </div>
+                      </div>
+                    )
+                  })
+                }
+              </div>
+            )
+          }
+          {
+            props.button && (
+              <HDSButton
+                label={props.button.cta_text}
+                type='secondary'
+                leftIconVariant='none'
+                rightIconVariant='none'
+                state='default'
+                size='md'
+                rightAnimatedArrow={true}
+                rightAnimatedArrowColor='#3970FD'
+            />
+            )
+          }
+        </div>
+        <div>
+          {
+            props.img_url && (
+              <img src={props.img_url} alt={props.title} />
+            )
+          }
+        </div>
+      </div>
+    </>
+  )
+}

package/src/HDS/modules/index.js

@@ -0,0 +1 @@
+export * from './TextCard';

package/src/index.css

@@ -3,6 +3,160 @@
 @tailwind utilities;
 /* Typography classes */
 
+.card-animation-wrapper {
+    position: relative;
+  }
+  
+  .card-animation-wrapper .feature-card {
+    transition: all;
+  }
+  
+  .card-animation-wrapper .feature-card:first-child {
+    animation: card1 15s infinite;
+  }
+  
+  .card-animation-wrapper .feature-card:nth-child(2) {
+    animation: card2 15s infinite;
+  }
+  
+  .card-animation-wrapper .feature-card:nth-child(3) {
+    animation: card3 15s infinite;
+  }
+  @keyframes card1 {
+    0%   {
+      transform: translate(0, 0);
+      z-index: 3;
+    }
+    0.1%,6.65%   {
+      z-index: 3;
+    }
+    6.66%, 26.64%  {
+      transform: translate(4rem, 4rem);
+      z-index: 2;
+    }
+    33.3%, 59.94%  {
+      transform: translate(2rem, 2rem);
+      z-index: 1;
+    }
+    66.6%, 100% {
+      transform: translate(0, 0);
+      z-index: 0;
+    }
+  }
+
+  @media (max-width: 600px) {
+  @keyframes card1 {
+    0%   {
+      transform: translate(0, 0);
+      z-index: 3;
+    }
+    0.1%,6.65%   {
+      z-index: 3;
+    }
+    6.66%, 26.64%  {
+      transform: translate(3rem, 3rem);
+      z-index: 2;
+    }
+    33.3%, 59.94%  {
+      transform: translate(1.5rem, 1.5rem);
+      z-index: 1;
+    }
+    66.6%, 100% {
+      transform: translate(0, 0);
+      z-index: 0;
+    }
+  }
+}
+  @keyframes card2 {
+    0%   {
+      transform: translate(2rem, 2rem);
+      z-index: 1;
+    }
+    6.66%, 26.64%  {
+      transform: translate(0px, 0px);
+      z-index: 0;
+    }
+    26.65%,33.29%   {
+      z-index: 2;
+    }
+    33.3%, 59.94%  {
+      transform: translate(4rem, 4rem);
+      z-index: 2;
+    }
+    66.6%, 100% {
+      transform: translate(2rem, 2rem);
+      z-index: 1;
+    }
+  }
+
+  @media (max-width: 600px) {
+  @keyframes card2 {
+    0%   {
+      transform: translate(1.5rem, 1.5rem);
+      z-index: 1;
+    }
+    6.66%, 26.64%  {
+      transform: translate(0px, 0px);
+      z-index: 0;
+    }
+    26.65%,33.29%   {
+      z-index: 2;
+    }
+    33.3%, 59.94%  {
+      transform: translate(3rem, 3rem);
+      z-index: 2;
+    }
+    66.6%, 100% {
+      transform: translate(1.5rem, 1.5rem);
+      z-index: 1;
+    }
+  }
+}
+  @keyframes card3 {
+    0%   {
+      transform: translate(4rem, 4rem);
+      z-index: 2;
+    }
+    6.66%, 26.64%  {
+      transform: translate(2rem, 2rem);
+      z-index: 1;
+    }
+    33.3%, 59.94%  {
+      transform: translate(0px, 0px);
+      z-index: 0;
+    }
+    59.95%,66.5%   {
+      z-index: 2;
+    }
+    66.6%, 100% {
+      transform: translate(4rem, 4rem);
+      z-index: 2;
+    }
+  }
+  @media (max-width: 600px) {
+  @keyframes card3 {
+    0%   {
+      transform: translate(3rem, 3rem);
+      z-index: 2;
+    }
+    6.66%, 26.64%  {
+      transform: translate(1.5rem, 1.5rem);
+      z-index: 1;
+    }
+    33.3%, 59.94%  {
+      transform: translate(0px, 0px);
+      z-index: 0;
+    }
+    59.95%,66.5%   {
+      z-index: 2;
+    }
+    66.6%, 100% {
+      transform: translate(3rem, 3rem);
+      z-index: 2;
+    }
+  }
+}
+
 .scrollbar-hide::-webkit-scrollbar {
     width: 0;
     height: 0;