hds-web 1.10.9 → 1.11.0

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 (8) 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/Misc/iconCard.js +85 -81
  7. package/src/HDS/components/Cards/Misc/imageBadgeCard.js +224 -23
  8. package/src/styles/tailwind.css +0 -75
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hds-web",
3
- "version": "1.10.9",
3
+ "version": "1.11.0",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/HDS/components/Cards/Misc/iconCard.js CHANGED
@@ -129,91 +129,95 @@ export default function IconCard(props) {
129
129
  ) :
130
130
 
131
131
  (
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' : '')}
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)} />
144
- </div>
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
- <a href={props.readMoreBtn.cta_link} className='flex'>
168
- <HDSButton
169
- label={props.readMoreBtn.cta_text}
170
- type='secondaryLink'
171
- leftIconVariant='none'
172
- rightIconVariant='none'
173
- state='default'
174
- size='sm'
175
- rightAnimatedArrow={true}
176
- rightAnimatedArrowColor='#3970FD'
177
- animatedHoverStroke='#3970FD'
178
- btnTextColorClass='text-blue-500'
179
- btnTextHoverClass=''
180
- className=' mt-4'
181
- />
182
- </a>
183
- )
184
-
185
- }
186
- </>
187
- )
188
- }
189
- </div>
190
- </div>
191
- {props.button &&
192
- <div className="flex gap-2">
193
- {props.button.map((btn, index) => (
194
- <a href={btn.cta_link} key={index} className="flex self-end mt-7">
195
- <HDSButton
196
- label={btn.cta_text}
197
- type={btn.cta_type || 'secondary'}
198
- leftIconVariant='none'
199
- rightIconVariant='none'
200
- state='default'
201
- size='sm'
202
- rightAnimatedArrow={true}
203
- rightAnimatedArrowColor={btn.rightAnimatedArrowColor || '#3970FD'}
204
- btnBgColorClass={btn.btnBg}
205
- btnTextHoverClass={btn.btnTextColorClass}
206
- animatedHoverStroke={btn.animatedHoverStroke}
207
- btnTextColorClass={btn.btnTextColorClass}
208
- />
209
- </a>))
210
- }
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>
211
193
  </div>
212
- }
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
+ }
213
216
 
214
217
 
215
218
 
216
- </a>
219
+ </a>
220
+ </div>
217
221
  )
218
222
 
219
223
  }
package/src/HDS/components/Cards/Misc/imageBadgeCard.js CHANGED
@@ -1,33 +1,234 @@
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) {
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
+ }
6
37
 
38
+ export default function IconCard(props) {
39
+ const iconBG = HDSColor(props.iconBg);
7
40
  return (
8
41
  <>
9
- <div>
10
- <a href={card.sliderLink}>
11
- <div className={`${HDSColor(card.cardBg)}bg-neutral-0 hover:shadow-lg 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>
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)} />
22
56
  </div>
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]' />
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
+ )
25
96
 
97
+ }
98
+ </>
99
+ )
100
+ }
26
101
  </div>
27
102
  </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
+ }
28
214
  </div>
29
- </a>
30
- </div>
31
- </>
215
+ }
216
+
217
+
218
+
219
+ </a>
220
+ </div>
221
+ )
222
+
223
+ }
224
+ </>
32
225
  )
226
+ }
227
+
228
+ IconCard.defaultProps = {
229
+ cardType: 'withoutButton',
230
+ iconStrokeClass: 'stroke-neutral-1000'
231
+ }
232
+ Icon.propTypes = {
233
+ cardType: PropTypes.oneOf(['withoutButton', 'withButton', 'sm']),
33
234
  }
package/src/styles/tailwind.css CHANGED
@@ -9711,23 +9711,6 @@ select{
9711
9711
  }
9712
9712
  }
9713
9713
 
9714
- @media (max-width: 699px){
9715
- .max-\[699px\]\:w-screen{
9716
- width: 100vw;
9717
- }
9718
- }
9719
-
9720
- @media (max-width: 399px){
9721
- .max-\[399px\]\:rounded-full{
9722
- border-radius: 9999px;
9723
- }
9724
-
9725
- .max-\[399px\]\:bg-blue-300{
9726
- --tw-bg-opacity: 1;
9727
- background-color: rgb(198 214 255 / var(--tw-bg-opacity));
9728
- }
9729
- }
9730
-
9731
9714
  @media (max-width: 369px){
9732
9715
  .max-\[369px\]\:mt-8{
9733
9716
  margin-top: 2rem;
@@ -9829,10 +9812,6 @@ select{
9829
9812
  .mb-m\:pt-0{
9830
9813
  padding-top: 0px;
9831
9814
  }
9832
-
9833
- .min-\[400px\]\:-mt-20{
9834
- margin-top: -5rem;
9835
- }
9836
9815
  }
9837
9816
 
9838
9817
  @media (min-width: 600px){
@@ -10553,39 +10532,6 @@ select{
10553
10532
  }
10554
10533
  }
10555
10534
 
10556
- @media (min-width: 699px){
10557
- .min-\[699px\]\:absolute{
10558
- position: absolute;
10559
- }
10560
-
10561
- .min-\[699px\]\:relative{
10562
- position: relative;
10563
- }
10564
-
10565
- .min-\[699px\]\:mt-\[70px\]{
10566
- margin-top: 70px;
10567
- }
10568
-
10569
- .min-\[699px\]\:block{
10570
- display: block;
10571
- }
10572
-
10573
- .min-\[699px\]\:flex{
10574
- display: flex;
10575
- }
10576
-
10577
- .min-\[699px\]\:hidden{
10578
- display: none;
10579
- }
10580
-
10581
- .min-\[699px\]\:scale-\[1\.7\]{
10582
- --tw-scale-x: 1.7;
10583
- --tw-scale-y: 1.7;
10584
- -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));
10585
- 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));
10586
- }
10587
- }
10588
-
10589
10535
  @media (min-width: 800px){
10590
10536
  .tb-m\:flex{
10591
10537
  display: flex;
@@ -11165,10 +11111,6 @@ select{
11165
11111
  padding-right: 0px;
11166
11112
  }
11167
11113
 
11168
- .db\:pt-12{
11169
- padding-top: 3rem;
11170
- }
11171
-
11172
11114
  .db\:pt-20{
11173
11115
  padding-top: 5rem;
11174
11116
  }
@@ -11442,23 +11384,6 @@ select{
11442
11384
  }
11443
11385
  }
11444
11386
 
11445
- @media (min-width: 1300px){
11446
- .min-\[1300px\]\:flex{
11447
- display: flex;
11448
- }
11449
-
11450
- .min-\[1300px\]\:max-w-7xl{
11451
- max-width: 80rem;
11452
- }
11453
- }
11454
-
11455
- @media (min-width: 1880px){
11456
- .min-\[1880px\]\:gap-x-72{
11457
- -webkit-column-gap: 18rem;
11458
- column-gap: 18rem;
11459
- }
11460
- }
11461
-
11462
11387
  .\[\&\>\*\]\:mb-8>*{
11463
11388
  margin-bottom: 2rem;
11464
11389
  }