hds-web 1.39.1 → 1.39.2
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 +5 -5
- package/package.json +1 -1
- package/src/HDS/components/Cards/Dropdown/v3Dropdown.js +9 -1
- package/src/HDS/components/Cards/Menu/ResourcesDropdown.js +106 -0
- package/src/HDS/components/Cards/Menu/flyoutD.js +4 -4
- package/src/HDS/components/Footers/v3Footer.js +81 -88
- package/src/HDS/components/Headers/v3Header.js +94 -165
- package/src/styles/tailwind.css +30 -0
package/package.json
CHANGED
|
@@ -2,6 +2,7 @@ import React from "react";
|
|
|
2
2
|
import { HDSColor } from "../../../foundation/ColorPalette";
|
|
3
3
|
import { FlyoutB, FlyoutA, FlyoutD } from "../Menu";
|
|
4
4
|
import ConnectorsDropdown from "../Menu/ConnectorsDropdown";
|
|
5
|
+
import ResourcesDropdown from "../Menu/ResourcesDropdown";
|
|
5
6
|
|
|
6
7
|
export default function DropdownA(props) {
|
|
7
8
|
return (
|
|
@@ -32,6 +33,13 @@ export default function DropdownA(props) {
|
|
|
32
33
|
// split={item.split}
|
|
33
34
|
split={true}
|
|
34
35
|
/>
|
|
36
|
+
) : item?.label === "RESOURCES" ? (
|
|
37
|
+
<ResourcesDropdown
|
|
38
|
+
label={item.label}
|
|
39
|
+
childArray={item.childArray}
|
|
40
|
+
// split={item.split}
|
|
41
|
+
split={true}
|
|
42
|
+
/>
|
|
35
43
|
) : (
|
|
36
44
|
<FlyoutA
|
|
37
45
|
label={item.label}
|
|
@@ -62,7 +70,7 @@ export default function DropdownA(props) {
|
|
|
62
70
|
</div>
|
|
63
71
|
</div>
|
|
64
72
|
} */}
|
|
65
|
-
{props.flyoutD && <FlyoutD />}
|
|
73
|
+
{props.flyoutD && <FlyoutD {...props?.flyoutD} />}
|
|
66
74
|
</div>
|
|
67
75
|
</div>
|
|
68
76
|
);
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Icon } from "../../common-components/Icon";
|
|
3
|
+
import { Typography } from "../../../foundation/Typography";
|
|
4
|
+
|
|
5
|
+
export default function ResourcesDropdown(props) {
|
|
6
|
+
const { split } = props;
|
|
7
|
+
|
|
8
|
+
const cardLayout = (label, childArray) => (
|
|
9
|
+
<div className=" group h-full">
|
|
10
|
+
<div className={`w-full h-full ` + (split ? " " : " rounded-2xl")}>
|
|
11
|
+
<div className={`w-full py-6 px-4`}>
|
|
12
|
+
{label ? (
|
|
13
|
+
<Typography
|
|
14
|
+
textStyle="h6"
|
|
15
|
+
className=" uppercase group-hover/split:text-neutral-1000 group-hover:text-neutral-1000 group-hover-transition text-neutral-500 mb-4"
|
|
16
|
+
>
|
|
17
|
+
{label}
|
|
18
|
+
</Typography>
|
|
19
|
+
) : (
|
|
20
|
+
<div className="mb-8"></div>
|
|
21
|
+
)}
|
|
22
|
+
<div className={` tb:tb:grid tb:tb:grid-cols-1 tb:min-w-[200px] `}>
|
|
23
|
+
{childArray &&
|
|
24
|
+
childArray.map((item) => (
|
|
25
|
+
<div
|
|
26
|
+
key={item.name}
|
|
27
|
+
className="relative pb-2 flex rounded-lg items-center"
|
|
28
|
+
>
|
|
29
|
+
<a href={item.href} className="w-full">
|
|
30
|
+
<div className="flex group/icon pl-2 py-2 pr-3 hover:pl-[9px] hover:bg-neutral-100 rounded-lg flex-row w-full justify-between items-center">
|
|
31
|
+
<div className="flex gap-2 flex-row items-center">
|
|
32
|
+
<div className="flex rounded-lg items-center group-hover:bg-white">
|
|
33
|
+
{item.icon && (
|
|
34
|
+
<Icon
|
|
35
|
+
height={
|
|
36
|
+
"h-5 w-5 stroke-2 " +
|
|
37
|
+
(item.icon === "discord" ||
|
|
38
|
+
item.icon === "octoface" ||
|
|
39
|
+
item.icon === "meetup"
|
|
40
|
+
? ""
|
|
41
|
+
: "group-hover/icon:stroke-blue-500 ")
|
|
42
|
+
}
|
|
43
|
+
variant={item.icon}
|
|
44
|
+
strokeClass={item.strokeClass}
|
|
45
|
+
/>
|
|
46
|
+
)}
|
|
47
|
+
</div>
|
|
48
|
+
<Typography
|
|
49
|
+
textStyle="body3c-medium"
|
|
50
|
+
className="text-neutral-1000 group-hover/icon:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip"
|
|
51
|
+
>
|
|
52
|
+
{item.name}
|
|
53
|
+
</Typography>
|
|
54
|
+
</div>
|
|
55
|
+
<div className="flex group-hover/icon:translate-x-1 transform transition-all duration-200 ease-in-out tb-l:-ml-1">
|
|
56
|
+
<Icon
|
|
57
|
+
height={
|
|
58
|
+
"h-4 w-4 stroke-2 invisible group-hover/icon:visible transition-all ease-in-out "
|
|
59
|
+
}
|
|
60
|
+
variant={"chevronright"}
|
|
61
|
+
strokeClass={"stroke-blue-500"}
|
|
62
|
+
/>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
</a>
|
|
66
|
+
</div>
|
|
67
|
+
))}
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
);
|
|
73
|
+
|
|
74
|
+
return (
|
|
75
|
+
<>
|
|
76
|
+
{split ? (
|
|
77
|
+
<>
|
|
78
|
+
<div className="hds-hidden tb-l:flex h-full">
|
|
79
|
+
<div className="rounded-l-2xl">
|
|
80
|
+
{cardLayout(
|
|
81
|
+
props.label,
|
|
82
|
+
props.childArray.slice(
|
|
83
|
+
0,
|
|
84
|
+
Math.ceil(props.childArray.length / 2)
|
|
85
|
+
)
|
|
86
|
+
)}
|
|
87
|
+
</div>
|
|
88
|
+
<div className="group/split rounded-r-2xl tb-l:-ml-6">
|
|
89
|
+
{cardLayout(
|
|
90
|
+
null,
|
|
91
|
+
props.childArray.slice(Math.ceil(props.childArray.length / 2))
|
|
92
|
+
)}
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
<div className="hds-hidden-tbl h-full rounded-2xl">
|
|
96
|
+
{cardLayout(props.label, props.childArray)}
|
|
97
|
+
</div>
|
|
98
|
+
</>
|
|
99
|
+
) : (
|
|
100
|
+
<div className=" shadow h-full rounded-2xl">
|
|
101
|
+
{cardLayout(props.label, props.childArray)}
|
|
102
|
+
</div>
|
|
103
|
+
)}
|
|
104
|
+
</>
|
|
105
|
+
);
|
|
106
|
+
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
|
|
3
|
-
export default function FlyoutD() {
|
|
3
|
+
export default function FlyoutD(props) {
|
|
4
4
|
return (
|
|
5
5
|
<div className="flex justify-center">
|
|
6
|
-
<a href={
|
|
6
|
+
<a href={props?.link}>
|
|
7
7
|
<img
|
|
8
|
-
src=
|
|
9
|
-
alt=
|
|
8
|
+
src={props?.cardImg}
|
|
9
|
+
alt={props?.cardImgAlt}
|
|
10
10
|
className="w-full min-w-[204px] max-w-[204px] mt-2 tb-l:mt-0"
|
|
11
11
|
/>
|
|
12
12
|
</a>
|
|
@@ -131,7 +131,7 @@ export default function V3Footer(props) {
|
|
|
131
131
|
/>
|
|
132
132
|
</a>
|
|
133
133
|
</div>
|
|
134
|
-
<div className="flex justify-between px-4 tb:px-0 tb:justify-start tb-l:justify-between flex-1 flex-wrap gap-y-10 tb:gap-y-16">
|
|
134
|
+
<div className="flex justify-between px-4 tb:px-0 tb:justify-start tb-l:justify-between flex-1 flex-wrap gap-y-10 tb:gap-y-16 lg:max-w-[712px] 2xl:max-w-[756px]">
|
|
135
135
|
{props.footerLinks.map((footerLink, index) => (
|
|
136
136
|
<div key={index} className="min-w-[130px] db-s:min-w-fit">
|
|
137
137
|
<Typography
|
|
@@ -141,7 +141,7 @@ export default function V3Footer(props) {
|
|
|
141
141
|
{footerLink.title}
|
|
142
142
|
</Typography>
|
|
143
143
|
{footerLink.links.map((link, subIndex) => (
|
|
144
|
-
<a href={link.linkUrl}>
|
|
144
|
+
<a href={link.linkUrl} key={subIndex}>
|
|
145
145
|
<Typography
|
|
146
146
|
textStyle="body3"
|
|
147
147
|
className={
|
|
@@ -173,29 +173,31 @@ export default function V3Footer(props) {
|
|
|
173
173
|
</a>
|
|
174
174
|
))}
|
|
175
175
|
</div>
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
<
|
|
180
|
-
<div className="
|
|
181
|
-
|
|
182
|
-
{
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
<
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
176
|
+
<div className="flex flex-col md:flex-row justify-between items-center w-full lg:max-w-[716px] 2xl:max-w-[756px]">
|
|
177
|
+
{isItems && !isError && (
|
|
178
|
+
<>
|
|
179
|
+
<a href="https://status.hasura.io/" className="">
|
|
180
|
+
<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 md:ml-16 lg:ml-0">
|
|
181
|
+
<div className="w-4 h-4 bg-green-400 rounded-full mr-2"></div>
|
|
182
|
+
<Typography textStyle="body3" className={"text-neutral-1000"}>
|
|
183
|
+
{isItems?.status.description}
|
|
184
|
+
</Typography>
|
|
185
|
+
</div>
|
|
186
|
+
</a>
|
|
187
|
+
</>
|
|
188
|
+
)}
|
|
189
|
+
<div>
|
|
190
|
+
<Typography
|
|
191
|
+
textStyle="body3c"
|
|
192
|
+
className={
|
|
193
|
+
isDarkMode
|
|
194
|
+
? "text-neutral-400 pt-4 tb-m:pt-0"
|
|
195
|
+
: "text-neutral-600 pt-4 tb-m:pt-0"
|
|
196
|
+
}
|
|
197
|
+
>
|
|
198
|
+
© {new Date().getFullYear()} Hasura Inc. All rights reserved
|
|
199
|
+
</Typography>
|
|
200
|
+
</div>
|
|
199
201
|
</div>
|
|
200
202
|
</div>
|
|
201
203
|
</div>
|
|
@@ -212,49 +214,20 @@ V3Footer.defaultProps = {
|
|
|
212
214
|
title: "Platform",
|
|
213
215
|
links: [
|
|
214
216
|
{
|
|
215
|
-
linkText: "Hasura
|
|
216
|
-
linkUrl: "https://hasura.io/
|
|
217
|
-
},
|
|
218
|
-
{
|
|
219
|
-
linkText: "Hasura EE",
|
|
220
|
-
linkUrl: "https://hasura.io/enterprise/",
|
|
217
|
+
linkText: "Hasura DDN",
|
|
218
|
+
linkUrl: "https://hasura.io/products/",
|
|
221
219
|
},
|
|
222
220
|
{
|
|
223
|
-
linkText: "
|
|
224
|
-
linkUrl: "https://hasura.io/
|
|
221
|
+
linkText: "Connectors",
|
|
222
|
+
linkUrl: "https://hasura.io/graphql/database",
|
|
225
223
|
},
|
|
226
224
|
{
|
|
227
225
|
linkText: "Pricing",
|
|
228
226
|
linkUrl: "https://hasura.io/pricing",
|
|
229
227
|
},
|
|
230
|
-
],
|
|
231
|
-
},
|
|
232
|
-
{
|
|
233
|
-
title: "Capabilities",
|
|
234
|
-
links: [
|
|
235
228
|
{
|
|
236
|
-
linkText: "
|
|
237
|
-
linkUrl: "https://hasura.io/
|
|
238
|
-
},
|
|
239
|
-
{
|
|
240
|
-
linkText: "Authorization",
|
|
241
|
-
linkUrl: "https://hasura.io/product/authorization",
|
|
242
|
-
},
|
|
243
|
-
{
|
|
244
|
-
linkText: "Performance",
|
|
245
|
-
linkUrl: "https://hasura.io/product/performance",
|
|
246
|
-
},
|
|
247
|
-
{
|
|
248
|
-
linkText: "Federation",
|
|
249
|
-
linkUrl: "https://hasura.io/products/federation",
|
|
250
|
-
},
|
|
251
|
-
{
|
|
252
|
-
linkText: "API Security",
|
|
253
|
-
linkUrl: "https://hasura.io/product/api-security",
|
|
254
|
-
},
|
|
255
|
-
{
|
|
256
|
-
linkText: "Observability",
|
|
257
|
-
linkUrl: "https://hasura.io/product/observability",
|
|
229
|
+
linkText: "Security",
|
|
230
|
+
linkUrl: "https://hasura.io/security/",
|
|
258
231
|
},
|
|
259
232
|
],
|
|
260
233
|
},
|
|
@@ -266,16 +239,12 @@ V3Footer.defaultProps = {
|
|
|
266
239
|
linkUrl: "https://hasura.io/docs/latest/index/",
|
|
267
240
|
},
|
|
268
241
|
{
|
|
269
|
-
linkText: "
|
|
270
|
-
linkUrl: "https://hasura.io/
|
|
271
|
-
},
|
|
272
|
-
{
|
|
273
|
-
linkText: "Changelog",
|
|
274
|
-
linkUrl: "https://github.com/hasura/graphql-engine/releases/",
|
|
242
|
+
linkText: "Tutorials",
|
|
243
|
+
linkUrl: "https://hasura.io/learn/",
|
|
275
244
|
},
|
|
276
245
|
{
|
|
277
|
-
linkText: "
|
|
278
|
-
linkUrl: "https://
|
|
246
|
+
linkText: "GitHub",
|
|
247
|
+
linkUrl: "https://github.com/hasura",
|
|
279
248
|
},
|
|
280
249
|
],
|
|
281
250
|
},
|
|
@@ -283,12 +252,12 @@ V3Footer.defaultProps = {
|
|
|
283
252
|
title: "Learn",
|
|
284
253
|
links: [
|
|
285
254
|
{
|
|
286
|
-
linkText:
|
|
287
|
-
linkUrl: "https://hasura.io/
|
|
255
|
+
linkText: `Enterprise`,
|
|
256
|
+
linkUrl: "https://hasura.io/enterprise",
|
|
288
257
|
},
|
|
289
258
|
{
|
|
290
|
-
linkText: "
|
|
291
|
-
linkUrl: "https://hasura.io/
|
|
259
|
+
linkText: "Blog",
|
|
260
|
+
linkUrl: "https://hasura.io/blog",
|
|
292
261
|
},
|
|
293
262
|
{
|
|
294
263
|
linkText: "Events",
|
|
@@ -296,7 +265,11 @@ V3Footer.defaultProps = {
|
|
|
296
265
|
},
|
|
297
266
|
{
|
|
298
267
|
linkText: "Supergraph.io",
|
|
299
|
-
linkUrl: "https://supergraph.io",
|
|
268
|
+
linkUrl: "https://supergraph.io/",
|
|
269
|
+
},
|
|
270
|
+
{
|
|
271
|
+
linkText: "GraphQL Hub",
|
|
272
|
+
linkUrl: "https://hasura.io/graphql/",
|
|
300
273
|
},
|
|
301
274
|
],
|
|
302
275
|
},
|
|
@@ -336,32 +309,52 @@ V3Footer.defaultProps = {
|
|
|
336
309
|
linkText: "Discord",
|
|
337
310
|
linkUrl: "https://discord.com/invite/hasura",
|
|
338
311
|
},
|
|
339
|
-
],
|
|
340
|
-
},
|
|
341
|
-
{
|
|
342
|
-
title: "Community",
|
|
343
|
-
links: [
|
|
344
312
|
{
|
|
345
|
-
linkText: "
|
|
346
|
-
linkUrl: "https://
|
|
313
|
+
linkText: "Forum",
|
|
314
|
+
linkUrl: "https://github.com/hasura/graphql-engine/discussions",
|
|
347
315
|
},
|
|
348
316
|
{
|
|
349
|
-
linkText: "
|
|
350
|
-
linkUrl: "https://
|
|
317
|
+
linkText: "Meetups",
|
|
318
|
+
linkUrl: "https://www.meetup.com/pro/hasura/",
|
|
351
319
|
},
|
|
352
320
|
{
|
|
353
|
-
linkText: "
|
|
354
|
-
linkUrl: "https://
|
|
321
|
+
linkText: "Monthly call",
|
|
322
|
+
linkUrl: "https://hasura.io/events/community-call/latest",
|
|
323
|
+
},
|
|
324
|
+
{
|
|
325
|
+
linkText: "Support",
|
|
326
|
+
linkUrl: "https://hasura.io/support-hub",
|
|
355
327
|
},
|
|
356
|
-
// {
|
|
357
|
-
// linkText: "Swag Store",
|
|
358
|
-
// linkUrl: "https://store.hasura.io/",
|
|
359
|
-
// },
|
|
360
328
|
{
|
|
361
329
|
linkText: "Contact Us",
|
|
362
330
|
linkUrl: "https://hasura.io/contact-us",
|
|
363
331
|
},
|
|
364
332
|
],
|
|
365
333
|
},
|
|
334
|
+
// {
|
|
335
|
+
// title: "Community",
|
|
336
|
+
// links: [
|
|
337
|
+
// {
|
|
338
|
+
// linkText: "Docs",
|
|
339
|
+
// linkUrl: "https://hasura.io/docs/latest/index/",
|
|
340
|
+
// },
|
|
341
|
+
// {
|
|
342
|
+
// linkText: "Help",
|
|
343
|
+
// linkUrl: "https://hasura.io/help/",
|
|
344
|
+
// },
|
|
345
|
+
// {
|
|
346
|
+
// linkText: "GitHub",
|
|
347
|
+
// linkUrl: "https://github.com/hasura",
|
|
348
|
+
// },
|
|
349
|
+
// {
|
|
350
|
+
// linkText: "Swag Store",
|
|
351
|
+
// linkUrl: "https://store.hasura.io/",
|
|
352
|
+
// },
|
|
353
|
+
// {
|
|
354
|
+
// linkText: "Contact Us",
|
|
355
|
+
// linkUrl: "https://hasura.io/contact-us",
|
|
356
|
+
// },
|
|
357
|
+
// ],
|
|
358
|
+
// },
|
|
366
359
|
],
|
|
367
360
|
};
|