hds-web 1.18.0 → 1.18.1

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 (8) hide show
  1. package/dist/index.css +2 -2
  2. package/dist/index.es.css +2 -2
  3. package/dist/index.es.js +5 -5
  4. package/dist/index.js +2 -2
  5. package/package.json +1 -1
  6. package/src/HDS/components/Cards/Menu/flyoutB.js +10 -9
  7. package/src/HDS/components/Headers/v3Header.js +42 -41
  8. package/src/styles/tailwind.css +37 -24
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hds-web",
3
- "version": "1.18.0",
3
+ "version": "1.18.1",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/HDS/components/Cards/Menu/flyoutB.js CHANGED
@@ -12,6 +12,7 @@ export default function FlyoutB(props) {
12
12
  strokeColor = '#C6D6FF',
13
13
  strokeClass = 'stroke-neutral-800',
14
14
  primaryBtnLabel = 'label1',
15
+ primaryBtnCTA,
15
16
  mainDescription = 'Choose from our open source community edition, fully managed cloud edition or custom enterprise',
16
17
  secondaryBtn = [
17
18
  { cta_leftVariantIcon: 'home03', cta_leftVariantIconColor: '#6C737F', cta_text: 'Button 1' },
@@ -23,25 +24,25 @@ export default function FlyoutB(props) {
23
24
  return (
24
25
 
25
26
  <div className="flex flex-col justify-between w-full h-full shadow rounded-2xl">
26
- <div className="group w-full h-full relative ">
27
- <div className="group-hover:bg-neutral-100 ml-2 z-[1] mt-2 w-[calc(100%-16px)] h-[calc(100%-16px)] rounded-xl absolute ">
27
+ <a href={primaryBtnCTA} className="group/card cursor-pointer w-full h-full relative transition-all duration-300 ease-out ">
28
+ <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 ">
28
29
  </div>
29
30
  <div className="p-6 w-full h-full ">
30
31
 
31
32
 
32
- <div className=" flex items-center relative justify-center p-2.5 h-14 w-14 z-[2] bg-blue-200 rounded-2xl">
33
- <Icon height='h-6 w-6 stroke-2' variant={iconVariant} strokeColor={strokeColor} strokeClass={strokeClass} />
33
+ <div className=" flex items-center relative justify-center p-2.5 h-14 w-14 z-[2] group-hover/card:bg-blue-200 bg-neutral-150 rounded-2xl">
34
+ <Icon height='h-6 w-6 stroke-2 group-hover/card:stroke-blue-500' variant={iconVariant} strokeColor={strokeColor} strokeClass={strokeClass} />
34
35
  </div>
35
- <div className="flex relative group/btn cursor-pointer pt-4 items-center z-[2]">
36
+ <div className="flex relative group/card cursor-pointer pt-4 items-center z-[2]">
36
37
  <Typography
37
38
  textStyle='body3c-medium'
38
- className='text-neutral-900 group-hover/btn:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip'>
39
+ className='text-neutral-900 group-hover/card:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip'>
39
40
  {props.primaryBtnLabel}
40
41
  </Typography>
41
42
 
42
- <div className="flex group-hover/btn:translate-x-1 transform transition-all duration-200 ease-in-out ">
43
+ <div className="flex group-hover/card:translate-x-1 transform transition-all duration-200 ease-in-out ">
43
44
  <Icon
44
- height={'h-4 w-4 stroke-2 invisible group-hover/btn:visible transition-all ease-in-out '}
45
+ height={'h-4 w-4 stroke-2 invisible group-hover/card:visible transition-all ease-in-out '}
45
46
  variant={'chevronright'}
46
47
  strokeClass={'stroke-blue-500'}
47
48
  />
@@ -49,7 +50,7 @@ export default function FlyoutB(props) {
49
50
  </div>
50
51
  <Typography className='mt-2 text-neutral-600 relative z-[2]' textStyle='body3'>{mainDescription}</Typography>
51
52
  </div>
52
- </div>
53
+ </a>
53
54
 
54
55
  {secondaryBtn.map((btn, index) => (
55
56
  <a key={index} href={btn.cta_link} className="group/btn justify-around cursor-pointer border-t border-neutral-150 p-2 ">
package/src/HDS/components/Headers/v3Header.js CHANGED
@@ -314,10 +314,10 @@ export default function V3Header(props) {
314
314
 
315
315
  <a href='https://hasura.io/contact-us?type=hasuraenterprise' className='hds-hidden db:flex'>
316
316
  <Typography textStyle='body3c-medium' className='text-neutral-800'>
317
- Contact Us
317
+ Contact Sales
318
318
  </Typography>
319
319
  </a>
320
- <a href='https://cloud.hasura.io/login?pg=home&plcmt=header&cta=log-in&tech=default' >
320
+ <a href='https://cloud.hasura.io/login?pg=sample-apps&plcmt=header&cta=log-in&tech=default' >
321
321
  <HDSButton
322
322
  label="Log In"
323
323
  type='tonal'
@@ -331,7 +331,7 @@ export default function V3Header(props) {
331
331
  className='hds-hidden tb-l:flex'
332
332
  />
333
333
  </a>
334
- <a href='https://cloud.hasura.io/signup?pg=home&plcmt=header&cta=try-hasura&tech=default'>
334
+ <a href='https://cloud.hasura.io/signup?pg=sample-apps&plcmt=header&cta=try-hasura&tech=default'>
335
335
 
336
336
  <HDSButton
337
337
  label="Get Started"
@@ -448,7 +448,7 @@ export default function V3Header(props) {
448
448
 
449
449
  <div className='flex flex-row justify-around'>
450
450
  <div className='w-full flex gap-2'>
451
- <a href='https://cloud.hasura.io/login?pg=home&plcmt=header&cta=log-in&tech=default' className='w-1/2'>
451
+ <a href='https://cloud.hasura.io/login?pg=sample-apps&plcmt=header&cta=log-in&tech=default' className='w-1/2'>
452
452
  <HDSButton
453
453
  label="Log In"
454
454
  type='tonal'
@@ -462,7 +462,7 @@ export default function V3Header(props) {
462
462
  className=' !w-full'
463
463
  />
464
464
  </a>
465
- <a href='https://cloud.hasura.io/signup?pg=home&plcmt=header&cta=try-hasura&tech=default' className='w-1/2'>
465
+ <a href='https://cloud.hasura.io/signup?pg=sample-apps&plcmt=header&cta=try-hasura&tech=default' className='w-1/2'>
466
466
  <HDSButton
467
467
  label="Get Started"
468
468
  type='primary'
@@ -495,10 +495,11 @@ V3Header.defaultProps = {
495
495
  primaryCard: {
496
496
  iconVariant: 'layersthree01',
497
497
  mainDescription: 'Choose from our open source community edition, fully managed cloud edition or custom enterprise',
498
- primaryBtnLabel: 'Hasura platform',
498
+ primaryBtnLabel: 'Hasura Platform',
499
+ primaryBtnCTA:'https://hasura.io/products',
499
500
  strokeClass: 'stroke-neutral-800',
500
501
  secondaryBtn: [
501
- { cta_leftVariantIcon: 'checksquarebroken', cta_leftVariantIconColor: '#6C737F', cta_text: 'Compare plans' }
502
+ { cta_leftVariantIcon: 'checksquarebroken', cta_leftVariantIconColor: '#6C737F', cta_text: 'Compare plans', cta_link:'https://hasura.io/pricing' }
502
503
  ],
503
504
  },
504
505
  secondaryCardArr:
@@ -508,42 +509,42 @@ V3Header.defaultProps = {
508
509
  childArray: [
509
510
  {
510
511
  description: '',
511
- href: '#',
512
+ href: 'https://hasura.io/products/instant-api',
512
513
  icon: "lightning01",
513
514
  name: 'Instant API',
514
515
  strokeClass: 'stroke-neutral-500'
515
516
  },
516
517
  {
517
518
  description: '',
518
- href: '#',
519
+ href: 'https://hasura.io/products/federation',
519
520
  icon: 'data',
520
521
  name: 'Federation',
521
522
  strokeClass: 'stroke-neutral-500'
522
523
  },
523
524
  {
524
525
  description: '',
525
- href: '#',
526
+ href: 'https://hasura.io/products/authorization',
526
527
  icon: 'eye',
527
528
  name: 'Authorization',
528
529
  strokeClass: 'stroke-neutral-500'
529
530
  },
530
531
  {
531
532
  description: '',
532
- href: '#',
533
+ href: 'https://hasura.io/products/api-security',
533
534
  icon: 'shieldtick',
534
535
  name: 'API Security',
535
536
  strokeClass: 'stroke-neutral-500'
536
537
  },
537
538
  {
538
539
  description: '',
539
- href: '#',
540
+ href: 'https://hasura.io/products/performance',
540
541
  icon: 'speedometer03',
541
542
  name: 'Performance',
542
543
  strokeClass: 'stroke-neutral-500'
543
544
  },
544
545
  {
545
546
  description: '',
546
- href: '#',
547
+ href: 'https://hasura.io/products/observability',
547
548
  icon: "piechart01",
548
549
  name: 'Observability',
549
550
  strokeClass: 'stroke-neutral-500'
@@ -555,14 +556,14 @@ V3Header.defaultProps = {
555
556
  childArray: [
556
557
  {
557
558
  description: '',
558
- href: '#',
559
+ href: 'https://hasura.io/graphql/database',
559
560
  icon: 'database01',
560
561
  name: 'All DBs',
561
562
  strokeClass: 'stroke-neutral-500'
562
563
  },
563
564
  {
564
565
  description: '',
565
- href: '#',
566
+ href: 'https://hasura.io/graphql/database',
566
567
  icon: 'checksquare',
567
568
  name: 'Planned DBs',
568
569
  strokeClass: 'stroke-neutral-500'
@@ -580,42 +581,42 @@ V3Header.defaultProps = {
580
581
  childArray: [
581
582
  {
582
583
  description: '',
583
- href: '#',
584
+ href: 'https://hasura.io/docs/latest/index/',
584
585
  icon: "file02",
585
586
  name: 'Documentation',
586
587
  strokeClass: 'stroke-neutral-500'
587
588
  },
588
589
  {
589
590
  description: '',
590
- href: '#',
591
+ href: 'https://hasura.io/hub',
591
592
  icon: 'hasura',
592
- name: 'Hasura hub',
593
+ name: 'Hasura Hub',
593
594
  strokeClass: 'stroke-neutral-500'
594
595
  },
595
596
  {
596
597
  description: '',
597
- href: '#',
598
+ href: 'https://hasura.io/sample-apps/',
598
599
  icon: 'route',
599
600
  name: 'Guides',
600
601
  strokeClass: 'stroke-neutral-500'
601
602
  },
602
603
  {
603
604
  description: '',
604
- href: '#',
605
+ href: 'https://hasura.io/graphql/',
605
606
  icon: 'asterisk02',
606
- name: 'GraphQL hub',
607
+ name: 'GraphQL Hub',
607
608
  strokeClass: 'stroke-neutral-500'
608
609
  },
609
610
  {
610
611
  description: '',
611
- href: '#',
612
+ href: 'https://cloud.hasura.io/public/graphiql',
612
613
  icon: "codebrowser",
613
- name: 'GraphQL',
614
+ name: 'GraphiQL',
614
615
  strokeClass: 'stroke-neutral-500'
615
616
  },
616
617
  {
617
618
  description: '',
618
- href: '#',
619
+ href: 'https://hasura.io/changelog',
619
620
  icon: 'gitpullrequest',
620
621
  name: 'Changelog',
621
622
  strokeClass: 'stroke-neutral-500'
@@ -628,7 +629,7 @@ V3Header.defaultProps = {
628
629
  childArray: [
629
630
  {
630
631
  description: '',
631
- href: '#',
632
+ href: 'https://hasura.io/blog',
632
633
  icon: 'bookopen01',
633
634
  name: 'Blog',
634
635
  strokeClass: 'stroke-neutral-500'
@@ -642,21 +643,21 @@ V3Header.defaultProps = {
642
643
  },
643
644
  {
644
645
  description: '',
645
- href: '#',
646
+ href: 'https://hasura.io/learn/',
646
647
  icon: 'graduationhat02',
647
648
  name: 'Tutorials',
648
649
  strokeClass: 'stroke-neutral-500'
649
650
  },
650
651
  {
651
652
  description: '',
652
- href: '#',
653
+ href: 'https://hasura.io/events',
653
654
  icon: 'calendarplus02',
654
655
  name: 'Events',
655
656
  strokeClass: 'stroke-neutral-500'
656
657
  },
657
658
  {
658
659
  description: '',
659
- href: '#',
660
+ href: 'https://hasura.io/help/',
660
661
  icon: 'box',
661
662
  name: 'Resources',
662
663
  strokeClass: 'stroke-neutral-500'
@@ -670,35 +671,35 @@ V3Header.defaultProps = {
670
671
  childArray: [
671
672
  {
672
673
  description: '',
673
- href: '#',
674
+ href: 'https://hasura.io/community/',
674
675
  icon: 'users01',
675
676
  name: 'Community',
676
677
  strokeClass: 'stroke-neutral-500'
677
678
  },
678
679
  {
679
680
  description: '',
680
- href: '#',
681
+ href: 'https://discord.com/invite/hasura',
681
682
  icon: 'discord',
682
683
  name: 'Discord',
683
684
  strokeClass: ''
684
685
  },
685
686
  {
686
687
  description: '',
687
- href: '#',
688
+ href: 'https://github.com/hasura/graphql-engine/discussions',
688
689
  icon: 'octoface',
689
- name: 'Forum',
690
+ name: 'Discussions',
690
691
  strokeClass: ''
691
692
  },
692
693
  {
693
694
  description: '',
694
- href: '#',
695
+ href: 'https://www.meetup.com/pro/hasura/',
695
696
  icon: 'meetup',
696
697
  name: 'Meetups',
697
698
  strokeClass: ''
698
699
  },
699
700
  {
700
701
  description: '',
701
- href: '#',
702
+ href: 'https://hasura.io/support/',
702
703
  icon: 'hand',
703
704
  name: 'Support',
704
705
  strokeClass: 'stroke-neutral-500'
@@ -745,35 +746,35 @@ V3Header.defaultProps = {
745
746
  childArray: [
746
747
  {
747
748
  description: '',
748
- href: '#',
749
+ href: 'https://hasura.io/about/',
749
750
  icon: "pentool02",
750
- name: 'Our story',
751
+ name: 'Our Story',
751
752
  strokeClass: 'stroke-neutral-500'
752
753
  },
753
754
  {
754
755
  description: '',
755
- href: '#',
756
+ href: 'https://hasura.io/partners',
756
757
  icon: 'intersectcircle',
757
758
  name: 'Partners',
758
759
  strokeClass: 'stroke-neutral-500'
759
760
  },
760
761
  {
761
762
  description: '',
762
- href: '#',
763
+ href: 'https://hasura.io/careers/',
763
764
  icon: 'hearthand',
764
765
  name: 'Work at Hasura',
765
766
  strokeClass: 'stroke-neutral-500'
766
767
  },
767
768
  {
768
769
  description: '',
769
- href: '#',
770
+ href: 'https://hasura.io/press/',
770
771
  icon: 'headingsquare',
771
- name: 'News room',
772
+ name: 'Newsroom',
772
773
  strokeClass: 'stroke-neutral-500'
773
774
  },
774
775
  {
775
776
  description: '',
776
- href: '#',
777
+ href: 'https://hasura.io/brand',
777
778
  icon: 'star06',
778
779
  name: 'Brand',
779
780
  strokeClass: 'stroke-neutral-500'
package/src/styles/tailwind.css CHANGED
@@ -1986,10 +1986,6 @@ select{
1986
1986
  max-width: 242px;
1987
1987
  }
1988
1988
 
1989
- .max-w-\[250px\]{
1990
- max-width: 250px;
1991
- }
1992
-
1993
1989
  .max-w-\[29\.18rem\]{
1994
1990
  max-width: 29.18rem;
1995
1991
  }
@@ -9555,6 +9551,10 @@ select{
9555
9551
  background-color: rgb(133 77 24 / var(--tw-bg-opacity));
9556
9552
  }
9557
9553
 
9554
+ .hover\:stroke-blue-500:hover{
9555
+ stroke: #3970FD;
9556
+ }
9557
+
9558
9558
  .hover\:pl-\[9px\]:hover{
9559
9559
  padding-left: 9px;
9560
9560
  }
@@ -9919,6 +9919,10 @@ select{
9919
9919
  visibility: visible;
9920
9920
  }
9921
9921
 
9922
+ .group\/card:hover .group-hover\/card\:visible{
9923
+ visibility: visible;
9924
+ }
9925
+
9922
9926
  .group\/btn:hover .group-hover\/btn\:translate-x-1{
9923
9927
  --tw-translate-x: 0.25rem;
9924
9928
  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -9949,6 +9953,12 @@ select{
9949
9953
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
9950
9954
  }
9951
9955
 
9956
+ .group\/card:hover .group-hover\/card\:translate-x-1{
9957
+ --tw-translate-x: 0.25rem;
9958
+ -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
9959
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
9960
+ }
9961
+
9952
9962
  .group:hover .group-hover\:bg-amber-300{
9953
9963
  --tw-bg-opacity: 1;
9954
9964
  background-color: rgb(255 206 112 / var(--tw-bg-opacity));
@@ -9989,6 +9999,16 @@ select{
9989
9999
  background-color: rgb(219 198 255 / var(--tw-bg-opacity));
9990
10000
  }
9991
10001
 
10002
+ .group\/card:hover .group-hover\/card\:bg-blue-200{
10003
+ --tw-bg-opacity: 1;
10004
+ background-color: rgb(223 232 255 / var(--tw-bg-opacity));
10005
+ }
10006
+
10007
+ .group\/card:hover .group-hover\/card\:bg-neutral-100{
10008
+ --tw-bg-opacity: 1;
10009
+ background-color: rgb(243 244 246 / var(--tw-bg-opacity));
10010
+ }
10011
+
9992
10012
  .group:hover .group-hover\:bg-gradient-to-t{
9993
10013
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
9994
10014
  }
@@ -10001,22 +10021,6 @@ select{
10001
10021
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
10002
10022
  }
10003
10023
 
10004
- .group:hover .group-hover\:fill-blue-800{
10005
- fill: #00288E;
10006
- }
10007
-
10008
- .group:hover .group-hover\:fill-base-10000{
10009
- fill: #000000;
10010
- }
10011
-
10012
- .group:hover .group-hover\:fill-discord{
10013
- fill: #5865F2;
10014
- }
10015
-
10016
- .group:hover .group-hover\:fill-pink-meetup{
10017
- fill: #F64060;
10018
- }
10019
-
10020
10024
  .group\/icon:hover .group-hover\/icon\:fill-base-10000{
10021
10025
  fill: #000000;
10022
10026
  }
@@ -10053,6 +10057,10 @@ select{
10053
10057
  stroke: #111927;
10054
10058
  }
10055
10059
 
10060
+ .group\/card:hover .group-hover\/card\:stroke-blue-500{
10061
+ stroke: #3970FD;
10062
+ }
10063
+
10056
10064
  .group\/btn:hover .group-hover\/btn\:text-blue-600{
10057
10065
  --tw-text-opacity: 1;
10058
10066
  color: rgb(30 86 227 / var(--tw-text-opacity));
@@ -10073,6 +10081,11 @@ select{
10073
10081
  color: rgb(0 6 21 / var(--tw-text-opacity));
10074
10082
  }
10075
10083
 
10084
+ .group\/card:hover .group-hover\/card\:text-blue-600{
10085
+ --tw-text-opacity: 1;
10086
+ color: rgb(30 86 227 / var(--tw-text-opacity));
10087
+ }
10088
+
10076
10089
  .group:hover .group-hover\:opacity-30{
10077
10090
  opacity: 0.3;
10078
10091
  }
@@ -10391,10 +10404,6 @@ select{
10391
10404
  max-width: 763px;
10392
10405
  }
10393
10406
 
10394
- .tb\:max-w-\[250px\]{
10395
- max-width: 250px;
10396
- }
10397
-
10398
10407
  .tb\:snap-always{
10399
10408
  scroll-snap-stop: always;
10400
10409
  }
@@ -11181,6 +11190,10 @@ select{
11181
11190
  max-width: 1240px;
11182
11191
  }
11183
11192
 
11193
+ .tb-l\:max-w-\[250px\]{
11194
+ max-width: 250px;
11195
+ }
11196
+
11184
11197
  .tb-l\:max-w-\[658px\]{
11185
11198
  max-width: 658px;
11186
11199
  }