hds-web 1.37.4 → 1.37.5
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 +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/HDS/helpers/AlgoliaSearch/searchfooter.js +8 -2
- package/src/HDS/modules/Faq/faq.js +105 -103
package/package.json
CHANGED
|
@@ -9,11 +9,17 @@ const SearchFooter = () => (
|
|
|
9
9
|
<p>Unable to find what you're looking for?</p>
|
|
10
10
|
<p>
|
|
11
11
|
Reach out to our{" "}
|
|
12
|
-
<a
|
|
12
|
+
<a
|
|
13
|
+
className="text-blue-500 hover:text-blue-700"
|
|
14
|
+
href="https://discord.com/invite/hasura"
|
|
15
|
+
target="_blank"
|
|
16
|
+
rel="noopener noreferrer"
|
|
17
|
+
>
|
|
13
18
|
Discord Community
|
|
14
19
|
</a>{" "}
|
|
15
20
|
or start a{" "}
|
|
16
|
-
<a
|
|
21
|
+
<a
|
|
22
|
+
className="text-blue-500 hover:text-blue-700"
|
|
17
23
|
href="https://github.com/hasura/graphql-engine/discussions"
|
|
18
24
|
target="_blank"
|
|
19
25
|
rel="noopener noreferrer"
|
|
@@ -1,115 +1,117 @@
|
|
|
1
|
-
import React, { useState } from
|
|
2
|
-
import { motion, AnimatePresence } from
|
|
3
|
-
import { Typography } from
|
|
4
|
-
import { Icon } from
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import { motion, AnimatePresence } from "framer-motion";
|
|
3
|
+
import { Typography } from "../../foundation/Typography";
|
|
4
|
+
import { Icon } from "../../components";
|
|
5
5
|
import ReactMarkdown from "react-markdown";
|
|
6
6
|
function DefaultAccordion(props) {
|
|
7
|
-
|
|
7
|
+
const [open, setOpen] = useState(null);
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
9
|
+
const handleOpen = (index) => {
|
|
10
|
+
if (open === index) {
|
|
11
|
+
setOpen(null);
|
|
12
|
+
} else {
|
|
13
|
+
setOpen(index);
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
// const icon = (open) => (
|
|
17
|
+
// <motion.div
|
|
18
|
+
// initial={{ opacity: 0 }}
|
|
19
|
+
// animate={{ opacity: 1 }}
|
|
20
|
+
// transition={{ duration: 0.3, opacity: { ease: "easeIn" } }}
|
|
21
|
+
// className='h-5 w-5 mt-3.5'>
|
|
22
|
+
// <div className='w-5 h-5 cursor-pointer' >
|
|
23
|
+
// <div
|
|
24
|
+
// aria-hidden="true"
|
|
25
|
+
// className={` block absolute h-[2px] w-[14px] bg-blue-600 transform transition duration-300 `}
|
|
26
|
+
// />
|
|
27
|
+
// <div
|
|
28
|
+
// aria-hidden="true"
|
|
29
|
+
// className={`${((!open) ? '-rotate-90 ' : '')} block absolute h-0.5 w-[14px] bg-blue-600 transition-all duration-300 ease-in-out`}
|
|
30
|
+
// />
|
|
31
|
+
// </div>
|
|
32
32
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
>
|
|
43
|
-
{/* <div
|
|
33
|
+
// </motion.div>
|
|
34
|
+
// )
|
|
35
|
+
return (
|
|
36
|
+
<div className="divide-y divide-neutral-200">
|
|
37
|
+
{props.accordionData &&
|
|
38
|
+
props.accordionData.map((item, index) => (
|
|
39
|
+
<div key={index} className=" first:pt-0 last:pb-0 py-6 flex">
|
|
40
|
+
{/* <div
|
|
44
41
|
className='pr-4'
|
|
45
42
|
>
|
|
46
43
|
{icon(open === index ? true : false)}
|
|
47
44
|
</div> */}
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
</div>
|
|
79
|
-
</div>
|
|
80
|
-
</motion.div>
|
|
81
|
-
<AnimatePresence>
|
|
82
|
-
{open === index && (
|
|
83
|
-
<motion.div
|
|
84
|
-
className=""
|
|
85
|
-
initial={{ height: 0, opacity: 0 }}
|
|
86
|
-
animate={{ height: 'auto', opacity: 1 }}
|
|
87
|
-
exit={{ height: 0, opacity: 0 }}
|
|
88
|
-
transition={{ duration: 0.1, type: 'tween' }}
|
|
89
|
-
>
|
|
90
|
-
{item.content &&
|
|
91
|
-
<Typography
|
|
92
|
-
textStyle='body1'
|
|
93
|
-
className='text-neutral-900 pl-4 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600 [&>p]:pb-2 last:[&>p]:pb-0 [&>ul>li>a]:text-blue-600'
|
|
94
|
-
>
|
|
95
|
-
<ReactMarkdown
|
|
96
|
-
components={{
|
|
97
|
-
a: ({ node, ...props }) => (
|
|
98
|
-
<a className="text-blue-600" target='_blank' {...props} />
|
|
99
|
-
),
|
|
100
|
-
}}
|
|
101
|
-
>
|
|
102
|
-
{item.content}
|
|
103
|
-
</ReactMarkdown>
|
|
104
|
-
</Typography>}
|
|
105
|
-
</motion.div>
|
|
106
|
-
)}
|
|
107
|
-
</AnimatePresence>
|
|
108
|
-
</div>
|
|
45
|
+
<div className=" cursor-pointer" onClick={() => handleOpen(index)}>
|
|
46
|
+
<Icon
|
|
47
|
+
height={"h-5 w-5 stroke-[1.5px] "}
|
|
48
|
+
variant={open === index ? "minus" : "plus"}
|
|
49
|
+
strokeClass="stroke-blue-600"
|
|
50
|
+
className=" transition-opacity duration-300 mt-1"
|
|
51
|
+
/>
|
|
52
|
+
</div>
|
|
53
|
+
<div>
|
|
54
|
+
<motion.div
|
|
55
|
+
className=" pl-4 "
|
|
56
|
+
initial={{ opacity: 0 }}
|
|
57
|
+
animate={{ opacity: 1 }}
|
|
58
|
+
exit={{ opacity: 1 }}
|
|
59
|
+
transition={{ duration: 0.3, type: "easeIn" }}
|
|
60
|
+
>
|
|
61
|
+
<div className="flex items-center justify-between cursor-pointer">
|
|
62
|
+
<div
|
|
63
|
+
className="flex items-center"
|
|
64
|
+
onClick={() => handleOpen(index)}
|
|
65
|
+
>
|
|
66
|
+
{item.title && (
|
|
67
|
+
<Typography
|
|
68
|
+
textStyle="body1-medium"
|
|
69
|
+
className="text-neutral-900"
|
|
70
|
+
>
|
|
71
|
+
{item.title}
|
|
72
|
+
</Typography>
|
|
73
|
+
)}
|
|
74
|
+
</div>
|
|
109
75
|
</div>
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
76
|
+
</motion.div>
|
|
77
|
+
<AnimatePresence>
|
|
78
|
+
{open === index && (
|
|
79
|
+
<motion.div
|
|
80
|
+
className=""
|
|
81
|
+
initial={{ height: 0, opacity: 0 }}
|
|
82
|
+
animate={{ height: "auto", opacity: 1 }}
|
|
83
|
+
exit={{ height: 0, opacity: 0 }}
|
|
84
|
+
transition={{ duration: 0.1, type: "tween" }}
|
|
85
|
+
>
|
|
86
|
+
{item.content && (
|
|
87
|
+
<Typography
|
|
88
|
+
textStyle="body1"
|
|
89
|
+
className="text-neutral-900 pl-4 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600 [&>p]:pb-2 last:[&>p]:pb-0 [&>ul>li>a]:text-blue-600"
|
|
90
|
+
>
|
|
91
|
+
<ReactMarkdown
|
|
92
|
+
components={{
|
|
93
|
+
a: ({ node, ...props }) => (
|
|
94
|
+
<a
|
|
95
|
+
className="text-blue-600"
|
|
96
|
+
target="_blank"
|
|
97
|
+
rel="noopener noreferrer"
|
|
98
|
+
{...props}
|
|
99
|
+
/>
|
|
100
|
+
),
|
|
101
|
+
}}
|
|
102
|
+
>
|
|
103
|
+
{item.content}
|
|
104
|
+
</ReactMarkdown>
|
|
105
|
+
</Typography>
|
|
106
|
+
)}
|
|
107
|
+
</motion.div>
|
|
108
|
+
)}
|
|
109
|
+
</AnimatePresence>
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
))}
|
|
113
|
+
</div>
|
|
114
|
+
);
|
|
113
115
|
}
|
|
114
116
|
|
|
115
117
|
export default DefaultAccordion;
|