hds-web 1.37.2 → 1.37.4
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/components/Footers/v3Footer.js +1 -1
- package/src/HDS/modules/Cards/aboutSection.js +193 -122
- package/src/styles/tailwind.css +16 -0
package/package.json
CHANGED
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { Badges } from
|
|
2
|
+
import { Badges } from "../../components/BadgesCaption";
|
|
3
3
|
import { Typography } from "../../foundation/Typography";
|
|
4
|
-
import { HDSButton } from
|
|
4
|
+
import { HDSButton } from "../../components/Buttons";
|
|
5
5
|
import { Icon } from "../../components/common-components";
|
|
6
|
+
|
|
6
7
|
export default function AboutSection(props) {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
return (
|
|
9
|
+
<>
|
|
10
|
+
<div className="divide-y divide-neutral-200">
|
|
11
|
+
<div className=" pb-8">
|
|
12
|
+
<div>
|
|
13
|
+
{/* <div className=" w-14 h-14 relative rounded-full border border-neutral-300 ">
|
|
13
14
|
<img alt={props.title ?? 'connectorImage'} src={props.imgUrl} className="rounded-full w-full " />
|
|
14
15
|
{props.is_verified && <div className="absolute top-8 left-10">
|
|
15
16
|
<Icon
|
|
@@ -20,117 +21,187 @@ export default function AboutSection(props) {
|
|
|
20
21
|
</div>
|
|
21
22
|
}
|
|
22
23
|
</div> */}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
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
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
24
|
+
{props.imgUrl && (
|
|
25
|
+
<div className="flex">
|
|
26
|
+
<img
|
|
27
|
+
alt={props.title ?? "connectorImage"}
|
|
28
|
+
src={props.imgUrl}
|
|
29
|
+
// className=" max-h-[42px] pl-1"
|
|
30
|
+
className={props?.logoClass || "max-h-[48px] pl-1"}
|
|
31
|
+
/>
|
|
32
|
+
</div>
|
|
33
|
+
)}
|
|
34
|
+
{props.tags && (
|
|
35
|
+
<div className="gap-2 pt-8 flex flex-wrap">
|
|
36
|
+
{props.tags.map((tag, index) => (
|
|
37
|
+
<Badges key={index} color={tag.color} children={tag.label} />
|
|
38
|
+
))}
|
|
39
|
+
</div>
|
|
40
|
+
)}
|
|
41
|
+
</div>
|
|
42
|
+
<div>
|
|
43
|
+
{props.title && (
|
|
44
|
+
<div className="pt-4 text-hds-t-h3 text-neutral-1000">
|
|
45
|
+
{props.title}
|
|
46
|
+
</div>
|
|
47
|
+
)}
|
|
48
|
+
{props.description && (
|
|
49
|
+
<Typography textStyle="sub2" className="pt-2 text-neutral-500">
|
|
50
|
+
{props.description}
|
|
51
|
+
</Typography>
|
|
52
|
+
)}
|
|
53
|
+
</div>
|
|
54
|
+
{props.btnLink && (
|
|
55
|
+
<a href={props.btnLink} className="mt-4 flex">
|
|
56
|
+
<HDSButton
|
|
57
|
+
type="secondary"
|
|
58
|
+
label={props.btnLabel ?? "Deployment guide"}
|
|
59
|
+
state="default"
|
|
60
|
+
size="sm"
|
|
61
|
+
rightAnimatedArrow="true"
|
|
62
|
+
rightAnimatedArrowColor="#3970FD"
|
|
63
|
+
/>
|
|
64
|
+
</a>
|
|
65
|
+
)}
|
|
66
|
+
</div>
|
|
67
|
+
<div className="py-8 ">
|
|
68
|
+
<Typography textStyle="h6" className="text-neutral-500 uppercase">
|
|
69
|
+
{props.aboutTitle ?? "About"}
|
|
70
|
+
</Typography>
|
|
71
|
+
<div className="pt-4 flex flex-col gap-2">
|
|
72
|
+
{props.versionValue && (
|
|
73
|
+
<div className="flex gap-2">
|
|
74
|
+
<Typography
|
|
75
|
+
textStyle="body1-medium"
|
|
76
|
+
className="text-neutral-500"
|
|
77
|
+
>
|
|
78
|
+
{props.version ?? "Version"}
|
|
79
|
+
</Typography>
|
|
80
|
+
<Badges
|
|
81
|
+
color="blue"
|
|
82
|
+
children={props.versionValue}
|
|
83
|
+
// text_color='text-neutral-0'
|
|
84
|
+
/>
|
|
85
|
+
</div>
|
|
86
|
+
)}
|
|
87
|
+
{props.typeValue && (
|
|
88
|
+
<div className="flex gap-2 items-center">
|
|
89
|
+
<Typography
|
|
90
|
+
textStyle="body1-medium"
|
|
91
|
+
className="text-neutral-500"
|
|
92
|
+
>
|
|
93
|
+
{props.typeText ?? "Type"}
|
|
94
|
+
</Typography>
|
|
95
|
+
<Icon
|
|
96
|
+
height={"h-5 w-5 stroke-[1.5px]"}
|
|
97
|
+
variant={props.typeIconVariant}
|
|
98
|
+
strokeClass="stroke-neutral-800"
|
|
99
|
+
/>
|
|
100
|
+
<Typography
|
|
101
|
+
textStyle="body1c-medium"
|
|
102
|
+
className="text-neutral-800"
|
|
103
|
+
>
|
|
104
|
+
{props.typeValue}
|
|
105
|
+
</Typography>
|
|
106
|
+
</div>
|
|
107
|
+
)}
|
|
108
|
+
{props.releasedValue && (
|
|
109
|
+
<div className="flex gap-2">
|
|
110
|
+
<Typography
|
|
111
|
+
textStyle="body1-medium"
|
|
112
|
+
className="text-neutral-500"
|
|
113
|
+
>
|
|
114
|
+
{props.releasedText ?? "Released"}
|
|
115
|
+
</Typography>
|
|
116
|
+
<Typography
|
|
117
|
+
textStyle="body1-medium"
|
|
118
|
+
className="text-neutral-800"
|
|
119
|
+
>
|
|
120
|
+
{props.releasedValue}
|
|
121
|
+
</Typography>
|
|
122
|
+
</div>
|
|
123
|
+
)}
|
|
124
|
+
{props.lastUpdateValue && (
|
|
125
|
+
<div className="flex gap-2">
|
|
126
|
+
<Typography
|
|
127
|
+
textStyle="body1-medium"
|
|
128
|
+
className="text-neutral-500"
|
|
129
|
+
>
|
|
130
|
+
{props.lastUpdatedText ?? "Last Updated"}
|
|
131
|
+
</Typography>
|
|
132
|
+
<Typography
|
|
133
|
+
textStyle="body1-medium"
|
|
134
|
+
className="text-neutral-800"
|
|
135
|
+
>
|
|
136
|
+
{props.lastUpdateValue}
|
|
137
|
+
</Typography>
|
|
138
|
+
</div>
|
|
139
|
+
)}
|
|
140
|
+
{props.deployed && (
|
|
141
|
+
<div className="flex gap-2">
|
|
142
|
+
<Typography
|
|
143
|
+
textStyle="body1-medium"
|
|
144
|
+
className="text-neutral-500"
|
|
145
|
+
>
|
|
146
|
+
{props.deployed ?? "Deployed"}
|
|
147
|
+
</Typography>
|
|
148
|
+
<Typography
|
|
149
|
+
textStyle="body1-medium"
|
|
150
|
+
className="text-neutral-800"
|
|
151
|
+
>
|
|
152
|
+
{props.deployedValue}
|
|
153
|
+
</Typography>
|
|
154
|
+
</div>
|
|
155
|
+
)}
|
|
156
|
+
{props.githubRepoLink && (
|
|
157
|
+
<a
|
|
158
|
+
href={props.githubRepoLink}
|
|
159
|
+
className="flex gap-2 items-center"
|
|
160
|
+
target="_blank"
|
|
161
|
+
rel="noopener noreferrer"
|
|
162
|
+
>
|
|
163
|
+
<Icon height={"h-6 w-6 stroke-[1.5px]"} variant="octoface" />
|
|
164
|
+
<Typography textStyle="body1-medium" className="text-blue-600">
|
|
165
|
+
{props.githubText ?? "GitHub Repo"}
|
|
166
|
+
</Typography>
|
|
167
|
+
<Icon
|
|
168
|
+
height={"h-5 w-5 stroke-[1.5px]"}
|
|
169
|
+
variant="linkexternal01"
|
|
170
|
+
strokeClass="stroke-blue-600"
|
|
171
|
+
/>
|
|
172
|
+
</a>
|
|
173
|
+
)}
|
|
174
|
+
</div>
|
|
175
|
+
</div>
|
|
176
|
+
<div className="py-8">
|
|
177
|
+
<Typography textStyle="h6" className="text-neutral-500 uppercase">
|
|
178
|
+
{props.creator ?? "Creator"}
|
|
179
|
+
</Typography>
|
|
180
|
+
{props.hasuraIncUrl && (
|
|
181
|
+
<a
|
|
182
|
+
href={props.hasuraIncUrl}
|
|
183
|
+
className="flex gap-2 items-center pt-4"
|
|
184
|
+
>
|
|
185
|
+
<Typography textStyle="body1-medium" className="text-blue-600">
|
|
186
|
+
{props.hasuraInc ?? "Hasura, Inc"}
|
|
187
|
+
</Typography>
|
|
188
|
+
<Icon
|
|
189
|
+
height={"h-5 w-5 stroke-[1.5px]"}
|
|
190
|
+
variant="linkexternal01"
|
|
191
|
+
strokeClass="stroke-blue-600"
|
|
192
|
+
/>
|
|
193
|
+
</a>
|
|
194
|
+
)}
|
|
195
|
+
{props.Email && (
|
|
196
|
+
<Typography
|
|
197
|
+
textStyle="body1-medium"
|
|
198
|
+
className="text-neutral-500 pt-2"
|
|
199
|
+
>
|
|
200
|
+
{props.Email ?? "support@hasura.io"}
|
|
201
|
+
</Typography>
|
|
202
|
+
)}
|
|
203
|
+
</div>
|
|
204
|
+
</div>
|
|
205
|
+
</>
|
|
206
|
+
);
|
|
207
|
+
}
|
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
|
}
|