hds-web 1.28.9 → 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/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>
|