hds-web 1.36.7 → 1.36.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/package.json
CHANGED
|
@@ -1,25 +1,31 @@
|
|
|
1
1
|
import React, { useState, useEffect } from "react";
|
|
2
2
|
import { Typography } from "../../../foundation/Typography";
|
|
3
3
|
import { HDSColor } from "../../../foundation/ColorPalette";
|
|
4
|
-
import { Icon } from
|
|
4
|
+
import { Icon } from "../../../components/common-components/Icon";
|
|
5
5
|
|
|
6
6
|
const tagColorVariants = {
|
|
7
|
-
blue:
|
|
8
|
-
purple:
|
|
9
|
-
pink:
|
|
10
|
-
amber:
|
|
11
|
-
cyan:
|
|
12
|
-
green:
|
|
13
|
-
}
|
|
7
|
+
blue: "bg-neutral-0 tb:bg-blue-500 text-blue-500 tb:text-neutral-0",
|
|
8
|
+
purple: "bg-neutral-0 tb:bg-purple-500 text-purple-500 tb:text-neutral-0",
|
|
9
|
+
pink: "bg-neutral-0 tb:bg-pink-500 text-pink-500 tb:text-neutral-0",
|
|
10
|
+
amber: "bg-neutral-0 tb:bg-amber-500 text-amber-500 tb:text-neutral-0",
|
|
11
|
+
cyan: "bg-neutral-0 tb:bg-cyan-500 text-cyan-500 tb:text-neutral-0",
|
|
12
|
+
green: "bg-neutral-0 tb:bg-green-500 text-green-500 tb:text-neutral-0",
|
|
13
|
+
};
|
|
14
14
|
|
|
15
15
|
const isBrowser = typeof window !== "undefined";
|
|
16
16
|
|
|
17
17
|
export default function AnnouncementMd(props) {
|
|
18
18
|
const [isBannerActive, toggleBanner] = useState(true);
|
|
19
|
-
const bgClass = props.bgColorClass
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
const
|
|
19
|
+
const bgClass = props.bgColorClass
|
|
20
|
+
? HDSColor(props.bgColorClass)
|
|
21
|
+
: "bg-neutral-0";
|
|
22
|
+
const linkTextClass = props.linkTextColorClass
|
|
23
|
+
? HDSColor(props.linkTextColorClass)
|
|
24
|
+
: "text-neutral-600";
|
|
25
|
+
const tagClass = props.tagColor ? props.tagColor : "purple";
|
|
26
|
+
const iconBgClass = props.iconBgColor
|
|
27
|
+
? HDSColor(props.iconBgColor)
|
|
28
|
+
: "bg-blue-200";
|
|
23
29
|
|
|
24
30
|
const [isConsentForm, setIsConsentForm] = useState(false);
|
|
25
31
|
const onCloseBanner = () => {
|
|
@@ -49,40 +55,71 @@ export default function AnnouncementMd(props) {
|
|
|
49
55
|
if (isBannerActive && !isConsentForm) {
|
|
50
56
|
return (
|
|
51
57
|
<div className="py-6">
|
|
52
|
-
<div
|
|
58
|
+
<div
|
|
59
|
+
className={`${bgClass} flex justify-between relative rounded-2xl tb:rounded-full shadow p-3 tb:justify-center tb:items-center`}
|
|
60
|
+
>
|
|
53
61
|
<div className="tb:items-center flex tb:justify-center">
|
|
54
|
-
{
|
|
55
|
-
|
|
56
|
-
<
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
62
|
+
{props.brandImg && (
|
|
63
|
+
<div className="tb:pb-0 tb:pl-14 pr-2">
|
|
64
|
+
<img
|
|
65
|
+
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]"
|
|
66
|
+
src={props.brandImg}
|
|
67
|
+
alt={props.brandImgAlt}
|
|
68
|
+
/>
|
|
69
|
+
</div>
|
|
70
|
+
)}
|
|
71
|
+
{props.iconBgColor && (
|
|
72
|
+
<div
|
|
73
|
+
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`}
|
|
74
|
+
>
|
|
75
|
+
<Icon
|
|
76
|
+
height={
|
|
77
|
+
"block w-4 h-4 tb:w-5 tb:h-5 stroke-[2px] transition ease-in-out"
|
|
78
|
+
}
|
|
79
|
+
variant={props.iconVariant}
|
|
80
|
+
strokeClass="stroke-neutral-1000"
|
|
81
|
+
/>
|
|
82
|
+
</div>
|
|
83
|
+
)}
|
|
84
|
+
{props.tagText && (
|
|
85
|
+
<Typography
|
|
86
|
+
textStyle="body2-medium"
|
|
87
|
+
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]}`}
|
|
88
|
+
>
|
|
89
|
+
{props.tagText}
|
|
90
|
+
</Typography>
|
|
91
|
+
)}
|
|
73
92
|
<a href={props.linkUrl} className="block pb-0">
|
|
74
|
-
<Typography
|
|
93
|
+
<Typography
|
|
94
|
+
textStyle="body2-medium"
|
|
95
|
+
className={`${linkTextClass} group flex items-center [&>div]:inline-block`}
|
|
96
|
+
>
|
|
75
97
|
{props.linkText}
|
|
76
|
-
<Icon
|
|
98
|
+
<Icon
|
|
99
|
+
height={
|
|
100
|
+
" hds-hidden tb:block w-6 h-6 stroke-[2px] ml-3 transition ease-in-out group-hover:translate-x-[5px]"
|
|
101
|
+
}
|
|
102
|
+
variant="arrownarrowright"
|
|
103
|
+
strokeClass="stroke-blue-500"
|
|
104
|
+
/>
|
|
77
105
|
</Typography>
|
|
78
106
|
</a>
|
|
79
107
|
</div>
|
|
80
|
-
<div
|
|
81
|
-
|
|
108
|
+
<div
|
|
109
|
+
className="static mt-[2px] tb:mt-0 ml-3 tb:ml-0 tb:absolute top-1/2 tb:-translate-y-1/2 tb:left-3 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"
|
|
110
|
+
onClick={() => onCloseBanner()}
|
|
111
|
+
>
|
|
112
|
+
<Icon
|
|
113
|
+
height={
|
|
114
|
+
"block w-4 h-4 tb:w-6 tb:h-6 stroke-[2px] transition ease-in-out"
|
|
115
|
+
}
|
|
116
|
+
variant="xclose"
|
|
117
|
+
strokeClass="stroke-neutral-800"
|
|
118
|
+
/>
|
|
82
119
|
</div>
|
|
83
120
|
</div>
|
|
84
121
|
</div>
|
|
85
|
-
)
|
|
122
|
+
);
|
|
86
123
|
}
|
|
87
124
|
return null;
|
|
88
125
|
}
|
package/src/styles/tailwind.css
CHANGED
|
@@ -10964,6 +10964,14 @@ select{
|
|
|
10964
10964
|
top: 160px;
|
|
10965
10965
|
}
|
|
10966
10966
|
|
|
10967
|
+
.tb\:left-4{
|
|
10968
|
+
left: 1rem;
|
|
10969
|
+
}
|
|
10970
|
+
|
|
10971
|
+
.tb\:left-3{
|
|
10972
|
+
left: 0.75rem;
|
|
10973
|
+
}
|
|
10974
|
+
|
|
10967
10975
|
.tb\:mb-0{
|
|
10968
10976
|
margin-bottom: 0px;
|
|
10969
10977
|
}
|