hds-web 1.28.9 → 1.29.1
Sign up to get free protection for your applications and to get access to all the features.
- 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/src/HDS/modules/Faq/faq.js +35 -33
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'
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
2
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
3
3
|
import { Typography } from '../../foundation/Typography';
|
|
4
|
+
import { Icon } from '../../components';
|
|
4
5
|
function DefaultAccordion(props) {
|
|
5
6
|
const [open, setOpen] = useState(null);
|
|
6
7
|
|
|
@@ -11,42 +12,48 @@ function DefaultAccordion(props) {
|
|
|
11
12
|
setOpen(index);
|
|
12
13
|
}
|
|
13
14
|
};
|
|
14
|
-
const icon = (open) => (
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
15
|
+
// const icon = (open) => (
|
|
16
|
+
// <motion.div
|
|
17
|
+
// initial={{ opacity: 0 }}
|
|
18
|
+
// animate={{ opacity: 1 }}
|
|
19
|
+
// transition={{ duration: 0.3, opacity: { ease: "easeIn" } }}
|
|
20
|
+
// className='h-5 w-5 mt-3.5'>
|
|
21
|
+
// <div className='w-5 h-5 cursor-pointer' >
|
|
22
|
+
// <div
|
|
23
|
+
// aria-hidden="true"
|
|
24
|
+
// className={` block absolute h-[2px] w-[14px] bg-blue-600 transform transition duration-300 `}
|
|
25
|
+
// />
|
|
26
|
+
// <div
|
|
27
|
+
// aria-hidden="true"
|
|
28
|
+
// className={`${((!open) ? '-rotate-90 ' : '')} block absolute h-0.5 w-[14px] bg-blue-600 transition-all duration-300 ease-in-out`}
|
|
29
|
+
// />
|
|
30
|
+
// </div>
|
|
30
31
|
|
|
31
|
-
|
|
32
|
-
)
|
|
32
|
+
// </motion.div>
|
|
33
|
+
// )
|
|
33
34
|
return (
|
|
34
35
|
<div className='divide-y divide-neutral-200'>
|
|
35
36
|
{props.accordionData && props.accordionData.map((item, index) => (
|
|
36
|
-
<div
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
37
|
+
<div
|
|
38
|
+
key={index}
|
|
39
|
+
className="py-6 flex cursor-pointer"
|
|
40
|
+
onClick={() => handleOpen(index)}
|
|
40
41
|
>
|
|
41
|
-
<div
|
|
42
|
+
{/* <div
|
|
42
43
|
className='pr-4'
|
|
43
44
|
>
|
|
44
45
|
{icon(open === index ? true : false)}
|
|
45
|
-
</div>
|
|
46
|
+
</div> */}
|
|
47
|
+
<Icon
|
|
48
|
+
height={'h-5 w-5 stroke-[1.5px] '}
|
|
49
|
+
variant={open === index ? 'minus' : 'plus'}
|
|
50
|
+
strokeClass='stroke-blue-600'
|
|
51
|
+
className=' transition-opacity duration-300 mt-1'
|
|
52
|
+
/>
|
|
46
53
|
<div>
|
|
47
54
|
|
|
48
55
|
<motion.div
|
|
49
|
-
className="cursor-pointer "
|
|
56
|
+
className="cursor-pointer pl-4 "
|
|
50
57
|
initial={{ opacity: 0 }}
|
|
51
58
|
animate={{ opacity: 1 }}
|
|
52
59
|
exit={{ opacity: 1 }}
|
|
@@ -54,12 +61,7 @@ function DefaultAccordion(props) {
|
|
|
54
61
|
>
|
|
55
62
|
<div className="flex items-center justify-between">
|
|
56
63
|
<div className='flex items-center'>
|
|
57
|
-
|
|
58
|
-
height={'h-5 w-5 stroke-[1.5px] '}
|
|
59
|
-
variant={open === index ? 'minus' : 'plus'}
|
|
60
|
-
strokeClass='stroke-blue-600'
|
|
61
|
-
className='transition-all duration-500'
|
|
62
|
-
/> */}
|
|
64
|
+
|
|
63
65
|
{item.title && <Typography textStyle='body1-medium' className='text-neutral-900'>
|
|
64
66
|
{item.title}
|
|
65
67
|
</Typography>}
|
|
@@ -73,12 +75,12 @@ function DefaultAccordion(props) {
|
|
|
73
75
|
initial={{ height: 0, opacity: 0 }}
|
|
74
76
|
animate={{ height: 'auto', opacity: 1 }}
|
|
75
77
|
exit={{ height: 0, opacity: 0 }}
|
|
76
|
-
transition={{ duration: 0.
|
|
78
|
+
transition={{ duration: 0.1, type: 'tween' }}
|
|
77
79
|
>
|
|
78
80
|
{item.content &&
|
|
79
81
|
<Typography
|
|
80
82
|
textStyle='body1'
|
|
81
|
-
className='text-neutral-900'>
|
|
83
|
+
className='text-neutral-900 pl-4'>
|
|
82
84
|
{item.content}
|
|
83
85
|
</Typography>}
|
|
84
86
|
</motion.div>
|