hds-web 1.21.7 → 1.21.8
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/components/Cards/Announcement/announcementMd.js +9 -9
- package/src/HDS/components/Cards/Announcement/announcementSm.js +3 -3
- package/src/HDS/components/Cards/StoryCard/storyxl.js +1 -1
- package/src/styles/tailwind.css +121 -202
package/package.json
CHANGED
|
@@ -21,19 +21,19 @@ export default function AnnouncementMd(props) {
|
|
|
21
21
|
if (isBannerActive) {
|
|
22
22
|
return (
|
|
23
23
|
<div className="py-6">
|
|
24
|
-
<div className={`${bgClass} flex justify-between relative rounded-2xl tb:rounded-full shadow p-4 tb:justify-center items-center`}>
|
|
25
|
-
<div className="
|
|
24
|
+
<div className={`${bgClass} flex justify-between relative rounded-2xl tb:rounded-full shadow p-4 tb:justify-center tb:items-center`}>
|
|
25
|
+
<div className="tb:items-center flex tb:justify-center">
|
|
26
26
|
{
|
|
27
27
|
props.brandImg && (
|
|
28
|
-
<div className="
|
|
29
|
-
<img className="max-h-[32px]" src={props.brandImg} alt={props.brandImgAlt} />
|
|
28
|
+
<div className="tb:pb-0 tb:pl-14 pr-2">
|
|
29
|
+
<img className="mt-[2px] tb:mt-0 min-h-[20px] min-w-[20px] max-w-[20px] max-h-[20px] tb:min-h-[32px] tb:min-w-[32px] tb:max-w-[32px] tb:max-h-[32px]" src={props.brandImg} alt={props.brandImgAlt} />
|
|
30
30
|
</div>
|
|
31
31
|
)
|
|
32
32
|
}
|
|
33
33
|
{
|
|
34
34
|
props.iconBgColor && (
|
|
35
|
-
<div className={`${iconBgClass} ml-0 mb-1 tb:mb-0 tb:ml-14
|
|
36
|
-
<Icon height={'block w-5 h-5 stroke-[2px] transition ease-in-out'} variant={props.iconVariant} strokeClass='stroke-neutral-1000' />
|
|
35
|
+
<div className={`${iconBgClass} mt-[2px] tb:mt-0 ml-0 mb-1 tb:mb-0 tb:ml-14 mr-2 w-5 h-5 tb:w-8 tb:h-8 min-w-[20px] tb:min-w-[32px] rounded-full flex items-center justify-center`}>
|
|
36
|
+
<Icon height={'block w-4 h-4 tb:w-5 tb:h-5 stroke-[2px] transition ease-in-out'} variant={props.iconVariant} strokeClass='stroke-neutral-1000' />
|
|
37
37
|
</div>
|
|
38
38
|
)
|
|
39
39
|
}
|
|
@@ -42,15 +42,15 @@ export default function AnnouncementMd(props) {
|
|
|
42
42
|
<Typography textStyle="body2-medium" className={`inline-flex py-1 px-0 tb:px-3 ml-0 tb:ml-14 tb-m:ml-6 rounded-full mr-4 min-w-fit ${tagColorVariants[tagClass]}`}>{props.tagText}</Typography>
|
|
43
43
|
)
|
|
44
44
|
}
|
|
45
|
-
<a href={props.linkUrl} className="block pb-
|
|
45
|
+
<a href={props.linkUrl} className="block pb-0">
|
|
46
46
|
<Typography textStyle="body2-medium" className={`${linkTextClass} group flex items-center [&>div]:inline-block`}>
|
|
47
47
|
{props.linkText}
|
|
48
48
|
<Icon height={' hds-hidden tb:block w-6 h-6 stroke-[2px] ml-3 transition ease-in-out group-hover:translate-x-[5px]'} variant='arrownarrowright' strokeClass='stroke-blue-500' />
|
|
49
49
|
</Typography>
|
|
50
50
|
</a>
|
|
51
51
|
</div>
|
|
52
|
-
<div className="static ml-3 tb:ml-0 tb:absolute top-1/2 tb:-translate-y-1/2 tb:left-6 cursor-pointer w-8 min-w-[32px] h-8 rounded-full bg-neutral-100 flex items-center justify-center" onClick={()=>toggleBanner(false)}>
|
|
53
|
-
<Icon height={'block w-6 h-6 stroke-[2px] transition ease-in-out'} variant='xclose' strokeClass='stroke-neutral-800' />
|
|
52
|
+
<div className="static mt-[2px] tb:mt-0 ml-3 tb:ml-0 tb:absolute top-1/2 tb:-translate-y-1/2 tb:left-6 cursor-pointer w-5 h-5 min-w-[20px] tb:w-8 tb:min-w-[32px] tb:h-8 rounded-full bg-neutral-100 flex items-center justify-center" onClick={()=>toggleBanner(false)}>
|
|
53
|
+
<Icon height={'block w-4 h-4 tb:w-6 tb:h-6 stroke-[2px] transition ease-in-out'} variant='xclose' strokeClass='stroke-neutral-800' />
|
|
54
54
|
</div>
|
|
55
55
|
</div>
|
|
56
56
|
</div>
|
|
@@ -16,10 +16,10 @@ export default function AnnouncementSM(props) {
|
|
|
16
16
|
const bgClass = props.bgColorClass ? HDSColor(props.bgColorClass) : 'bg-neutral-0';
|
|
17
17
|
const linkTextClass = props.linkTextColorClass ? HDSColor(props.linkTextColorClass) : 'text-neutral-600';
|
|
18
18
|
return (
|
|
19
|
-
<div className={`${bgClass} rounded-full shadow py-2 px-2 inline-flex items-center`}>
|
|
19
|
+
<div className={`${bgClass} rounded-2xl tb:rounded-full shadow p-3 tb:py-2 tb:px-2 inline-flex items-center`}>
|
|
20
20
|
<div className="block items-center tb:flex">
|
|
21
|
-
<Typography textStyle="body2-medium" className={`inline-flex
|
|
22
|
-
<a href={props.linkUrl} className="px-3 block tb:px-0
|
|
21
|
+
<Typography textStyle="body2-medium" className={`inline-flex pl-0 pb-1 tb:px-3 rounded-full mr-4 min-w-fit ${tagColorVariants[props.tagColor]}`}>{props.tagText}</Typography>
|
|
22
|
+
<a href={props.linkUrl} className="pl-0 px-3 block tb:px-0 tb:pb-0">
|
|
23
23
|
<Typography textStyle="body2-medium" className={`${linkTextClass} group flex items-center`}>
|
|
24
24
|
{props.linkText}
|
|
25
25
|
<Icon height={'block w-6 h-6 stroke-[2px] ml-3 transition ease-in-out group-hover:translate-x-[5px]'} variant='arrownarrowright' strokeClass='stroke-blue-500' />
|
|
@@ -67,7 +67,7 @@ export default function StoryCardXL(props) {
|
|
|
67
67
|
<img
|
|
68
68
|
src={props.heroImageURL}
|
|
69
69
|
alt={props.heroImageAlt}
|
|
70
|
-
className="rounded-xl tb-l:rounded-none tb-l:rounded-br-3xl tb-l:rounded-tl-3xl w-full h-auto object-cover db-s:max-w-[717px] tb-l:max-w-[600px] max-w-[
|
|
70
|
+
className="rounded-xl tb-l:rounded-none tb-l:rounded-br-3xl tb-l:rounded-tl-3xl w-full h-auto object-cover db-s:max-w-[717px] tb-l:max-w-[600px] max-w-[280px]"
|
|
71
71
|
/>
|
|
72
72
|
</div>
|
|
73
73
|
</>
|