hds-web 1.12.3 → 1.12.5

package/package.json

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

package/src/HDS/components/Cards/Misc/iconCardButton.js

@@ -0,0 +1,115 @@
+import React from "react";
+import PropTypes from 'prop-types';
+import { Icon } from "../../common-components/Icon";
+import { HDSColor } from '../../../foundation/ColorPalette'
+import { Typography } from '../../../foundation/Typography'
+import { HDSButton } from "../../Buttons";
+import ReactMarkdown from "react-markdown";
+
+const cardVariant = {
+    "withButton": {
+        'cardStyle': 'p-10 ',
+        'iconWidthStyle': 'h-20 w-20',
+        'iconStyle': 'h-10 w-10',
+        'titleTextStyle': 'h4',
+        'titleClasses': 'mb-1 text-hds-m-h4 tb:text-hds-t-h4 db:text-hds-d-h4',
+        'descTextStyle': 'body1c',
+        'descClasses': 'text-hds-m-body1c tb:text-hds-t-body1c db:text-hds-d-body1c'
+    },
+    "withoutButton": {
+        'cardStyle': 'p-6',
+        'iconWidthStyle': 'h-12 w-12',
+        'iconStyle': 'h-6 w-6',
+        'titleTextStyle': 'h5',
+        'titleClasses': 'mb-1 text-blue-600 text-hds-m-h5 tb:text-hds-t-h5 db:text-hds-d-h5',
+        'descTextStyle': 'body1',
+        'descClasses': 'text-neutral-1000 text-hds-m-body1 tb:text-hds-t-body1 db:text-hds-d-body1'
+    },
+    "sm": {
+        'cardStyle': 'p-6',
+        'iconWidthStyle': 'h-12 w-12',
+        'iconStyle': 'h-6 w-6',
+        'titleTextStyle': 'body3c',
+        'titleClasses': 'mb-1 text-neutral-800 text-hds-m-body3c-bold tb:text-hds-t-body3c-bold db:text-hds-d-body3c-bold',
+        'descTextStyle': 'body3',
+        'descClasses': 'text-neutral-800 text-hds-m-body3 tb:text-hds-t-body3 db:text-hds-d-body3'
+    }
+}
+
+export default function IconCardButton(props) {
+  const iconBG = props.iconBg ? HDSColor(props.iconBg) : '';
+  const textClass = props.textColorClass ? HDSColor(props.textColorClass) : 'text-neutral-1000';
+    return (
+        <>
+          <div>
+            {
+              props.imgUrl ? (
+                <div className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 inline-flex p-1 items-center justify-center rounded-full mb-6`}>
+                  <img src={props.imgUrl} alt={props.title} />
+                </div>
+              ) : (
+                <div
+                    className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 flex items-center justify-center rounded-full mb-6`}
+                >
+                    <Icon
+                        height={`stroke-[1.5px] ${cardVariant[props.cardType]['iconStyle']}`}
+                        variant={props.iconVariant}
+                        strokeColor={props.iconStroke}
+                        strokeClass={HDSColor(props.iconStrokeClass)} />
+                </div>
+              )
+            }
+            {props.cardType &&
+                (
+                    <>
+                        <Typography
+                            textStyle={cardVariant[props.cardType]['titleTextStyle']}
+                            className={`${cardVariant[props.cardType]['titleClasses']} ${textClass}`}
+                        >
+                            {props.title}
+                        </Typography>
+
+                        <Typography
+                            textStyle={cardVariant[props.cardType]['descTextStyle']}
+                            className={`${cardVariant[props.cardType]['descClasses']} ${textClass} [&>p]:${textClass} [&>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>
+                                {props.description}
+                            </ReactMarkdown>
+                        </Typography>
+                    </>
+                )
+            }
+          </div>
+          {
+            props.button && (
+              <div className="inline-flex pt-6">
+                  <HDSButton
+                      label={props.button.cta_text}
+                      type={props.button.cta_type || 'secondary'}
+                      leftIconVariant='none'
+                      rightIconVariant='none'
+                      state='default'
+                      size='sm'
+                      rightAnimatedArrow={true}
+                      rightAnimatedArrowColor={props.button.rightAnimatedArrowColor || '#3970FD'}
+                      btnBgColorClass={props.button.btnBg}
+                      btnTextHoverClass={props.button.btnTextColorClass}
+                      animatedHoverStroke={props.button.animatedHoverStroke}
+                      btnTextColorClass={props.button.btnTextColorClass}
+                  />
+              </div>
+            )
+          }
+        </>
+    )
+}
+
+IconCardButton.defaultProps = {
+    cardType: 'withoutButton',
+    iconStrokeClass: 'stroke-neutral-1000',
+    iconVariant: 'cube01'
+}
+IconCardButton.propTypes = {
+    cardType: PropTypes.oneOf(['withoutButton', 'withButton', 'sm']),
+}

package/src/HDS/components/Cards/Misc/index.js

@@ -2,4 +2,5 @@ export {default as TalkCard} from './talkCard';
 export {default as TalkCard2} from './talkcard2';
 export {default as IconCard} from './iconCard';
 export {default as ImageCard} from './imageCard';
-export {default as ImageBadgeCard} from './imageBadgeCard';
+export {default as ImageBadgeCard} from './imageBadgeCard';
+export {default as IconCardButton} from './iconCardButton';

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

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

package/src/HDS/components/Tabs/tab.js

@@ -39,7 +39,6 @@ export default function Tab(props) {
   let tabTextClass = ''; 
 
   function tabClass(name) {
-    
     // console.log(currentTab['tabTextColorClass']);
     
     if(activeTab['tabTextColorClass']){
@@ -66,7 +65,7 @@ export default function Tab(props) {
               onClick={(event) => handleTabClick(event, tab)}
             >
               <Typography 
-              className={`${tabClass(tab.name)} cursor-pointer px-3 py-1  z-[2] relative whitespace-nowrap`} 
+                className={`${tabClass(tab.name)} ${tab.name === activeTab.name ? '' : 'hover:bg-neutral-150'} cursor-pointer px-3 py-1  z-[2] relative whitespace-nowrap`} 
               textStyle='body3c-medium'>
                 {tab.name}
               </Typography>
@@ -74,7 +73,7 @@ export default function Tab(props) {
           ))}
           <span
             ref={pillRef}
-            className={`absolute left-0 z-[1] ${pillColorClass} rounded-full transition-all ease-in duration-150`}
+            className={`absolute left-0 z-[1] ${pillColorClass}  rounded-full transition-all ease-in duration-150`}
             style={{
               left: `${activeTab.index * 100}%`,
               width: `${activeTab.width}px`, // Use the width of the clicked tab

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

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 
 const tabCard = (tabContent) => (
     <>
-        <div className='px-3'>
+        <div className=''>
             {tabContent.title && <Typography textStyle='h4' className={HDSColor(tabContent.title_color)}>{tabContent.title}</Typography>}
 
             {tabContent.sub_title && <Typography textStyle='body1c' className={HDSColor(tabContent.sub_title_color)}>{tabContent.sub_title}</Typography>}
@@ -62,9 +62,9 @@ export default function NavCard(props) {
             <div>
                 {props.navTabs &&
 
-                    <div className='max-w-[44.44rem] bg-neutral-0 shadow rounded-2xl'>
+                    <div className='max-w-[44.44rem] rounded-2xl'>
 
-                        <div className='flex justify-center pb-8'>
+                        <div className='flex pb-8'>
                             <Tab
                                 onTabClick={handleTabClick}
                                 tabs={props.navTabs}

package/src/styles/tailwind.css

@@ -1777,10 +1777,6 @@ select{
   min-width: 11.5rem;
 }
 
-.min-w-\[110px\]{
-  min-width: 110px;
-}
-
 .min-w-\[112px\]{
   min-width: 112px;
 }
@@ -1789,6 +1785,10 @@ select{
   min-width: 12px;
 }
 
+.min-w-\[130px\]{
+  min-width: 130px;
+}
+
 .min-w-\[169px\]{
   min-width: 169px;
 }
@@ -1835,10 +1835,6 @@ select{
   min-width: 100%;
 }
 
-.min-w-\[130px\]{
-  min-width: 130px;
-}
-
 .max-w-2xl{
   max-width: 42rem;
 }
@@ -8650,10 +8646,6 @@ select{
   margin-right: 0px;
 }
 
-.last\:justify-start:last-child{
-  justify-content: flex-start;
-}
-
 .last\:rounded-r-full:last-child{
   border-top-right-radius: 9999px;
   border-bottom-right-radius: 9999px;
@@ -9796,12 +9788,6 @@ select{
   }
 }
 
-@media not all and (min-width: 400px){
-  .max-mb-m\:last\:justify-start:last-child{
-    justify-content: flex-start;
-  }
-}
-
 @media (max-width: 369px){
   .max-\[369px\]\:mt-8{
     margin-top: 2rem;
@@ -9903,10 +9889,6 @@ select{
   .mb-m\:pt-0{
     padding-top: 0px;
   }
-
-  .mb-m\:last\:justify-start:last-child{
-    justify-content: flex-start;
-  }
 }
 
 @media (min-width: 600px){