hds-web 1.7.0 → 1.7.2
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 -5
- package/dist/index.es.css +2 -5
- package/dist/index.es.js +3 -3
- package/dist/index.js +3 -3
- package/package.json +1 -1
- package/src/HDS/components/Cards/Link/resources.js +2 -2
- package/src/HDS/components/Cards/TalkDetailCard/talkDetailCard.js +1 -1
- package/src/HDS/foundation/Typography/Typography.js +1 -2
- package/src/HDS/modules/TextCard/textCard.js +75 -10
- package/src/index.css +2 -0
- package/src/styles/tailwind.css +1841 -1831
- package/tailwind.config.js +1 -1
package/package.json
CHANGED
|
@@ -19,8 +19,8 @@ export default function ResourcesCard(props) {
|
|
|
19
19
|
</Typography>
|
|
20
20
|
)}
|
|
21
21
|
<div className="mt-6">
|
|
22
|
-
{props.resourcesArr.map((value) => (
|
|
23
|
-
<a href={value.cta_linkUrl} className="flex gap-2 mt-4">
|
|
22
|
+
{props.resourcesArr.map((value, index) => (
|
|
23
|
+
<a key={index} href={value.cta_linkUrl} className="flex gap-2 mt-4">
|
|
24
24
|
<Icon
|
|
25
25
|
height={'w-6 h-6 mr-2 stroke-[1.5px] stroke-blue-600'}
|
|
26
26
|
variant={value.cta_icon}
|
|
@@ -42,7 +42,7 @@ export default function TalkDetailCard(props) {
|
|
|
42
42
|
<div className='flex pb-6 tb:pt-0 tb:pb-0 items-center '>
|
|
43
43
|
{
|
|
44
44
|
props.social_share.map((socialShare, i) => (
|
|
45
|
-
<a href={socialShare.share_url} className='mx-2 first:ml-0 last:mr-0'>
|
|
45
|
+
<a key={i} href={socialShare.share_url} className='mx-2 first:ml-0 last:mr-0'>
|
|
46
46
|
<img src={socialShare.img_url} alt={socialShare.img_alt} />
|
|
47
47
|
</a>
|
|
48
48
|
))
|
|
@@ -43,7 +43,7 @@ export default function Typography(props) {
|
|
|
43
43
|
'body3c-medium': 'text-hds-m-body3c-medium tb:text-hds-t-body3c-medium db:text-hds-d-body3c-medium',
|
|
44
44
|
'body3c-semi-bold': 'text-hds-m-body3c-semi-bold tb:text-hds-t-body3c-semi-bold db:text-hds-d-body3c-semi-bold',
|
|
45
45
|
'body3c-bold': 'text-hds-m-body3c-bold tb:text-hds-t-body3c-bold db:text-hds-d-body3c-bold',
|
|
46
|
-
'quote': 'font-petrona italic text-hds-m-quote tb:text-hds-t-quote db:text-hds-d-quote',
|
|
46
|
+
'quote': 'font-petrona font-normal italic text-hds-m-quote tb:text-hds-t-quote db:text-hds-d-quote',
|
|
47
47
|
'code1': 'text-hds-m-code1 tb:text-hds-t-code1 db:text-hds-d-code1',
|
|
48
48
|
'code2': 'text-hds-m-code2 tb:text-hds-t-code2 db:text-hds-d-code2',
|
|
49
49
|
}
|
|
@@ -54,7 +54,6 @@ export default function Typography(props) {
|
|
|
54
54
|
);
|
|
55
55
|
}
|
|
56
56
|
Typography.propTypes = {
|
|
57
|
-
children: PropTypes.string,
|
|
58
57
|
textStyle: PropTypes.string,
|
|
59
58
|
className: PropTypes.string
|
|
60
59
|
|
|
@@ -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
|
{
|
|
@@ -56,8 +56,8 @@ export default function TextCard(props) {
|
|
|
56
56
|
const currentStrokeColor = HDSColor(list.icon_color)
|
|
57
57
|
const imgBgColor = HDSColor(list.tab_img_bg_class)
|
|
58
58
|
return (
|
|
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
|
|
59
|
+
<div key={i} 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 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/index.css
CHANGED