hds-web 1.32.5 → 1.32.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (6) 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/components/Hero/herolinkcard.js +87 -87
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hds-web",
3
- "version": "1.32.5",
3
+ "version": "1.32.6",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/HDS/components/Hero/herolinkcard.js CHANGED
@@ -25,14 +25,14 @@ const tabCard = (Content) => (
25
25
  }
26
26
  {
27
27
  Content.buttons && (
28
- <div className='flex items-center flex-wrap flex-row gap-2'>
28
+ <div className='flex items-center flex-wrap flex-row gap-2 pt-6'>
29
29
  {Content.buttons.map((btn, index) => (
30
30
  <Fragment key={index}>
31
31
  {btn.url && btn.text && btn.type && (
32
- <a href={btn.url} key={index} className='flex pt-6'>
32
+ <a href={btn.url} key={index} className='flex '>
33
33
  <HDSButton
34
34
  label={btn.text}
35
- type={ btn.type}
35
+ type={btn.type}
36
36
  leftIconVariant='none'
37
37
  rightIconVariant='none'
38
38
  state='default'
@@ -47,8 +47,8 @@ const tabCard = (Content) => (
47
47
  btnbgHoverClass={btn.btnBgColorClass}
48
48
  />
49
49
  </a>)}
50
- </Fragment>
51
- ))
50
+ </Fragment>
51
+ ))
52
52
  }
53
53
  </div>
54
54
  )
@@ -57,91 +57,91 @@ const tabCard = (Content) => (
57
57
  )
58
58
 
59
59
  export default function HeroLinkCard(props) {
60
- const [showVideo, setShowVideo] = useState(false);
61
- if (!props) {
62
- return <div></div>; // Replace with your loading indicator or fallback UI
63
- }
64
- const LinkCardsFn = (props) => {
65
- return (
66
- props.linkCards && (
67
- <div className="flex tb-m:justify-center overflow-auto no-scrollbar db:overflow-visible scrollbar-hide flex-row mt-10 tb:mt-12 db:mt-16 gap-6 tb:flex-row ">
68
- {props.linkCards.map((card, index) => (
69
- <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]`}>
70
- <LinkCard
71
- titleTextColor={card.titleTextColor}
72
- descTextColor={card.descTextColor}
73
- linkUrl={card.linkUrl}
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
- };
87
-
88
-
60
+ const [showVideo, setShowVideo] = useState(false);
61
+ if (!props) {
62
+ return <div></div>; // Replace with your loading indicator or fallback UI
63
+ }
64
+ const LinkCardsFn = (props) => {
89
65
  return (
90
- <div>
91
- <div className="flex flex-col-reverse tb:flex tb:flex-row tb:justify-between">
92
- <div className={`tb:w-1/2 db:max-w-[${props.contentWd ? props.contentWd : '535px'}]`}>
93
- {props &&
94
- tabCard(props)}
95
- </div>
96
- <div className="grid items-center relative db:max-w-[500px] tb:w-1/2 transition-opacity duration-700 ease-linear ">
97
- <Typography
98
- textStyle="h2"
99
- as="h2"
100
- className={`tb:hidden pb-6 ${props.titleTextColor ? HDSColor(props.titleTextColor) : 'text-neutral-1000'}`}
101
- >
102
- {props.title}
103
- </Typography>
104
- {showVideo ? (
105
- <>
106
- {props.videoUrl && (
107
- <video
108
- id="hero_vid"
109
- controls={true}
110
- autoPlay
111
- playsInline
112
- width="500"
113
- height="500"
114
- className="tb:w-full w-full rounded-3xl"
115
- src={props.videoUrl}
116
- ></video>
117
- )}
118
- </>
119
- ) : (
120
- <div className="relative">
121
- {props.imgUrl && (
122
- <img src={props.imgUrl} alt="Illustration" loading="lazy" />
123
- )}
124
- {props.videoUrl && (
125
- <div
126
- className={`${props.currentPlayBtnClass} w-14 h-14 cursor-pointer video-play-btn rounded-full flex items-center justify-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-neutral-1000 shadow-2xl`}
127
- onClick={() => setShowVideo(true)}
128
- >
129
- <Icon
130
- variant="play"
131
- height="h-6 w-6"
132
- strokeColor="#ffffff"
133
- strokeClass="stroke-neutral-0"
134
- />
135
- </div>
136
- )}
137
- </div>
138
- )}
139
- </div>
66
+ props.linkCards && (
67
+ <div className="flex tb-m:justify-center overflow-auto no-scrollbar db:overflow-visible scrollbar-hide flex-row mt-10 tb:mt-12 db:mt-16 gap-6 tb:flex-row ">
68
+ {props.linkCards.map((card, index) => (
69
+ <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]`}>
70
+ <LinkCard
71
+ titleTextColor={card.titleTextColor}
72
+ descTextColor={card.descTextColor}
73
+ linkUrl={card.linkUrl}
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
+ ))}
140
83
  </div>
84
+ )
85
+ );
86
+ };
87
+
141
88
 
142
- <div className="">
143
- {LinkCardsFn(props)}
89
+ return (
90
+ <div>
91
+ <div className="flex flex-col-reverse tb-l:flex tb-l:flex-row tb-l:justify-between gap-4">
92
+ <div className={`max-w-[435px] db:max-w-[${props.contentWd ? props.contentWd : '535px'}]`}>
93
+ {props &&
94
+ tabCard(props)}
95
+ </div>
96
+ <div className="grid items-center relative db:max-w-[500px] tb:w-1/2 transition-opacity duration-700 ease-linear ">
97
+ <Typography
98
+ textStyle="h2"
99
+ as="h2"
100
+ className={`tb:hidden pb-6 ${props.titleTextColor ? HDSColor(props.titleTextColor) : 'text-neutral-1000'}`}
101
+ >
102
+ {props.title}
103
+ </Typography>
104
+ {showVideo ? (
105
+ <>
106
+ {props.videoUrl && (
107
+ <video
108
+ id="hero_vid"
109
+ controls={true}
110
+ autoPlay
111
+ playsInline
112
+ width="500"
113
+ height="500"
114
+ className="tb:w-full w-full rounded-3xl"
115
+ src={props.videoUrl}
116
+ ></video>
117
+ )}
118
+ </>
119
+ ) : (
120
+ <div className="relative">
121
+ {props.imgUrl && (
122
+ <img src={props.imgUrl} alt="Illustration" loading="lazy" />
123
+ )}
124
+ {props.videoUrl && (
125
+ <div
126
+ className={`${props.currentPlayBtnClass} w-14 h-14 cursor-pointer video-play-btn rounded-full flex items-center justify-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-neutral-1000 shadow-2xl`}
127
+ onClick={() => setShowVideo(true)}
128
+ >
129
+ <Icon
130
+ variant="play"
131
+ height="h-6 w-6"
132
+ strokeColor="#ffffff"
133
+ strokeClass="stroke-neutral-0"
134
+ />
135
+ </div>
136
+ )}
137
+ </div>
138
+ )}
144
139
  </div>
145
140
  </div>
146
- );
141
+
142
+ <div className="">
143
+ {LinkCardsFn(props)}
144
+ </div>
145
+ </div>
146
+ );
147
147
  }