hds-web 1.5.3 → 1.5.5

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

@@ -7,27 +7,28 @@ import { Tab } from '../../components/Tabs';
 import PropTypes from 'prop-types';
 import { LinkCard } from '../Cards/Link';
 
-const tabCard = (tabContent) => (
+
+const tabCard = (Content) => (
     <>
         <div className='tb:px-3'>
-            {tabContent.title &&
+            {Content.title &&
                 <Typography
                     textStyle='h2'
-                    className={HDSColor(tabContent.title_color)}>
-                    {tabContent.title}
+                    className={HDSColor(Content.titleTextColor)}>
+                    {Content.title}
                 </Typography>}
 
-            {tabContent.sub_title &&
+            {Content.subTitle &&
                 <Typography
                     textStyle='sub2'
-                    className={`mt-2 ${HDSColor(tabContent.sub_title_color)}`}>
-                    {tabContent.sub_title}
+                    className={`mt-2 ${HDSColor(Content.subTitleTextColor)}`}>
+                    {Content.subTitle}
                 </Typography>}
         </div>
-        {tabContent.btnLabel &&
+        {Content.btnLabel &&
             <div className='flex pl-3 pt-6'>
                 <HDSButton
-                    label={tabContent.btnLabel}
+                    label={Content.btnLabel}
                     type='secondary'
                     leftIconVariant='none'
                     rightIconVariant='none'
@@ -46,15 +47,16 @@ const tabCard = (tabContent) => (
 )
 
 export default function HeroCapability(props) {
+    console.log(props.heroData);
 
     const LinkCardsFn = (heroData) => {
         return (
           heroData.linkCards && (
-            <div className="flex px-8 tb:px-0 tb:justify-center overflow-scroll flex-row mt-16 gap-6 tb:flex-row ">
+            <div className="flex px-8 tb:px-0 tb:justify-center overflow-auto scrollbar-hide flex-row mt-16 gap-6 tb:flex-row ">
               {heroData.linkCards.map((card, index) => (
                 <div key={index} className="w-full pb-2 min-w-[11.5rem] max-w-[22.313rem]">
                   <LinkCard
-                  titleTextColor= {card.titleTextColor}
+                    titleTextColor= {card.titleTextColor}
                     descTextColor={card.descTextColor}
                     linkUrl={card.linkUrl}
                     cardBgColor={card.cardBgColor}
@@ -90,38 +92,45 @@ export default function HeroCapability(props) {
         else return;
         // Perform any other actions based on the clicked tab
     }
-    let bgClass = '';
+    let heroBgColorClass = '';
     let bgTabClass = '';
-    let video_url = '';
-    let video_poster = '';
+    let videoUrl = '';
+    let videoPoster = '';
     let img_url = '';
-    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['bg_color']){
-        bgClass = HDSColor(props.heroData.tabContent[activeTab]['bg_color'])
+    let pillColorClass= '';
+    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['heroBgColor']){
+        heroBgColorClass = HDSColor(props.heroData.tabContent[activeTab]['heroBgColor'])
     }
-    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['bg_color_tab']){
-        bgTabClass = HDSColor(props.heroData.tabContent[activeTab]['bg_color_tab'])
+    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['bgColorTab']){
+        bgTabClass = HDSColor(props.heroData.tabContent[activeTab]['bgColorTab'])
     }
-    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['video_url']){
-        video_url = props.heroData.tabContent[activeTab]['video_url']
+    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['videoUrl']){
+        videoUrl = props.heroData.tabContent[activeTab]['videoUrl']
     }
-    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['video_poster']){
-        video_poster = props.heroData.tabContent[activeTab]['video_poster']
+    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['videoPoster']){
+        videoPoster = props.heroData.tabContent[activeTab]['videoPoster']
     }
     if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['img_url']){
         img_url = props.heroData.tabContent[activeTab]['img_url']
     }
+    if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['pillColor']){
+        pillColorClass = props.heroData.tabContent[activeTab]['pillColor']
+    }
 
     return (
-        <div className={`${bgClass} max-w-7xl rounded-3xl`} >
+        <div className={`${(heroBgColorClass)} max-w-7xl rounded-3xl`} >
+    {/* <div className={`${(heroBgColorClass)} max-w-7xl rounded-3xl bg-gradient-to-br from-green-500 to-green-900`} > */}
             {props.heroData.navTabs &&
 
                 <div className='py-5 db:p-20 tb:p-10 flex flex-col shadow rounded-2xl'>
 
                     <div className='flex px-8 tb:px-0 overflow-scroll scrollbar-hide tb-l:justify-center justify-start'>
-                        <div className={`${bgTabClass}  rounded-[32px]`}>
+                        <div className={`${bgTabClass} p-1 rounded-[32px]`}>
                             <Tab
                                 onTabClick={handleTabClick}
                                 tabs={props.heroData.navTabs}
+                                bgColorTab={props.heroData.bgColorTab}
+                                pillColor={pillColorClass}
                             />
                         </div>
                     </div>
@@ -133,15 +142,16 @@ export default function HeroCapability(props) {
                         </div>
                         <div className=' db:max-w-[540px] tb:w-1/2 '>
                             <MediaBox
-                                video_url = {video_url}
-                                video_poster = {video_poster}
-                                img_url = {img_url}
+                                video_url = {videoUrl}
+                                video_poster = {videoPoster}
+                               
                             />
                         </div>
                     </div>
 
                     <div>
-                        {LinkCardsFn(props.heroData)}
+                        {props.heroData.tabContent[activeTab] &&
+                            LinkCardsFn(props.heroData.tabContent[activeTab])}
                      </div>   
                 </div>
 

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

@@ -1,4 +1,4 @@
 export {default as TableA} from './tableA';
 export {default as TableB} from './tableB';
 export {default as TableC} from './tableC';
-export {default as TablePlatform} from './tableD';
+export {default as PricingTableB} from './tableD';