hds-web 1.33.2 → 1.33.4

package/src/HDS/modules/Faq/faq.js

@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Typography } from '../../foundation/Typography';
+import { Icon } from '../../components';
+import ReactMarkdown from "react-markdown";
+function DefaultAccordion(props) {
+    const [open, setOpen] = useState(null);
+
+    const handleOpen = (index) => {
+        if (open === index) {
+            setOpen(null);
+        } else {
+            setOpen(index);
+        }
+    };
+    // const icon = (open) => (
+    //     <motion.div
+    //         initial={{ opacity: 0 }}
+    //         animate={{ opacity: 1 }}
+    //         transition={{ duration: 0.3, opacity: { ease: "easeIn" } }}
+    //         className='h-5 w-5 mt-3.5'>
+    //         <div className='w-5 h-5  cursor-pointer' >
+    //             <div
+    //                 aria-hidden="true"
+    //                 className={` block  absolute h-[2px] w-[14px] bg-blue-600 transform transition duration-300 `}
+    //             />
+    //             <div
+    //                 aria-hidden="true"
+    //                 className={`${((!open) ? '-rotate-90 ' : '')} block absolute h-0.5 w-[14px] bg-blue-600 transition-all duration-300 ease-in-out`}
+    //             />
+    //         </div>
+
+    //     </motion.div>
+    // )
+    return (
+        <div className='divide-y divide-neutral-200'>
+            {props.accordionData && props.accordionData.map((item, index) => (
+                <div
+                    key={index}
+                    className=" first:pt-0 last:pb-0 py-6 flex"
+
+                >
+                    {/* <div 
+                    className='pr-4'
+                    >
+                        {icon(open === index ? true : false)}
+                    </div> */}
+                    <div
+                        className=' cursor-pointer'
+                        onClick={() => handleOpen(index)}
+                    >
+                        <Icon
+
+                            height={'h-5 w-5 stroke-[1.5px] '}
+                            variant={open === index ? 'minus' : 'plus'}
+                            strokeClass='stroke-blue-600'
+                            className=' transition-opacity duration-300 mt-1'
+                        />
+                    </div>
+                    <div>
+
+                        <motion.div
+                            className=" pl-4 "
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            exit={{ opacity: 1 }}
+                            transition={{ duration: 0.3, type: 'easeIn' }}
+                        >
+                            <div className="flex items-center justify-between cursor-pointer">
+                                <div
+                                    className='flex items-center'
+                                    onClick={() => handleOpen(index)}
+                                >
+
+                                    {item.title && <Typography textStyle='body1-medium' className='text-neutral-900'>
+                                        {item.title}
+                                    </Typography>}
+                                </div>
+                            </div>
+                        </motion.div>
+                        <AnimatePresence>
+                            {open === index && (
+                                <motion.div
+                                    className=""
+                                    initial={{ height: 0, opacity: 0 }}
+                                    animate={{ height: 'auto', opacity: 1 }}
+                                    exit={{ height: 0, opacity: 0 }}
+                                    transition={{ duration: 0.1, type: 'tween' }}
+                                >
+                                    {item.content &&
+                                        <Typography
+                                            textStyle='body1'
+                                            className='text-neutral-900 pl-4 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600 [&>p]:pb-2 last:[&>p]:pb-0 [&>ul>li>a]:text-blue-600'
+                                        >
+                                            <ReactMarkdown
+                                                components={{
+                                                    a: ({ node, ...props }) => (
+                                                        <a className="text-blue-600" target='_blank' {...props} />
+                                                    ),
+                                                }}
+                                            >
+                                                {item.content}
+                                            </ReactMarkdown>
+                                        </Typography>}
+                                </motion.div>
+                            )}
+                        </AnimatePresence>
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+}
+
+export default DefaultAccordion;

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

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

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

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

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

@@ -0,0 +1,351 @@
+import React, { Fragment, useState, useEffect } 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 TextCard(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();
+
+  useEffect(() => {
+    if (currentImgActive) {
+      setImgActive(currentImgActive);
+    }
+  }, [currentImgActive])
+
+  return (
+    <>
+      {
+        props.feature_cards_links && (
+          <>
+            {
+              props.tagLine && (
+                <Typography textStyle="h6" as="h6" className={`text-blue-800 uppercase pb-1 tb-l:w-1/2`}>{props.tagLine}</Typography>
+              )
+            }
+            <Typography textStyle="h4" as="h4" className={`text-neutral-1000 pb-8 tb-l:w-1/2`}>{props.title}</Typography>
+          </>
+        )
+      }
+      <div className={'grid grid-cols-1 tb-l:grid-cols-2 gap-10 tb:gap-8' + ((props.feature_cards_links) ? ' tb:gap-16' : ' tb-l:gap-20')}>
+        <div>
+          <div>
+            {
+              !props.feature_cards_links && (
+                <>
+                  {
+                    props.tagLine && (
+                      <Typography textStyle="h6" as="h6" className={`text-blue-800 uppercase pb-1 tb-l:w-1/2`}>{props.tagLine}</Typography>
+                    )
+                  }
+                  <Typography textStyle="h4" as="h4" className={`text-neutral-1000 pb-6 max-w-[330px]`}>{props.title}</Typography>
+                </>
+              )
+            }
+            {
+              !props.feature_cards_links && props.sub_title && (<Typography textStyle="sub1" className={`${(subtitleColorClass)} pb-2 -mt-4`}>{props.sub_title}</Typography>)
+            }
+
+            {
+              !props.content_right && (
+                <>
+                  {
+                    props.descriptions && props.descriptions.map((desc, i) => (
+                      <Typography
+                        key={i}
+                        textStyle="body1"
+                        className="pb-6 pr-8 max-w-[412px] [&>p]:pb-2 [&>p]:text-neutral-600 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 [&>ul>li]:text-neutral-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}
+                                    strokeColor=""
+                                  />
+                                </div>
+                                <Typography textStyle='body1' className='text-neutral-600'>{descList.description}</Typography>
+                              </div>
+                            )
+                          })
+
+                        }
+                      </div>
+                    )
+                  }
+                  {props.addiDescription && (
+                    <Typography textStyle='body1' className='text-neutral-600 max-w-[412px]'>{props.addiDescription}</Typography>
+                  )
+                  }
+                </>
+              )
+            }
+            {
+              props.feature_cards_links && (
+                <div className='tb:border border-neutral-150 rounded-3xl max-w-[460px]'>
+                  {
+                    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={'my-4 tb-l:m-2 p-4 tb:p-6 rounded-2xl 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}
+                                strokeColor=""
+                              />
+                              <Typography textStyle='h5' as='h5' className='text-neutral-1000'>{list.title}</Typography>
+                            </div>
+                            {list.description && <Typography textStyle='body3' className='pb-4 text-neutral-600'>{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}
+                                        strokeColor=""
+                                      />
+                                    </div>
+                                    <Typography textStyle='body3' className='text-neutral-600'>{descList.description}</Typography>
+                                  </div>
+                                )
+                              })
+                            }
+                            {
+                              list.cta_text && list.cta_link && (
+                                <a href={list.cta_link} className="inline-flex">
+                                  <HDSButton
+                                    label={list.cta_text}
+                                    type='secondaryLink'
+                                    leftIconVariant='none'
+                                    rightIconVariant='none'
+                                    state='default'
+                                    size='md'
+                                    rightAnimatedArrow={true}
+                                    rightAnimatedArrowColor='#3970FD'
+                                    btnTextColorClass="text-blue-500"
+                                    btnTextHoverClass="text-blue-600"
+                                    animatedHoverStroke='group-hover:stroke-blue-600'
+                                  />
+                                </a>
+                              )
+                            }
+                            {
+                              list.tab_img_url && (
+                                <div className={`${imgBgColor} tb-l:hidden p-4 tb-l: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>
+        </div>
+        <>
+          {
+            props.content_right ? (
+              <div>
+                {
+                  props.descriptions && props.descriptions.map((desc, i) => (
+                    <Typography
+                      key={i}
+                      textStyle="body1"
+                      className="pb-6 pr-8 max-w-[412px] [&>p]:pb-2 last:[&>p]:pb-0 [&>p]:text-neutral-600 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600 [&>ul>li]:text-neutral-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}
+                                  strokeColor=""
+                                />
+                              </div>
+                              <Typography textStyle='body1' className='text-neutral-600'>{descList.description}</Typography>
+                            </div>
+                          )
+                        })
+
+                      }
+                    </div>
+                  )
+                }
+                {props.addiDescription && (
+                  <Typography textStyle='body1' className='text-neutral-600 max-w-[412px]'>{props.addiDescription}</Typography>
+                )
+                }
+              </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={((img.tab_img_bg_class === "pattern") ? "bg-neutral-100" : "") + ` hidden h-full p-4 tb-l:p-12 tb-l:flex items-center justify-center rounded-2xl db:rounded-3xl relative bg-neutral-100`}>
+                                    {
+                                      img.tab_img_bg_class === "pattern" && (
+                                        <div className="pattern-gradient absolute left-0 top-0 w-full h-full rounded-3xl"></div>
+                                      )
+                                    }
+                                    {
+                                      img.tab_video_url ? (
+                                        <video
+                                          loading="lazy"
+                                          controls={false}
+                                          autoPlay
+                                          loop
+                                          muted
+                                          poster={img.tab_video_poster}
+                                          className="z-[1]"
+                                        >
+                                          <source
+                                            src={img.tab_video_url}
+                                            type="video/mp4"
+                                          />
+                                        </video>
+                                      ) : (
+                                        <img className="z-[1] max-h-[530px]" 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
+                                  playsInline
+                                  poster={props.video_poster}
+                                  src={props.video_url}
+                                  className="rounded-2xl db:rounded-3xl"
+                                >
+                                </video>
+                              )
+                            }
+                          </div>
+                        ) : (
+                          <>
+                            {props.img_url && (
+                              <div className={((props.img_bg_class === "pattern") ? "px-5 py-10 db:p-8 bg-neutral-100" : "px-0 py-0") + ` ${HDSColor(props.img_bg_class)} relative rounded-2xl db:rounded-3xl`}>
+                                {
+                                  props.img_bg_class === "pattern" && (
+                                    <div className="pattern-gradient z-0 absolute left-0 top-0 w-full h-full rounded-3xl"></div>
+                                  )
+                                }
+                                <img className={((props.img_bg_class === "pattern") ? "" : "rounded-2xl db:rounded-3xl") + ' z-[1] relative inline-block'} src={props.img_url} alt={props.title} loading="lazy" />
+                              </div>
+                            )}
+                          </>
+                        )
+                      }
+                    </>
+                  )
+                }
+              </>
+            )
+          }
+        </>
+      </div>
+    </>
+  )
+}