hds-web 1.37.4 → 1.37.6
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 +5 -5
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/HDS/components/Footers/v3Footer.js +28 -41
- package/src/HDS/helpers/AlgoliaSearch/searchfooter.js +8 -2
- package/src/HDS/modules/Faq/faq.js +105 -103
- package/src/styles/tailwind.css +13 -8
package/package.json
CHANGED
|
@@ -95,7 +95,9 @@ const socialShare = [
|
|
|
95
95
|
|
|
96
96
|
export default function V3Footer(props) {
|
|
97
97
|
const [isError, setIsError] = useState(false);
|
|
98
|
+
|
|
98
99
|
const [isItems, setIsItems] = useState(null);
|
|
100
|
+
|
|
99
101
|
useEffect(() => {
|
|
100
102
|
fetch("https://status.hasura.io/api/v2/status.json")
|
|
101
103
|
.then((res) => res.json())
|
|
@@ -109,6 +111,13 @@ export default function V3Footer(props) {
|
|
|
109
111
|
}
|
|
110
112
|
);
|
|
111
113
|
}, []);
|
|
114
|
+
|
|
115
|
+
const isDarkMode = props?.isDarkMode;
|
|
116
|
+
|
|
117
|
+
const logoUrl = isDarkMode
|
|
118
|
+
? `https://res.cloudinary.com/dh8fp23nd/image/upload/v1718878031/hasura_dark_mode_kjrlxi.svg`
|
|
119
|
+
: `https://res.cloudinary.com/dh8fp23nd/image/upload/v1686659126/website%20v3/hasura-primary_y9cdnn.svg`;
|
|
120
|
+
|
|
112
121
|
return (
|
|
113
122
|
<div>
|
|
114
123
|
<div className="db-s:flex justify-between gap-10 db-s:gap-20 db:gap-40">
|
|
@@ -116,7 +125,8 @@ export default function V3Footer(props) {
|
|
|
116
125
|
<a href={props.brandLink} className="">
|
|
117
126
|
<img
|
|
118
127
|
className="max-w-[125px]"
|
|
119
|
-
src={
|
|
128
|
+
src={logoUrl}
|
|
129
|
+
loading="lazy"
|
|
120
130
|
alt={props.brandAlt}
|
|
121
131
|
/>
|
|
122
132
|
</a>
|
|
@@ -126,7 +136,7 @@ export default function V3Footer(props) {
|
|
|
126
136
|
<div key={index} className="min-w-[130px] db-s:min-w-fit">
|
|
127
137
|
<Typography
|
|
128
138
|
textStyle="body3c-semi-bold"
|
|
129
|
-
className="text-neutral-600"
|
|
139
|
+
className={isDarkMode ? "text-neutral-0" : "text-neutral-600"}
|
|
130
140
|
>
|
|
131
141
|
{footerLink.title}
|
|
132
142
|
</Typography>
|
|
@@ -134,7 +144,11 @@ export default function V3Footer(props) {
|
|
|
134
144
|
<a href={link.linkUrl}>
|
|
135
145
|
<Typography
|
|
136
146
|
textStyle="body3"
|
|
137
|
-
className=
|
|
147
|
+
className={
|
|
148
|
+
isDarkMode
|
|
149
|
+
? "text-neutral-0 mt-2 tb:mt-4 hover:text-neutral-200"
|
|
150
|
+
: "text-neutral-600 mt-2 tb:mt-4 hover:text-neutral-1000"
|
|
151
|
+
}
|
|
138
152
|
>
|
|
139
153
|
{link.linkText}
|
|
140
154
|
</Typography>
|
|
@@ -163,7 +177,12 @@ export default function V3Footer(props) {
|
|
|
163
177
|
<a href="https://status.hasura.io/" className="">
|
|
164
178
|
<div className=" bg-neutral-0 rounded-full shadow hover:shadow-lg transition-all duration-300 px-4 py-2 inline-flex justify-center items-center">
|
|
165
179
|
<div className="w-4 h-4 bg-green-400 rounded-full mr-2"></div>
|
|
166
|
-
<Typography
|
|
180
|
+
<Typography
|
|
181
|
+
textStyle="body3"
|
|
182
|
+
className={
|
|
183
|
+
isDarkMode ? "text-neutral-0" : "text-neutral-1000"
|
|
184
|
+
}
|
|
185
|
+
>
|
|
167
186
|
{isItems?.status.description}
|
|
168
187
|
</Typography>
|
|
169
188
|
</div>
|
|
@@ -173,7 +192,11 @@ export default function V3Footer(props) {
|
|
|
173
192
|
<div>
|
|
174
193
|
<Typography
|
|
175
194
|
textStyle="body3c"
|
|
176
|
-
className=
|
|
195
|
+
className={
|
|
196
|
+
isDarkMode
|
|
197
|
+
? "text-neutral-0 pt-4 tb-m:pt-0"
|
|
198
|
+
: "text-neutral-600 pt-4 tb-m:pt-0"
|
|
199
|
+
}
|
|
177
200
|
>
|
|
178
201
|
© {new Date().getFullYear()} Hasura Inc. All rights reserved
|
|
179
202
|
</Typography>
|
|
@@ -250,14 +273,6 @@ V3Footer.defaultProps = {
|
|
|
250
273
|
linkText: "Hasura Hub",
|
|
251
274
|
linkUrl: "https://hasura.io/hub/",
|
|
252
275
|
},
|
|
253
|
-
// {
|
|
254
|
-
// linkText: 'GraphQL Hub',
|
|
255
|
-
// linkUrl: '#',
|
|
256
|
-
// },
|
|
257
|
-
// {
|
|
258
|
-
// linkText: 'Guides',
|
|
259
|
-
// linkUrl: '#',
|
|
260
|
-
// },
|
|
261
276
|
{
|
|
262
277
|
linkText: "Changelog",
|
|
263
278
|
linkUrl: "https://github.com/hasura/graphql-engine/releases/",
|
|
@@ -275,10 +290,6 @@ V3Footer.defaultProps = {
|
|
|
275
290
|
linkText: "Blog",
|
|
276
291
|
linkUrl: "https://hasura.io/blog",
|
|
277
292
|
},
|
|
278
|
-
// {
|
|
279
|
-
// linkText: 'Tech Talks',
|
|
280
|
-
// linkUrl: '#',
|
|
281
|
-
// },
|
|
282
293
|
{
|
|
283
294
|
linkText: "Tutorials",
|
|
284
295
|
linkUrl: "https://hasura.io/learn/",
|
|
@@ -300,18 +311,10 @@ V3Footer.defaultProps = {
|
|
|
300
311
|
linkText: "Our Story",
|
|
301
312
|
linkUrl: "https://hasura.io/about/",
|
|
302
313
|
},
|
|
303
|
-
// {
|
|
304
|
-
// linkText: 'Newsroom',
|
|
305
|
-
// linkUrl: '#',
|
|
306
|
-
// },
|
|
307
314
|
{
|
|
308
315
|
linkText: "Careers",
|
|
309
316
|
linkUrl: "https://hasura.io/careers/",
|
|
310
317
|
},
|
|
311
|
-
// {
|
|
312
|
-
// linkText: 'Partners',
|
|
313
|
-
// linkUrl: '#',
|
|
314
|
-
// },
|
|
315
318
|
{
|
|
316
319
|
linkText: "Partners",
|
|
317
320
|
linkUrl: "https://hasura.io/partners",
|
|
@@ -324,10 +327,6 @@ V3Footer.defaultProps = {
|
|
|
324
327
|
linkText: "Privacy Policy",
|
|
325
328
|
linkUrl: "https://hasura.io/legal/hasura-privacy-policy",
|
|
326
329
|
},
|
|
327
|
-
// {
|
|
328
|
-
// linkText: 'Brand',
|
|
329
|
-
// linkUrl: 'https://hasura.io/brand/',
|
|
330
|
-
// },
|
|
331
330
|
],
|
|
332
331
|
},
|
|
333
332
|
{
|
|
@@ -341,18 +340,6 @@ V3Footer.defaultProps = {
|
|
|
341
340
|
linkText: "Discord",
|
|
342
341
|
linkUrl: "https://discord.com/invite/hasura",
|
|
343
342
|
},
|
|
344
|
-
// {
|
|
345
|
-
// linkText: 'Forum',
|
|
346
|
-
// linkUrl: '#',
|
|
347
|
-
// },
|
|
348
|
-
// {
|
|
349
|
-
// linkText: 'Meetup',
|
|
350
|
-
// linkUrl: '#',
|
|
351
|
-
// },
|
|
352
|
-
// {
|
|
353
|
-
// linkText: 'Support',
|
|
354
|
-
// linkUrl: '#',
|
|
355
|
-
// },
|
|
356
343
|
],
|
|
357
344
|
},
|
|
358
345
|
{
|
|
@@ -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;
|
package/src/styles/tailwind.css
CHANGED
|
@@ -1774,10 +1774,18 @@ select{
|
|
|
1774
1774
|
max-height: 26.25;
|
|
1775
1775
|
}
|
|
1776
1776
|
|
|
1777
|
+
.max-h-\[36px\]{
|
|
1778
|
+
max-height: 36px;
|
|
1779
|
+
}
|
|
1780
|
+
|
|
1777
1781
|
.max-h-\[40px\]{
|
|
1778
1782
|
max-height: 40px;
|
|
1779
1783
|
}
|
|
1780
1784
|
|
|
1785
|
+
.max-h-\[42px\]{
|
|
1786
|
+
max-height: 42px;
|
|
1787
|
+
}
|
|
1788
|
+
|
|
1781
1789
|
.max-h-\[44px\]{
|
|
1782
1790
|
max-height: 44px;
|
|
1783
1791
|
}
|
|
@@ -1802,14 +1810,6 @@ select{
|
|
|
1802
1810
|
max-height: 100vh;
|
|
1803
1811
|
}
|
|
1804
1812
|
|
|
1805
|
-
.max-h-\[42px\]{
|
|
1806
|
-
max-height: 42px;
|
|
1807
|
-
}
|
|
1808
|
-
|
|
1809
|
-
.max-h-\[36px\]{
|
|
1810
|
-
max-height: 36px;
|
|
1811
|
-
}
|
|
1812
|
-
|
|
1813
1813
|
.min-h-\[12px\]{
|
|
1814
1814
|
min-height: 12px;
|
|
1815
1815
|
}
|
|
@@ -10202,6 +10202,11 @@ select{
|
|
|
10202
10202
|
color: rgb(0 6 21 / var(--tw-text-opacity));
|
|
10203
10203
|
}
|
|
10204
10204
|
|
|
10205
|
+
.hover\:text-neutral-200:hover{
|
|
10206
|
+
--tw-text-opacity: 1;
|
|
10207
|
+
color: rgb(229 231 235 / var(--tw-text-opacity));
|
|
10208
|
+
}
|
|
10209
|
+
|
|
10205
10210
|
.hover\:shadow:hover{
|
|
10206
10211
|
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
10207
10212
|
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
|