hds-web 1.7.4 → 1.7.6

package/src/HDS/components/Hero/heroIntegration.js

@@ -0,0 +1,163 @@
+import React from "react";
+import { Typography } from "../../foundation/Typography";
+import { HDSButton } from "../Buttons";
+import { HDSColor } from "../../foundation/ColorPalette";
+import { LinkCard } from '../Cards/Link';
+//hover:scale-[1.09] hover:z-10 hover:transition hover:duration-300
+export default function HeroIntegration({ heroData}) {
+
+    const stackedCircularCard = (circularCardData) => (
+        <div className="flex flex-row">
+            {circularCardData && circularCardData.map((card, index) => (
+                <div
+                    key={index}
+                    className={`w-20 h-20 ${index > 0 ? '-ml-4' : ''} ${HDSColor(card.cardBgClass)} ${HDSColor(card.cardHoverbgClass)} rounded-full flex items-center justify-center `}
+                >
+                    <div className="w-14 h-14">
+                        <img className="inline-block" src={card.img_link} alt={card.img_alt} />
+                    </div>
+                </div>
+            ))}
+        </div>
+    )
+
+    // const scrollToNextDiv = (element) => {
+    //     const nextDiv = element.nextElementSibling;
+    //     if (nextDiv) {
+    //         nextDiv.scrollIntoView({ behavior: 'smooth' });
+    //     }
+    // };
+    // const handleClick = (event) => {
+    //     const arrowIcon = event.target;
+    //     const arrowContainer = arrowIcon.parentNode;
+    //     scrollToNextDiv(arrowContainer);
+    // };
+    const title = () => (
+        heroData.title && (
+            <>
+                {heroData.title && (
+                    <>
+                        {heroData.stackedCard &&
+                            <div className="pb-6">
+                                {stackedCircularCard(heroData.stackedCard)}
+                            </div>
+                        }
+                        <Typography textStyle='h2' as="h2" className={"pb-2 tb:text-center break-words db:text-left tb-l:text-left  " + ((heroData.title_color) ? heroData.title_color : "") + ((heroData.video_url) ? " tb:text-center" : " tb:text-left")}>{heroData.title}</Typography>
+                    </>
+
+                )
+                }
+            </>
+        )
+    )
+
+    const heroButton = () => (
+        heroData.buttons && (
+            <div className={" gap-6 flex items-center tb:justify-center tb-l:justify-start db:justify-start pt-6" + ((heroData.video_url) ? " tb:justify-center" : " tb:justify-start")}>
+                {heroData.buttons[0] &&
+                    <HDSButton
+                        type="primary"
+                        btnTextColorClass={HDSColor('text-neutral-0')}
+                        leftIconVariant='none'
+                        rightIconVariant='none'
+                        label={heroData.buttons[0].cta_text}
+                        state='default'
+                        size='lg'
+                        rightAnimatedArrow='true'
+                        rightAnimatedArrowColor='#ffffff'
+                    />
+                }
+                {heroData.buttons[1] && 
+                <HDSButton
+                    type="primaryLink"
+                    btnTextColorClass={HDSColor('text-neutral-0')}
+                    leftIconVariant='none'
+                    rightIconVariant='none'
+                    label={heroData.buttons[1].cta_text}
+                    state='default'
+                    size='lg'
+                    rightAnimatedArrow='true'
+                    rightAnimatedArrowColor='#ffffff'
+                />}
+
+
+            </div>
+        )
+    )
+    const LinkCardsFn = (heroData) => {
+        return (
+            heroData.linkCards && (
+                <div className="flex px-8 tb:px-10 tb:justify-center db-s:px-0 overflow-auto scrollbar-hide flex-row gap-6 db-s:mt-[68px] tb:flex-row  ">
+                    {heroData.linkCards.map((card, index) => (
+                        <div key={index} className={`${HDSColor(card.cardBorderClass)} border rounded-2xl w-full pb-2 min-w-[11.5rem] max-w-[22.313rem]`}>
+                            <LinkCard
+                                titleTextColor={card.titleTextColor}
+                                descTextColor={card.descTextColor}
+                                linkUrl={card.linkUrl}
+                                cardBgColor={card.cardBgColor}
+                                cardHoverBg={card.cardHoverBg}
+                                iconVariant={card.iconVariant}
+                                iconStrokeClass={card.iconStrokeColor}
+                                iconArrowVariant={card.iconArrowVariant}
+                                iconArrowStrokeClass={card.iconArrowStrokeColor}
+                                title={card.title}
+                                description={card.description}
+                            />
+                        </div>
+                    ))}
+                </div>
+            )
+        );
+    };
+
+    const imageCard = (heroData) => (
+        heroData.imageUrl && (
+            <div className="py-12 tb:py-14 db-s:pt-0   ">
+                <img src={heroData.imageUrl} alt={heroData.imageAlt} className='tb-l:w-full db-s:max-w-[540px]' />
+            </div>
+        )
+    )
+
+    return (
+        <div className="">
+            <div className="">
+                <div className={"max-w-7xl mx-auto pb-14 tb:pb-10 db-s:p-20 rounded-3xl overflow-hidden " + ((heroData.bg_color) ? heroData.bg_color : "")} >
+                    <div className="w-full">
+                        <div className={"flex flex-col px-8 db-s:px-0 tb:px-10 pt-5 tb:pt-10 db-s:flex db-s:justify-between db-s:items-center db-s:flex-row db-s:w-full db-s:gap-x-[92px]"}>
+                            <div className='db-s:max-w-[490px] tb-l:max-w-[658px]  w-full tb:flex items-start tb:flex-col mt-4 tb:mt-0'
+                            >
+
+                                {title(heroData)}
+                                {
+                                    heroData.sub_title && (
+                                        <Typography textStyle="sub1" className={"tb-l:text-center db:text-left flex" + ((heroData.sub_title_color) ? heroData.sub_title_color : "")}>{heroData.sub_title}</Typography>
+                                    )
+                                }
+                                {
+                                    heroData.description && (
+                                        <Typography textStyle="sub1" className="db:text-left text-neutral-0 [&>*]:mb-8 last:[&>*]:mb-0">{heroData.description}</Typography>
+                                    )
+                                }
+                                {heroButton(heroData)}
+                            </div>
+                            <div className="h-full flex justify-center db-s:self-start w-full">{imageCard(heroData)}</div>
+                        </div>
+                        {LinkCardsFn(heroData)}
+
+                    </div>
+                </div>
+                {/* {
+                    heroData.scrollArrow && (
+                        <div className="flex justify-center flex-row z-10" onClick={(e) => scrollToNextDiv(e.currentTarget)}>
+                            <div className="flex bg-neutral-0 shadow-md -mt-5 animate-bounce justify-center rounded-full items-center w-12 h-12" onClick={handleClick} >
+                                <Icon
+                                    variant='chevrondowndouble'
+                                    strokeClass='stroke-neutral-800' height='h-6 w-6' />
+                            </div>
+                        </div>
+                    )
+                } */}
+            </div>
+        </div>
+    );
+}

package/src/HDS/components/Hero/index.js

@@ -1,3 +1,4 @@
 export {default as Hero1} from './h1'
 export {default as HeroSecondary} from './h2'
-export {default as HeroCapability} from './h3'
+export {default as HeroCapability} from './h3'
+export {default as HeroIntegration} from './heroIntegration'

package/src/HDS/components/Pre-footers/linkImagePF.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { LinkCard } from '../Cards/Link'
+import { Typography } from '../../foundation/Typography';
+import { HDSButton } from '../Buttons'
+
+export default function LinkImagePF(props) {
+    const {
+        sectionPreFooterData
+    } = props;
+    return (
+        <>
+            <div className="w-full">
+                {/* <div className="rounded-3xl bg-neutral-0 shadow db:p-20 tb:p-10 px-5 py-10">
+                    <div className="pt-10 tb:pt-16 db:pt-24">
+                        <Typography textStyle="h4" as="h4" className="text-neutral-1000 pb-8">{sectionPreFooterData.title}</Typography>
+                        <div className="grid grid-cols-1 tb-l:grid-cols-2 gap-10 tb:gap-20 db:gap-30">
+                            <div className="max-w-[380px]">
+                                {
+                                    (sectionPreFooterData.link_card.length > 0) && sectionPreFooterData.link_card.map((card, index) => (
+                                        <div key={index} className="pb-4 last:pb-0 border border-neutral-150 rounded-2xl transition ease-in duration-150 hover:shadow-xl hover:border-transparent mb-4 last:mb-0">
+                                            <LinkCard
+                                                titleTextColor={card.titleTextColor}
+                                                descTextColor={card.descTextColor}
+                                                linkUrl={card.linkUrl}
+                                                cardBgColor={card.cardBgColor}
+                                                cardHoverBg={card.cardHoverBg}
+                                                iconVariant={card.iconVariant}
+                                                iconStrokeClass={card.iconStrokeColor}
+                                                iconArrowVariant={card.iconArrowVariant}
+                                                iconArrowStrokeClass={card.iconArrowStrokeColor}
+                                                title={card.title}
+                                                description={card.description}
+                                            />
+                                        </div>
+                                    ))
+                                }
+
+                            </div>
+                            <div className="text-center self-start">
+                                <img
+                                    loading="lazy"
+                                    src={sectionPreFooterData.get_tickets.img_url}
+                                    width={214}
+                                    height={284}
+                                    alt={sectionPreFooterData.get_tickets.title}
+                                    className="inline-block"
+                                />
+                                <Typography textStyle="h3" as="h3" className="text-neutral-1000 py-6">{sectionPreFooterData.get_tickets.title}</Typography>
+                                <a href={sectionPreFooterData.get_tickets.button.cta_link}>
+                                    <HDSButton
+                                        label={sectionPreFooterData.get_tickets.button.cta_text}
+                                        type='secondary'
+                                        leftIconVariant='none'
+                                        rightIconVariant='none'
+                                        state='default'
+                                        size='md'
+                                        rightAnimatedArrow={true}
+                                        rightAnimatedArrowColor='#3970FD'
+                                    />
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div> */}
+            </div>
+        </>
+    )
+}
+

package/src/HDS/components/index.js

@@ -13,4 +13,5 @@ export * from './Tabs';
 export * from './Tooltip';
 export * from './Hero';
 export * from './Tables';
-export * from './Carousels';
+export * from './Carousels';
+export * from './Pre-footers';

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

@@ -3,10 +3,12 @@ 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 TextCard(props) {
   const titleColor = HDSColor(props.title_color);
-  const currentImgActive = (props.feature_cards_links && props.feature_cards_links[0]?.title )? props.feature_cards_links[0].title : null;
+  const subtitleColorClass = HDSColor(props.subtitle_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 (
     <>
@@ -16,35 +18,45 @@ export default function TextCard(props) {
       <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="h3" as="h3" className={`${titleColor} pb-6`}>{props.title}</Typography>)
+            !props.feature_cards_links && (<Typography textStyle="h3" as="h3" className={`${HDSColor(titleColor)} pb-6`}>{props.title}</Typography>)
+          }
+          {
+            !props.feature_cards_links && props.subtitle && (<Typography textStyle="sub1" className={`${(subtitleColorClass)} pb-2 -mt-4`}>{props.subtitle}</Typography>)
           }
           {
             props.descriptions && props.descriptions.map((desc, i) => (
-              <Typography key={i} textStyle="body1" className="pb-6 pr-8">{desc.description}</Typography>
+              <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}
-                        />
+                {
+                  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>
-                      <Typography textStyle='body1' className='text-neutral-1000'>{descList.description}</Typography>
-                    </div>
-                  )
-                })
+                    )
+                  })
 
-              }
+                }
               </div>
             )
           }
@@ -56,11 +68,11 @@ export default function TextCard(props) {
                     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 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]` }
+                              height={`w-6 h-6 mr-2 stroke-[1.5px]`}
                               variant={list.icon_name}
                               strokeClass={currentStrokeColor}
                             />
@@ -75,7 +87,7 @@ export default function TextCard(props) {
                                 <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]` }
+                                      height={`h-3 w-3 stroke-[1.5px]`}
                                       variant={descList.icon_name}
                                       strokeClass={iconColor}
                                     />
@@ -106,7 +118,7 @@ export default function TextCard(props) {
                           {
                             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"/>
+                                <img src={list.tab_img_url} alt={list.title} loading="lazy" />
                               </div>
                             )
                           }
@@ -130,7 +142,7 @@ export default function TextCard(props) {
                 size='md'
                 rightAnimatedArrow={true}
                 rightAnimatedArrowColor='#3970FD'
-            />
+              />
             )
           }
         </div>
@@ -162,7 +174,7 @@ export default function TextCard(props) {
                                   />
                                 </video>
                               ) : (
-                                <img src={img.tab_img_url} alt={img.title} loading="lazy"/>
+                                <img src={img.tab_img_url} alt={img.title} loading="lazy" />
                               )
                             }
                           </div>
@@ -174,55 +186,55 @@ export default function TextCard(props) {
               }
             </>
           ) : (
-              <>
-                {
-                  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
+            <>
+              {
+                props.iframe_url || props.video_url ? (
+                  <div>
+                    {
+                      props.iframe_url ? (
+                        <div className="relative pb-[56.2%]">
+                          <iframe
                             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" />
+                            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>
+      </div>
 
 
     </>

package/src/index.css

@@ -440,3 +440,179 @@
 }
 
 
+
+
+#load {
+  position: absolute;
+  width: 600px;
+  height: 36px;
+  left: 50%;
+  top: 40%;
+  margin-left: -300px;
+  overflow: visible;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: default;
+}
+
+#load div {
+  position: absolute;
+  width: 200px;
+  opacity: 0;
+  animation: move 10s linear infinite;
+  -o-animation: move 10s linear infinite;
+  -moz-animation: move 10s linear infinite;
+  -webkit-animation: move 10s linear infinite;
+  color: #35C4F0;
+}
+
+#load div:nth-child(2) {
+  animation-delay: 0.2s;
+  -o-animation-delay: 0.2s;
+  -moz-animation-delay: 0.2s;
+  -webkit-animation-delay: 0.2s;
+}
+
+#load div:nth-child(3) {
+  animation-delay: 0.4s;
+  -o-animation-delay: 0.4s;
+  -webkit-animation-delay: 0.4s;
+  -webkit-animation-delay: 0.4s;
+}
+
+#load div:nth-child(4) {
+  animation-delay: 0.6s;
+  -o-animation-delay: 0.6s;
+  -moz-animation-delay: 0.6s;
+  -webkit-animation-delay: 0.6s;
+}
+
+#load div:nth-child(5) {
+  animation-delay: 0.8s;
+  -o-animation-delay: 0.8s;
+  -moz-animation-delay: 0.8s;
+  -webkit-animation-delay: 0.8s;
+}
+
+#load div:nth-child(6) {
+  animation-delay: 1s;
+  -o-animation-delay: 1s;
+  -moz-animation-delay: 1s;
+  -webkit-animation-delay: 1s;
+}
+
+#load div:nth-child(7) {
+  animation-delay: 1.2s;
+  -o-animation-delay: 1.2s;
+  -moz-animation-delay: 1.2s;
+  -webkit-animation-delay: 1.2s;
+}
+
+@keyframes move {
+  0% {
+    left: 0;
+    opacity: 0;
+  }
+
+  35% {
+    left: 41%;
+    
+    opacity: 1;
+  }
+
+  65% {
+    left: 59%;
+   
+    opacity: 1;
+  }
+
+  100% {
+    left: 100%;
+   
+    opacity: 0;
+  }
+}
+
+@-moz-keyframes move {
+  0% {
+    left: 0;
+    opacity: 0;
+  }
+
+  35% {
+    left: 41%;
+    -moz-transform: rotate(0deg);
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+
+  65% {
+    left: 59%;
+    -moz-transform: rotate(0deg);
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    left: 100%;
+    -moz-transform: rotate(-180deg);
+    transform: rotate(-180deg);
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes move {
+  0% {
+    left: 0;
+    opacity: 0;
+  }
+
+  35% {
+    left: 41%;
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+
+  65% {
+    left: 59%;
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    left: 100%;
+  
+    opacity: 0;
+  }
+}
+
+@-o-keyframes move {
+  0% {
+    left: 0;
+    opacity: 0;
+  }
+
+  35% {
+    left: 41%;
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+
+  65% {
+    left: 59%;
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    left: 100%;
+    
+    opacity: 0;
+  }
+}