hds-web 1.6.0 → 1.6.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (10) hide show
  1. package/dist/index.css +2 -2
  2. package/dist/index.es.css +2 -2
  3. package/dist/index.es.js +6 -6
  4. package/dist/index.js +6 -6
  5. package/package.json +1 -1
  6. package/src/HDS/components/Cards/Link/link.js +4 -4
  7. package/src/HDS/components/Hero/h3.js +144 -135
  8. package/src/HDS/foundation/ColorPalette/color.js +97 -1
  9. package/src/HDS/modules/TextCard/textCard.js +59 -25
  10. package/src/styles/tailwind.css +504 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hds-web",
3
- "version": "1.6.0",
3
+ "version": "1.6.1",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/HDS/components/Cards/Link/link.js CHANGED
@@ -7,17 +7,17 @@ import { Typography } from '../../../foundation/Typography'
7
7
 
8
8
  export default function LinkCard(props) {
9
9
  const cardBgColorClass = HDSColor(props.cardBgColor)
10
- const cardHoverClasses = `hover:${HDSColor(props.cardHoverBg)}` + ' hover:shadow-xl';
10
+ const cardHoverClasses = HDSColor(`hover:${props.cardHoverBg}`);
11
11
  return (
12
12
  <>
13
13
  <a
14
14
  href={props.linkUrl}
15
- className={`${cardHoverClasses} ${cardBgColorClass} rounded-2xl border border-neutral-150 p-6 h-full block`}
15
+ className={`${cardHoverClasses} ${cardBgColorClass} hover:shadow-xl rounded-2xl p-6 h-full block`}
16
16
  >
17
17
  {props.brandImageUrl ?
18
18
  (
19
19
  <div className="flex flex-col">
20
- <div className="flex justify-end items-end pr-6">
20
+ <div className="flex justify-end items-end">
21
21
  {props.iconArrowVariant &&
22
22
  (<Icon
23
23
  height={'w-6 h-6 stroke-[1.5px] stroke-blue-400'}
@@ -85,7 +85,7 @@ LinkCard.defaultProps = {
85
85
  brandImageUrl: '',
86
86
  brandImageAlt:'',
87
87
  linkUrl: '#',
88
- cardHoverBg: 'bg-neutral-0',
88
+ cardHoverBg: 'bg-pink-600',
89
89
  iconVariant: 'videorecorder',
90
90
  iconStrokeColor: 'blue-500',
91
91
  iconArrowVariant: 'arrownarrowupright',
package/src/HDS/components/Hero/h3.js CHANGED
@@ -7,159 +7,168 @@ import { Tab } from '../../components/Tabs';
7
7
  import PropTypes from 'prop-types';
8
8
  import { LinkCard } from '../Cards/Link';
9
9
 
10
-
11
10
  const tabCard = (Content) => (
12
- <>
13
- <div className='tb:px-3'>
14
- {Content.title &&
15
- <Typography
16
- textStyle='h2'
17
- className={HDSColor(Content.titleTextColor)}>
18
- {Content.title}
19
- </Typography>}
11
+ <>
12
+ <div className='tb:px-3'>
13
+ {Content.title &&
14
+ <Typography
15
+ textStyle='h2'
16
+ className={HDSColor(Content.titleTextColor)}>
17
+ {Content.title}
18
+ </Typography>}
20
19
 
21
- {Content.subTitle &&
22
- <Typography
23
- textStyle='sub2'
24
- className={`mt-2 ${HDSColor(Content.subTitleTextColor)}`}>
25
- {Content.subTitle}
26
- </Typography>}
27
- </div>
28
- {Content.btnLabel &&
29
- <div className='flex pl-3 pt-6'>
30
- <HDSButton
31
- label={Content.btnLabel}
32
- type='secondary'
33
- leftIconVariant='none'
34
- rightIconVariant='none'
35
- state='default'
36
- size='sm'
37
- rightAnimatedArrow={true}
38
- rightAnimatedArrowColor='#1E56E3'
39
- animatedHoverStroke='group-hover:stroke-blue-600'
40
- className='flex'
41
- btnTextColorClass='text-blue-600'
42
- />
43
- </div>
44
- }
20
+ {Content.subTitle &&
21
+ <Typography
22
+ textStyle='sub2'
23
+ className={`mt-2 ${HDSColor(Content.subTitleTextColor)}`}>
24
+ {Content.subTitle}
25
+ </Typography>}
26
+ </div>
27
+ {Content.btnLabel &&
28
+ <div className='flex pl-3 pt-6'>
29
+ <HDSButton
30
+ label={Content.btnLabel}
31
+ type='secondary'
32
+ leftIconVariant='none'
33
+ rightIconVariant='none'
34
+ state='default'
35
+ size='sm'
36
+ rightAnimatedArrow={true}
37
+ rightAnimatedArrowColor='#1E56E3'
38
+ animatedHoverStroke='group-hover:stroke-blue-600'
39
+ className='flex'
40
+ btnTextColorClass='text-blue-600'
41
+ />
42
+ </div>
43
+ }
45
44
 
46
- </>
45
+ </>
47
46
  )
48
47
 
49
48
  export default function HeroCapability(props) {
49
+ const {
50
+ heroData,
51
+ activeTab,
52
+ onTabChange
53
+ } = props;
54
+ let currentTab;
55
+ if(activeTab.activeTab){
56
+ currentTab = activeTab.activeTab;
57
+ }
58
+ if (!heroData) {
59
+ return <div></div>; // Replace with your loading indicator or fallback UI
60
+ }
50
61
 
51
- const LinkCardsFn = (heroData) => {
52
- return (
53
- heroData.linkCards && (
54
- <div className="tb:grid tb:grid-cols-3 h-full px-8 pt-12 flex flex-row tb:px-0 db:pt-[116px] tb:justify-center overflow-scroll scrollbar-hide">
55
- {heroData.linkCards.map((card, index) => (
56
- <div key={index} className=" pb-2 px-3 h-full min-w-[184px] max-w-[357px] ">
57
- <LinkCard
58
- titleTextColor= {card.titleTextColor}
59
- descTextColor={card.descTextColor}
60
- linkUrl={card.linkUrl}
61
- cardBgColor={card.cardBgColor}
62
- cardHoverBg={card.cardHoverBg}
63
- iconVariant={card.iconVariant}
64
- iconStrokeColor={card.iconStrokeColor}
65
- iconArrowVariant={card.iconArrowVariant}
66
- iconArrowStrokeColor={card.iconArrowStrokeColor}
67
- title={card.title}
68
- description={card.description}
69
- />
70
- </div>
71
- ))}
72
- </div>
73
- )
74
- );
75
- };
76
-
77
-
78
- const [activeTab, setActiveTab] = useState('');
62
+ const LinkCardsFn = (heroData) => {
63
+ return (
64
+ heroData.linkCards && (
65
+ <div className="flex px-8 tb:px-0 tb:justify-center overflow-auto scrollbar-hide flex-row mt-16 gap-6 tb:flex-row ">
66
+ {heroData.linkCards.map((card, index) => (
67
+ <div key={index} className={`${HDSColor(card.cardBorderClass)} border rounded-2xl w-full pb-2 min-w-[11.5rem] max-w-[22.313rem]`}>
68
+ <LinkCard
69
+ titleTextColor= {card.titleTextColor}
70
+ descTextColor={card.descTextColor}
71
+ linkUrl={card.linkUrl}
72
+ cardBgColor={card.cardBgColor}
73
+ cardHoverBg={card.cardHoverBg}
74
+ iconVariant={card.iconVariant}
75
+ iconStrokeClass={card.iconStrokeColor}
76
+ iconArrowVariant={card.iconArrowVariant}
77
+ iconArrowStrokeClass={card.iconArrowStrokeColor}
78
+ title={card.title}
79
+ description={card.description}
80
+ />
81
+ </div>
82
+ ))}
83
+ </div>
84
+ )
85
+ );
86
+ };
79
87
 
80
- useEffect(() => {
81
- if (props.heroData.tabContent) {
82
- const tabNames = Object.keys(props.heroData.tabContent);
83
- setActiveTab(tabNames[0]);
84
- }
85
- }, [props.heroData.tabContent]);
86
88
 
87
- const handleTabClick = (tab) => {
88
- if (tab.name) {
89
- setActiveTab(tab.name);
89
+ const handleTabClick = (tab) => {
90
+ if (tab.name) {
91
+ const nameCheck = tab.name.replace(/\s/g, ''); // Remove spaces from tab name
92
+ onTabChange(nameCheck);
90
93
  }
91
- else return;
92
- // Perform any other actions based on the clicked tab
93
- }
94
- let heroBgColorClass = '';
95
- let bgTabClass = '';
96
- let videoUrl = '';
97
- let videoPoster = '';
98
- let img_url = '';
99
- let pillColorClass= '';
100
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['heroBgColor']){
101
- heroBgColorClass = HDSColor(props.heroData.tabContent[activeTab]['heroBgColor'])
102
- }
103
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['bgColorTab']){
104
- bgTabClass = HDSColor(props.heroData.tabContent[activeTab]['bgColorTab'])
105
- }
106
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['videoUrl']){
107
- videoUrl = props.heroData.tabContent[activeTab]['videoUrl']
108
- }
109
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['videoPoster']){
110
- videoPoster = props.heroData.tabContent[activeTab]['videoPoster']
111
- }
112
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['img_url']){
113
- img_url = props.heroData.tabContent[activeTab]['img_url']
114
- }
115
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[activeTab] && props.heroData.tabContent[activeTab]['pillColor']){
116
- pillColorClass = props.heroData.tabContent[activeTab]['pillColor']
117
- }
94
+ else return;
95
+ // Perform any other actions based on the clicked tab
96
+ }
97
+ let heroBgColorClass = '';
98
+ let bgTabClass = '';
99
+ let videoUrl = '';
100
+ let videoPoster = '';
101
+ let img_url = '';
102
+ let pillColorClass= '';
103
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['heroBgColor']){
104
+ heroBgColorClass = HDSColor(props.heroData.tabContent[currentTab]['heroBgColor'])
105
+ }
106
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['bgColorTab']){
107
+ bgTabClass = HDSColor(props.heroData.tabContent[currentTab]['bgColorTab'])
108
+ }
109
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['videoUrl']){
110
+ videoUrl = props.heroData.tabContent[currentTab]['videoUrl']
111
+ }
112
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['videoPoster']){
113
+ videoPoster = props.heroData.tabContent[currentTab]['videoPoster']
114
+ }
115
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['img_url']){
116
+ img_url = props.heroData.tabContent[currentTab]['img_url']
117
+ }
118
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['pillColor']){
119
+ pillColorClass = props.heroData.tabContent[currentTab]['pillColor']
120
+ }
121
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['bgColorTab']){
122
+ bgTabClass = HDSColor(props.heroData.tabContent[currentTab]['bgColorTab']);
123
+ }
118
124
 
119
- return (
120
- <div className={`${(heroBgColorClass)} max-w-7xl rounded-3xl`} >
121
- {/* <div className={`${(heroBgColorClass)} max-w-7xl rounded-3xl bg-gradient-to-br from-green-500 to-green-900`} > */}
122
- {props.heroData.navTabs &&
125
+ return (
126
+ <div className={`${(heroBgColorClass)} -mt-[81px] pt-[81px] tb:mt-0 tb:pt-0 max-w-7xl rounded-b-3xl tb:rounded-3xl`} >
127
+ {/* <div className={`${(heroBgColorClass)} max-w-7xl rounded-3xl bg-gradient-to-br from-green-500 to-green-900`} > */}
128
+ {props.heroData.navTabs &&
123
129
 
124
- <div className='py-5 db:p-20 tb:p-10 flex flex-col shadow rounded-2xl'>
130
+ <div className='py-5 db:p-20 tb:p-10 flex flex-col shadow rounded-2xl'>
125
131
 
126
- <div className='flex px-8 tb:px-0 overflow-scroll scrollbar-hide tb-l:justify-center justify-start'>
127
- <div className={`${bgTabClass} p-1 rounded-[32px]`}>
128
- <Tab
129
- onTabClick={handleTabClick}
130
- tabs={props.heroData.navTabs}
131
- bgColorTab={props.heroData.bgColorTab}
132
- pillColor={pillColorClass}
133
- />
134
- </div>
135
- </div>
136
- <div className='flex flex-col-reverse pt-6 px-8 tb:px-0 tb:flex tb:flex-row tb:items-center tb:pt-10 tb:justify-between'>
137
- <div className=' mt-3 db:max-w-[488px] tb:w-1/2'>
138
- {props.heroData.tabContent &&
139
- props.heroData.tabContent[activeTab] &&
140
- tabCard(props.heroData.tabContent[activeTab])}
141
- </div>
142
- <div className=' db:max-w-[540px] tb:w-1/2 '>
143
- <MediaBox
144
- video_url = {videoUrl}
145
- video_poster = {videoPoster}
146
-
147
- />
148
- </div>
149
- </div>
132
+ <div className='flex px-8 tb:px-0 overflow-scroll scrollbar-hide tb-l:justify-center justify-start'>
133
+ <div className={`${bgTabClass} bg-opacity-30 p-1 rounded-[32px]`}>
134
+ <Tab
135
+ onTabClick={handleTabClick}
136
+ tabs={props.heroData.navTabs}
137
+ bgColorTab={props.heroData.bgColorTab}
138
+ pillColor={pillColorClass}
139
+ />
140
+ </div>
141
+ </div>
142
+ <div className='flex flex-col-reverse pt-6 px-8 tb:px-0 tb:flex tb:flex-row tb:items-center tb:pt-10 tb:justify-between'>
143
+ <div className=' mt-3 db:max-w-[488px] tb:w-1/2'>
144
+ {props.heroData.tabContent &&
145
+ props.heroData.tabContent[currentTab] &&
146
+ tabCard(props.heroData.tabContent[currentTab])}
147
+ </div>
148
+ <div className=' db:max-w-[540px] tb:w-1/2 '>
149
+ <MediaBox
150
+ video_url = {videoUrl}
151
+ video_poster = {videoPoster}
152
+
153
+ />
154
+ </div>
155
+ </div>
150
156
 
151
- <div>
152
- {props.heroData.tabContent[activeTab] &&
153
- LinkCardsFn(props.heroData.tabContent[activeTab])}
154
- </div>
155
- </div>
157
+ <div className=''>
158
+ {props.heroData.tabContent[currentTab] &&
159
+ LinkCardsFn(props.heroData.tabContent[currentTab])}
160
+ </div>
161
+ </div>
156
162
 
157
- }
163
+ }
158
164
 
159
- </div>
160
- )
165
+ </div>
166
+ )
161
167
  }
162
168
 
169
+
170
+
171
+
163
172
  HeroCapability.defaultProps={
164
173
  heroData : {
165
174
  tabContent: {
package/src/HDS/foundation/ColorPalette/color.js CHANGED
@@ -574,7 +574,103 @@ const HDSColors = {
574
574
  "stroke-red-500": "stroke-red-500",
575
575
  "stroke-red-600": "stroke-red-600",
576
576
  "stroke-red-700": "stroke-red-700",
577
- "stroke-red-800": "stroke-red-800"
577
+ "stroke-red-800": "stroke-red-800",
578
+ "hover:bg-storybook-default-heading": "hover:bg-storybook-default-heading",
579
+ "hover:bg-base-0": "hover:bg-base-0",
580
+ "hover:bg-base-1000": "hover:bg-base-1000",
581
+ "hover:bg-neutral-0": "hover:bg-neutral-0",
582
+ "hover:bg-neutral-50": "hover:bg-neutral-50",
583
+ "hover:bg-neutral-100": "hover:bg-neutral-100",
584
+ "hover:bg-neutral-150": "hover:bg-neutral-150",
585
+ "hover:bg-neutral-200": "hover:bg-neutral-200",
586
+ "hover:bg-neutral-300": "hover:bg-neutral-300",
587
+ "hover:bg-neutral-400": "hover:bg-neutral-400",
588
+ "hover:bg-neutral-500": "hover:bg-neutral-500",
589
+ "hover:bg-neutral-600": "hover:bg-neutral-600",
590
+ "hover:bg-neutral-700": "hover:bg-neutral-700",
591
+ "hover:bg-neutral-800": "hover:bg-neutral-800",
592
+ "hover:bg-neutral-850": "hover:bg-neutral-850",
593
+ "hover:bg-neutral-900": "hover:bg-neutral-900",
594
+ "hover:bg-neutral-950": "hover:bg-neutral-950",
595
+ "hover:bg-neutral-1000": "hover:bg-neutral-1000",
596
+ "hover:bg-blue-100": "hover:bg-blue-100",
597
+ "hover:bg-blue-200": "hover:bg-blue-200",
598
+ "hover:bg-blue-300": "hover:bg-blue-300",
599
+ "hover:bg-blue-400": "hover:bg-blue-400",
600
+ "hover:bg-blue-500": "hover:bg-blue-500",
601
+ "hover:bg-blue-600": "hover:bg-blue-600",
602
+ "hover:bg-blue-700": "hover:bg-blue-700",
603
+ "hover:bg-blue-800": "hover:bg-blue-800",
604
+ "hover:bg-blue-900": "hover:bg-blue-900",
605
+ "hover:bg-purple-100": "hover:bg-purple-100",
606
+ "hover:bg-purple-200": "hover:bg-purple-200",
607
+ "hover:bg-purple-300": "hover:bg-purple-300",
608
+ "hover:bg-purple-400": "hover:bg-purple-400",
609
+ "hover:bg-purple-500": "hover:bg-purple-500",
610
+ "hover:bg-purple-600": "hover:bg-purple-600",
611
+ "hover:bg-purple-700": "hover:bg-purple-700",
612
+ "hover:bg-purple-800": "hover:bg-purple-800",
613
+ "hover:bg-purple-900": "hover:bg-purple-900",
614
+ "hover:bg-cyan-100": "hover:bg-cyan-100",
615
+ "hover:bg-cyan-200": "hover:bg-cyan-200",
616
+ "hover:bg-cyan-300": "hover:bg-cyan-300",
617
+ "hover:bg-cyan-400": "hover:bg-cyan-400",
618
+ "hover:bg-cyan-500": "hover:bg-cyan-500",
619
+ "hover:bg-cyan-600": "hover:bg-cyan-600",
620
+ "hover:bg-cyan-700": "hover:bg-cyan-700",
621
+ "hover:bg-cyan-800": "hover:bg-cyan-800",
622
+ "hover:bg-cyan-900": "hover:bg-cyan-900",
623
+ "hover:bg-green-100": "hover:bg-green-100",
624
+ "hover:bg-green-200": "hover:bg-green-200",
625
+ "hover:bg-green-300": "hover:bg-green-300",
626
+ "hover:bg-green-400": "hover:bg-green-400",
627
+ "hover:bg-green-500": "hover:bg-green-500",
628
+ "hover:bg-green-600": "hover:bg-green-600",
629
+ "hover:bg-green-700": "hover:bg-green-700",
630
+ "hover:bg-green-800": "hover:bg-green-800",
631
+ "hover:bg-green-900": "hover:bg-green-900",
632
+ "hover:bg-pink-100": "hover:bg-pink-100",
633
+ "hover:bg-pink-200": "hover:bg-pink-200",
634
+ "hover:bg-pink-300": "hover:bg-pink-300",
635
+ "hover:bg-pink-400": "hover:bg-pink-400",
636
+ "hover:bg-pink-500": "hover:bg-pink-500",
637
+ "hover:bg-pink-600": "hover:bg-pink-600",
638
+ "hover:bg-pink-700": "hover:bg-pink-700",
639
+ "hover:bg-pink-800": "hover:bg-pink-800",
640
+ "hover:bg-pink-900": "hover:bg-pink-900",
641
+ "hover:bg-amber-100": "hover:bg-amber-100",
642
+ "hover:bg-amber-200": "hover:bg-amber-200",
643
+ "hover:bg-amber-300": "hover:bg-amber-300",
644
+ "hover:bg-amber-400": "hover:bg-amber-400",
645
+ "hover:bg-amber-500": "hover:bg-amber-500",
646
+ "hover:bg-amber-600": "hover:bg-amber-600",
647
+ "hover:bg-amber-700": "hover:bg-amber-700",
648
+ "hover:bg-amber-800": "hover:bg-amber-800",
649
+ "hover:bg-amber-900": "hover:bg-amber-900",
650
+ "hover:bg-yellow-100": "hover:bg-yellow-100",
651
+ "hover:bg-yellow-200": "hover:bg-yellow-200",
652
+ "hover:bg-yellow-300": "hover:bg-yellow-300",
653
+ "hover:bg-yellow-400": "hover:bg-yellow-400",
654
+ "hover:bg-yellow-500": "hover:bg-yellow-500",
655
+ "hover:bg-yellow-600": "hover:bg-yellow-600",
656
+ "hover:bg-yellow-700": "hover:bg-yellow-700",
657
+ "hover:bg-yellow-800": "hover:bg-yellow-800",
658
+ "hover:bg-orange-100": "hover:bg-orange-100",
659
+ "hover:bg-orange-200": "hover:bg-orange-200",
660
+ "hover:bg-orange-300": "hover:bg-orange-300",
661
+ "hover:bg-orange-400": "hover:bg-orange-400",
662
+ "hover:bg-orange-500": "hover:bg-orange-500",
663
+ "hover:bg-orange-600": "hover:bg-orange-600",
664
+ "hover:bg-orange-700": "hover:bg-orange-700",
665
+ "hover:bg-orange-800": "hover:bg-orange-800",
666
+ "hover:bg-red-100": "hover:bg-red-100",
667
+ "hover:bg-red-200": "hover:bg-red-200",
668
+ "hover:bg-red-300": "hover:bg-red-300",
669
+ "hover:bg-red-400": "hover:bg-red-400",
670
+ "hover:bg-red-500": "hover:bg-red-500",
671
+ "hover:bg-red-600": "hover:bg-red-600",
672
+ "hover:bg-red-700": "hover:bg-red-700",
673
+ "hover:bg-red-800": "hover:bg-red-800",
578
674
  };
579
675
 
580
676
  export default function HDSColor(color = '') {
package/src/HDS/modules/TextCard/textCard.js CHANGED
@@ -1,4 +1,4 @@
1
- import React from "react";
1
+ import React, { Fragment, useState } from "react";
2
2
  import { Typography } from "../../foundation/Typography";
3
3
  import { HDSColor } from "../../foundation/ColorPalette";
4
4
  import { HDSButton } from '../../components/Buttons';
@@ -6,12 +6,14 @@ import { Icon } from '../../components/common-components/Icon';
6
6
 
7
7
  export default function TextCard(props) {
8
8
  const titleColor = HDSColor(props.title_color);
9
+ const currentImgActive = (props.feature_cards_links && props.feature_cards_links[0]?.title )? props.feature_cards_links[0].title : null;
10
+ const [imgActive, setImgActive] = useState(currentImgActive);
9
11
  return (
10
12
  <>
11
13
  {
12
14
  props.feature_cards_links && (<Typography textStyle="h3" as="h3" className={`${titleColor} pb-8 tb-l:w-1/2`}>{props.title}</Typography>)
13
15
  }
14
- <div className={'grid grid-cols-1 tb:grid-cols-2 gap-10' + ((props.feature_cards_links) ? ' tb:gap-0 tb-l:gap-0' : ' tb:gap-16 tb-l:gap-36')}>
16
+ <div className={'grid grid-cols-1 tb-l:grid-cols-2 gap-10' + ((props.feature_cards_links) ? ' tb:gap-0 tb-l:gap-0' : ' tb:gap-16 tb-l:gap-36')}>
15
17
  <div>
16
18
  {
17
19
  !props.feature_cards_links && (<Typography textStyle="h3" as="h3" className={`${titleColor} pb-6`}>{props.title}</Typography>)
@@ -30,7 +32,7 @@ export default function TextCard(props) {
30
32
  const iconColor = HDSColor(descList.icon_color);
31
33
  return (
32
34
  <div className='flex items-start pb-4 last:pb-0' key={j}>
33
- <div className={`${iconBgColor} w-6 h-6 rounded-full mr-2 flex items-center justify-center`}>
35
+ <div className={`${iconBgColor} w-6 h-6 min-w-[24px] min-h-[24px] rounded-full mr-2 flex items-center justify-center`}>
34
36
  <Icon
35
37
  height={`h-3 w-3 stroke-[1.5px]` }
36
38
  variant={descList.icon_name}
@@ -41,19 +43,21 @@ export default function TextCard(props) {
41
43
  </div>
42
44
  )
43
45
  })
46
+
44
47
  }
45
48
  </div>
46
49
  )
47
50
  }
48
51
  {
49
52
  props.feature_cards_links && (
50
- <div className='border border-neutral-150 rounded-2xl tb:rounded-e-none'>
53
+ <div className='tb:border border-neutral-150 rounded-2xl tb-l:rounded-e-none'>
51
54
  {
52
55
  props.feature_cards_links.map((list, i) => {
53
56
  const currentStrokeColor = HDSColor(list.icon_color)
57
+ const imgBgColor = HDSColor(list.tab_img_bg_class)
54
58
  return (
55
- <div className='border-b border-b-neutral-150 last:border-b-0'>
56
- <div className='m-2 p-6 rounded-lg hover:bg-neutral-100' key={i}>
59
+ <div className='border-b border-b-neutral-150 last:border-b-0 cursor-pointer' onClick={()=>setImgActive(list.title)}>
60
+ <div className={'m-2 p-0 tb:p-6 rounded-lg hover:bg-neutral-50' + ((imgActive === list.title) ? " bg-neutral-100" : "")} key={i}>
57
61
  <div className='flex items-center pb-4'>
58
62
  <Icon
59
63
  height={`w-6 h-6 mr-2 stroke-[1.5px]` }
@@ -69,7 +73,7 @@ export default function TextCard(props) {
69
73
  const iconColor = HDSColor(descList.icon_color);
70
74
  return (
71
75
  <div className='flex items-start pb-4 last:pb-0' key={j}>
72
- <div className={`${iconBgColor} w-5 h-5 rounded-full mr-2 flex items-center justify-center`}>
76
+ <div className={`${iconBgColor} w-5 h-5 min-w-[20px] min-h-[20px] rounded-full mr-2 flex items-center justify-center`}>
73
77
  <Icon
74
78
  height={`h-3 w-3 stroke-[1.5px]` }
75
79
  variant={descList.icon_name}
@@ -82,19 +86,31 @@ export default function TextCard(props) {
82
86
  })
83
87
  }
84
88
  {
85
- props.button && (
86
- <HDSButton
87
- label={props.button.cta_text}
88
- type='primaryLink'
89
- leftIconVariant='none'
90
- rightIconVariant='none'
91
- state='default'
92
- size='md'
93
- rightAnimatedArrow={true}
94
- rightAnimatedArrowColor='#3970FD'
95
- />
89
+ list.cta_text && list.cta_link && (
90
+ <a href={list.cta_link} className="flex">
91
+ <HDSButton
92
+ label={list.cta_text}
93
+ type='secondaryLink'
94
+ leftIconVariant='none'
95
+ rightIconVariant='none'
96
+ state='default'
97
+ size='md'
98
+ rightAnimatedArrow={true}
99
+ rightAnimatedArrowColor='#3970FD'
100
+ btnTextColorClass="text-blue-500"
101
+ animatedHoverStroke='group-hover:stroke-blue-600'
102
+ />
103
+ </a>
104
+ )
105
+ }
106
+ {
107
+ list.tab_img_url && (
108
+ <div className={`${imgBgColor} tb-l:hidden p-12 rounded-2xl mt-8`}>
109
+ <img src={list.tab_img_url} alt={list.title} />
110
+ </div>
96
111
  )
97
112
  }
113
+
98
114
  </div>
99
115
  </div>
100
116
  )
@@ -118,14 +134,32 @@ export default function TextCard(props) {
118
134
  )
119
135
  }
120
136
  </div>
121
- <div>
122
- {
123
- props.img_url && (
124
- <img src={props.img_url} alt={props.title} />
125
- )
126
- }
137
+ {
138
+ props.feature_cards_links ? (
139
+ <>
140
+ {
141
+ props.feature_cards_links.map((img, i) => {
142
+ const imgBgColor = HDSColor(img.tab_img_bg_class)
143
+ return (
144
+ <Fragment key={i}>
145
+ {
146
+ imgActive === img.title && img.tab_img_url && (<div className={`${imgBgColor} hidden h-full p-12 tb-l:flex items-center rounded-2xl tb-l:rounded-s-none`}><img src={img.tab_img_url} alt={img.title} /></div>)
147
+ }
148
+ </Fragment>
149
+ )
150
+ })
151
+ }
152
+ </>
153
+ ) : (
154
+ <div>
155
+ {props.img_url && (
156
+ <img src={props.img_url} alt={props.title} />
157
+ )}
158
+ </div>
159
+ )
160
+ }
127
161
  </div>
128
- </div>
162
+
129
163
  </>
130
164
  )
131
165
  }