hds-web 1.29.0 → 1.29.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.es.js +36 -5
- package/dist/index.js +36 -5
- package/package.json +1 -1
- package/src/HDS/components/BadgesCaption/eyebrow.js +5 -1
- package/src/HDS/components/Carousels/eventsStories.js +171 -0
- package/src/HDS/components/Carousels/index.js +2 -1
- package/src/HDS/modules/Cards/aboutSection.js +2 -1
package/package.json
CHANGED
|
@@ -6,10 +6,14 @@ import { Typography } from '../../foundation/Typography'
|
|
|
6
6
|
import { HDSColor } from '../../foundation/ColorPalette';
|
|
7
7
|
|
|
8
8
|
export default function EyeBrowText(props) {
|
|
9
|
+
const {
|
|
10
|
+
children,
|
|
11
|
+
eyebrow
|
|
12
|
+
} = props;
|
|
9
13
|
const ColorClass = HDSColor(props.eyebrowColorClass);
|
|
10
14
|
return (
|
|
11
15
|
<div>
|
|
12
|
-
<Typography textStyle="h6" className={`${ColorClass} uppercase `}>{
|
|
16
|
+
<Typography textStyle="h6" className={`${ColorClass} uppercase ${props.className} `}>{eyebrow || children}</Typography>
|
|
13
17
|
</div>
|
|
14
18
|
);
|
|
15
19
|
}
|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
import React, { useState, useEffect } from 'react';
|
|
2
|
+
import { AnimatePresence, motion } from 'framer-motion';
|
|
3
|
+
import { Icon } from 'hds-web';
|
|
4
|
+
|
|
5
|
+
export default function Carousels({ components, variants }) {
|
|
6
|
+
const [FlowDirection, setFlowDirection] = useState(true);
|
|
7
|
+
const [CenterId, setCenterId] = useState(0);
|
|
8
|
+
const [LeftId, setLeftId] = useState(components.length - 1);
|
|
9
|
+
const [RightId, setRightId] = useState(1);
|
|
10
|
+
const [activeSlide, setActiveSlide] = useState(0);
|
|
11
|
+
const [isAutoSliding, setIsAutoSliding] = useState(true);
|
|
12
|
+
const handleAutoSlide = () => {
|
|
13
|
+
if (isAutoSliding) {
|
|
14
|
+
nextBtn();
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
const intervalId = setInterval(handleAutoSlide, 3000);
|
|
20
|
+
return () => clearInterval(intervalId);
|
|
21
|
+
}, [CenterId, isAutoSliding]);
|
|
22
|
+
|
|
23
|
+
const nextBtn = () => {
|
|
24
|
+
setFlowDirection(true)
|
|
25
|
+
if (LeftId === components.length - 1) {
|
|
26
|
+
setLeftId(0);
|
|
27
|
+
} else {
|
|
28
|
+
setLeftId(LeftId + 1);
|
|
29
|
+
}
|
|
30
|
+
if (CenterId === components.length - 1) {
|
|
31
|
+
setCenterId(0);
|
|
32
|
+
} else {
|
|
33
|
+
setCenterId(CenterId + 1);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
if (RightId === components.length - 1) {
|
|
37
|
+
setRightId(0);
|
|
38
|
+
} else {
|
|
39
|
+
setRightId(RightId + 1);
|
|
40
|
+
}
|
|
41
|
+
setActiveSlide((prevIndex) => (prevIndex === components.length - 1 ? 0 : prevIndex + 1));
|
|
42
|
+
};
|
|
43
|
+
const prevBtn = () => {
|
|
44
|
+
setFlowDirection(false);
|
|
45
|
+
if (LeftId === 0) {
|
|
46
|
+
setLeftId(components.length - 1);
|
|
47
|
+
} else {
|
|
48
|
+
setLeftId(LeftId - 1);
|
|
49
|
+
}
|
|
50
|
+
if (CenterId === 0) {
|
|
51
|
+
setCenterId(components.length - 1);
|
|
52
|
+
} else {
|
|
53
|
+
setCenterId(CenterId - 1);
|
|
54
|
+
}
|
|
55
|
+
if (RightId === 0) {
|
|
56
|
+
setRightId(components.length - 1);
|
|
57
|
+
} else {
|
|
58
|
+
setRightId(RightId - 1);
|
|
59
|
+
}
|
|
60
|
+
setActiveSlide((prevIndex) => (prevIndex === 0 ? components.length - 1 : prevIndex - 1));
|
|
61
|
+
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
const handleMouseEnter = () => {
|
|
65
|
+
setIsAutoSliding(false);
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
const handleMouseLeave = () => {
|
|
69
|
+
setIsAutoSliding(false);
|
|
70
|
+
};
|
|
71
|
+
if (components) {
|
|
72
|
+
return (
|
|
73
|
+
<div
|
|
74
|
+
className='h-full'
|
|
75
|
+
onMouseEnter={handleMouseEnter}
|
|
76
|
+
onMouseLeave={handleMouseLeave}
|
|
77
|
+
>
|
|
78
|
+
<div
|
|
79
|
+
className="hidden tb-l:grid relative h-full"
|
|
80
|
+
>
|
|
81
|
+
<motion.div className="flex justify-center ">
|
|
82
|
+
<AnimatePresence initial={false}>
|
|
83
|
+
<motion.div
|
|
84
|
+
key={LeftId}
|
|
85
|
+
variants={variants}
|
|
86
|
+
// initial={FlowDirection ? 'center' : 'leftHidden'}
|
|
87
|
+
animate={FlowDirection ? 'rightHidden' : 'left'}
|
|
88
|
+
exit={'leftHidden'}
|
|
89
|
+
className="carousel-item"
|
|
90
|
+
>
|
|
91
|
+
{components[LeftId]}
|
|
92
|
+
</motion.div>
|
|
93
|
+
<motion.div
|
|
94
|
+
variants={variants}
|
|
95
|
+
key={CenterId}
|
|
96
|
+
// initial={FlowDirection ? 'right' : 'left'}
|
|
97
|
+
animate={FlowDirection ? 'center' : 'center'}
|
|
98
|
+
className="carousel-item"
|
|
99
|
+
>
|
|
100
|
+
{components[CenterId]}
|
|
101
|
+
</motion.div>
|
|
102
|
+
<motion.div
|
|
103
|
+
key={RightId}
|
|
104
|
+
variants={variants}
|
|
105
|
+
// initial={FlowDirection ? 'rightHidden' : 'center'}
|
|
106
|
+
animate={FlowDirection ? 'leftHidden' : 'right'}
|
|
107
|
+
exit={'rightHidden'}
|
|
108
|
+
className="carousel-item"
|
|
109
|
+
>
|
|
110
|
+
{components[RightId]}
|
|
111
|
+
</motion.div>
|
|
112
|
+
</AnimatePresence>
|
|
113
|
+
</motion.div>
|
|
114
|
+
{/* slider bar */}
|
|
115
|
+
{/* <div className="flex justify-center mt-4">
|
|
116
|
+
{components.map((_, index) => (
|
|
117
|
+
<div
|
|
118
|
+
key={index}
|
|
119
|
+
className={`w-4 h-4 rounded-full mx-1 ${activeSlide === index ? 'bg-blue-500' : 'bg-gray-300'
|
|
120
|
+
}`}
|
|
121
|
+
></div>
|
|
122
|
+
))}
|
|
123
|
+
</div> */}
|
|
124
|
+
</div>
|
|
125
|
+
<div className="hidden tb-l:flex mt-10 ">
|
|
126
|
+
<div className="gap-4 w-full h-full flex justify-center">
|
|
127
|
+
<motion.button
|
|
128
|
+
initial={{ opacity: 0, scale: 0 }}
|
|
129
|
+
animate={{ opacity: 1, scale: 1 }}
|
|
130
|
+
transition={{
|
|
131
|
+
type: 'spring',
|
|
132
|
+
duration: 0.5,
|
|
133
|
+
}}
|
|
134
|
+
whileHover={{ scale: 1.1 }}
|
|
135
|
+
whileTap={{ scale: 0.8 }}
|
|
136
|
+
|
|
137
|
+
className=" w-12 h-12 bg-neutral-0 shadow hover:bg-neutral-100 rounded-full flex justify-center items-center active:bg-neutral-200 "
|
|
138
|
+
onClick={prevBtn}
|
|
139
|
+
>
|
|
140
|
+
<Icon height={'h-6 w-6'} variant={'chevronleft'} strokeClass='stroke-neutral-800' />
|
|
141
|
+
</motion.button>
|
|
142
|
+
<motion.button
|
|
143
|
+
initial={{ opacity: 0, scale: 0 }}
|
|
144
|
+
animate={{ opacity: 1, scale: 1 }}
|
|
145
|
+
transition={{
|
|
146
|
+
type: 'spring',
|
|
147
|
+
duration: 0.5,
|
|
148
|
+
}}
|
|
149
|
+
whileHover={{ scale: 1.1 }}
|
|
150
|
+
whileTap={{ scale: 0.8 }}
|
|
151
|
+
className="w-12 h-12 bg-neutral-0 shadow hover:bg-neutral-100 rounded-full flex justify-center items-center active:bg-neutral-200"
|
|
152
|
+
onClick={nextBtn}
|
|
153
|
+
>
|
|
154
|
+
<Icon height={'h-6 w-6'} variant={'chevronright'} strokeClass='stroke-neutral-800' />
|
|
155
|
+
</motion.button>
|
|
156
|
+
</div>
|
|
157
|
+
</div>
|
|
158
|
+
<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'>
|
|
159
|
+
{components.map((component, index) => (
|
|
160
|
+
<React.Fragment key={index}>
|
|
161
|
+
<div className='tb-l:min-w-[700px] tb:min-w-[500px] mb-s:min-w-[350px] min-w-[300px]'>
|
|
162
|
+
{component}
|
|
163
|
+
</div>
|
|
164
|
+
</React.Fragment>
|
|
165
|
+
))}
|
|
166
|
+
</div>
|
|
167
|
+
</div>
|
|
168
|
+
);
|
|
169
|
+
}
|
|
170
|
+
else return <></>;
|
|
171
|
+
};
|
|
@@ -3,4 +3,5 @@ export {default as CarouselCard} from './carouselCard';
|
|
|
3
3
|
export {default as CarouselB} from './carouselB';
|
|
4
4
|
export {default as HomepageCarouselPrimary} from './homeCarousel';
|
|
5
5
|
export {default as CustomCarousel} from './customCarousel';
|
|
6
|
-
export {default as CustomerStories} from './customerStories';
|
|
6
|
+
export {default as CustomerStories} from './customerStories';
|
|
7
|
+
export {default as EventStories} from './eventsStories';
|
|
@@ -85,7 +85,8 @@ export default function AboutSection(props) {
|
|
|
85
85
|
<Typography textStyle='body1-medium' className='text-neutral-500'>{props.deployed ?? 'Deployed'}</Typography>
|
|
86
86
|
<Typography textStyle='body1-medium' className='text-neutral-800'>{props.deployedValue}</Typography>
|
|
87
87
|
</div>}
|
|
88
|
-
{props.githubRepoLink &&
|
|
88
|
+
{props.githubRepoLink &&
|
|
89
|
+
<a href={props.githubRepoLink} className="flex gap-2 items-center">
|
|
89
90
|
<Icon
|
|
90
91
|
height={'h-6 w-6 stroke-[1.5px]'}
|
|
91
92
|
variant='octoface'
|