hds-web 1.41.1 → 1.41.3
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 +2 -2
- package/dist/index.js +2 -2
- package/package.json +1 -1
- package/src/HDS/components/Cards/Dropdown/v3Dropdown.js +1 -1
- package/src/HDS/components/Cards/Menu/flyoutB.js +64 -25
- package/src/HDS/components/Headers/v3Header.js +30 -0
- package/src/HDS/helpers/AlgoliaSearch/searchbox.js +1 -1
- package/src/styles/tailwind.css +24 -0
package/package.json
CHANGED
|
@@ -10,7 +10,7 @@ export default function DropdownA(props) {
|
|
|
10
10
|
<div className="tb-l:flex mb-2 tb-l:mb-0 flex w-full tb-l:bg-neutral-150 flex-col tb-l:flex-row max-w-7xl tb-l:gap-2 rounded-2xl ">
|
|
11
11
|
{props.primaryCard && (
|
|
12
12
|
<div className="">
|
|
13
|
-
<div className=" bg-neutral-0 rounded-2xl h-full w-full min-w-[
|
|
13
|
+
<div className=" bg-neutral-0 rounded-2xl h-full w-full min-w-[420px]">
|
|
14
14
|
<FlyoutB {...props.primaryCard} />
|
|
15
15
|
</div>
|
|
16
16
|
</div>
|
|
@@ -26,41 +26,80 @@ export default function FlyoutB(props) {
|
|
|
26
26
|
href={primaryBtnCTA}
|
|
27
27
|
className="group/card cursor-pointer w-full h-full relative transition-all duration-300 ease-out "
|
|
28
28
|
>
|
|
29
|
-
<div className="group-hover/card:bg-neutral-100
|
|
29
|
+
<div className="group-hover/card:bg-neutral-100 ml-2 z-[1] mt-2 w-[calc(100%-16px)] h-[calc(100%-16px)] rounded-xl absolute "></div>
|
|
30
30
|
<div className="px-6 pt-6 pb-4 w-full h-full ">
|
|
31
31
|
<Typography
|
|
32
32
|
textStyle="h6"
|
|
33
33
|
className="uppercase relative z-[2] group-hover/card:text-neutral-1000 text-neutral-500 mb-4"
|
|
34
34
|
>
|
|
35
|
-
PLATFORM
|
|
35
|
+
PLATFORM
|
|
36
36
|
</Typography>
|
|
37
37
|
<div className="flex items-start lg:pt-2">
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
38
|
+
{
|
|
39
|
+
props.cardDetailsArray ? (
|
|
40
|
+
<div className="flex items-start gap-6">
|
|
41
|
+
{
|
|
42
|
+
props.cardDetailsArray.map((card, index) => (
|
|
43
|
+
<div key={index} className="w-full min-w-[calc(50%-20px)] items-center relative group/card cursor-pointer z-[2]">
|
|
44
|
+
<div className="flex items-center">
|
|
45
|
+
<div className="w-5">
|
|
46
|
+
{card.iconVariant}
|
|
47
|
+
</div>
|
|
48
|
+
<Typography
|
|
49
|
+
textStyle="body3c-medium"
|
|
50
|
+
className="text-neutral-1000 ml-[6px] group-hover/card:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip"
|
|
51
|
+
>
|
|
52
|
+
{card.title}
|
|
53
|
+
</Typography>
|
|
54
|
+
<Icon
|
|
55
|
+
height="h-5 w-5 stroke-[1.5] group-hover/card:stroke-blue-500"
|
|
56
|
+
variant='chevronright'
|
|
57
|
+
strokeColor="stroke-neutral-1000"
|
|
58
|
+
strokeClass="stroke-neutral-1000"
|
|
59
|
+
/>
|
|
60
|
+
</div>
|
|
61
|
+
<Typography
|
|
62
|
+
className="mt-1 text-neutral-600 relative z-[2]"
|
|
63
|
+
textStyle="body3"
|
|
64
|
+
>
|
|
65
|
+
{card.description}
|
|
66
|
+
</Typography>
|
|
67
|
+
</div>
|
|
68
|
+
))
|
|
69
|
+
}
|
|
70
|
+
</div>
|
|
71
|
+
) : (
|
|
72
|
+
<>
|
|
73
|
+
<div className=" flex items-center relative justify-center p-2.5 h-14 w-14 z-[2] group-hover/card:bg-blue-200 bg-blue-200 rounded-2xl min-w-[56px] mr-6">
|
|
74
|
+
<Icon
|
|
75
|
+
height="h-6 w-6 stroke-2 group-hover/card:stroke-blue-500"
|
|
76
|
+
variant={iconVariant}
|
|
77
|
+
strokeColor={strokeColor}
|
|
78
|
+
strokeClass={strokeClass}
|
|
79
|
+
/>
|
|
80
|
+
</div>
|
|
81
|
+
<div className="relative group/card cursor-pointer items-center z-[2]">
|
|
82
|
+
<Typography
|
|
83
|
+
textStyle="body3c-medium"
|
|
84
|
+
className="text-neutral-1000 group-hover/card:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip"
|
|
85
|
+
>
|
|
86
|
+
{props.primaryBtnLabel}
|
|
87
|
+
</Typography>
|
|
88
|
+
<Typography
|
|
89
|
+
className="mt-1 text-neutral-600 relative z-[2]"
|
|
90
|
+
textStyle="body3"
|
|
91
|
+
>
|
|
92
|
+
{mainDescription}
|
|
93
|
+
</Typography>
|
|
94
|
+
</div>
|
|
95
|
+
</>
|
|
96
|
+
)
|
|
97
|
+
}
|
|
98
|
+
|
|
60
99
|
</div>
|
|
61
100
|
</div>
|
|
62
101
|
</a>
|
|
63
|
-
<div className="border-t border-neutral-200 pt-
|
|
102
|
+
<div className="border-t border-neutral-200 pt-3 mx-6" />
|
|
64
103
|
<div className="flex pb-3 gap-2">
|
|
65
104
|
{secondaryBtn.map((btn, index) => (
|
|
66
105
|
<a
|
|
@@ -20,6 +20,19 @@ const updatePGParam = (originalLink, websiteKey) => {
|
|
|
20
20
|
} else return originalLink;
|
|
21
21
|
};
|
|
22
22
|
|
|
23
|
+
const HasuraLogo = () => (
|
|
24
|
+
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
25
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.0402 2.08323C17.9627 3.18615 18.2492 6.17362 17.773 7.67111C17.6149 8.16902 17.5703 8.69511 17.6614 9.20617C17.7544 9.71348 17.8474 10.326 17.8474 10.7525C17.8474 15.1304 14.3338 18.6815 9.99814 18.6815C5.6643 18.6815 2.14887 15.1323 2.14887 10.7525C2.14887 10.326 2.24187 9.71348 2.33487 9.20617C2.42787 8.69511 2.38509 8.16902 2.22699 7.67111C1.75083 6.1755 2.03727 3.18803 2.95984 2.08323C3.08074 1.94043 3.3058 1.95922 3.40624 2.11893L4.54271 3.9208C4.82543 4.27968 5.33136 4.36423 5.7108 4.11245C6.94399 3.29701 8.41713 2.82352 10 2.82352C11.5829 2.82352 13.056 3.29701 14.2892 4.11245C14.6705 4.36423 15.1764 4.28156 15.4573 3.9208L16.5938 2.11893C16.6942 1.95922 16.9193 1.93856 17.0402 2.08323ZM11.0787 10.4144L12.6318 13.1351C12.6634 13.1896 12.6634 13.2572 12.6318 13.3098C12.602 13.3643 12.5444 13.3981 12.4811 13.3981H11.2182C11.1568 13.3981 11.0991 13.3643 11.0675 13.3098L10.2379 11.8574L9.31351 13.3154C9.28189 13.3662 9.22609 13.3962 9.16657 13.3962H7.88502C7.81992 13.3962 7.7604 13.3605 7.73064 13.3042C7.70088 13.2478 7.70274 13.1783 7.73808 13.1238L9.44743 10.4896L8.17332 8.32694C8.1417 8.27245 8.13984 8.20481 8.17146 8.15032C8.20308 8.09395 8.26074 8.06013 8.32398 8.06013H9.59624C9.65762 8.06013 9.71528 8.09207 9.7469 8.14656L11.0787 10.4144Z" fill="#000615"/>
|
|
26
|
+
</svg>
|
|
27
|
+
)
|
|
28
|
+
|
|
29
|
+
const PromptQLLogo = () => (
|
|
30
|
+
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
31
|
+
<path d="M7.21406 3.77103H4.87892C2.64361 3.77103 0 4.97315 0 8.46755C0 10.7694 1.68562 13.1283 5.25767 13.1283H6.81628L9.72026 16.3549H11.9789V8.61099C11.9789 5.22198 9.61022 3.77103 7.21961 3.77103H7.21406ZM9.72026 8.61099V13.2203L7.87072 10.9691H5.20277C3.84939 10.9691 2.26859 10.3146 2.26859 8.46755C2.26859 6.23779 4.15445 5.99928 4.96981 5.99928H7.07199C8.36437 5.99928 9.72026 6.70294 9.72026 8.61099Z" fill="#000615"/>
|
|
32
|
+
<path d="M16.7398 14.0011C16.3127 14.0011 15.9688 13.6517 15.9688 13.2135V3.97275H13.6392V13.4021C13.6392 15.0217 14.9371 16.3418 16.5345 16.3418H19.9994V14.0011H16.7398Z" fill="#000615"/>
|
|
33
|
+
</svg>
|
|
34
|
+
)
|
|
35
|
+
|
|
23
36
|
export default function V3Header(props) {
|
|
24
37
|
// const listSize = props.HEADER_LIST.length;
|
|
25
38
|
|
|
@@ -735,9 +748,26 @@ V3Header.defaultProps = {
|
|
|
735
748
|
primaryCard: {
|
|
736
749
|
iconVariant: "layersthree01",
|
|
737
750
|
mainDescription: `Enable your backend team to deliver an incredible unified API on all your data effortlessly.`,
|
|
751
|
+
cardDetailsArray: [
|
|
752
|
+
{
|
|
753
|
+
iconVariant: <HasuraLogo />,
|
|
754
|
+
description: `Enable your backend team to deliver an incredible unified API on all your data effortlessly.`,
|
|
755
|
+
title: "What is Hasura?",
|
|
756
|
+
btnCTA: "/products",
|
|
757
|
+
strokeClass: "stroke-blue-500",
|
|
758
|
+
},
|
|
759
|
+
{
|
|
760
|
+
iconVariant: <PromptQLLogo />,
|
|
761
|
+
description: `A data access agent with out-of-the-box connectors and agentic query planning.`,
|
|
762
|
+
title: "PromptQL by Hasura",
|
|
763
|
+
btnCTA: "/products",
|
|
764
|
+
strokeClass: "stroke-blue-500",
|
|
765
|
+
},
|
|
766
|
+
],
|
|
738
767
|
primaryBtnLabel: "What is Hasura?",
|
|
739
768
|
primaryBtnCTA: "/products",
|
|
740
769
|
strokeClass: "stroke-blue-500",
|
|
770
|
+
|
|
741
771
|
secondaryBtn: [
|
|
742
772
|
{
|
|
743
773
|
cta_leftVariantIcon: "checksquarebroken",
|
|
@@ -3,7 +3,7 @@ import { connectSearchBox } from "react-instantsearch-dom";
|
|
|
3
3
|
import { Icon } from "../../components/common-components/Icon";
|
|
4
4
|
import { Typography } from "../../foundation/Typography";
|
|
5
5
|
const searchSuggestions = [
|
|
6
|
-
|
|
6
|
+
`AI `,
|
|
7
7
|
"GraphQL",
|
|
8
8
|
"Actions",
|
|
9
9
|
"Authentication",
|
package/src/styles/tailwind.css
CHANGED
|
@@ -1527,6 +1527,10 @@ select{
|
|
|
1527
1527
|
margin-top: 70px;
|
|
1528
1528
|
}
|
|
1529
1529
|
|
|
1530
|
+
.ml-\[6px\]{
|
|
1531
|
+
margin-left: 6px;
|
|
1532
|
+
}
|
|
1533
|
+
|
|
1530
1534
|
.line-clamp-3{
|
|
1531
1535
|
overflow: hidden;
|
|
1532
1536
|
display: -webkit-box;
|
|
@@ -2122,6 +2126,22 @@ select{
|
|
|
2122
2126
|
min-width: 100%;
|
|
2123
2127
|
}
|
|
2124
2128
|
|
|
2129
|
+
.min-w-\[450px\]{
|
|
2130
|
+
min-width: 450px;
|
|
2131
|
+
}
|
|
2132
|
+
|
|
2133
|
+
.min-w-\[50\%\]{
|
|
2134
|
+
min-width: 50%;
|
|
2135
|
+
}
|
|
2136
|
+
|
|
2137
|
+
.min-w-\[calc\(50\%-20px\)\]{
|
|
2138
|
+
min-width: calc(50% - 20px);
|
|
2139
|
+
}
|
|
2140
|
+
|
|
2141
|
+
.min-w-\[420px\]{
|
|
2142
|
+
min-width: 420px;
|
|
2143
|
+
}
|
|
2144
|
+
|
|
2125
2145
|
.max-w-2xl{
|
|
2126
2146
|
max-width: 42rem;
|
|
2127
2147
|
}
|
|
@@ -6824,6 +6844,10 @@ select{
|
|
|
6824
6844
|
padding-top: 81px;
|
|
6825
6845
|
}
|
|
6826
6846
|
|
|
6847
|
+
.pt-1{
|
|
6848
|
+
padding-top: 0.25rem;
|
|
6849
|
+
}
|
|
6850
|
+
|
|
6827
6851
|
.text-left{
|
|
6828
6852
|
text-align: left;
|
|
6829
6853
|
}
|