hds-web 1.11.0 → 1.11.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 (10) hide show
  1. package/dist/index.css +2 -2
  2. package/dist/index.es.css +2 -2
  3. package/dist/index.es.js +4 -4
  4. package/dist/index.js +4 -4
  5. package/package.json +1 -1
  6. package/src/HDS/components/Cards/Feedback/feedback.js +5 -1
  7. package/src/HDS/components/Cards/Misc/iconCard.js +78 -86
  8. package/src/HDS/components/Cards/Misc/imageBadgeCard.js +23 -224
  9. package/src/HDS/components/Cards/VideoCard/homeVC.js +1 -1
  10. package/src/styles/tailwind.css +12 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hds-web",
3
- "version": "1.11.0",
3
+ "version": "1.11.3",
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
@@ -6,6 +6,10 @@ import { HDSButton } from "../../Buttons";
6
6
 
7
7
 
8
8
  export default function FeedbackCard(props) {
9
+ let logoBg = '';
10
+ if (props.logoBg){
11
+ logoBg = HDSColor(props.logoBg);
12
+ }
9
13
  return (
10
14
  <div className='bg-neutral-0 rounded-3xl shadow p-6 tb-l:p-10 grid mb-6 db-s:mb-0 last:mb-0 flex-1 max-w-[920px] mx-auto flex-col'>
11
15
  <div className=" self-start">
@@ -28,7 +32,7 @@ export default function FeedbackCard(props) {
28
32
  )
29
33
  }
30
34
  <div className={"mb-s:flex items-start" + ((props.dividerClass) ? " pt-6" : "mt-0")}>
31
- <div className={"border border-neutral-150 p-2 flex items-center justify-center rounded-2xl" + ((props.dividerClass) ? " w-[72px] h-[56px] min-w-[72px]" : " w-[112px] h-[90px] min-w-[112px]")}>
35
+ <div className={"border border-neutral-150 p-2 flex items-center justify-center rounded-2xl" + ((props.dividerClass) ? " w-[72px] h-[56px] min-w-[72px]" : " w-[112px] h-[90px] min-w-[112px] " + logoBg)}>
32
36
  <img className="max-h-[20px]" src={props.brandImgUrl} alt={props.brandImgAlt}/>
33
37
  </div>
34
38
  <div className={"pt-4 mb-s:pt-0 " + ((props.dividerClass) ? "mb-s:pl-6" : "mb-s:pl-8")}>
package/src/HDS/components/Cards/Misc/iconCard.js CHANGED
@@ -129,95 +129,87 @@ export default function IconCard(props) {
129
129
  ) :
130
130
 
131
131
  (
132
- <div>
133
-
134
-
135
- <a href={((props.readMoreBtn && !props.button) ? props.readMoreBtn['cta_link'] : props.button[0]['cta_link'])}
136
- className={`bg-neutral-0 group grid h-full transition-all ease-in-out rounded-3xl ${cardVariant[props.cardType]['cardStyle']} ` + ((props.cardBorder) ? props.cardBorder : 'shadow') + ((props.readMoreBtn || props.button) ? ' hover:shadow-lg' : '')}
137
- >
138
- <div className=" self-start">
139
- <div
140
- className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 flex items-center justify-center rounded-full mb-6`}
141
- >
142
- <Icon
143
- height={`stroke-[1.5px] ${cardVariant[props.cardType]['iconStyle']}`}
144
- variant={props.iconVariant}
145
- strokeColor={props.iconStroke}
146
- strokeClass={HDSColor(props.iconStrokeClass)} />
147
- </div>
148
- <div
149
- className="flex-1">
150
-
151
- {props.cardType &&
152
- (
153
- <>
154
- <Typography
155
- textStyle={cardVariant[props.cardType]['titleTextStyle']}
156
- className={cardVariant[props.cardType]['titleClasses']}
157
- >
158
- {props.title}
159
- </Typography>
160
-
161
- <Typography
162
- textStyle={cardVariant[props.cardType]['descTextStyle']}
163
- className={`${cardVariant[props.cardType]['descClasses']} [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600`}
164
- >
165
- <ReactMarkdown>
166
- {props.description}
167
- </ReactMarkdown>
168
- </Typography>
169
- {props.readMoreBtn && (
170
- <a href={props.readMoreBtn.cta_link} className='flex'>
171
- <HDSButton
172
- label={props.readMoreBtn.cta_text}
173
- type='secondaryLink'
174
- leftIconVariant='none'
175
- rightIconVariant='none'
176
- state='default'
177
- size='sm'
178
- rightAnimatedArrow={true}
179
- rightAnimatedArrowColor='#3970FD'
180
- animatedHoverStroke='#3970FD'
181
- btnTextColorClass='text-blue-500'
182
- btnTextHoverClass=''
183
- className=' mt-4'
184
- />
185
- </a>
186
- )
187
-
188
- }
189
- </>
190
- )
191
- }
192
- </div>
132
+ <a href={((props.readMoreBtn && !props.button) ? props.readMoreBtn['cta_link'] : props.button[0]['cta_link'])}
133
+ className={`bg-neutral-0 group grid h-full transition-all ease-in-out rounded-3xl ${cardVariant[props.cardType]['cardStyle']} ` + ((props.cardBorder) ? props.cardBorder : 'shadow') + ((props.readMoreBtn || props.button) ? ' hover:shadow-lg hover:translate-y-0.5' : '')}
134
+ >
135
+ <div className=" self-start">
136
+ <div
137
+ className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 flex items-center justify-center rounded-full mb-6`}
138
+ >
139
+ <Icon
140
+ height={`stroke-[1.5px] ${cardVariant[props.cardType]['iconStyle']}`}
141
+ variant={props.iconVariant}
142
+ strokeColor={props.iconStroke}
143
+ strokeClass={HDSColor(props.iconStrokeClass)} />
193
144
  </div>
194
- {props.button &&
195
- <div className="flex gap-2">
196
- {props.button.map((btn, index) => (
197
- <a href={btn.cta_link} key={index} className="flex self-end mt-7">
198
- <HDSButton
199
- label={btn.cta_text}
200
- type={btn.cta_type || 'secondary'}
201
- leftIconVariant='none'
202
- rightIconVariant='none'
203
- state='default'
204
- size='sm'
205
- rightAnimatedArrow={true}
206
- rightAnimatedArrowColor={btn.rightAnimatedArrowColor || '#3970FD'}
207
- btnBgColorClass={btn.btnBg}
208
- btnTextHoverClass={btn.btnTextColorClass}
209
- animatedHoverStroke={btn.animatedHoverStroke}
210
- btnTextColorClass={btn.btnTextColorClass}
211
- />
212
- </a>))
213
- }
214
- </div>
215
- }
145
+ <div
146
+ className="flex-1">
147
+
148
+ {props.cardType &&
149
+ (
150
+ <>
151
+ <Typography
152
+ textStyle={cardVariant[props.cardType]['titleTextStyle']}
153
+ className={cardVariant[props.cardType]['titleClasses']}
154
+ >
155
+ {props.title}
156
+ </Typography>
157
+
158
+ <Typography
159
+ textStyle={cardVariant[props.cardType]['descTextStyle']}
160
+ className={`${cardVariant[props.cardType]['descClasses']} [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600`}
161
+ >
162
+ <ReactMarkdown>
163
+ {props.description}
164
+ </ReactMarkdown>
165
+ </Typography>
166
+ {props.readMoreBtn && (
167
+ <HDSButton
168
+ label={props.readMoreBtn.cta_text}
169
+ type='secondaryLink'
170
+ leftIconVariant='none'
171
+ rightIconVariant='none'
172
+ state='default'
173
+ size='sm'
174
+ rightAnimatedArrow={true}
175
+ rightAnimatedArrowColor='#3970FD'
176
+ animatedHoverStroke='#3970FD'
177
+ btnTextColorClass='text-blue-500'
178
+ btnTextHoverClass=''
179
+ className=' mt-4'
180
+ />
181
+ )
182
+
183
+ }
184
+ </>
185
+ )
186
+ }
187
+ </div>
188
+ </div>
189
+ {props.button &&
190
+ <div className="flex gap-2">
191
+ {props.button.map((btn, index) => (
192
+ <HDSButton
193
+ label={btn.cta_text}
194
+ type={btn.cta_type || 'secondary'}
195
+ leftIconVariant='none'
196
+ rightIconVariant='none'
197
+ state='default'
198
+ size='sm'
199
+ rightAnimatedArrow={true}
200
+ rightAnimatedArrowColor={btn.rightAnimatedArrowColor || '#3970FD'}
201
+ btnBgColorClass={btn.btnBg}
202
+ btnTextHoverClass={btn.btnTextColorClass}
203
+ animatedHoverStroke={btn.animatedHoverStroke}
204
+ btnTextColorClass={btn.btnTextColorClass}
205
+ />))
206
+ }
207
+ </div>
208
+ }
216
209
 
217
210
 
218
211
 
219
- </a>
220
- </div>
212
+ </a>
221
213
  )
222
214
 
223
215
  }
@@ -231,4 +223,4 @@ IconCard.defaultProps = {
231
223
  }
232
224
  Icon.propTypes = {
233
225
  cardType: PropTypes.oneOf(['withoutButton', 'withButton', 'sm']),
234
- }
226
+ }
package/src/HDS/components/Cards/Misc/imageBadgeCard.js CHANGED
@@ -1,234 +1,33 @@
1
- import React from "react";
2
- import PropTypes from 'prop-types';
3
- import { Icon } from "../../common-components/Icon";
4
- import { HDSColor } from '../../../foundation/ColorPalette'
5
- import { Typography } from '../../../foundation/Typography'
6
- import { HDSButton } from "../../Buttons";
7
- import ReactMarkdown from "react-markdown";
8
- const cardVariant = {
9
- "withButton": {
10
- 'cardStyle': 'p-10 ',
11
- 'iconWidthStyle': 'h-20 w-20',
12
- 'iconStyle': 'h-10 w-10',
13
- 'titleTextStyle': 'h4',
14
- 'titleClasses': 'mb-1 text-blue-800 text-hds-m-h4 tb:text-hds-t-h4 db:text-hds-d-h4',
15
- 'descTextStyle': 'body1c',
16
- 'descClasses': 'text-neutral-1000 text-hds-m-body1c tb:text-hds-t-body1c db:text-hds-d-body1c'
17
- },
18
- "withoutButton": {
19
- 'cardStyle': 'p-6',
20
- 'iconWidthStyle': 'h-12 w-12',
21
- 'iconStyle': 'h-6 w-6',
22
- 'titleTextStyle': 'h5',
23
- 'titleClasses': 'mb-1 text-blue-600 text-hds-m-h5 tb:text-hds-t-h5 db:text-hds-d-h5',
24
- 'descTextStyle': 'body1',
25
- 'descClasses': 'text-neutral-1000 text-hds-m-body1 tb:text-hds-t-body1 db:text-hds-d-body1'
26
- },
27
- "sm": {
28
- 'cardStyle': 'p-6',
29
- 'iconWidthStyle': 'h-12 w-12',
30
- 'iconStyle': 'h-6 w-6',
31
- 'titleTextStyle': 'body3c',
32
- 'titleClasses': 'mb-1 text-neutral-800 text-hds-m-body3c-bold tb:text-hds-t-body3c-bold db:text-hds-d-body3c-bold',
33
- 'descTextStyle': 'body3',
34
- 'descClasses': 'text-neutral-800 text-hds-m-body3 tb:text-hds-t-body3 db:text-hds-d-body3'
35
- }
36
- }
1
+ import React from "react"
2
+ import { HDSColor } from "../../../foundation/ColorPalette"
3
+ import { Typography } from "../../../foundation/Typography"
4
+ import { Badges } from "../../BadgesCaption"
5
+ export default function ImageBadgeCard(card) {
37
6
 
38
- export default function IconCard(props) {
39
- const iconBG = HDSColor(props.iconBg);
40
7
  return (
41
8
  <>
42
- {
43
- (props.readMoreBtn || props.button || props.button.length > 1) ? (
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 : 'shadow') + ((props.readMoreBtn || props.button) ? ' hover:shadow-lg' : '')}
46
- >
47
- <div className=" self-start">
48
- <div
49
- className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 flex items-center justify-center rounded-full mb-6`}
50
- >
51
- <Icon
52
- height={`stroke-[1.5px] ${cardVariant[props.cardType]['iconStyle']}`}
53
- variant={props.iconVariant}
54
- strokeColor={props.iconStroke}
55
- strokeClass={HDSColor(props.iconStrokeClass)} />
9
+ <div>
10
+ <a href={card.sliderLink}>
11
+ <div className={`${HDSColor(card.cardBg)}bg-neutral-0 shadow hover:transition-all hover:ease-in-out hover:duration-300 hover:border-opacity-0 min-h-[443px] min-w-[312px] tb:max-w-[763px] tb:min-h-[245px] rounded-3xl tb:p-8 p-4`}>
12
+
13
+ <div className='flex flex-col-reverse tb:flex-row justify-between gap-4 items-center'>
14
+ <div className='tb:max-w-[393px] mt-8 tb:mt-0'>
15
+ <Badges
16
+ color={card.badge.color}
17
+ children={card.badge.label}
18
+ text_color='text-neutral-0'
19
+ />
20
+ <Typography textStyle='h4' className='mt-2 text-neutral-1000 max-w-[326px]'>{card.title}</Typography>
21
+ <Typography textStyle='sub2' className='mt-2 text-neutral-600'>{card.subTitle}</Typography>
56
22
  </div>
57
- <div
58
- className="flex-1">
59
-
60
- {props.cardType &&
61
- (
62
- <>
63
- <Typography
64
- textStyle={cardVariant[props.cardType]['titleTextStyle']}
65
- className={cardVariant[props.cardType]['titleClasses']}
66
- >
67
- {props.title}
68
- </Typography>
69
-
70
- <Typography
71
- textStyle={cardVariant[props.cardType]['descTextStyle']}
72
- className={`${cardVariant[props.cardType]['descClasses']} [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600`}
73
- >
74
- <ReactMarkdown>
75
- {props.description}
76
- </ReactMarkdown>
77
- </Typography>
78
- {props.readMoreBtn && (
79
- <a href={props.readMoreBtn.cta_link} className='flex'>
80
- <HDSButton
81
- label={props.readMoreBtn.cta_text}
82
- type='secondaryLink'
83
- leftIconVariant='none'
84
- rightIconVariant='none'
85
- state='default'
86
- size='sm'
87
- rightAnimatedArrow={true}
88
- rightAnimatedArrowColor='#3970FD'
89
- animatedHoverStroke='#3970FD'
90
- btnTextColorClass='text-blue-500'
91
- btnTextHoverClass=''
92
- className=' mt-4'
93
- />
94
- </a>
95
- )
23
+ <div className="flex justify-center h-full items-center">
24
+ <img src={card.imageUrl} alt={card.title} className='tb:max-w-[290px] rounded-lg flex items-center justify-center tb:max-h-[181px]' />
96
25
 
97
- }
98
- </>
99
- )
100
- }
101
26
  </div>
102
27
  </div>
103
- {props.button &&
104
- <div className="flex gap-2">
105
- {props.button.map((btn, index) => (
106
- <a href={btn.cta_link} key={index} className="flex self-end mt-7">
107
- <HDSButton
108
- label={btn.cta_text}
109
- type={btn.cta_type || 'secondary'}
110
- leftIconVariant='none'
111
- rightIconVariant='none'
112
- state='default'
113
- size='sm'
114
- rightAnimatedArrow={true}
115
- rightAnimatedArrowColor={btn.rightAnimatedArrowColor || '#3970FD'}
116
- btnBgColorClass={btn.btnBg}
117
- btnTextHoverClass={btn.btnTextColorClass}
118
- animatedHoverStroke={btn.animatedHoverStroke}
119
- btnTextColorClass={btn.btnTextColorClass}
120
- />
121
- </a>))
122
- }
123
- </div>
124
- }
125
-
126
-
127
-
128
- </div>
129
- ) :
130
-
131
- (
132
- <div>
133
-
134
-
135
- <a href={((props.readMoreBtn && !props.button) ? props.readMoreBtn : props.button[0]['cta_link'])}
136
- className={`bg-neutral-0 group grid h-full transition-all ease-in-out rounded-3xl ${cardVariant[props.cardType]['cardStyle']} ` + ((props.cardBorder) ? props.cardBorder : 'shadow') + ((props.readMoreBtn || props.button) ? ' hover:shadow-lg' : '')}
137
- >
138
- <div className=" self-start">
139
- <div
140
- className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 flex items-center justify-center rounded-full mb-6`}
141
- >
142
- <Icon
143
- height={`stroke-[1.5px] ${cardVariant[props.cardType]['iconStyle']}`}
144
- variant={props.iconVariant}
145
- strokeColor={props.iconStroke}
146
- strokeClass={HDSColor(props.iconStrokeClass)} />
147
- </div>
148
- <div
149
- className="flex-1">
150
-
151
- {props.cardType &&
152
- (
153
- <>
154
- <Typography
155
- textStyle={cardVariant[props.cardType]['titleTextStyle']}
156
- className={cardVariant[props.cardType]['titleClasses']}
157
- >
158
- {props.title}
159
- </Typography>
160
-
161
- <Typography
162
- textStyle={cardVariant[props.cardType]['descTextStyle']}
163
- className={`${cardVariant[props.cardType]['descClasses']} [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600`}
164
- >
165
- <ReactMarkdown>
166
- {props.description}
167
- </ReactMarkdown>
168
- </Typography>
169
- {props.readMoreBtn && (
170
- <a href={props.readMoreBtn.cta_link} className='flex'>
171
- <HDSButton
172
- label={props.readMoreBtn.cta_text}
173
- type='secondaryLink'
174
- leftIconVariant='none'
175
- rightIconVariant='none'
176
- state='default'
177
- size='sm'
178
- rightAnimatedArrow={true}
179
- rightAnimatedArrowColor='#3970FD'
180
- animatedHoverStroke='#3970FD'
181
- btnTextColorClass='text-blue-500'
182
- btnTextHoverClass=''
183
- className=' mt-4'
184
- />
185
- </a>
186
- )
187
-
188
- }
189
- </>
190
- )
191
- }
192
- </div>
193
- </div>
194
- {props.button &&
195
- <div className="flex gap-2">
196
- {props.button.map((btn, index) => (
197
- <a href={btn.cta_link} key={index} className="flex self-end mt-7">
198
- <HDSButton
199
- label={btn.cta_text}
200
- type={btn.cta_type || 'secondary'}
201
- leftIconVariant='none'
202
- rightIconVariant='none'
203
- state='default'
204
- size='sm'
205
- rightAnimatedArrow={true}
206
- rightAnimatedArrowColor={btn.rightAnimatedArrowColor || '#3970FD'}
207
- btnBgColorClass={btn.btnBg}
208
- btnTextHoverClass={btn.btnTextColorClass}
209
- animatedHoverStroke={btn.animatedHoverStroke}
210
- btnTextColorClass={btn.btnTextColorClass}
211
- />
212
- </a>))
213
- }
214
28
  </div>
215
- }
216
-
217
-
218
-
219
- </a>
220
- </div>
221
- )
222
-
223
- }
224
- </>
29
+ </a>
30
+ </div>
31
+ </>
225
32
  )
226
- }
227
-
228
- IconCard.defaultProps = {
229
- cardType: 'withoutButton',
230
- iconStrokeClass: 'stroke-neutral-1000'
231
- }
232
- Icon.propTypes = {
233
- cardType: PropTypes.oneOf(['withoutButton', 'withButton', 'sm']),
234
33
  }
package/src/HDS/components/Cards/VideoCard/homeVC.js CHANGED
@@ -48,7 +48,7 @@ export default function HomeVC(props) {
48
48
  />
49
49
 
50
50
  </div>
51
- <div className='absolute max-[365px]:h-[657px] h-[600px] z-50 top-[72px]'>
51
+ <div className='absolute max-[365px]:h-[657px] h-[600px] z-50 top-[72px] px-4'>
52
52
  <div className=''>
53
53
  < FeedbackCard
54
54
  brandImgUrl={props.testimonial.card.title_img}
package/src/styles/tailwind.css CHANGED
@@ -8612,6 +8612,18 @@ select{
8612
8612
  z-index: 10;
8613
8613
  }
8614
8614
 
8615
+ .hover\:translate-y-0:hover{
8616
+ --tw-translate-y: 0px;
8617
+ -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));
8618
+ 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));
8619
+ }
8620
+
8621
+ .hover\:translate-y-0\.5:hover{
8622
+ --tw-translate-y: 0.125rem;
8623
+ -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));
8624
+ 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));
8625
+ }
8626
+
8615
8627
  .hover\:scale-110:hover{
8616
8628
  --tw-scale-x: 1.1;
8617
8629
  --tw-scale-y: 1.1;