hds-web 1.18.6 → 1.18.7
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.
- package/dist/index.css +1 -1
- package/dist/index.es.css +1 -1
- package/dist/index.es.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/HDS/components/Cards/Misc/iconCard.js +74 -54
package/package.json
CHANGED
@@ -40,9 +40,9 @@ export default function IconCard(props) {
|
|
40
40
|
return (
|
41
41
|
<>
|
42
42
|
{
|
43
|
-
((props.readMoreBtn && props.button) || (!props.
|
43
|
+
((props.readMoreBtn && props.button) || (!props.readMoreBtn && !props.button) || (props.button && props.button.length > 1) || !props.linkHover) ? (
|
44
44
|
<div
|
45
|
-
className={`bg-neutral-0 grid h-full transition-all ease-in-out rounded-3xl ${cardVariant[props.cardType]['cardStyle']} ` + ((props.cardBorder) ? props.cardBorder : 'tb:shadow')
|
45
|
+
className={`bg-neutral-0 grid h-full transition-all ease-in-out rounded-3xl ${cardVariant[props.cardType]['cardStyle']} ` + ((props.cardBorder) ? props.cardBorder : 'tb:shadow')}
|
46
46
|
>
|
47
47
|
<div className=" self-start">
|
48
48
|
<div
|
@@ -75,38 +75,62 @@ export default function IconCard(props) {
|
|
75
75
|
{props.description}
|
76
76
|
</ReactMarkdown>
|
77
77
|
</Typography>
|
78
|
-
{props.readMoreBtn && (
|
79
|
-
<a href={props.readMoreBtn.cta_link} className='flex'>
|
80
|
-
<div className="flex">
|
81
|
-
<HDSButton
|
82
|
-
label={props.readMoreBtn.cta_text}
|
83
|
-
type='secondaryLink'
|
84
|
-
leftIconVariant='none'
|
85
|
-
rightIconVariant='none'
|
86
|
-
state='default'
|
87
|
-
size='sm'
|
88
|
-
rightAnimatedArrow={props.linkHover ?? 'true'}
|
89
|
-
rightAnimatedArrowColor='#3970FD'
|
90
|
-
animatedHoverStroke='#3970FD'
|
91
|
-
btnTextColorClass={props.linkHover ? 'text-blue-500' : 'text-neutral-1000'}
|
92
|
-
btnTextHoverClass=''
|
93
|
-
className=' mt-4'
|
94
|
-
/>
|
95
|
-
</div>
|
96
|
-
</a>
|
97
|
-
)
|
98
|
-
|
99
|
-
}
|
100
78
|
</>
|
101
79
|
)
|
102
80
|
}
|
103
81
|
</div>
|
104
82
|
</div>
|
83
|
+
{props.readMoreBtn && (
|
84
|
+
<>
|
85
|
+
{
|
86
|
+
props.linkHover ? (
|
87
|
+
<a href={props.readMoreBtn.cta_link} className='flex self-end'>
|
88
|
+
<div className="flex">
|
89
|
+
<HDSButton
|
90
|
+
label={props.readMoreBtn.cta_text}
|
91
|
+
type='secondaryLink'
|
92
|
+
leftIconVariant='none'
|
93
|
+
rightIconVariant='none'
|
94
|
+
state='default'
|
95
|
+
size='sm'
|
96
|
+
rightAnimatedArrow={true}
|
97
|
+
rightAnimatedArrowColor='#3970FD'
|
98
|
+
animatedHoverStroke='#3970FD'
|
99
|
+
btnTextColorClass='text-blue-500'
|
100
|
+
btnTextHoverClass=''
|
101
|
+
className=' mt-4'
|
102
|
+
/>
|
103
|
+
</div>
|
104
|
+
</a>
|
105
|
+
) : (
|
106
|
+
<div className="flex self-end">
|
107
|
+
<HDSButton
|
108
|
+
label={props.readMoreBtn.cta_text}
|
109
|
+
type='secondaryLink'
|
110
|
+
leftIconVariant='none'
|
111
|
+
rightIconVariant='none'
|
112
|
+
state='default'
|
113
|
+
size='sm'
|
114
|
+
rightAnimatedArrow={false}
|
115
|
+
rightAnimatedArrowColor='#3970FD'
|
116
|
+
animatedHoverStroke='#3970FD'
|
117
|
+
btnTextColorClass='text-neutral-800'
|
118
|
+
btnTextHoverClass=''
|
119
|
+
className=' mt-4 hover:cursor-default'
|
120
|
+
/>
|
121
|
+
</div>
|
122
|
+
)
|
123
|
+
}
|
124
|
+
</>
|
125
|
+
)
|
126
|
+
}
|
105
127
|
{props.button &&
|
106
|
-
<div className="flex
|
128
|
+
<div className="flex gap-2 ">
|
107
129
|
{props.button.map((btn, index) => (
|
108
|
-
<a href={btn.cta_link} key={index} className="flex mt-7">
|
130
|
+
<a href={btn.cta_link} key={index} className="flex self-end mt-7">
|
109
131
|
<div className="flex">
|
132
|
+
|
133
|
+
|
110
134
|
<HDSButton
|
111
135
|
label={btn.cta_text}
|
112
136
|
type={btn.cta_type || 'secondary'}
|
@@ -114,7 +138,7 @@ export default function IconCard(props) {
|
|
114
138
|
rightIconVariant='none'
|
115
139
|
state='default'
|
116
140
|
size='sm'
|
117
|
-
rightAnimatedArrow={
|
141
|
+
rightAnimatedArrow={true}
|
118
142
|
rightAnimatedArrowColor={btn.rightAnimatedArrowColor || '#3970FD'}
|
119
143
|
btnBgColorClass={btn.btnBg}
|
120
144
|
btnTextHoverClass={btn.btnTextColorClass}
|
@@ -126,15 +150,12 @@ export default function IconCard(props) {
|
|
126
150
|
}
|
127
151
|
</div>
|
128
152
|
}
|
129
|
-
|
130
|
-
|
131
|
-
|
132
153
|
</div>
|
133
154
|
) :
|
134
155
|
|
135
156
|
(
|
136
157
|
<a href={((props.readMoreBtn && !props.button) ? props.readMoreBtn['cta_link'] : props.button[0]['cta_link'])}
|
137
|
-
className={`bg-neutral-0 group grid h-full duration-300 transition-all ease-in-out rounded-3xl ${cardVariant[props.cardType]['cardStyle']} ` + ((props.cardBorder) ? props.cardBorder : 'tb:shadow') + ((props.readMoreBtn || props.button) ? ' hover:shadow-lg hover:translate-y-0.5 ' : '')}
|
158
|
+
className={`bg-neutral-0 group grid h-full duration-300 transition-all ease-in-out rounded-3xl ${cardVariant[props.cardType]['cardStyle']} ` + ((props.cardBorder) ? props.cardBorder : 'tb:shadow') + ((props.readMoreBtn || props.button || props.linkHover) ? ' hover:shadow-lg hover:translate-y-0.5 ' : '')}
|
138
159
|
>
|
139
160
|
<div className=" self-start">
|
140
161
|
<div
|
@@ -167,32 +188,33 @@ export default function IconCard(props) {
|
|
167
188
|
{props.description}
|
168
189
|
</ReactMarkdown>
|
169
190
|
</Typography>
|
170
|
-
|
171
|
-
<div className="flex">
|
172
|
-
<HDSButton
|
173
|
-
label={props.readMoreBtn.cta_text}
|
174
|
-
type='secondaryLink'
|
175
|
-
leftIconVariant='none'
|
176
|
-
rightIconVariant='none'
|
177
|
-
state='default'
|
178
|
-
size='sm'
|
179
|
-
rightAnimatedArrow={true}
|
180
|
-
rightAnimatedArrowColor='#3970FD'
|
181
|
-
animatedHoverStroke='#3970FD'
|
182
|
-
btnTextColorClass='text-blue-500'
|
183
|
-
btnTextHoverClass=''
|
184
|
-
className=' mt-4'
|
185
|
-
/>
|
186
|
-
</div>
|
187
|
-
)
|
188
|
-
}
|
191
|
+
|
189
192
|
</>
|
190
193
|
)
|
191
194
|
}
|
192
195
|
</div>
|
193
196
|
</div>
|
197
|
+
{props.readMoreBtn && (
|
198
|
+
<div className="flex self-end">
|
199
|
+
<HDSButton
|
200
|
+
label={props.readMoreBtn.cta_text}
|
201
|
+
type='secondaryLink'
|
202
|
+
leftIconVariant='none'
|
203
|
+
rightIconVariant='none'
|
204
|
+
state='default'
|
205
|
+
size='sm'
|
206
|
+
rightAnimatedArrow={true}
|
207
|
+
rightAnimatedArrowColor='#3970FD'
|
208
|
+
animatedHoverStroke='#3970FD'
|
209
|
+
btnTextColorClass='text-blue-500'
|
210
|
+
btnTextHoverClass=''
|
211
|
+
className=' mt-4'
|
212
|
+
/>
|
213
|
+
</div>
|
214
|
+
)
|
215
|
+
}
|
194
216
|
{props.button &&
|
195
|
-
<div className="flex pt-4 self-end
|
217
|
+
<div className="flex pt-4 gap-2 self-end">
|
196
218
|
{props.button.map((btn, index) => (
|
197
219
|
<div className="flex">
|
198
220
|
<HDSButton
|
@@ -224,10 +246,8 @@ export default function IconCard(props) {
|
|
224
246
|
|
225
247
|
IconCard.defaultProps = {
|
226
248
|
cardType: 'withoutButton',
|
227
|
-
iconStrokeClass: 'stroke-neutral-1000'
|
228
|
-
linkHover:'true'
|
249
|
+
iconStrokeClass: 'stroke-neutral-1000'
|
229
250
|
}
|
230
251
|
Icon.propTypes = {
|
231
252
|
cardType: PropTypes.oneOf(['withoutButton', 'withButton', 'sm']),
|
232
253
|
}
|
233
|
-
|