hds-web 1.33.2 → 1.33.3

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

@@ -0,0 +1,251 @@
+import React, { Fragment, useState } from "react";
+import { Typography } from "../../foundation/Typography";
+import { HDSColor } from "../../foundation/ColorPalette";
+import { HDSButton } from '../../components/Buttons';
+import { Icon } from '../../components/common-components/Icon';
+import ReactMarkdown from "react-markdown";
+
+export default function TextCardB(props) {
+    const titleColor = HDSColor(props.title_color);
+    const subtitleColorClass = HDSColor(props.sub_text_color)
+    const currentImgActive = (props.feature_cards_links && props.feature_cards_links[0]?.title) ? props.feature_cards_links[0].title : null;
+    const [imgActive, setImgActive] = useState(currentImgActive);
+    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-l: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="body1c-bold" className={`${HDSColor(titleColor)} pb-6`}>{props.title}</Typography>)
+                    }
+                    {
+                        !props.feature_cards_links && props.sub_title && (<Typography textStyle="sub1" className={`${(subtitleColorClass)} pb-2 -mt-4`}>{props.sub_title}</Typography>)
+                    }
+                    {
+                        props.descriptions && props.descriptions.map((desc, i) => (
+                            <Typography
+                                key={i}
+                                textStyle="body1"
+                                className="pb-6 pr-8  [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600">
+                                <ReactMarkdown>
+                                    {desc.description}
+                                </ReactMarkdown>
+                            </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 min-w-[24px] min-h-[24px] rounded-full mr-2 flex items-center justify-center`}>
+                                                    <Icon
+                                                        height={`h-3 w-3 stroke-[1.5px]`}
+                                                        variant={descList.icon_name}
+                                                        strokeClass={iconColor}
+                                                    />
+                                                </div>
+                                                <Typography textStyle='body1' className='text-neutral-1000'>{descList.description}</Typography>
+                                            </div>
+                                        )
+                                    })
+
+                                }
+                            </div>
+                        )
+                    }
+                    {
+                        props.feature_cards_links && (
+                            <div className='tb:border border-neutral-150 rounded-2xl tb-l:rounded-e-none'>
+                                {
+                                    props.feature_cards_links.map((list, i) => {
+                                        const currentStrokeColor = HDSColor(list.icon_color)
+                                        const imgBgColor = HDSColor(list.tab_img_bg_class)
+                                        return (
+                                            <div key={i} className='border-b border-b-neutral-150 last:border-b-0 cursor-pointer' onClick={() => setImgActive(list.title)}>
+                                                <div className={'m-2 p-0 tb:p-6 rounded-lg transition ease-in duration-200 hover:bg-neutral-50' + ((imgActive === list.title) ? " bg-neutral-150" : "")} key={i}>
+                                                    <div className='flex items-center pb-4'>
+                                                        <Icon
+                                                            height={`w-6 h-6 mr-2 stroke-[1.5px]`}
+                                                            variant={list.icon_name}
+                                                            strokeClass={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 min-w-[20px] min-h-[20px] rounded-full mr-2 flex items-center justify-center`}>
+                                                                        <Icon
+                                                                            height={`h-3 w-3 stroke-[1.5px]`}
+                                                                            variant={descList.icon_name}
+                                                                            strokeClass={iconColor}
+                                                                        />
+                                                                    </div>
+                                                                    <Typography textStyle='body3c' className='text-neutral-1000'>{descList.description}</Typography>
+                                                                </div>
+                                                            )
+                                                        })
+                                                    }
+                                                    {
+                                                        list.cta_text && list.cta_link && (
+                                                            <a href={list.cta_link} className="flex">
+                                                                <HDSButton
+                                                                    label={list.cta_text}
+                                                                    type='secondaryLink'
+                                                                    leftIconVariant='none'
+                                                                    rightIconVariant='none'
+                                                                    state='default'
+                                                                    size='md'
+                                                                    rightAnimatedArrow={true}
+                                                                    rightAnimatedArrowColor='#3970FD'
+                                                                    btnTextColorClass="text-blue-500"
+                                                                    animatedHoverStroke='group-hover:stroke-blue-600'
+                                                                />
+                                                            </a>
+                                                        )
+                                                    }
+                                                    {
+                                                        list.tab_img_url && (
+                                                            <div className={`${imgBgColor} tb-l:hidden p-12 rounded-2xl mt-8`}>
+                                                                <img src={list.tab_img_url} alt={list.title} loading="lazy" />
+                                                            </div>
+                                                        )
+                                                    }
+
+                                                </div>
+                                            </div>
+                                        )
+                                    })
+                                }
+                            </div>
+                        )
+                    }
+
+                    {props.button &&
+                        <div className="flex gap-6 items-center">
+                            {props.button.map((btn, index) => (
+                                <a href={btn.cta_link} key={index} className="flex ">
+                                    <HDSButton
+                                        label={btn.cta_text}
+                                        type={btn.cta_type || 'secondary'}
+                                        leftIconVariant='none'
+                                        rightIconVariant='none'
+                                        state='default'
+                                        size='md'
+                                        rightAnimatedArrow={true}
+                                        rightAnimatedArrowColor={btn.rightAnimatedArrowColor || '#3970FD'}
+                                        btnBgColorClass={btn.btnBg}
+                                        btnTextHoverClass={btn.btnTextColorClass}
+                                        animatedHoverStroke={btn.animatedHoverStroke}
+                                        btnTextColorClass={btn.btnTextColorClass}
+                                    />
+                                </a>))
+                            }
+                        </div>
+                    }
+                </div>
+                {
+                    props.feature_cards_links ? (
+                        <>
+                            {
+                                props.feature_cards_links.map((img, i) => {
+                                    const imgBgColor = HDSColor(img.tab_img_bg_class)
+                                    return (
+                                        <Fragment key={i}>
+                                            {
+                                                imgActive === img.title && (
+                                                    <div className={`${imgBgColor} hidden h-full p-12 tb-l:flex items-center justify-center rounded-2xl db:rounded-3xl tb-l:rounded-s-none`}>
+                                                        {
+                                                            img.tab_video_url ? (
+                                                                <video
+                                                                    loading="lazy"
+                                                                    controls={false}
+                                                                    autoPlay
+                                                                    loop
+                                                                    muted
+                                                                    poster={img.tab_video_poster}
+                                                                    className=""
+                                                                >
+                                                                    <source
+                                                                        src={img.tab_video_url}
+                                                                        type="video/mp4"
+                                                                    />
+                                                                </video>
+                                                            ) : (
+                                                                <img src={img.tab_img_url} alt={img.title} loading="lazy" />
+                                                            )
+                                                        }
+                                                    </div>
+                                                )
+                                            }
+                                        </Fragment>
+                                    )
+                                })
+                            }
+                        </>
+                    ) : (
+                        <>
+                            {
+                                props.iframe_url || props.video_url ? (
+                                    <div>
+                                        {
+                                            props.iframe_url ? (
+                                                <div className="relative pb-[56.2%]">
+                                                    <iframe
+                                                        loading="lazy"
+                                                        title={props.title}
+                                                        src={props.iframe_url}
+                                                        frameBorder="0"
+                                                        allowFullScreen
+                                                        className="absolute w-full h-full rounded-2xl db:rounded-3xl"
+                                                    ></iframe>
+                                                </div>
+                                            ) : (
+                                                <video
+                                                    loading="lazy"
+                                                    controls={false}
+                                                    autoPlay
+                                                    loop
+                                                    muted
+                                                    poster={props.video_poster}
+                                                    className="rounded-2xl db:rounded-3xl"
+                                                >
+                                                    <source
+                                                        src={props.video_url}
+                                                        type="video/mp4"
+                                                    />
+                                                </video>
+                                            )
+                                        }
+                                    </div>
+                                ) : (
+                                    <>
+                                        {props.img_url && (
+                                            <div className={`${HDSColor(props.img_bg_class)} px-5 py-10 flex items-center justify-center db:p-8 rounded-2xl db:rounded-3xl`}>
+                                                <img className='rounded-2xl db:rounded-3xl inline-block' src={props.img_url} alt={props.title} loading="lazy" />
+                                            </div>
+                                        )}
+                                    </>
+                                )
+                            }
+
+                        </>
+                    )
+                }
+            </div>
+
+
+        </>
+    )
+}

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

@@ -0,0 +1,76 @@
+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 TextIconCard(props) {
+  return (
+    <div className="tb-m:flex gap-14 gap-y-14  gap-x-14 tb:gap-12 db-s:gap-20 db:gap-24">
+      <div className="pb-10 tb-m:pb-0 db-s:max-w-[524px] tb-m:w-1/2 w-full flex flex-col justify-between">
+        <div>
+          {
+            props.tagline && (
+              <Typography textStyle="h6" as="h6" className="pb-2 uppercase text-blue-400">{props.tagline}</Typography>
+            )
+          }
+          {
+            props.title && (
+              <Typography textStyle="h3" as="h3" className="pb-2 text-neutral-1000">{props.title}</Typography>
+            )
+          }
+          {
+            props.description && (
+              <Typography textStyle="sub2" className="pb-6 text-neutral-600">{props.description}</Typography>
+            )
+          }
+        </div>
+        <div>
+          {
+            props.imgUrl && (
+              <div className="pb-4 pt-2">
+                <img className="max-w-[210px]" src={props.imgUrl} alt={((props.title) ? props.title : "Illu")} />
+            </div>
+            )
+          }
+          {props.button &&
+            <a href={props.button.cta_link} className="inline-flex " download target="_blank">
+              <HDSButton
+                label={props.button.cta_text}
+                type={props.button.cta_type || 'secondary'}
+                leftIconVariant='none'
+                rightIconVariant='none'
+                state='default'
+                size='md'
+                rightAnimatedArrow={true}
+                rightAnimatedArrowColor={props.button.rightAnimatedArrowColor || '#3970FD'}
+                animatedHoverStroke="group-hover:stroke-blue-600"
+                btnTextHoverClass="hover:text-blue-600"
+                btnTextColorClass="text-blue-500"
+              />
+            </a>
+          }
+        </div>
+      </div>
+      {
+        props.iconCards && (
+          <div className="flex-1 pt-10 tb-m:pt-0 border-t border-neutral-200 tb-m:border-t-0">
+            {
+              props.iconCards.map((card, index) => (
+                <div className="pb-6 tb:pb-10 tb-l:pb-16 last:pb-0 tb:flex" key={index}>
+                  <div className={"w-12 h-12 min-w-[48px] rounded-full flex justify-center items-center mr-5 " + ((card.iconBgClass) ? HDSColor(card.iconBgClass) : "bg-blue-300")}>
+                    <Icon height={'h-6 w-6 stroke-[1.5px]'} variant={((card.iconName) ? card.iconName : 'cube02')} strokeClass='stroke-neutral-1000' />
+                  </div>
+                  <div>
+                  <Typography textStyle="h4" as="h4" className="pb-2 pt-4 tb:pt-0 text-neutral-1000">{card.title}</Typography>
+                  <Typography textStyle="body1" className="text-neutral-600">{card.description}</Typography>
+                  </div>
+                </div>
+              ))
+            }
+          </div>
+        )
+      }
+    </div>
+  )
+}

package/src/HDS/modules/index.js

@@ -0,0 +1,5 @@
+export * from './TextCard';
+export * from './navCard';
+export * from './Cards';
+export * from './Events';
+export * from './Faq'

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

@@ -0,0 +1,2 @@
+export {default as NavCard} from './navCard'
+export { default as NavTabCard } from './navTabCard'

package/src/HDS/modules/navCard/navCard.js

@@ -0,0 +1,138 @@
+import React, { useState, useEffect } from 'react';
+import { MediaBox } from '../../helpers/Media';
+import { Typography } from '../../foundation/Typography';
+import { HDSButton } from '../../components/Buttons';
+import { HDSColor } from '../../foundation/ColorPalette';
+import { Tab } from '../../components/Tabs';
+import { Icon } from '../../components/common-components/Icon'
+import PropTypes from 'prop-types';
+
+
+export default function NavCard(props) {
+    const [showVideo, setShowVideo] = useState(false);
+    const TabCard = (tabContent) => {
+     
+        return (
+            <>
+                <div className=''>
+                    {tabContent.title && <Typography textStyle='body1c-semi-bold' className={HDSColor(tabContent.title_color)}>{tabContent.title}</Typography>}
+
+                    {tabContent.subTitle && <Typography textStyle='body3' className={ 'mt-2 ' + HDSColor(tabContent.sub_title_color)}>{tabContent.subTitle}</Typography>}
+                    {tabContent.readMore_cta && <div className="flex">
+                        <a href={tabContent.readMore_cta_link ?? ''} >
+                            <HDSButton
+                                label={tabContent.readMore_cta}
+                                type='secondaryLink'
+                                leftIconVariant='none'
+                                rightIconVariant='none'
+                                state='default'
+                                size='sm'
+                                rightAnimatedArrow={true}
+                                rightAnimatedArrowColor='#3970FD'
+                                animatedHoverStroke='#3970FD'
+                                btnTextColorClass='text-blue-500'
+                                btnTextHoverClass=''
+                                className=' mt-4'
+                            />
+                        </a>
+                    </div>}
+
+                </div>
+                {tabContent.btnLabel &&
+                    <div className='flex pl-3 pt-6 pb-8'>
+                        <HDSButton
+                            label={tabContent.btnLabel}
+                            type='secondaryLink'
+                            leftIconVariant='none'
+                            rightIconVariant='none'
+                            state='default'
+                            size='sm'
+                            rightAnimatedArrow={true}
+                            rightAnimatedArrowColor='#1E56E3'
+                            animatedHoverStroke='group-hover:stroke-blue-600'
+                            className='flex'
+                            btnTextColorClass='text-blue-600'
+                        />
+                    </div>
+                }
+                <div className='mt-8'>
+                    {
+                        showVideo && tabContent.video_url ? (
+                            <video
+                                id="hero_vid"
+                                controls={true}
+                                autoPlay
+                                muted
+                                playsInline
+                                width="500"
+                                height="500"
+                                className="tb:w-full w-full rounded-3xl"
+                                src={tabContent.video_url}
+                            >
+                            </video>
+                        ) : (
+                            <div className="relative">
+                                {
+                                    tabContent.img_url && (
+                                        <img src={tabContent.img_url} alt="Illustration" className=' rounded-2xl'/>
+                                    )
+                                }
+                                {
+                                    tabContent.video_url && (
+                                        <div className="w-14 h-14 cursor-pointer video-play-btn before:bg-blue-700 after:bg-blue-700 rounded-full flex items-center justify-center bg-blue-700 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-neutral-1000 shadow-2xl"
+                                            onClick={() => setShowVideo(true)}
+                                        >
+                                            <Icon variant='play' height='h-6 w-6 ml-1' strokeClass='stroke-neutral-0' />
+                                        </div>
+                                    )
+                                }
+                            </div>
+                        )
+                    }
+                </div>
+            </>
+        )
+    }
+
+    const [activeTab, setActiveTab] = useState('');
+
+
+    useEffect(() => {
+        if (props.tabContent) {
+            const tabNames = Object.keys(props.tabContent);
+            setActiveTab(tabNames[0]);
+        }
+    }, [props.tabContent]);
+
+    const handleTabClick = (tab) => {
+        if (tab.name) {
+            setActiveTab(tab.name);
+        }
+        else return;
+        // Perform any other actions based on the clicked tab
+    }
+
+    return (
+        <div>
+            {props.navTabs &&
+
+                <div className='max-w-[44.44rem] rounded-2xl'>
+
+                    <div className='flex pb-8 overflow-scroll scrollbar-hide'>
+                        <Tab
+                            onTabClick={handleTabClick}
+                            tabs={props.navTabs}
+                            pillColor={props.pillColor}
+                            bgColorTab={props.bgColorTab}
+                        />
+                    </div>
+                    <div className=''>
+                        {props.tabContent &&
+                            props.tabContent[activeTab] &&
+                            TabCard(props.tabContent[activeTab])}
+                    </div>
+
+                </div>}
+        </div>
+    )
+}

package/src/HDS/modules/navCard/navTabCard.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import { Typography} from '../../foundation/Typography';
+import  NavCard  from './navCard';
+
+export default function NavTabCard(props){
+    return (
+        <div className="flex tb-l:flex-row flex-col justify-between">
+            <div>
+                <Typography textStyle='h4' className='text-neutral-1000'>{props.title}</Typography>
+                <Typography textStyle='body1' className='mt-4 text-neutral-700 max-w-[430px]'>
+                    {props.description}
+                    </Typography>
+            </div>
+            <div className="max-w-[583px] pt-8 tb-l:pt-0">
+                <NavCard
+                    navTabs={props.navTabs}
+                    tabContent={props.tabContent}
+                    pillColor={props.pillColor}
+                    bgColorTab={props.bgColorTab}
+                />
+            </div>
+        </div>
+    )
+}
+
+NavTabCard.defaultProps={
+    title:'Build any supergraph topology',
+    description: `Build a supergraph using Hasura, use Hasura to implement a GraphQL gateway pattern or use Hasura to federate existing resources into another supergraph. Hasura allows you to shape any supergraph topology that works for you. 
+
+Check out some of the Federation architecture patterns implemented by our users.`,
+
+    navTabs:
+    [
+        {
+            current: '[Circular]',
+            href: '',
+            name: 'Performance'
+        },
+        {
+            current: '[Circular]',
+            href: '',
+            name: 'Company'
+        },
+        {
+            current: '[Circular]',
+            href: '',
+            name: 'Authorization'
+        },
+        {
+            current: '[Circular]',
+            href: '',
+            name: 'Observability'
+        },
+        {
+            current: '[Circular]',
+            href: '',
+            name: 'API Security'
+        }
+    ],
+
+    tabContent: {
+        'API Security': {
+            img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
+            subTitle: 'Hasura simplifies data access and reduces latency for optimizing performance via a Haskell core, JIT query compiler, predicate pushdown, and application-level caching out of the box.',
+            title: '5Get blazing-fast APIs without the extra work',
+            video_poster: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
+            video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1683307555/hasura-con-2023/tg_hascon23_homepage_ue29jn.mp4'
+        },
+        Authorization: {
+            img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
+            subTitle: 'Hasura simplifies data access and reduces latency for optimizing performance via a Haskell core, JIT query compiler, predicate pushdown, and application-level caching out of the box.',
+            title: '3Get blazing-fast APIs without the extra work',
+            video_poster: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
+            video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1683307555/hasura-con-2023/tg_hascon23_homepage_ue29jn.mp4'
+        },
+        Company: {
+
+            img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
+            subTitle: 'Hasura simplifies data access and reduces latency for optimizing performance via a Haskell core, JIT query compiler, predicate pushdown, and application-level caching out of the box.',
+            title: '2Get blazing-fast APIs without the extra work',
+            video_poster: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
+            video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1683307555/hasura-con-2023/tg_hascon23_homepage_ue29jn.mp4'
+        },
+        Observability: {
+            img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
+            subTitle: 'Hasura simplifies data access and reduces latency for optimizing performance via a Haskell core, JIT query compiler, predicate pushdown, and application-level caching out of the box.',
+            title: '4Get blazing-fast APIs without the extra work',
+            video_poster: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
+            video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1683307555/hasura-con-2023/tg_hascon23_homepage_ue29jn.mp4'
+        },
+        Performance: {
+            img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
+            readMore_cta: 'Read More About Performance',
+            subTitle: 'Hasura simplifies data access and reduces latency for optimizing performance via a Haskell core, JIT query compiler, predicate pushdown, and application-level caching out of the box.',
+            title: '1Get blazing-fast APIs without the extra work',
+            video_poster: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
+            video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1683307555/hasura-con-2023/tg_hascon23_homepage_ue29jn.mp4'
+        }
+    }
+
+
+}