hds-web 1.16.3 → 1.16.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.
Files changed (12) hide show
  1. package/dist/index.css +2 -2
  2. package/dist/index.es.css +2 -2
  3. package/dist/index.es.js +3 -3
  4. package/dist/index.js +3 -3
  5. package/package.json +1 -1
  6. package/src/HDS/components/Cards/Menu/flyoutA.js +6 -15
  7. package/src/HDS/components/Headers/v3Header.js +66 -61
  8. package/src/HDS/helpers/AlgoliaSearch/search.js +2 -1
  9. package/src/HDS/helpers/AlgoliaSearch/searchoverlay.js +2 -2
  10. package/src/HDS/helpers/AlgoliaSearch/searchwrapper.js +30 -23
  11. package/src/styles/tailwind.css +45 -16
  12. package/tailwind.config.js +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hds-web",
3
- "version": "1.16.3",
3
+ "version": "1.16.4",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/HDS/components/Cards/Menu/flyoutA.js CHANGED
@@ -5,24 +5,15 @@ import { Icon } from '../../common-components/Icon';
5
5
  import { Typography } from '../../../foundation/Typography';
6
6
  export default function FlyoutA(props) {
7
7
  const {
8
- label,
9
- childArray,
10
- buttonArray,
11
8
  split
12
9
  } = props
13
-
14
- const LAYOUT_CLASSES = {
15
- split: 'tb:grid tb:grid-cols-2 pr-6 tb:inline-grid w-full gap-x-8 tb:min-w-[150px]',
16
- default: 'tb:tb:grid tb:tb:grid-cols-1 tb:gap-x-4 tb:min-w-[182px]'
17
- }
18
-
19
10
  const cardLayout = (label, childArray) => (
20
- <div className=" group h-full ">
11
+ <div className=" group h-full ">
21
12
  <div className={`w-full h-full ` + (split ? ' ' : ' rounded-2xl')}>
22
- <div className={`w-full tb-l:min-w-[169px] p-6 `}>
13
+ <div className={`w-full db:min-w-[169px] tb-l:max-w-[210px] tb-xl:max-w-[250px] p-6 `}>
23
14
  {label ? (<Typography
24
15
  textStyle='h6'
25
- className=' uppercase group-hover:text-neutral-1000 group-hover-transition text-neutral-500 mb-4'>
16
+ className=' uppercase group-hover/split:text-neutral-1000 group-hover:text-neutral-1000 group-hover-transition text-neutral-500 mb-4'>
26
17
  {label}
27
18
  </Typography>) : (
28
19
  <div className="mb-9">
@@ -112,16 +103,16 @@ export default function FlyoutA(props) {
112
103
  <>
113
104
 
114
105
  <div className="hds-hidden tb-l:flex h-full">
115
- <div className="border-r border-neutral-150 shadow rounded-l-2xl">
106
+ <div className="border-r border-neutral-150 shadow rounded-l-2xl">
116
107
 
117
108
  {cardLayout(props.label, props.childArray.slice(0, Math.ceil(props.childArray.length / 2)))}
118
109
  </div>
119
- <div className="shadow rounded-r-2xl">
110
+ <div className="shadow group/split rounded-r-2xl">
120
111
 
121
112
  {cardLayout(null, props.childArray.slice(Math.ceil(props.childArray.length / 2)))}
122
113
  </div>
123
114
  </div>
124
- <div className="hds-hidden-tbl shadow h-full rounded-2xl">
115
+ <div className="hds-hidden-tbl shadow h-full rounded-2xl">
125
116
  {cardLayout(props.label, props.childArray)}
126
117
  </div>
127
118
  </>
package/src/HDS/components/Headers/v3Header.js CHANGED
@@ -112,14 +112,14 @@ export default function V3Header(props) {
112
112
  {
113
113
  description: '',
114
114
  href: '#',
115
- icon: 'cube01',
115
+ icon: 'database01',
116
116
  name: 'All DBs',
117
117
  strokeClass: 'stroke-blue-500'
118
118
  },
119
119
  {
120
120
  description: '',
121
121
  href: '#',
122
- icon: 'cube01',
122
+ icon: 'checksquare',
123
123
  name: 'Planned DBs',
124
124
  strokeClass: 'stroke-blue-500'
125
125
  },
@@ -147,43 +147,43 @@ export default function V3Header(props) {
147
147
  {
148
148
  description: '',
149
149
  href: '#',
150
- icon: "lightning01",
150
+ icon: "file02",
151
151
  name: 'Documentation',
152
152
  strokeClass: 'stroke-blue-500'
153
153
  },
154
154
  {
155
155
  description: '',
156
156
  href: '#',
157
- icon: 'data',
157
+ icon: 'hasura',
158
158
  name: 'Hasura hub',
159
159
  strokeClass: 'stroke-blue-500'
160
160
  },
161
161
  {
162
162
  description: '',
163
163
  href: '#',
164
- icon: 'eye',
164
+ icon: 'route',
165
165
  name: 'Guides',
166
166
  strokeClass: 'stroke-blue-500'
167
167
  },
168
168
  {
169
169
  description: '',
170
170
  href: '#',
171
- icon: 'shieldtick',
171
+ icon: 'asterisk02',
172
172
  name: 'GraphQL hub',
173
173
  strokeClass: 'stroke-blue-500'
174
174
  },
175
175
  {
176
176
  description: '',
177
177
  href: '#',
178
- icon: 'speedometer03',
179
- name: 'Changelog',
178
+ icon: "codebrowser",
179
+ name: 'GraphQL',
180
180
  strokeClass: 'stroke-blue-500'
181
181
  },
182
182
  {
183
183
  description: '',
184
184
  href: '#',
185
- icon: "barchartsquare01",
186
- name: 'GraphQL',
185
+ icon: 'gitpullrequest',
186
+ name: 'Changelog',
187
187
  strokeClass: 'stroke-blue-500'
188
188
  }
189
189
  ],
@@ -195,35 +195,35 @@ export default function V3Header(props) {
195
195
  {
196
196
  description: '',
197
197
  href: '#',
198
- icon: 'cube01',
198
+ icon: 'bookopen01',
199
199
  name: 'Blog',
200
200
  strokeClass: 'stroke-blue-500'
201
201
  },
202
202
  {
203
203
  description: '',
204
204
  href: '#',
205
- icon: 'cube01',
205
+ icon: 'videorecorder',
206
206
  name: 'Tech talks',
207
207
  strokeClass: 'stroke-blue-500'
208
208
  },
209
209
  {
210
210
  description: '',
211
211
  href: '#',
212
- icon: 'cube01',
212
+ icon: 'graduationhat02',
213
213
  name: 'Tutorials',
214
214
  strokeClass: 'stroke-blue-500'
215
215
  },
216
216
  {
217
217
  description: '',
218
218
  href: '#',
219
- icon: 'cube01',
219
+ icon: 'calendarplus02',
220
220
  name: 'Events',
221
221
  strokeClass: 'stroke-blue-500'
222
222
  },
223
223
  {
224
224
  description: '',
225
225
  href: '#',
226
- icon: 'cube01',
226
+ icon: 'box',
227
227
  name: 'Resources',
228
228
  strokeClass: 'stroke-blue-500'
229
229
  },
@@ -237,7 +237,7 @@ export default function V3Header(props) {
237
237
  {
238
238
  description: '',
239
239
  href: '#',
240
- icon: 'cube01',
240
+ icon: 'users01',
241
241
  name: 'Community',
242
242
  strokeClass: 'stroke-blue-500'
243
243
  },
@@ -265,7 +265,7 @@ export default function V3Header(props) {
265
265
  {
266
266
  description: '',
267
267
  href: '#',
268
- icon: 'cube01',
268
+ icon: 'hand',
269
269
  name: 'Support',
270
270
  strokeClass: 'stroke-blue-500'
271
271
  },
@@ -313,7 +313,7 @@ export default function V3Header(props) {
313
313
  {
314
314
  description: '',
315
315
  href: '#',
316
- icon: "lightning01",
316
+ icon: "pentool02",
317
317
  name: 'Our story',
318
318
  strokeClass: 'stroke-blue-500'
319
319
  },
@@ -327,21 +327,21 @@ export default function V3Header(props) {
327
327
  {
328
328
  description: '',
329
329
  href: '#',
330
- icon: 'eye',
330
+ icon: 'hearthand',
331
331
  name: 'Work at Hasura',
332
332
  strokeClass: 'stroke-blue-500'
333
333
  },
334
334
  {
335
335
  description: '',
336
336
  href: '#',
337
- icon: 'shieldtick',
337
+ icon: 'headingsquare',
338
338
  name: 'News room',
339
339
  strokeClass: 'stroke-blue-500'
340
340
  },
341
341
  {
342
342
  description: '',
343
343
  href: '#',
344
- icon: 'speedometer03',
344
+ icon: 'star06',
345
345
  name: 'Brand',
346
346
  strokeClass: 'stroke-blue-500'
347
347
  },
@@ -936,9 +936,11 @@ export default function V3Header(props) {
936
936
  <div className={'h-full ' + ((mobileNavOpen) ? " hds-hidden" : "")}>
937
937
  <AlgoliaSearch {...props} />
938
938
  </div>
939
- <div className=' h-5 mt-3 cursor-pointer' onClick={() => handleMbDropdownClose()}>
940
- <div aria-hidden="true" className={`${class1} block absolute h-[2px] w-[15px] bg-neutral-800 transform transition duration-500 ease-in-out`}></div>
941
- <div aria-hidden="true" className={`${class3} block absolute h-0.5 w-[15px] bg-neutral-800 transform transition duration-500 ease-in-out`}></div>
939
+ <div onClick={() => handleMbDropdownClose()}>
940
+ <div className=' h-5 mt-3 cursor-pointer' >
941
+ <div aria-hidden="true" className={`${class1} block absolute h-[2px] w-[15px] bg-neutral-800 transform transition duration-500 ease-in-out`}></div>
942
+ <div aria-hidden="true" className={`${class3} block absolute h-0.5 w-[15px] bg-neutral-800 transform transition duration-500 ease-in-out`}></div>
943
+ </div>
942
944
  </div>
943
945
  </div>
944
946
  </div>
@@ -973,35 +975,40 @@ export default function V3Header(props) {
973
975
 
974
976
  <AlgoliaSearch {...props} />
975
977
 
976
- <a href='' className='hds-hidden db:flex'>
978
+ <a href='https://hasura.io/contact-us?type=hasuraenterprise' className='hds-hidden db:flex'>
977
979
  <Typography textStyle='body3c-medium' className='text-neutral-800'>
978
- Contact Sales
980
+ Contact Us
979
981
  </Typography>
980
982
  </a>
981
- <HDSButton
982
- label="Log In"
983
- type='tonal'
984
- leftIconVariant='none'
985
- rightIconVariant='none'
986
- state='default'
987
- size='sm'
988
- rightAnimatedArrow='true'
989
- rightAnimatedArrowColor='#3970FD'
990
- animatedHoverStroke='group-hover:stroke-neutral-0'
991
- className='hds-hidden tb-l:flex'
992
- />
993
- <HDSButton
994
- label="Get Started"
995
- type='primary'
996
- leftIconVariant='none'
997
- rightIconVariant='none'
998
- state='default'
999
- size='sm'
1000
- rightAnimatedArrow='true'
1001
- rightAnimatedArrowColor='#ffffff'
1002
- animatedHoverStroke='group-hover:stroke-neutral-0'
1003
- className='hds-hidden tb:flex'
1004
- />
983
+ <a href='https://cloud.hasura.io/login?pg=home&plcmt=header&cta=log-in&tech=default' >
984
+ <HDSButton
985
+ label="Log In"
986
+ type='tonal'
987
+ leftIconVariant='none'
988
+ rightIconVariant='none'
989
+ state='default'
990
+ size='sm'
991
+ rightAnimatedArrow='true'
992
+ rightAnimatedArrowColor='#3970FD'
993
+ animatedHoverStroke='group-hover:stroke-neutral-0'
994
+ className='hds-hidden tb-l:flex'
995
+ />
996
+ </a>
997
+ <a href='https://cloud.hasura.io/signup?pg=home&plcmt=header&cta=try-hasura&tech=default'>
998
+
999
+ <HDSButton
1000
+ label="Get Started"
1001
+ type='primary'
1002
+ leftIconVariant='none'
1003
+ rightIconVariant='none'
1004
+ state='default'
1005
+ size='sm'
1006
+ rightAnimatedArrow='true'
1007
+ rightAnimatedArrowColor='#ffffff'
1008
+ animatedHoverStroke='group-hover:stroke-neutral-0'
1009
+ className='hds-hidden tb:flex'
1010
+ />
1011
+ </a>
1005
1012
  </div>
1006
1013
 
1007
1014
  </div>
@@ -1054,12 +1061,12 @@ export default function V3Header(props) {
1054
1061
  initial={{ opacity: 1 }}
1055
1062
  animate={{ opacity: 1 }}
1056
1063
  transition={{ duration: 0.1, opacity: { ease: "easeIn" } }}
1057
- className="mt-20 flex flex-col gap-6 ml-4"
1064
+ className="mt-7 flex flex-col gap-6 ml-4"
1058
1065
  >
1059
- <div className="flex flex-col mr-8 items-center">
1066
+ <div className="flex flex-col mr-[50px] mb-m:items-center items-end">
1060
1067
  <img
1061
- className="inline-block w-full"
1062
- src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1683015500/hasura-con-2023/engage_clgotb.png"
1068
+ className="inline-block max-w-[242px] w-full"
1069
+ src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1688572403/hasura-design-system/mutations_1_tdh5ir.png "
1063
1070
  alt=""
1064
1071
  />
1065
1072
  </div>
@@ -1089,7 +1096,7 @@ export default function V3Header(props) {
1089
1096
 
1090
1097
  <div className='flex flex-row justify-around'>
1091
1098
  <div className='w-full flex gap-2'>
1092
- <div className='w-1/2'>
1099
+ <a href='https://cloud.hasura.io/login?pg=home&plcmt=header&cta=log-in&tech=default' className='w-1/2'>
1093
1100
  <HDSButton
1094
1101
  label="Log In"
1095
1102
  type='tonal'
@@ -1100,13 +1107,11 @@ export default function V3Header(props) {
1100
1107
  rightAnimatedArrow='true'
1101
1108
  rightAnimatedArrowColor='#3970FD'
1102
1109
  animatedHoverStroke='group-hover:stroke-neutral-0'
1103
-
1104
-
1105
1110
  />
1106
- </div>
1107
- <div className='w-1/2'>
1111
+ </a>
1112
+ <a href='https://cloud.hasura.io/signup?pg=home&plcmt=header&cta=try-hasura&tech=default' className='w-1/2'>
1108
1113
  <HDSButton
1109
- label="Sign up"
1114
+ label="Get Started"
1110
1115
  type='primary'
1111
1116
  leftIconVariant='none'
1112
1117
  rightIconVariant='none'
@@ -1116,7 +1121,7 @@ export default function V3Header(props) {
1116
1121
  rightAnimatedArrowColor='#ffffff'
1117
1122
  animatedHoverStroke='group-hover:stroke-neutral-0'
1118
1123
  />
1119
- </div>
1124
+ </a>
1120
1125
  </div>
1121
1126
  </div>
1122
1127
 
package/src/HDS/helpers/AlgoliaSearch/search.js CHANGED
@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
3
3
  import SearchOverlay from "./searchoverlay";
4
4
  import { Icon } from "../../components/common-components";
5
5
  export default function Search(props) {
6
+
6
7
  const [showSearch, setShowSearch] = useState(false);
7
8
 
8
9
  const handleSearchWithKeyboard = e => {
@@ -34,7 +35,7 @@ export default function Search(props) {
34
35
  </div>
35
36
  </div>
36
37
  </div>
37
- <SearchOverlay showSearch={showSearch} onCloseSearch={onCloseSearch} />
38
+ <SearchOverlay showSearch={showSearch} onCloseSearch={onCloseSearch} {...props}/>
38
39
  </>
39
40
  );
40
41
  }
package/src/HDS/helpers/AlgoliaSearch/searchoverlay.js CHANGED
@@ -3,7 +3,7 @@ import { Icon } from '../../components/common-components/Icon'
3
3
  import SearchWrapper from "./searchwrapper";
4
4
  import { SEARCH_INDICES } from "./constants";
5
5
 
6
- export default function SearchOverlay({showSearch, onCloseSearch}) {
6
+ export default function SearchOverlay({showSearch, onCloseSearch, ...props}) {
7
7
 
8
8
  useEffect(() => {
9
9
  if (showSearch) {
@@ -26,7 +26,7 @@ export default function SearchOverlay({showSearch, onCloseSearch}) {
26
26
  <div className="px-4">
27
27
  <div className="max-w-7xl mx-auto">
28
28
  <div className="w-full">
29
- <SearchWrapper indices={SEARCH_INDICES} />
29
+ <SearchWrapper indices={SEARCH_INDICES} {...props} />
30
30
  </div>
31
31
  </div>
32
32
  </div>
package/src/HDS/helpers/AlgoliaSearch/searchwrapper.js CHANGED
@@ -8,28 +8,6 @@ import SearchFooter from "./searchfooter";
8
8
  import { Typography } from '../../foundation/Typography'
9
9
 
10
10
 
11
- const algoliaClient = algoliasearch(
12
- process.env.ALGOLIA_APP_ID,
13
- process.env.ALGOLIA_SEARCH_KEY
14
- );
15
-
16
- const searchClient = {
17
- ...algoliaClient,
18
- search(requests) {
19
- if (requests.every(({ params }) => !params.query)) {
20
- return Promise.resolve({
21
- results: requests.map(() => ({
22
- hits: [],
23
- nbHits: 0,
24
- nbPages: 0,
25
- processingTimeMS: 0,
26
- })),
27
- });
28
- }
29
-
30
- return algoliaClient.search(requests);
31
- },
32
- };
33
11
 
34
12
  const AllResults = ({ allSearchResults, children, indices, searchState, searching }) => {
35
13
  if (!searchState?.query) return null;
@@ -92,7 +70,36 @@ const IndexTypeFilter = ({ activeIndexTypes, setActiveIndexTypes }) => {
92
70
  );
93
71
  };
94
72
 
95
- export default function SearchWrapper({ indices }) {
73
+ export default function SearchWrapper({ indices, ...props }) {
74
+ let ALGOLIA_APP_ID, ALGOLIA_SEARCH_KEY ;
75
+ if (props.ALGOLIA_APP_ID && props.ALGOLIA_SEARCH_KEY){
76
+ ALGOLIA_APP_ID = props.ALGOLIA_APP_ID;
77
+ ALGOLIA_SEARCH_KEY = props.ALGOLIA_SEARCH_KEY;
78
+ }
79
+ const algoliaClient = algoliasearch(
80
+ ALGOLIA_APP_ID,
81
+ ALGOLIA_SEARCH_KEY
82
+ );
83
+
84
+ const searchClient = {
85
+ ...algoliaClient,
86
+ search(requests) {
87
+ if (requests.every(({ params }) => !params.query)) {
88
+ return Promise.resolve({
89
+ results: requests.map(() => ({
90
+ hits: [],
91
+ nbHits: 0,
92
+ nbPages: 0,
93
+ processingTimeMS: 0,
94
+ })),
95
+ });
96
+ }
97
+
98
+ return algoliaClient.search(requests);
99
+ },
100
+ };
101
+
102
+ console.log(props);
96
103
  const defaultIndexTypesState = Object.values(INDEX_TYPES).reduce((a, c) => {
97
104
  a[c] = true;
98
105
  return a;
package/src/styles/tailwind.css CHANGED
@@ -782,6 +782,12 @@ select{
782
782
  }
783
783
  }
784
784
 
785
+ @media (min-width: 970px){
786
+ .container{
787
+ max-width: 970px;
788
+ }
789
+ }
790
+
785
791
  @media (min-width: 1024px){
786
792
  .container{
787
793
  max-width: 1024px;
@@ -1482,6 +1488,22 @@ select{
1482
1488
  margin-top: 70px;
1483
1489
  }
1484
1490
 
1491
+ .mr-10{
1492
+ margin-right: 2.5rem;
1493
+ }
1494
+
1495
+ .mr-12{
1496
+ margin-right: 3rem;
1497
+ }
1498
+
1499
+ .mr-6{
1500
+ margin-right: 1.5rem;
1501
+ }
1502
+
1503
+ .mr-\[50px\]{
1504
+ margin-right: 50px;
1505
+ }
1506
+
1485
1507
  .line-clamp-3{
1486
1508
  overflow: hidden;
1487
1509
  display: -webkit-box;
@@ -2063,6 +2085,10 @@ select{
2063
2085
  max-width: min-content;
2064
2086
  }
2065
2087
 
2088
+ .max-w-\[242px\]{
2089
+ max-width: 242px;
2090
+ }
2091
+
2066
2092
  .flex-1{
2067
2093
  flex: 1 1 0%;
2068
2094
  }
@@ -5956,10 +5982,6 @@ select{
5956
5982
  padding-right: 12rem;
5957
5983
  }
5958
5984
 
5959
- .pr-6{
5960
- padding-right: 1.5rem;
5961
- }
5962
-
5963
5985
  .pr-7{
5964
5986
  padding-right: 1.75rem;
5965
5987
  }
@@ -9547,6 +9569,11 @@ select{
9547
9569
  color: rgb(30 86 227 / var(--tw-text-opacity));
9548
9570
  }
9549
9571
 
9572
+ .group\/split:hover .group-hover\/split\:text-neutral-1000{
9573
+ --tw-text-opacity: 1;
9574
+ color: rgb(0 6 21 / var(--tw-text-opacity));
9575
+ }
9576
+
9550
9577
  .group:hover .group-hover\:text-neutral-1000{
9551
9578
  --tw-text-opacity: 1;
9552
9579
  color: rgb(0 6 21 / var(--tw-text-opacity));
@@ -9754,20 +9781,12 @@ select{
9754
9781
  display: inline-flex;
9755
9782
  }
9756
9783
 
9757
- .tb\:grid{
9758
- display: grid;
9759
- }
9760
-
9761
9784
  @media (min-width: 600px){
9762
9785
  .tb\:tb\:grid{
9763
9786
  display: grid;
9764
9787
  }
9765
9788
  }
9766
9789
 
9767
- .tb\:inline-grid{
9768
- display: inline-grid;
9769
- }
9770
-
9771
9790
  .tb\:hidden{
9772
9791
  display: none;
9773
9792
  }
@@ -10621,10 +10640,6 @@ select{
10621
10640
  min-width: 15rem;
10622
10641
  }
10623
10642
 
10624
- .tb-l\:min-w-\[169px\]{
10625
- min-width: 169px;
10626
- }
10627
-
10628
10643
  .tb-l\:min-w-\[400px\]{
10629
10644
  min-width: 400px;
10630
10645
  }
@@ -10633,6 +10648,10 @@ select{
10633
10648
  max-width: 1240px;
10634
10649
  }
10635
10650
 
10651
+ .tb-l\:max-w-\[210px\]{
10652
+ max-width: 210px;
10653
+ }
10654
+
10636
10655
  .tb-l\:max-w-\[658px\]{
10637
10656
  max-width: 658px;
10638
10657
  }
@@ -10768,6 +10787,12 @@ select{
10768
10787
  }
10769
10788
  }
10770
10789
 
10790
+ @media (min-width: 970px){
10791
+ .tb-xl\:max-w-\[250px\]{
10792
+ max-width: 250px;
10793
+ }
10794
+ }
10795
+
10771
10796
  @media (min-width: 1024px){
10772
10797
  .lg\:flex{
10773
10798
  display: flex;
@@ -10947,6 +10972,10 @@ select{
10947
10972
  width: 100%;
10948
10973
  }
10949
10974
 
10975
+ .db\:min-w-\[169px\]{
10976
+ min-width: 169px;
10977
+ }
10978
+
10950
10979
  .db\:min-w-\[28\.063rem\]{
10951
10980
  min-width: 28.063rem;
10952
10981
  }
package/tailwind.config.js CHANGED
@@ -177,6 +177,7 @@ module.exports = {
177
177
  'tb': '600px',
178
178
  'tb-m': '800px',
179
179
  'tb-l': '905px',
180
+ 'tb-xl':'970px',
180
181
  'db-s':'1024px',
181
182
  'db': '1240px',
182
183
  'db-l': '2560px'