hds-web 1.13.4 → 1.13.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/index.css +2 -2
  2. package/dist/index.es.css +2 -2
  3. package/dist/index.es.js +2 -2
  4. package/dist/index.js +4 -4
  5. package/package.json +1 -1
  6. package/src/HDS/components/Cards/Feedback/feedback.js +1 -1
  7. package/src/HDS/components/Cards/Misc/iconCardButton.js +2 -2
  8. package/src/HDS/components/Hero/h3.js +118 -170
  9. package/src/HDS/components/Tables/tableD.js +69 -108
  10. package/src/HDS/modules/navCard/navCard.js +1 -1
  11. package/src/index.css +11 -1
  12. package/src/styles/tailwind.css +34 -16
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hds-web",
3
- "version": "1.13.4",
3
+ "version": "1.13.6",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/HDS/components/Cards/Feedback/feedback.js CHANGED
@@ -39,7 +39,7 @@ export default function FeedbackCard(props) {
39
39
  <Typography textStyle={((props.dividerClass) ? "body2" : "body1")} className='text-neutral-600 pb-1'>{props.blurb}</Typography>
40
40
  <div className="flex">
41
41
  <HDSButton
42
- label='Read case study'
42
+ label='Read the case study'
43
43
  type='secondaryLink'
44
44
  leftIconVariant='none'
45
45
  rightIconVariant='none'
package/src/HDS/components/Cards/Misc/iconCardButton.js CHANGED
@@ -45,8 +45,8 @@ export default function IconCardButton(props) {
45
45
  <div>
46
46
  {
47
47
  props.imgUrl ? (
48
- <div className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 inline-flex p-1 items-center justify-center rounded-full mb-6`}>
49
- <img src={props.imgUrl} alt={props.title} />
48
+ <div className={`${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 inline-flex items-center justify-center rounded-full mb-6`}>
49
+ <img className="w-full" src={props.imgUrl} alt={props.title} />
50
50
  </div>
51
51
  ) : (
52
52
  <div
package/src/HDS/components/Hero/h3.js CHANGED
@@ -4,217 +4,165 @@ import { Typography } from '../../foundation/Typography';
4
4
  import { HDSButton } from '../../components/Buttons';
5
5
  import { HDSColor } from '../../foundation/ColorPalette';
6
6
  import { Tab } from '../../components/Tabs';
7
+ import PropTypes from 'prop-types';
7
8
  import { LinkCard } from '../Cards/Link';
8
9
 
9
10
  const tabCard = (Content) => (
10
11
  <>
11
- <div className='tb:px-3'>
12
- {Content.title &&
13
- <Typography
14
- textStyle='h2'
15
- as="h2"
16
- className={`${HDSColor(Content.titleTextColor)}`}>
17
- {Content.title}
18
- </Typography>}
12
+ <div className='tb:px-3'>
13
+ {Content.title &&
14
+ <Typography
15
+ textStyle='h2'
16
+ className={HDSColor(Content.titleTextColor)}>
17
+ {Content.title}
18
+ </Typography>}
19
19
 
20
- {Content.subTitle &&
21
- <Typography
22
- textStyle='sub2'
23
- className={`mt-2 ${HDSColor(Content.subTitleTextColor)}`}>
24
- {Content.subTitle}
25
- </Typography>}
26
- </div>
27
- <div className='flex items-center flex-wrap flex-row gap-[38px]'>
28
- {Content.buttons &&
29
-
30
- Content.buttons.map((btn, index) => (
31
- <React.Fragment key={index}>
32
- {btn.cta_link && btn.cta_text && btn.cta_type && (
33
- <a href={btn.cta_link} key={index} className='flex pl-3 pt-6'>
34
- <HDSButton
35
- label={btn.cta_text}
36
- type={btn.cta_type}
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'
37
32
  leftIconVariant='none'
38
33
  rightIconVariant='none'
39
34
  state='default'
40
- size='md'
35
+ size='sm'
41
36
  rightAnimatedArrow={true}
42
- rightAnimatedArrowColor='#FFFFFF'
43
- animatedHoverStroke='group-hover:stroke-neutral-0'
37
+ rightAnimatedArrowColor='#1E56E3'
38
+ animatedHoverStroke='group-hover:stroke-blue-600'
44
39
  className='flex'
45
- btnTextColorClass={HDSColor('text-neutral-0')}
46
- />
47
- </a>)}
48
- </React.Fragment>
49
- ))
50
-
40
+ btnTextColorClass='text-blue-600'
41
+ />
42
+ </div>
51
43
  }
52
- </div>
53
44
 
54
45
  </>
55
46
  )
56
47
 
57
48
  export default function HeroCapability(props) {
58
- const [showVideo, setShowVideo] = useState(false);
59
- const {
60
- heroData,
61
- activeTab,
62
- onTabChange,
63
- firstTab
64
- } = props;
65
- let currentTab;
66
- if (activeTab.activeTab) {
67
- currentTab = activeTab.activeTab;
68
- }
69
- if (!heroData) {
70
- return <div></div>; // Replace with your loading indicator or fallback UI
71
- }
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
+ }
61
+
72
62
  const LinkCardsFn = (heroData) => {
73
- return (
74
- heroData.linkCards && (
75
- <div className="flex px-8 tb:px-0 tb:justify-center overflow-auto db:overflow-visible scrollbar-hide flex-row mt-16 gap-6 tb:flex-row ">
76
- {heroData.linkCards.map((card, index) => (
77
- <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]`}>
78
- <LinkCard
79
- titleTextColor={card.titleTextColor}
80
- descTextColor={card.descTextColor}
81
- linkUrl={card.linkUrl}
82
- iconVariant={card.iconVariant}
83
- iconStrokeClass={card.iconStrokeColor}
84
- iconArrowVariant={card.iconArrowVariant}
85
- iconArrowStrokeClass={card.iconArrowStrokeColor}
86
- title={card.title}
87
- description={card.description}
88
- />
89
- </div>
90
- ))}
91
- </div>
92
- )
93
- );
94
- };
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
+ };
95
87
 
96
88
 
97
89
  const handleTabClick = (tab) => {
98
- if (tab.name) {
99
- const nameCheck = tab.name.replace(/\s/g, ''); // Remove spaces from tab name
100
- onTabChange(nameCheck);
101
-
102
- }
103
- else return;
104
- // Perform any other actions based on the clicked tab
90
+ if (tab.name) {
91
+ const nameCheck = tab.name.replace(/\s/g, ''); // Remove spaces from tab name
92
+ onTabChange(nameCheck);
93
+ }
94
+ else return;
95
+ // Perform any other actions based on the clicked tab
105
96
  }
106
97
  let heroBgColorClass = '';
107
98
  let bgTabClass = '';
108
99
  let videoUrl = '';
109
100
  let videoPoster = '';
110
101
  let img_url = '';
111
- let pillColorClass = '';
112
- if (props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['heroBgColor']) {
113
- heroBgColorClass = HDSColor(props.heroData.tabContent[currentTab]['heroBgColor'])
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'])
114
105
  }
115
- if (props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['bgColorTab']) {
116
- bgTabClass = HDSColor(props.heroData.tabContent[currentTab]['bgColorTab'])
106
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['bgColorTab']){
107
+ bgTabClass = HDSColor(props.heroData.tabContent[currentTab]['bgColorTab'])
117
108
  }
118
- if (props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['videoUrl']) {
119
- videoUrl = props.heroData.tabContent[currentTab]['videoUrl']
109
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['videoUrl']){
110
+ videoUrl = props.heroData.tabContent[currentTab]['videoUrl']
120
111
  }
121
- if (props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['videoPoster']) {
122
- videoPoster = props.heroData.tabContent[currentTab]['videoPoster']
112
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['videoPoster']){
113
+ videoPoster = props.heroData.tabContent[currentTab]['videoPoster']
123
114
  }
124
- if (props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['img_url']) {
125
- img_url = props.heroData.tabContent[currentTab]['img_url']
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']
126
117
  }
127
- if (props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['pillColor']) {
128
- pillColorClass = props.heroData.tabContent[currentTab]['pillColor']
118
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['pillColor']){
119
+ pillColorClass = props.heroData.tabContent[currentTab]['pillColor']
129
120
  }
130
- if (props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['bgColorTab']) {
131
- bgTabClass = HDSColor(props.heroData.tabContent[currentTab]['bgColorTab']);
121
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['bgColorTab']){
122
+ bgTabClass = HDSColor(props.heroData.tabContent[currentTab]['bgColorTab']);
132
123
  }
133
124
 
134
125
  return (
135
- <div className={`${(heroBgColorClass)} -mt-[81px] pt-[81px] transition ease-in-out duration-700 tb:mt-0 tb:pt-0 max-w-7xl rounded-b-3xl tb:rounded-3xl`} >
136
- {/* <div className={`${(heroBgColorClass)} max-w-7xl rounded-3xl bg-gradient-to-br from-green-500 to-green-900`} > */}
137
- {props.heroData.navTabs &&
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 &&
138
129
 
139
- <div className='pt-5 pb-14 tb:px-10 db:p-20 tb:pt-[60px] tb:pb-20 tb-l:px-20 flex flex-col shadow rounded-2xl'>
130
+ <div className='py-5 db:p-20 tb:p-10 flex flex-col shadow rounded-2xl'>
140
131
 
141
- <div className='flex px-8 tb:px-0 overflow-scroll scrollbar-hide tb-l:justify-center justify-start'>
142
- <div className={`${bgTabClass} bg-opacity-30 p-1 rounded-[32px]`}>
143
- <Tab
144
- onTabClick={handleTabClick}
145
- tabs={props.heroData.navTabs}
146
- bgColorTab={props.heroData.bgColorTab}
147
- pillColor={pillColorClass}
148
- initialTab={firstTab}
149
- />
150
- </div>
151
- </div>
152
- <div className='flex flex-col-reverse pt-6 px-8 tb:px-0 tb:flex tb:flex-row tb:pt-20 tb:justify-between min-h-[384px]'>
153
- <div className=' mt-3 db:max-w-[535px] tb:w-1/2'>
154
- {props.heroData.tabContent &&
155
- props.heroData.tabContent[currentTab] &&
156
- tabCard(props.heroData.tabContent[currentTab])}
157
- </div>
158
- <div className='grid items-center relative db:max-w-[500px] tb:w-1/2 transition-opacity duration-700 ease-linear '>
159
- {
160
- showVideo ? (
161
- <video
162
- id="hero_vid"
163
- controls={false}
164
- autoPlay
165
- muted
166
- playsInline
167
- width="500"
168
- height="500"
169
- className="tb:w-full w-full rounded-3xl"
170
- src={heroData.video_url}
171
- >
172
- </video>
173
- ) : (
174
- <div className="relative">
175
- {
176
- heroData.img_url && (
177
- <img src={heroData.img_url} alt="Illustration" />
178
- )
179
- }
180
- {
181
- heroData.video_url && (
182
- <div className="w-14 h-14 cursor-pointer video-play-btn before:bg-blue-700 after:bg-blue-700 rounded-full flex items-center justify-center bg-blue-700 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-neutral-1000 shadow-2xl"
183
- onClick={() => setShowVideo(true)}
184
- >
185
- <Icon variant='play' height='h-6 w-6 ml-1' strokeClass='stroke-neutral-0' />
186
- </div>
187
- )
188
- }
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>
189
155
  </div>
190
- )
191
- }
192
-
193
-
194
-
195
-
196
- {/*
197
- // (
198
- // <div
199
- // onClick={() => setShowVideo(true)}
200
- // className='w-14 h-14 cursor-pointer video-play-btn before:bg-blue-700 after:bg-blue-700 rounded-full flex items-center absolute justify-center bg-blue-700 left-1/2 top-1/2 shadow-neutral-1000 shadow-2xl'>
201
- // <Icon variant='play' height='h-6 w-6 ml-1' strokeClass='stroke-neutral-0' />
202
- // </div>
203
-
204
- // )} */}
205
156
 
206
- </div>
207
- </div>
157
+ <div className=''>
158
+ {props.heroData.tabContent[currentTab] &&
159
+ LinkCardsFn(props.heroData.tabContent[currentTab])}
160
+ </div>
161
+ </div>
208
162
 
209
- <div className=''>
210
- {props.heroData.tabContent[currentTab] &&
211
- LinkCardsFn(props.heroData.tabContent[currentTab])}
212
- </div>
213
- </div>
214
-
215
- }
163
+ }
216
164
 
217
- </div>
165
+ </div>
218
166
  )
219
167
  }
220
168
 
package/src/HDS/components/Tables/tableD.js CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, {useState, useRef, useEffect} from 'react';
2
2
  import { Typography } from '../../foundation/Typography'
3
3
  import { Icon } from '../common-components/Icon'
4
4
  import { HDSColor } from '../../foundation/ColorPalette';
@@ -14,6 +14,26 @@ export default function PricingTableB(props) {
14
14
  TABLE_VALUE,
15
15
  TABLE_HEADER,
16
16
  } = props;
17
+
18
+ const [isSticky, setIsSticky] = useState(false);
19
+ useEffect(() => {
20
+ const handleScroll = () => {
21
+ const tableHeader = stickyRef.current;
22
+ const tableHeaderRect = tableHeader.getBoundingClientRect();
23
+ const isSticky = tableHeaderRect.top <= 10; // Adjust this value if needed
24
+
25
+ setIsSticky(true);
26
+ };
27
+
28
+ window.addEventListener('scroll', handleScroll);
29
+ return () => {
30
+ window.removeEventListener('scroll', handleScroll);
31
+ };
32
+ }, []);
33
+
34
+ console.log(TABLE_VALUE)
35
+
36
+ const stickyRef = useRef(null);
17
37
  const tableValuesm = (section, keyIndex) => {
18
38
 
19
39
  let columnSize = '';
@@ -35,20 +55,19 @@ export default function PricingTableB(props) {
35
55
  <React.Fragment key={index + keyIndex}>
36
56
  {keyIndex !== null
37
57
  && keyIndex === rowTitleKey
38
- && index != (columnSize - 1)
39
- && index != 0 && (
58
+ && index !== (columnSize - 1)
59
+ && index !== 0 && (
40
60
  <td
41
-
42
61
  className="pl-[30px] border-80 "
43
62
  >
44
63
  <div className=' '>
45
- <Typography className='py-4 text-neutral-700' textStyle='body1c'>{value[keyIndex]}</Typography>
64
+ <Typography className='py-4 text-neutral-700' textStyle='body1'>{value[keyIndex]}</Typography>
46
65
  </div>
47
66
  </td>)}
48
67
  {keyIndex !== null
49
68
  && keyIndex === rowTitleKey
50
- && index != (columnSize - 1)
51
- && index == 0 && (
69
+ && index !== (columnSize - 1)
70
+ && index === 0 && (
52
71
  <td
53
72
  className="pl-[30px] border-80 "
54
73
  >
@@ -61,7 +80,7 @@ export default function PricingTableB(props) {
61
80
 
62
81
  {keyIndex !== null
63
82
  && keyIndex === rowTitleKey
64
- && index == (columnSize - 1) && (
83
+ && index === (columnSize - 1) && (
65
84
  <td
66
85
 
67
86
  className="pl-[30px] border-80 "
@@ -73,7 +92,7 @@ export default function PricingTableB(props) {
73
92
 
74
93
  </td>)}
75
94
 
76
- {keyIndex !== null && keyIndex !== rowTitleKey && value[keyIndex] !== null && index != 0 && index != (columnSize - 1) && (
95
+ {keyIndex !== null && keyIndex !== rowTitleKey && value[keyIndex] !== null && index !== 0 && index !== (columnSize - 1) && (
77
96
  <td
78
97
 
79
98
  className="px-8 text-left ml-[30px] border-80 "
@@ -96,7 +115,7 @@ export default function PricingTableB(props) {
96
115
  )}
97
116
  </td>)
98
117
  }
99
- {keyIndex !== null && keyIndex !== rowTitleKey && value[keyIndex] !== null && index == 0 && (
118
+ {keyIndex !== null && keyIndex !== rowTitleKey && value[keyIndex] !== null && index === 0 && (
100
119
  <td
101
120
 
102
121
  className="px-8 text-left ml-[30px] border-80 "
@@ -119,7 +138,7 @@ export default function PricingTableB(props) {
119
138
  )}
120
139
  </td>)
121
140
  }
122
- {keyIndex !== null && keyIndex !== rowTitleKey && value[keyIndex] !== null && index == (columnSize - 1) && (
141
+ {keyIndex !== null && keyIndex !== rowTitleKey && value[keyIndex] !== null && index === (columnSize - 1) && (
123
142
  <td
124
143
 
125
144
  className="px-8 text-left ml-[30px] border-80 "
@@ -161,103 +180,22 @@ export default function PricingTableB(props) {
161
180
  }
162
181
  return (
163
182
  <div className='px-10'>
164
- <div className=" flex justify-around ">
165
- <div className="w-full flex-col items-center flex justify-around tb-l:flex tb-l:flex-col tb-l:items-center">
166
- <div>
167
- {title && (
168
- <Typography
169
- textStyle='h3'
170
- className={HDSColor(title_color)}
171
- >
172
- {title}
173
- </Typography>
174
- )}
175
- {description && (
176
- <Typography
177
- textStyle='body1c'
178
- className={HDSColor(desc_color)}
179
- >
180
- {description}
181
- </Typography>
182
- )}
183
- </div>
184
- </div>
185
- </div>
183
+
186
184
  <div className='hidden tb:block' >
187
- <div className=" mt-[70px] rounded-3xl ">
185
+ <div className=" mt-[70px] rounded-3xl bg-neutral-0">
186
+
187
+ {TABLE_HEADER && TABLE_HEADER[0] && TABLE_HEADER[0]['title'] && (
188
+ <Typography
189
+ textStyle='h3'
190
+ className={`pb-10 pl-8 ${HDSColor(title_color)}`}
191
+ >
192
+ {TABLE_HEADER[0]['title']}
193
+ </Typography>
194
+ )}
188
195
  <table className="rounded-3xl w-full table-fixed ">
189
- <thead>
190
- <tr className=' text-left first:pr-20 '>
191
- {Object.keys(TABLE_HEADER).map((key, index) => (
192
- <th
193
- key={index}
194
- scope="col"
195
- className="px-8 pb-[54px] sm:table-cell text-left"
196
- >
197
- <div className='flex text-left'>
198
- <div className='flex flex-col text-center'>
199
- <div className={'flex gap-2'}>
200
- {TABLE_HEADER[key]['icon'] &&
201
- (
202
- <Icon
203
- height='h-6 w-6 stroke-[1.5px]'
204
- variant={TABLE_HEADER[key]['icon']}
205
- strokeClass={HDSColor(TABLE_HEADER[key]['iconStrokeClass'])} />
206
- )
207
- }
208
- {
209
- TABLE_HEADER[key]['title'] && key == 0 && (
210
- <Typography
211
- textStyle='h3'
212
- className={` w-1/2 text-left ${HDSColor(TABLE_HEADER[key]['title_text_color'])}`}>
213
- {TABLE_HEADER[key]['title']}
214
- </Typography>)
215
- }
216
- {
217
- TABLE_HEADER[key]['title'] && key != 0 && (
218
- <Typography
219
- textStyle='h5'
220
- className={` text-left ${HDSColor(TABLE_HEADER[key]['title_text_color'])}`}>
221
- <ReactMarkdown>{TABLE_HEADER[key]['title']}</ReactMarkdown>
222
- </Typography>)
223
- }
224
- </div>
225
- <div className=''>
226
- {TABLE_HEADER[key]['descr'] && (
227
- <Typography
228
- textStyle='body1'
229
- className={` text-left ${HDSColor(TABLE_HEADER[key]['descr_text_color'])}`}>
230
- {TABLE_HEADER[key]['descr']}
231
- </Typography>)}
232
-
233
- {TABLE_HEADER[key]['button_title'] &&
234
- (
235
- <a href={TABLE_HEADER[key]['button_link']}>
236
- <HDSButton
237
- label={TABLE_HEADER[key]['button_title']}
238
- type='secondary'
239
- leftIconVariant='none'
240
- rightIconVariant='none'
241
- state='default'
242
- size='sm'
243
- rightAnimatedArrow={true}
244
- rightAnimatedArrowColor='#3970FD'
245
- className='mt-4'
246
- />
247
- </a>
248
-
249
- )
250
-
251
- }
252
- </div>
253
- </div>
254
- </div>
255
- </th>
256
- ))}
257
- </tr>
258
- </thead>
196
+
259
197
  {TABLE_VALUE.map((section, index) => (
260
- <tbody key={index} className="border-90">
198
+ <tbody key={index} className="border-90 bg-neutral-0">
261
199
  {Object.keys(section).map((keyIndex) => (
262
200
  <>
263
201
  <tr key={index + keyIndex} className=''>
@@ -265,14 +203,37 @@ export default function PricingTableB(props) {
265
203
  <React.Fragment key={keyIndex2 + keyIndex + index}>
266
204
  {keyIndex2 !== null && (
267
205
  <th
268
- className='bg-neutral-100 first:rounded-l-full last:rounded-r-full px-8'
206
+ ref={stickyRef}
207
+ className={`first:rounded-l-full last:rounded-r-full px-8 ${isSticky ? ' sticky top-0 z-10 bg-neutral-100' : ''
208
+ }`}
269
209
  >
270
210
  <Typography
271
211
  textStyle='h5'
272
- className='text-neutral-900 py-3.5 text-left'
212
+ className='text-neutral-900 py-3.5 text-left whitespace-nowrap'
273
213
  >
274
214
  {keyIndex2}
215
+
216
+
275
217
  </Typography>
218
+ {section[keyIndex][0][keyIndex2]['btn'] && section[keyIndex][0][keyIndex2]['btn_cta'] && <div className={`flex -mt-5`}>
219
+ <a href={section[keyIndex][0][keyIndex2]['btn_cta']}>
220
+ <HDSButton
221
+ label={section[keyIndex][0][keyIndex2]['btn']}
222
+ type='secondaryLink'
223
+ leftIconVariant='none'
224
+ rightIconVariant='none'
225
+ state='default'
226
+ size='sm'
227
+ rightAnimatedArrow={true}
228
+ rightAnimatedArrowColor='#3970FD'
229
+ animatedHoverStroke='#3970FD'
230
+ btnTextColorClass='text-blue-500'
231
+ btnTextHoverClass=''
232
+ className=' '
233
+ />
234
+ </a>
235
+ </div>}
236
+
276
237
  </th>
277
238
  )}
278
239
  </React.Fragment>
@@ -292,7 +253,7 @@ export default function PricingTableB(props) {
292
253
  <td></td>
293
254
  {TABLE_HEADER.map((value, index) => (
294
255
  <React.Fragment key={index}>
295
- {index != 0 && value['button_title'] &&
256
+ {index !== 0 && value['button_title'] &&
296
257
  <td key={index} className='px-8'>
297
258
  <a href={value['button_link']}>
298
259
  <HDSButton
package/src/HDS/modules/navCard/navCard.js CHANGED
@@ -60,7 +60,7 @@ export default function NavCard(props) {
60
60
  showVideo ? (
61
61
  <video
62
62
  id="hero_vid"
63
- controls={false}
63
+ controls={true}
64
64
  autoPlay
65
65
  muted
66
66
  playsInline