hds-web 1.13.2 → 1.13.3

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 (7) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/index.es.css +1 -1
  3. package/dist/index.es.js +1 -1
  4. package/dist/index.js +1 -1
  5. package/package.json +1 -1
  6. package/src/HDS/modules/navCard/navCard.js +90 -52
  7. package/src/styles/tailwind.css +17 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hds-web",
3
- "version": "1.13.2",
3
+ "version": "1.13.3",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/HDS/modules/navCard/navCard.js CHANGED
@@ -4,62 +4,100 @@ 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 { Icon } from '../../components/common-components/Icon'
7
8
  import PropTypes from 'prop-types';
8
9
 
9
- const tabCard = (tabContent) => (
10
- <>
11
- <div className=''>
12
- {tabContent.title && <Typography textStyle='h4' className={HDSColor(tabContent.title_color)}>{tabContent.title}</Typography>}
13
-
14
- {tabContent.subTitle && <Typography textStyle='body1c' className={HDSColor(tabContent.sub_title_color)}>{tabContent.subTitle}</Typography>}
15
- {tabContent.readMore_cta && <div className="flex">
16
- <HDSButton
17
- label={tabContent.readMore_cta}
18
- type='secondaryLink'
19
- leftIconVariant='none'
20
- rightIconVariant='none'
21
- state='default'
22
- size='sm'
23
- rightAnimatedArrow={true}
24
- rightAnimatedArrowColor='#3970FD'
25
- animatedHoverStroke='#3970FD'
26
- btnTextColorClass='text-blue-500'
27
- btnTextHoverClass=''
28
- className=' mt-4'
29
- />
30
- </div>}
31
-
32
- </div>
33
- {tabContent.btnLabel &&
34
- <div className='flex pl-3 pt-6 pb-8'>
35
- <HDSButton
36
- label={tabContent.btnLabel}
37
- type='secondaryLink'
38
- leftIconVariant='none'
39
- rightIconVariant='none'
40
- state='default'
41
- size='sm'
42
- rightAnimatedArrow={true}
43
- rightAnimatedArrowColor='#1E56E3'
44
- animatedHoverStroke='group-hover:stroke-blue-600'
45
- className='flex'
46
- btnTextColorClass='text-blue-600'
47
- />
48
- </div>
49
- }
50
- <div className='mt-8'>
51
- <MediaBox
52
- img_url={tabContent.img_url}
53
- video_url={tabContent.video_url}
54
- video_poster={tabContent.video_poster}
55
- />
56
- </div>
57
- </>
58
- )
59
10
 
60
11
  export default function NavCard(props) {
12
+ const [showVideo, setShowVideo] = useState(false);
13
+ const TabCard = (tabContent) => {
14
+
15
+ return (
16
+ <>
17
+ <div className=''>
18
+ {tabContent.title && <Typography textStyle='h4' className={HDSColor(tabContent.title_color)}>{tabContent.title}</Typography>}
19
+
20
+ {tabContent.subTitle && <Typography textStyle='body1c' className={HDSColor(tabContent.sub_title_color)}>{tabContent.subTitle}</Typography>}
21
+ {tabContent.readMore_cta && <div className="flex">
22
+ <a href={tabContent.readMore_cta_link ?? ''} >
23
+ <HDSButton
24
+ label={tabContent.readMore_cta}
25
+ type='secondaryLink'
26
+ leftIconVariant='none'
27
+ rightIconVariant='none'
28
+ state='default'
29
+ size='sm'
30
+ rightAnimatedArrow={true}
31
+ rightAnimatedArrowColor='#3970FD'
32
+ animatedHoverStroke='#3970FD'
33
+ btnTextColorClass='text-blue-500'
34
+ btnTextHoverClass=''
35
+ className=' mt-4'
36
+ />
37
+ </a>
38
+ </div>}
39
+
40
+ </div>
41
+ {tabContent.btnLabel &&
42
+ <div className='flex pl-3 pt-6 pb-8'>
43
+ <HDSButton
44
+ label={tabContent.btnLabel}
45
+ type='secondaryLink'
46
+ leftIconVariant='none'
47
+ rightIconVariant='none'
48
+ state='default'
49
+ size='sm'
50
+ rightAnimatedArrow={true}
51
+ rightAnimatedArrowColor='#1E56E3'
52
+ animatedHoverStroke='group-hover:stroke-blue-600'
53
+ className='flex'
54
+ btnTextColorClass='text-blue-600'
55
+ />
56
+ </div>
57
+ }
58
+ <div className='mt-8'>
59
+ {
60
+ showVideo ? (
61
+ <video
62
+ id="hero_vid"
63
+ controls={false}
64
+ autoPlay
65
+ muted
66
+ playsInline
67
+ width="500"
68
+ height="500"
69
+ className="tb:w-full w-full rounded-3xl"
70
+ src={tabContent.video_url}
71
+ >
72
+ </video>
73
+ ) : (
74
+ <div className="relative">
75
+ {
76
+ tabContent.img_url && (
77
+ <img src={tabContent.img_url} alt="Illustration" className=' rounded-2xl'/>
78
+ )
79
+ }
80
+ {
81
+ tabContent.video_url && (
82
+ <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"
83
+ onClick={() => setShowVideo(true)}
84
+ >
85
+ <Icon variant='play' height='h-6 w-6 ml-1' strokeClass='stroke-neutral-0' />
86
+ </div>
87
+ )
88
+ }
89
+ </div>
90
+ )
91
+ }
92
+
93
+ </div>
94
+ </>
95
+ )
96
+ }
97
+
61
98
  const [activeTab, setActiveTab] = useState('');
62
99
 
100
+
63
101
  useEffect(() => {
64
102
  if (props.tabContent) {
65
103
  const tabNames = Object.keys(props.tabContent);
@@ -81,7 +119,7 @@ export default function NavCard(props) {
81
119
 
82
120
  <div className='max-w-[44.44rem] rounded-2xl'>
83
121
 
84
- <div className='flex pb-8'>
122
+ <div className='flex pb-8 overflow-scroll scrollbar-hide'>
85
123
  <Tab
86
124
  onTabClick={handleTabClick}
87
125
  tabs={props.navTabs}
@@ -92,7 +130,7 @@ export default function NavCard(props) {
92
130
  <div className=''>
93
131
  {props.tabContent &&
94
132
  props.tabContent[activeTab] &&
95
- tabCard(props.tabContent[activeTab])}
133
+ TabCard(props.tabContent[activeTab])}
96
134
  </div>
97
135
 
98
136
  </div>}
package/src/styles/tailwind.css CHANGED
@@ -2028,6 +2028,12 @@ select{
2028
2028
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2029
2029
  }
2030
2030
 
2031
+ .-translate-y-1\/2{
2032
+ --tw-translate-y: -50%;
2033
+ -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2034
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2035
+ }
2036
+
2031
2037
  .-rotate-45{
2032
2038
  --tw-rotate: -45deg;
2033
2039
  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -7219,6 +7225,11 @@ select{
7219
7225
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
7220
7226
  }
7221
7227
 
7228
+ .shadow-neutral-1000{
7229
+ --tw-shadow-color: #000615;
7230
+ --tw-shadow: var(--tw-shadow-colored);
7231
+ }
7232
+
7222
7233
  .outline{
7223
7234
  outline-style: solid;
7224
7235
  }
@@ -8615,6 +8626,12 @@ select{
8615
8626
  border-top-color: rgb(13 65 198 / var(--tw-border-opacity));
8616
8627
  }
8617
8628
 
8629
+ .after\:bg-blue-700::after{
8630
+ content: var(--tw-content);
8631
+ --tw-bg-opacity: 1;
8632
+ background-color: rgb(13 65 198 / var(--tw-bg-opacity));
8633
+ }
8634
+
8618
8635
  .after\:bg-gradient-to-r::after{
8619
8636
  content: var(--tw-content);
8620
8637
  background-image: linear-gradient(to right, var(--tw-gradient-stops));