hds-web 1.28.9 → 1.29.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.es.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/HDS/modules/Faq/faq.js +35 -33
package/package.json
CHANGED
|
@@ -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>
|