hds-web 1.33.7 → 1.33.8

package/package.json

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

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

@@ -1,68 +1,85 @@
-import React, { Fragment, useState } from 'react';
+import React, { Fragment, useState } from "react";
 import { Typography } from "../../foundation/Typography";
 import { HDSButton } from "../Buttons";
-import { Icon } from '../common-components/Icon';
+import { Icon } from "../common-components/Icon";
 import { HDSColor } from "../../foundation/ColorPalette";
-import { LinkCard } from '../Cards/Link';
+import { LinkCard } from "../Cards/Link";
 import ReactMarkdown from "react-markdown";
 
 const tabCard = (Content) => (
   <>
-    {Content.title &&
+    {Content.title && (
       <Typography
-        textStyle='h2'
+        textStyle="h2"
         as="h2"
-        className={` hidden tb:block ${Content.titleTextColor ? HDSColor(Content.titleTextColor) : 'text-neutral-1000'}`}>
+        className={` hidden tb:block ${
+          Content.titleTextColor
+            ? HDSColor(Content.titleTextColor)
+            : "text-neutral-1000"
+        }`}
+      >
         {Content.title}
       </Typography>
-    }
+    )}
 
-    {Content.subTitle &&
+    {Content.subTitle && (
       <Typography
-        textStyle='sub1'
-        className={`mt-2 ${Content.subTitleTextColor ? HDSColor(Content.subTitleTextColor) : 'text-neutral-700'}`}>
+        textStyle="sub1"
+        className={`mt-2 ${
+          Content.subTitleTextColor
+            ? HDSColor(Content.subTitleTextColor)
+            : "text-neutral-700"
+        }`}
+      >
         {Content.subTitle}
       </Typography>
-    }
-    {Content.description &&
+    )}
+    {Content.description && (
       <Typography
-        textStyle='sub2'
-        className={`mt-2 [&>p]:pb-4 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-1 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600 [&>p>a:hover]:text-blue-800 ${Content.descriptionTextColor ? HDSColor(Content.subTitleTextColor) : 'text-neutral-700'}`}>
+        textStyle="sub2"
+        className={`mt-2 [&>p]:pb-4 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-1 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600 [&>p>a:hover]:text-blue-800 ${
+          Content.descriptionTextColor
+            ? HDSColor(Content.subTitleTextColor)
+            : "text-neutral-700"
+        }`}
+      >
         <ReactMarkdown>{Content.description}</ReactMarkdown>
       </Typography>
-    }
-    {
-      Content.buttons && (
-        <div className='flex items-center flex-wrap flex-row gap-2 pt-6'>
-          {Content.buttons.map((btn, index) => (
-            <Fragment key={index}>
-              {btn.url && btn.text && btn.type && (
-                <a href={btn.url} key={index} className='flex '>
-                  <HDSButton
-                    label={btn.text}
-                    type={btn.type}
-                    leftIconVariant='none'
-                    rightIconVariant='none'
-                    state='default'
-                    size='md'
-                    rightAnimatedArrow={true}
-                    rightAnimatedArrowColor={btn.rightAnimatedArrowColor ?? '#3970FD'}
-                    animatedHoverStroke={btn.animatedHoverStroke ?? 'group-hover:stroke-neutral-0'}
-                    btnTextColorClass={btn.btnTextColorClass}
-                    btnTextHoverClass={btn.btnTextHoverClass}
-                    className={btn.className}
-                    // btnTextColorClass={HDSColor('text-neutral-0')}
-                    btnbgHoverClass={btn.btnBgColorClass}
-                  />
-                </a>)}
-            </Fragment>
-          ))
-          }
-        </div>
-      )
-    }
+    )}
+    {Content.buttons && (
+      <div className="flex items-center flex-wrap flex-row gap-2 pt-6">
+        {Content.buttons.map((btn, index) => (
+          <Fragment key={index}>
+            {btn.url && btn.text && btn.type && (
+              <a href={btn.url} key={index} className="flex ">
+                <HDSButton
+                  label={btn.text}
+                  type={btn.type}
+                  leftIconVariant="none"
+                  rightIconVariant="none"
+                  state="default"
+                  size="md"
+                  rightAnimatedArrow={true}
+                  rightAnimatedArrowColor={
+                    btn.rightAnimatedArrowColor ?? "#3970FD"
+                  }
+                  animatedHoverStroke={
+                    btn.animatedHoverStroke ?? "group-hover:stroke-neutral-0"
+                  }
+                  btnTextColorClass={btn.btnTextColorClass}
+                  btnTextHoverClass={btn.btnTextHoverClass}
+                  className={btn.className}
+                  // btnTextColorClass={HDSColor('text-neutral-0')}
+                  btnbgHoverClass={btn.btnBgColorClass}
+                />
+              </a>
+            )}
+          </Fragment>
+        ))}
+      </div>
+    )}
   </>
-)
+);
 
 export default function HeroLinkCard(props) {
   const [showVideo, setShowVideo] = useState(false);
@@ -74,7 +91,14 @@ export default function HeroLinkCard(props) {
       props.linkCards && (
         <div className="flex tb-m:justify-center overflow-auto no-scrollbar db:overflow-visible scrollbar-hide flex-row mt-10 tb:mt-12 db:mt-16 gap-6 tb:flex-row  ">
           {props.linkCards.map((card, index) => (
-            <div key={index} className={`${HDSColor(card.cardBorderClass)} ${HDSColor(card.cardBgColor)} ${HDSColor(card.cardHoverBg)} transition-all ease-out duration-300 hover:shadow-2xl hover:border-opacity-0 border rounded-2xl w-full min-w-[11.5rem] max-w-[22.313rem]`}>
+            <div
+              key={index}
+              className={`${HDSColor(card.cardBorderClass)} ${HDSColor(
+                card.cardBgColor
+              )} ${HDSColor(
+                card.cardHoverBg
+              )} transition-all ease-out duration-300 hover:shadow-2xl hover:border-opacity-0 border rounded-2xl w-full min-w-[11.5rem] max-w-[22.313rem]`}
+            >
               <LinkCard
                 titleTextColor={card.titleTextColor}
                 descTextColor={card.descTextColor}
@@ -93,19 +117,25 @@ export default function HeroLinkCard(props) {
     );
   };
 
-
   return (
     <div>
       <div className="flex flex-col-reverse tb-l:flex tb-l:flex-row tb-l:justify-between gap-4">
-        <div className={`max-w-[435px] db:max-w-[${props.contentWd ? props.contentWd : '535px'}]`}>
-          {props &&
-            tabCard(props)}
+        <div
+          className={`max-w-[435px] db:max-w-[${
+            props.contentWd ? props.contentWd : "535px"
+          }]`}
+        >
+          {props && tabCard(props)}
         </div>
-        <div className="grid items-center relative db:max-w-[500px] tb:w-1/2 transition-opacity duration-700 ease-linear ">
+        <div className="grid items-center relative db:max-w-[600px] tb:w-1/2 transition-opacity duration-700 ease-linear ">
           <Typography
             textStyle="h2"
             as="h2"
-            className={`tb:hidden pb-6 ${props.titleTextColor ? HDSColor(props.titleTextColor) : 'text-neutral-1000'}`}
+            className={`tb:hidden pb-6 ${
+              props.titleTextColor
+                ? HDSColor(props.titleTextColor)
+                : "text-neutral-1000"
+            }`}
           >
             {props.title}
           </Typography>
@@ -147,9 +177,7 @@ export default function HeroLinkCard(props) {
         </div>
       </div>
 
-      <div className="">
-        {LinkCardsFn(props)}
-      </div>
+      <div className="">{LinkCardsFn(props)}</div>
     </div>
   );
 }