hds-web 1.37.3 → 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.css +1 -1
- package/dist/index.es.css +1 -1
- 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/Cards/aboutSection.js +5 -2
- package/src/HDS/modules/Faq/faq.js +105 -103
- package/src/styles/tailwind.css +16 -0
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"
|
|
@@ -3,6 +3,7 @@ import { Badges } from "../../components/BadgesCaption";
|
|
|
3
3
|
import { Typography } from "../../foundation/Typography";
|
|
4
4
|
import { HDSButton } from "../../components/Buttons";
|
|
5
5
|
import { Icon } from "../../components/common-components";
|
|
6
|
+
|
|
6
7
|
export default function AboutSection(props) {
|
|
7
8
|
return (
|
|
8
9
|
<>
|
|
@@ -25,11 +26,11 @@ export default function AboutSection(props) {
|
|
|
25
26
|
<img
|
|
26
27
|
alt={props.title ?? "connectorImage"}
|
|
27
28
|
src={props.imgUrl}
|
|
28
|
-
className=" max-h-[
|
|
29
|
+
// className=" max-h-[42px] pl-1"
|
|
30
|
+
className={props?.logoClass || "max-h-[48px] pl-1"}
|
|
29
31
|
/>
|
|
30
32
|
</div>
|
|
31
33
|
)}
|
|
32
|
-
|
|
33
34
|
{props.tags && (
|
|
34
35
|
<div className="gap-2 pt-8 flex flex-wrap">
|
|
35
36
|
{props.tags.map((tag, index) => (
|
|
@@ -156,6 +157,8 @@ export default function AboutSection(props) {
|
|
|
156
157
|
<a
|
|
157
158
|
href={props.githubRepoLink}
|
|
158
159
|
className="flex gap-2 items-center"
|
|
160
|
+
target="_blank"
|
|
161
|
+
rel="noopener noreferrer"
|
|
159
162
|
>
|
|
160
163
|
<Icon height={"h-6 w-6 stroke-[1.5px]"} variant="octoface" />
|
|
161
164
|
<Typography textStyle="body1-medium" className="text-blue-600">
|
|
@@ -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;
|
package/src/styles/tailwind.css
CHANGED
|
@@ -1782,6 +1782,10 @@ select{
|
|
|
1782
1782
|
max-height: 44px;
|
|
1783
1783
|
}
|
|
1784
1784
|
|
|
1785
|
+
.max-h-\[48px\]{
|
|
1786
|
+
max-height: 48px;
|
|
1787
|
+
}
|
|
1788
|
+
|
|
1785
1789
|
.max-h-\[530px\]{
|
|
1786
1790
|
max-height: 530px;
|
|
1787
1791
|
}
|
|
@@ -1798,6 +1802,14 @@ select{
|
|
|
1798
1802
|
max-height: 100vh;
|
|
1799
1803
|
}
|
|
1800
1804
|
|
|
1805
|
+
.max-h-\[42px\]{
|
|
1806
|
+
max-height: 42px;
|
|
1807
|
+
}
|
|
1808
|
+
|
|
1809
|
+
.max-h-\[36px\]{
|
|
1810
|
+
max-height: 36px;
|
|
1811
|
+
}
|
|
1812
|
+
|
|
1801
1813
|
.min-h-\[12px\]{
|
|
1802
1814
|
min-height: 12px;
|
|
1803
1815
|
}
|
|
@@ -6656,6 +6668,10 @@ select{
|
|
|
6656
6668
|
padding-left: 0px;
|
|
6657
6669
|
}
|
|
6658
6670
|
|
|
6671
|
+
.pl-1{
|
|
6672
|
+
padding-left: 0.25rem;
|
|
6673
|
+
}
|
|
6674
|
+
|
|
6659
6675
|
.pl-10{
|
|
6660
6676
|
padding-left: 2.5rem;
|
|
6661
6677
|
}
|