hds-web 1.7.0 → 1.7.1
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 +2 -2
- package/dist/index.es.css +2 -2
- package/dist/index.es.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/HDS/modules/TextCard/textCard.js +74 -9
- package/src/styles/tailwind.css +8 -0
|
@@ -20,7 +20,7 @@ export default function TextCard(props) {
|
|
|
20
20
|
}
|
|
21
21
|
{
|
|
22
22
|
props.descriptions && props.descriptions.map((desc, i) => (
|
|
23
|
-
<Typography key={i} textStyle="body1" className="pb-6">{desc.description}</Typography>
|
|
23
|
+
<Typography key={i} textStyle="body1" className="pb-6 pr-8">{desc.description}</Typography>
|
|
24
24
|
))
|
|
25
25
|
}
|
|
26
26
|
{
|
|
@@ -57,7 +57,7 @@ export default function TextCard(props) {
|
|
|
57
57
|
const imgBgColor = HDSColor(list.tab_img_bg_class)
|
|
58
58
|
return (
|
|
59
59
|
<div className='border-b border-b-neutral-150 last:border-b-0 cursor-pointer' onClick={()=>setImgActive(list.title)}>
|
|
60
|
-
<div className={'m-2 p-0 tb:p-6 rounded-lg transition
|
|
60
|
+
<div className={'m-2 p-0 tb:p-6 rounded-lg transition ease-in duration-200 hover:bg-neutral-50' + ((imgActive === list.title) ? " bg-neutral-150" : "")} key={i}>
|
|
61
61
|
<div className='flex items-center pb-4'>
|
|
62
62
|
<Icon
|
|
63
63
|
height={`w-6 h-6 mr-2 stroke-[1.5px]` }
|
|
@@ -106,7 +106,7 @@ export default function TextCard(props) {
|
|
|
106
106
|
{
|
|
107
107
|
list.tab_img_url && (
|
|
108
108
|
<div className={`${imgBgColor} tb-l:hidden p-12 rounded-2xl mt-8`}>
|
|
109
|
-
<img src={list.tab_img_url} alt={list.title} />
|
|
109
|
+
<img src={list.tab_img_url} alt={list.title} loading="lazy"/>
|
|
110
110
|
</div>
|
|
111
111
|
)
|
|
112
112
|
}
|
|
@@ -143,7 +143,30 @@ export default function TextCard(props) {
|
|
|
143
143
|
return (
|
|
144
144
|
<Fragment key={i}>
|
|
145
145
|
{
|
|
146
|
-
imgActive === img.title &&
|
|
146
|
+
imgActive === img.title && (
|
|
147
|
+
<div className={`${imgBgColor} hidden h-full p-12 tb-l:flex items-center justify-center rounded-2xl db:rounded-3xl tb-l:rounded-s-none`}>
|
|
148
|
+
{
|
|
149
|
+
img.tab_video_url ? (
|
|
150
|
+
<video
|
|
151
|
+
loading="lazy"
|
|
152
|
+
controls={false}
|
|
153
|
+
autoPlay
|
|
154
|
+
loop
|
|
155
|
+
muted
|
|
156
|
+
poster={img.tab_video_poster}
|
|
157
|
+
className=""
|
|
158
|
+
>
|
|
159
|
+
<source
|
|
160
|
+
src={img.tab_video_url}
|
|
161
|
+
type="video/mp4"
|
|
162
|
+
/>
|
|
163
|
+
</video>
|
|
164
|
+
) : (
|
|
165
|
+
<img src={img.tab_img_url} alt={img.title} loading="lazy"/>
|
|
166
|
+
)
|
|
167
|
+
}
|
|
168
|
+
</div>
|
|
169
|
+
)
|
|
147
170
|
}
|
|
148
171
|
</Fragment>
|
|
149
172
|
)
|
|
@@ -151,15 +174,57 @@ export default function TextCard(props) {
|
|
|
151
174
|
}
|
|
152
175
|
</>
|
|
153
176
|
) : (
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
177
|
+
<>
|
|
178
|
+
{
|
|
179
|
+
props.iframe_url || props.video_url ? (
|
|
180
|
+
<div>
|
|
181
|
+
{
|
|
182
|
+
props.iframe_url ? (
|
|
183
|
+
<div className="relative pb-[56.2%]">
|
|
184
|
+
<iframe
|
|
185
|
+
loading="lazy"
|
|
186
|
+
title={props.title}
|
|
187
|
+
src={props.iframe_url}
|
|
188
|
+
frameBorder="0"
|
|
189
|
+
allowFullScreen
|
|
190
|
+
className="absolute w-full h-full rounded-2xl db:rounded-3xl"
|
|
191
|
+
></iframe>
|
|
192
|
+
</div>
|
|
193
|
+
) : (
|
|
194
|
+
<video
|
|
195
|
+
loading="lazy"
|
|
196
|
+
controls={false}
|
|
197
|
+
autoPlay
|
|
198
|
+
loop
|
|
199
|
+
muted
|
|
200
|
+
poster={props.video_poster}
|
|
201
|
+
className="rounded-2xl db:rounded-3xl"
|
|
202
|
+
>
|
|
203
|
+
<source
|
|
204
|
+
src={props.video_url}
|
|
205
|
+
type="video/mp4"
|
|
206
|
+
/>
|
|
207
|
+
</video>
|
|
208
|
+
)
|
|
209
|
+
}
|
|
210
|
+
</div>
|
|
211
|
+
) : (
|
|
212
|
+
<>
|
|
213
|
+
{props.img_url && (
|
|
214
|
+
<div className={`${HDSColor(props.img_bg_class)} px-5 py-10 flex items-center justify-center db:p-8 rounded-2xl db:rounded-3xl`}>
|
|
215
|
+
<img className='rounded-2xl db:rounded-3xl inline-block' src={props.img_url} alt={props.title} loading="lazy" />
|
|
216
|
+
</div>
|
|
217
|
+
)}
|
|
218
|
+
</>
|
|
219
|
+
)
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
</>
|
|
159
223
|
)
|
|
160
224
|
}
|
|
161
225
|
</div>
|
|
162
226
|
|
|
227
|
+
|
|
163
228
|
</>
|
|
164
229
|
)
|
|
165
230
|
}
|
package/src/styles/tailwind.css
CHANGED
|
@@ -10002,10 +10002,18 @@ select {
|
|
|
10002
10002
|
row-gap: 0.5rem;
|
|
10003
10003
|
}
|
|
10004
10004
|
|
|
10005
|
+
.db\:rounded-3xl {
|
|
10006
|
+
border-radius: 1.5rem;
|
|
10007
|
+
}
|
|
10008
|
+
|
|
10005
10009
|
.db\:p-20 {
|
|
10006
10010
|
padding: 5rem;
|
|
10007
10011
|
}
|
|
10008
10012
|
|
|
10013
|
+
.db\:p-8 {
|
|
10014
|
+
padding: 2rem;
|
|
10015
|
+
}
|
|
10016
|
+
|
|
10009
10017
|
.db\:px-20 {
|
|
10010
10018
|
padding-left: 5rem;
|
|
10011
10019
|
padding-right: 5rem;
|