hds-web 1.34.8 → 1.34.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.34.8",
+  "version": "1.34.9",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",

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

@@ -1,76 +1,106 @@
 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';
+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>
-            )
-          }
+          {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")} />
+          {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">
+          )}
+          {props.button && (
+            <a href={props.button.cta_link} className="inline-flex ">
               <HDSButton
                 label={props.button.cta_text}
-                type={props.button.cta_type || 'secondary'}
-                leftIconVariant='none'
-                rightIconVariant='none'
-                state='default'
-                size='md'
+                type={props.button.cta_type || "secondary"}
+                leftIconVariant="none"
+                rightIconVariant="none"
+                state="default"
+                size="md"
                 rightAnimatedArrow={true}
-                rightAnimatedArrowColor={props.button.rightAnimatedArrowColor || '#3970FD'}
+                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>
-        )
-      }
+      {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>
-  )
+  );
 }