hds-web 1.21.6 → 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 +6 -6
- package/src/HDS/components/Carousels/customerStories.js +2 -2
- package/src/styles/tailwind.css +123 -158
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' />
|
|
@@ -24,8 +24,8 @@ export default function StoryCardXL(props) {
|
|
|
24
24
|
}
|
|
25
25
|
{props.title &&
|
|
26
26
|
(
|
|
27
|
-
<div className="flex pt-6 flex-col gap-6 tb-l:max-w-[547px]">
|
|
28
|
-
|
|
27
|
+
<div className="flex pt-6 flex-col gap-6 tb-l:max-w-[547px] ">
|
|
28
|
+
<Typography textStyle='h3' className='text-neutral-1000 tb-l:block hidden max-h-[144px] overflow-clip'>{props.title}</Typography>
|
|
29
29
|
{props.heroList &&
|
|
30
30
|
(
|
|
31
31
|
<div>
|
|
@@ -63,11 +63,11 @@ export default function StoryCardXL(props) {
|
|
|
63
63
|
props.heroImageAlt) ?
|
|
64
64
|
(
|
|
65
65
|
<>
|
|
66
|
-
<div className="flex mt-4 tb:mt-0 justify-start tb-l:justify-end tb-l:pt-20 tb:max-w-[600px]">
|
|
66
|
+
<div className="flex mt-4 tb:mt-0 justify-center tb:justify-start tb-l:justify-end tb-l:pt-20 tb:max-w-[600px]">
|
|
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
|
</>
|
|
@@ -92,8 +92,8 @@ export default function StoryCardXL(props) {
|
|
|
92
92
|
<div className="tb-l:hidden pb-6">
|
|
93
93
|
{props.brandImageURL &&
|
|
94
94
|
props.brandImageAlt && (
|
|
95
|
-
|
|
96
|
-
|
|
95
|
+
<div className="pb-4 ">
|
|
96
|
+
<img src={props.brandImageURL} alt={props.brandImageAlt} className="max-h-[28px]" />
|
|
97
97
|
</div>
|
|
98
98
|
)
|
|
99
99
|
}
|
|
@@ -160,10 +160,10 @@ export default function Carousels ({ components, variants }) {
|
|
|
160
160
|
</motion.button>
|
|
161
161
|
</div>
|
|
162
162
|
</div>
|
|
163
|
-
<div className='
|
|
163
|
+
<div className='tb-l:hidden flex overflow-x-scroll pb-10 pt-4 tb:pb-16 tb:pt-10 px-4 gap-2 mb-m:gap-4 tb-m:gap-4'>
|
|
164
164
|
{components.map((component, index) => (
|
|
165
165
|
<React.Fragment key={index}>
|
|
166
|
-
<div className='tb-l:min-w-[700px] tb:min-w-[500px] mb-s:min-w-[350px]'>
|
|
166
|
+
<div className='tb-l:min-w-[700px] tb:min-w-[500px] mb-s:min-w-[350px] min-w-[300px]'>
|
|
167
167
|
{component}
|
|
168
168
|
</div>
|
|
169
169
|
</React.Fragment>
|