hds-web 1.38.7 → 1.38.8
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 +2 -2
- package/dist/index.es.css +2 -2
- package/dist/index.es.js +1 -1
- package/dist/index.js +5 -5
- package/package.json +1 -1
- package/src/HDS/components/Cards/Dropdown/v3Dropdown.js +8 -0
- package/src/HDS/components/Cards/Menu/ResourcesDropdown.js +106 -0
- package/src/HDS/components/Headers/v3Header.js +79 -89
- package/src/styles/tailwind.css +22 -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}
|
|
@@ -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
|
+
}
|
|
@@ -21,7 +21,7 @@ const updatePGParam = (originalLink, websiteKey) => {
|
|
|
21
21
|
};
|
|
22
22
|
|
|
23
23
|
export default function V3Header(props) {
|
|
24
|
-
const listSize = props.HEADER_LIST.length;
|
|
24
|
+
// const listSize = props.HEADER_LIST.length;
|
|
25
25
|
|
|
26
26
|
const [mobileNavOpen, setmobileNavOpen] = useState(false);
|
|
27
27
|
|
|
@@ -29,11 +29,13 @@ export default function V3Header(props) {
|
|
|
29
29
|
|
|
30
30
|
const [isDeveloper, setIsDeveloper] = useState(false);
|
|
31
31
|
|
|
32
|
+
const [isResources, setIsResources] = useState(false);
|
|
33
|
+
|
|
32
34
|
const [isCompany, setIsCompany] = useState(false);
|
|
33
35
|
|
|
34
36
|
const [currentTab, setCurrentTab] = useState("");
|
|
35
37
|
|
|
36
|
-
const [isShown, setIsShown] = useState(false);
|
|
38
|
+
// const [isShown, setIsShown] = useState(false);
|
|
37
39
|
|
|
38
40
|
const [isArrowActive, setIsArrowActive] = useState(false);
|
|
39
41
|
|
|
@@ -172,6 +174,7 @@ export default function V3Header(props) {
|
|
|
172
174
|
<>
|
|
173
175
|
{renderDropdownContainer(headerList, 0)}
|
|
174
176
|
{renderDropdownContainer(headerList, 1)}
|
|
177
|
+
{renderDropdownContainer(headerList, 2)}
|
|
175
178
|
{
|
|
176
179
|
<a href="/customers">
|
|
177
180
|
<Typography
|
|
@@ -186,7 +189,6 @@ export default function V3Header(props) {
|
|
|
186
189
|
</Typography>
|
|
187
190
|
</a>
|
|
188
191
|
}
|
|
189
|
-
{/* {renderDropdownContainer(headerList, 3)} */}
|
|
190
192
|
{
|
|
191
193
|
<a href="/pricing">
|
|
192
194
|
<Typography
|
|
@@ -229,7 +231,17 @@ export default function V3Header(props) {
|
|
|
229
231
|
/>
|
|
230
232
|
</div>
|
|
231
233
|
)}
|
|
232
|
-
{
|
|
234
|
+
{isResources && (
|
|
235
|
+
<div className="product_resources">
|
|
236
|
+
<V3Dropdown
|
|
237
|
+
primaryCard={HEADER_LIST[2]["primaryCard"]}
|
|
238
|
+
secondaryCardArr={HEADER_LIST[2]["secondaryCardArr"]}
|
|
239
|
+
tertiaryCard={HEADER_LIST[2]["tertiaryCard"]}
|
|
240
|
+
flyoutD={HEADER_LIST[2]["flyoutD"]}
|
|
241
|
+
/>
|
|
242
|
+
</div>
|
|
243
|
+
)}
|
|
244
|
+
{/* {isCompany && (
|
|
233
245
|
<div className="product_company">
|
|
234
246
|
<V3Dropdown
|
|
235
247
|
primaryCard={HEADER_LIST[3]["primaryCard"]}
|
|
@@ -237,7 +249,7 @@ export default function V3Header(props) {
|
|
|
237
249
|
tertiaryCard={HEADER_LIST[3]["tertiaryCard"]}
|
|
238
250
|
/>
|
|
239
251
|
</div>
|
|
240
|
-
)}
|
|
252
|
+
)} */}
|
|
241
253
|
</div>
|
|
242
254
|
</div>
|
|
243
255
|
);
|
|
@@ -259,6 +271,7 @@ export default function V3Header(props) {
|
|
|
259
271
|
function handleMbDropdownClose() {
|
|
260
272
|
setmobileNavOpen(!mobileNavOpen);
|
|
261
273
|
setIsDeveloper(false);
|
|
274
|
+
setIsResources(false);
|
|
262
275
|
setIsCompany(false);
|
|
263
276
|
setIsProduct(false);
|
|
264
277
|
setCurrentTab("");
|
|
@@ -269,6 +282,7 @@ export default function V3Header(props) {
|
|
|
269
282
|
}
|
|
270
283
|
function handleBackClick() {
|
|
271
284
|
setIsDeveloper(false);
|
|
285
|
+
setIsResources(false);
|
|
272
286
|
setIsCompany(false);
|
|
273
287
|
setIsProduct(false);
|
|
274
288
|
setCurrentTab("");
|
|
@@ -285,6 +299,9 @@ export default function V3Header(props) {
|
|
|
285
299
|
if (title === "Developer") {
|
|
286
300
|
setIsDeveloper(true);
|
|
287
301
|
}
|
|
302
|
+
if (title === "Resources") {
|
|
303
|
+
setIsResources(true);
|
|
304
|
+
}
|
|
288
305
|
if (title === "Customers") {
|
|
289
306
|
window.location.href = "/customers";
|
|
290
307
|
}
|
|
@@ -304,10 +321,12 @@ export default function V3Header(props) {
|
|
|
304
321
|
setCurrentTab("Product");
|
|
305
322
|
} else if (isDeveloper) {
|
|
306
323
|
setCurrentTab("Developer");
|
|
324
|
+
} else if (isResources) {
|
|
325
|
+
setCurrentTab("Resources");
|
|
307
326
|
} else if (isCompany) {
|
|
308
327
|
setCurrentTab("Company");
|
|
309
328
|
}
|
|
310
|
-
}, [isProduct, isDeveloper, isCompany]);
|
|
329
|
+
}, [isProduct, isDeveloper, isCompany, isResources]);
|
|
311
330
|
|
|
312
331
|
// **************************** //
|
|
313
332
|
|
|
@@ -336,7 +355,7 @@ export default function V3Header(props) {
|
|
|
336
355
|
<div className={"h-full " + (mobileNavOpen ? " hds-hidden" : "")}>
|
|
337
356
|
{!props.hideSearch && <AlgoliaSearch {...props} />}
|
|
338
357
|
</div>
|
|
339
|
-
{!(isCompany || isDeveloper || isProduct) && (
|
|
358
|
+
{!(isCompany || isDeveloper || isProduct || isResources) && (
|
|
340
359
|
<motion.div
|
|
341
360
|
initial={{ opacity: 0 }}
|
|
342
361
|
animate={{ opacity: 1 }}
|
|
@@ -435,7 +454,7 @@ export default function V3Header(props) {
|
|
|
435
454
|
>
|
|
436
455
|
<div className="bg-neutral-100 h-[calc(100%-80px)] rounded-2xl overflow-y-scroll scrollbar-hide">
|
|
437
456
|
<div className="pt-6 pb-4 tb:mr-[12px] mr-[30px] min-h-[36px] flex flex-row justify-between items-center sticky top-0 bg-neutral-100 z-50 ">
|
|
438
|
-
{(isCompany || isDeveloper || isProduct) && (
|
|
457
|
+
{(isCompany || isDeveloper || isProduct || isResources) && (
|
|
439
458
|
<div
|
|
440
459
|
className=" flex flex-row justify-start z-10"
|
|
441
460
|
onClick={() => handleBackClick()}
|
|
@@ -460,7 +479,7 @@ export default function V3Header(props) {
|
|
|
460
479
|
{currentTab}
|
|
461
480
|
</Typography>
|
|
462
481
|
</motion.div>
|
|
463
|
-
{(isCompany || isDeveloper || isProduct) && (
|
|
482
|
+
{(isCompany || isDeveloper || isProduct || isResources) && (
|
|
464
483
|
<motion.div
|
|
465
484
|
initial={{ opacity: 0 }}
|
|
466
485
|
animate={{ opacity: 1 }}
|
|
@@ -477,7 +496,7 @@ export default function V3Header(props) {
|
|
|
477
496
|
)}
|
|
478
497
|
</div>
|
|
479
498
|
<AnimatePresence mode="wait" exit={false}>
|
|
480
|
-
{isProduct || isDeveloper || isCompany ? (
|
|
499
|
+
{isProduct || isDeveloper || isCompany || isResources ? (
|
|
481
500
|
<motion.div
|
|
482
501
|
key="hey"
|
|
483
502
|
exit={{ opacity: 0, y: [0, 300] }}
|
|
@@ -487,7 +506,7 @@ export default function V3Header(props) {
|
|
|
487
506
|
exit: { duration: 0.3 },
|
|
488
507
|
opacity: { ease: "easeIn" },
|
|
489
508
|
}}
|
|
490
|
-
when={isProduct || isDeveloper || isCompany}
|
|
509
|
+
when={isProduct || isDeveloper || isCompany || isResources}
|
|
491
510
|
className="flex flex-col justify-between "
|
|
492
511
|
>
|
|
493
512
|
<div className="flex flex-col justify-between rounded-2xl h-full">
|
|
@@ -730,63 +749,9 @@ V3Header.defaultProps = {
|
|
|
730
749
|
name: "Tutorials",
|
|
731
750
|
strokeClass: "stroke-neutral-500",
|
|
732
751
|
},
|
|
733
|
-
// {
|
|
734
|
-
// description: "",
|
|
735
|
-
// href: "/graphql/",
|
|
736
|
-
// icon: "asterisk02",
|
|
737
|
-
// name: "GraphQL Hub",
|
|
738
|
-
// strokeClass: "stroke-neutral-500",
|
|
739
|
-
// },
|
|
740
|
-
// {
|
|
741
|
-
// description: "",
|
|
742
|
-
// href: "https://cloud.hasura.io/public/graphiql",
|
|
743
|
-
// icon: "codebrowser",
|
|
744
|
-
// name: "GraphiQL",
|
|
745
|
-
// strokeClass: "stroke-neutral-500",
|
|
746
|
-
// },
|
|
747
|
-
// {
|
|
748
|
-
// description: "",
|
|
749
|
-
// href: "/changelog",
|
|
750
|
-
// icon: "gitpullrequest",
|
|
751
|
-
// name: "Changelog",
|
|
752
|
-
// strokeClass: "stroke-neutral-500",
|
|
753
|
-
// },
|
|
754
752
|
],
|
|
755
753
|
label: "BUILD",
|
|
756
754
|
},
|
|
757
|
-
// {
|
|
758
|
-
// childArray: [
|
|
759
|
-
// {
|
|
760
|
-
// description: "",
|
|
761
|
-
// href: "/blog",
|
|
762
|
-
// icon: "bookopen01",
|
|
763
|
-
// name: "Blog",
|
|
764
|
-
// strokeClass: "stroke-neutral-500",
|
|
765
|
-
// },
|
|
766
|
-
// {
|
|
767
|
-
// description: "",
|
|
768
|
-
// href: "/learn/",
|
|
769
|
-
// icon: "graduationhat02",
|
|
770
|
-
// name: "Tutorials",
|
|
771
|
-
// strokeClass: "stroke-neutral-500",
|
|
772
|
-
// },
|
|
773
|
-
// {
|
|
774
|
-
// description: "",
|
|
775
|
-
// href: "/events",
|
|
776
|
-
// icon: "calendarplus02",
|
|
777
|
-
// name: "Events",
|
|
778
|
-
// strokeClass: "stroke-neutral-500",
|
|
779
|
-
// },
|
|
780
|
-
// {
|
|
781
|
-
// description: "",
|
|
782
|
-
// href: "/sample-apps/",
|
|
783
|
-
// icon: "box",
|
|
784
|
-
// name: "Resources",
|
|
785
|
-
// strokeClass: "stroke-neutral-500",
|
|
786
|
-
// },
|
|
787
|
-
// ],
|
|
788
|
-
// label: "Learn",
|
|
789
|
-
// },
|
|
790
755
|
{
|
|
791
756
|
childArray: [
|
|
792
757
|
{
|
|
@@ -826,34 +791,59 @@ V3Header.defaultProps = {
|
|
|
826
791
|
cardImg: `https://res.cloudinary.com/dh8fp23nd/image/upload/v1721210357/cc-blog-july_2_1_k8k22u.png`,
|
|
827
792
|
cardImgAlt: "Hasura Community Call",
|
|
828
793
|
},
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
title_colorClass: "text-neutral-900",
|
|
834
|
-
img_url:
|
|
835
|
-
"https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/hascon_211daeb83a.png",
|
|
836
|
-
},
|
|
837
|
-
{
|
|
838
|
-
title: "Top 6 Architecture Trends for API Development",
|
|
839
|
-
|
|
840
|
-
title_colorClass: "text-neutral-900",
|
|
841
|
-
img_url:
|
|
842
|
-
"https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687040455/api_trends_0a035678d8.png",
|
|
843
|
-
},
|
|
794
|
+
},
|
|
795
|
+
{
|
|
796
|
+
title: "Resources",
|
|
797
|
+
secondaryCardArr: [
|
|
844
798
|
{
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
799
|
+
childArray: [
|
|
800
|
+
{
|
|
801
|
+
description: "",
|
|
802
|
+
href: "/blog",
|
|
803
|
+
icon: "bookopen01",
|
|
804
|
+
name: "Blogs",
|
|
805
|
+
strokeClass: "stroke-neutral-500",
|
|
806
|
+
},
|
|
807
|
+
{
|
|
808
|
+
description: "",
|
|
809
|
+
href: "/events?category=Webinar#wall-section",
|
|
810
|
+
icon: "videorecorder",
|
|
811
|
+
name: "Webinars",
|
|
812
|
+
strokeClass: "stroke-neutral-500",
|
|
813
|
+
},
|
|
814
|
+
{
|
|
815
|
+
description: "",
|
|
816
|
+
href: "/graphql/",
|
|
817
|
+
icon: "home04",
|
|
818
|
+
name: "GraphQL Hub",
|
|
819
|
+
strokeClass: "stroke-neutral-500",
|
|
820
|
+
},
|
|
821
|
+
{
|
|
822
|
+
description: "",
|
|
823
|
+
href: "/events",
|
|
824
|
+
icon: "calendarplus02",
|
|
825
|
+
name: "Events",
|
|
826
|
+
strokeClass: "stroke-neutral-500",
|
|
827
|
+
},
|
|
828
|
+
{
|
|
829
|
+
description: "",
|
|
830
|
+
href: "/",
|
|
831
|
+
icon: "file05",
|
|
832
|
+
name: "Whitepapers",
|
|
833
|
+
strokeClass: "stroke-neutral-500",
|
|
834
|
+
},
|
|
835
|
+
{
|
|
836
|
+
description: "",
|
|
837
|
+
href: "https://supergraph.io/",
|
|
838
|
+
icon: "beziercurve02",
|
|
839
|
+
name: "Supergraph Manifesto",
|
|
840
|
+
strokeClass: "stroke-neutral-500",
|
|
841
|
+
},
|
|
842
|
+
],
|
|
843
|
+
label: "RESOURCES",
|
|
850
844
|
},
|
|
851
845
|
],
|
|
852
846
|
},
|
|
853
|
-
{
|
|
854
|
-
title: "Customers",
|
|
855
|
-
href: "",
|
|
856
|
-
},
|
|
857
847
|
],
|
|
858
848
|
headerUrl: "/",
|
|
859
849
|
};
|
package/src/styles/tailwind.css
CHANGED
|
@@ -11172,6 +11172,28 @@ select{
|
|
|
11172
11172
|
min-width: 500px;
|
|
11173
11173
|
}
|
|
11174
11174
|
|
|
11175
|
+
.tb\:min-w-\[190px\]{
|
|
11176
|
+
min-width: 190px;
|
|
11177
|
+
}
|
|
11178
|
+
|
|
11179
|
+
.tb\:min-w-\[170px\]{
|
|
11180
|
+
min-width: 170px;
|
|
11181
|
+
}
|
|
11182
|
+
|
|
11183
|
+
.tb\:min-w-\[180px\]{
|
|
11184
|
+
min-width: 180px;
|
|
11185
|
+
}
|
|
11186
|
+
|
|
11187
|
+
.tb\:min-w-\[200px\]{
|
|
11188
|
+
min-width: 200px;
|
|
11189
|
+
}
|
|
11190
|
+
|
|
11191
|
+
.tb\:min-w-fit{
|
|
11192
|
+
min-width: -webkit-fit-content;
|
|
11193
|
+
min-width: -moz-fit-content;
|
|
11194
|
+
min-width: fit-content;
|
|
11195
|
+
}
|
|
11196
|
+
|
|
11175
11197
|
.tb\:max-w-\[17rem\]{
|
|
11176
11198
|
max-width: 17rem;
|
|
11177
11199
|
}
|