hds-web 1.17.8 → 1.18.0

package/src/HDS/components/Headers/v3Header.js

@@ -67,7 +67,7 @@ export default function V3Header(props) {
     const renderDropdown = (primaryCard, secondaryCardArr, tertiaryCard) => (
         <div>
             <div>
-                <hr className="w-full h-9 border-0" />
+                <hr className="w-full h-6 border-0" />
             </div>
             <div className="p-2 bg-neutral-150 rounded-3xl">
                 <V3Dropdown
@@ -359,7 +359,7 @@ export default function V3Header(props) {
 
                         <div className="bg-neutral-100 h-[calc(100%-80px)] rounded-2xl overflow-y-scroll scrollbar-hide">
 
-                            <div className='pt-6 pb-4 tb:mr-[16px] mr-[34px] min-h-[36px] flex flex-row justify-between items-center sticky top-0 bg-neutral-100 z-50 '>
+                            <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 '>
                                 {(isCompany || isDeveloper || isProduct) &&
                                     (
                                         <div
@@ -397,7 +397,7 @@ export default function V3Header(props) {
                                         key='hey'
                                         exit={{ opacity: 0, y: [0, 300] }}
                                         animate={{ opacity: 1, y: [300, 0] }}
-                                        transition={{ duration: 0.4, exit: { duration: 0.3 }, opacity: { ease: "easeIn" } }}
+                                        transition={{ duration: 0.2, exit: { duration: 0.3 }, opacity: { ease: "easeIn" } }}
                                         when={isProduct || isDeveloper || isCompany}
 
                                         className="flex flex-col justify-between "
@@ -493,60 +493,60 @@ V3Header.defaultProps = {
         {
             title: 'Product',
             primaryCard: {
-                iconVariant: 'hasura',
+                iconVariant: 'layersthree01',
                 mainDescription: 'Choose from our open source community edition, fully managed cloud edition or custom enterprise',
-                primaryBtnLabel: 'Hasura Product',
+                primaryBtnLabel: 'Hasura platform',
                 strokeClass: 'stroke-neutral-800',
                 secondaryBtn: [
-                    { cta_leftVariantIcon: 'home03', cta_leftVariantIconColor: '#6C737F', cta_text: 'Compare plans' }
+                    { cta_leftVariantIcon: 'checksquarebroken', cta_leftVariantIconColor: '#6C737F', cta_text: 'Compare plans' }
                 ],
             },
             secondaryCardArr:
                 [
                     {
-                        split: true,
+
                         childArray: [
                             {
                                 description: '',
                                 href: '#',
                                 icon: "lightning01",
                                 name: 'Instant API',
-                                strokeClass: 'stroke-blue-500'
+                                strokeClass: 'stroke-neutral-500'
                             },
                             {
                                 description: '',
                                 href: '#',
                                 icon: 'data',
                                 name: 'Federation',
-                                strokeClass: 'stroke-blue-500'
+                                strokeClass: 'stroke-neutral-500'
                             },
                             {
                                 description: '',
                                 href: '#',
                                 icon: 'eye',
                                 name: 'Authorization',
-                                strokeClass: 'stroke-blue-500'
+                                strokeClass: 'stroke-neutral-500'
                             },
                             {
                                 description: '',
                                 href: '#',
                                 icon: 'shieldtick',
                                 name: 'API Security',
-                                strokeClass: 'stroke-blue-500'
+                                strokeClass: 'stroke-neutral-500'
                             },
                             {
                                 description: '',
                                 href: '#',
                                 icon: 'speedometer03',
                                 name: 'Performance',
-                                strokeClass: 'stroke-blue-500'
+                                strokeClass: 'stroke-neutral-500'
                             },
                             {
                                 description: '',
                                 href: '#',
-                                icon: "barchartsquare01",
+                                icon: "piechart01",
                                 name: 'Observability',
-                                strokeClass: 'stroke-blue-500'
+                                strokeClass: 'stroke-neutral-500'
                             }
                         ],
                         label: 'CAPABILITIES'
@@ -558,14 +558,14 @@ V3Header.defaultProps = {
                                 href: '#',
                                 icon: 'database01',
                                 name: 'All DBs',
-                                strokeClass: 'stroke-blue-500'
+                                strokeClass: 'stroke-neutral-500'
                             },
                             {
                                 description: '',
                                 href: '#',
                                 icon: 'checksquare',
                                 name: 'Planned DBs',
-                                strokeClass: 'stroke-blue-500'
+                                strokeClass: 'stroke-neutral-500'
                             },
                         ],
                         label: 'Integrations'
@@ -583,42 +583,42 @@ V3Header.defaultProps = {
                             href: '#',
                             icon: "file02",
                             name: 'Documentation',
-                            strokeClass: 'stroke-blue-500'
+                            strokeClass: 'stroke-neutral-500'
                         },
                         {
                             description: '',
                             href: '#',
                             icon: 'hasura',
                             name: 'Hasura hub',
-                            strokeClass: 'stroke-blue-500'
+                            strokeClass: 'stroke-neutral-500'
                         },
                         {
                             description: '',
                             href: '#',
                             icon: 'route',
                             name: 'Guides',
-                            strokeClass: 'stroke-blue-500'
+                            strokeClass: 'stroke-neutral-500'
                         },
                         {
                             description: '',
                             href: '#',
                             icon: 'asterisk02',
                             name: 'GraphQL hub',
-                            strokeClass: 'stroke-blue-500'
+                            strokeClass: 'stroke-neutral-500'
                         },
                         {
                             description: '',
                             href: '#',
                             icon: "codebrowser",
                             name: 'GraphQL',
-                            strokeClass: 'stroke-blue-500'
+                            strokeClass: 'stroke-neutral-500'
                         },
                         {
                             description: '',
                             href: '#',
                             icon: 'gitpullrequest',
                             name: 'Changelog',
-                            strokeClass: 'stroke-blue-500'
+                            strokeClass: 'stroke-neutral-500'
                         }
                     ],
                     label: 'BUILD'
@@ -631,35 +631,35 @@ V3Header.defaultProps = {
                             href: '#',
                             icon: 'bookopen01',
                             name: 'Blog',
-                            strokeClass: 'stroke-blue-500'
+                            strokeClass: 'stroke-neutral-500'
                         },
                         {
                             description: '',
                             href: '#',
                             icon: 'videorecorder',
                             name: 'Tech talks',
-                            strokeClass: 'stroke-blue-500'
+                            strokeClass: 'stroke-neutral-500'
                         },
                         {
                             description: '',
                             href: '#',
                             icon: 'graduationhat02',
                             name: 'Tutorials',
-                            strokeClass: 'stroke-blue-500'
+                            strokeClass: 'stroke-neutral-500'
                         },
                         {
                             description: '',
                             href: '#',
                             icon: 'calendarplus02',
                             name: 'Events',
-                            strokeClass: 'stroke-blue-500'
+                            strokeClass: 'stroke-neutral-500'
                         },
                         {
                             description: '',
                             href: '#',
                             icon: 'box',
                             name: 'Resources',
-                            strokeClass: 'stroke-blue-500'
+                            strokeClass: 'stroke-neutral-500'
                         },
                     ],
                     label: 'Learn',
@@ -673,35 +673,35 @@ V3Header.defaultProps = {
                             href: '#',
                             icon: 'users01',
                             name: 'Community',
-                            strokeClass: 'stroke-blue-500'
+                            strokeClass: 'stroke-neutral-500'
                         },
                         {
                             description: '',
                             href: '#',
-                            icon: 'cube01',
+                            icon: 'discord',
                             name: 'Discord',
-                            strokeClass: 'stroke-blue-500'
+                            strokeClass: ''
                         },
                         {
                             description: '',
                             href: '#',
-                            icon: 'cube01',
+                            icon: 'octoface',
                             name: 'Forum',
-                            strokeClass: 'stroke-blue-500'
+                            strokeClass: ''
                         },
                         {
                             description: '',
                             href: '#',
-                            icon: 'cube01',
+                            icon: 'meetup',
                             name: 'Meetups',
-                            strokeClass: 'stroke-blue-500'
+                            strokeClass: ''
                         },
                         {
                             description: '',
                             href: '#',
                             icon: 'hand',
                             name: 'Support',
-                            strokeClass: 'stroke-blue-500'
+                            strokeClass: 'stroke-neutral-500'
                         },
                     ],
                     label: 'Connect',
@@ -748,35 +748,35 @@ V3Header.defaultProps = {
                             href: '#',
                             icon: "pentool02",
                             name: 'Our story',
-                            strokeClass: 'stroke-blue-500'
+                            strokeClass: 'stroke-neutral-500'
                         },
                         {
                             description: '',
                             href: '#',
-                            icon: 'data',
+                            icon: 'intersectcircle',
                             name: 'Partners',
-                            strokeClass: 'stroke-blue-500'
+                            strokeClass: 'stroke-neutral-500'
                         },
                         {
                             description: '',
                             href: '#',
                             icon: 'hearthand',
                             name: 'Work at Hasura',
-                            strokeClass: 'stroke-blue-500'
+                            strokeClass: 'stroke-neutral-500'
                         },
                         {
                             description: '',
                             href: '#',
                             icon: 'headingsquare',
                             name: 'News room',
-                            strokeClass: 'stroke-blue-500'
+                            strokeClass: 'stroke-neutral-500'
                         },
                         {
                             description: '',
                             href: '#',
                             icon: 'star06',
                             name: 'Brand',
-                            strokeClass: 'stroke-blue-500'
+                            strokeClass: 'stroke-neutral-500'
                         },
 
                     ],

package/src/HDS/components/common-components/Icon/IconMap.js

@@ -1189,8 +1189,14 @@ import {ReactComponent as TriggerIcon } from "../../../assets/icons/trigger.svg"
 import {ReactComponent as WatchTriggerIcon } from "../../../assets/icons/watchTrigger.svg"
 import {ReactComponent as HasuraLogoWhiteIcon } from "../../../assets/V3/HasuraWhite.svg"
 import {ReactComponent as GraphQLIcon } from "../../../assets/icons/graphql-logo.svg"
+import {ReactComponent as DiscordIcon } from "../../../assets/icons/Discord.svg"
+import {ReactComponent as OctoFaceIcon } from "../../../assets/icons/Octoface.svg"
+import {ReactComponent as MeetupIcon } from "../../../assets/icons/meetup.svg"
 
 const iconReferenceMap = {
+    discord: DiscordIcon,
+    meetup: MeetupIcon,
+    octoface: OctoFaceIcon,
     graphQL: GraphQLIcon,
     caching: CachingIcon,
     doubleArrow: DoubleArrowIcon,
@@ -2385,11 +2391,20 @@ export default function Icon ({ variant, height, strokeColor, strokeClass, class
     if (iconReferenceMap[variant]){
         CurrentActiveIcon = iconReferenceMap[variant] ;
     }
-    const IconStrokeCLass = HDSColor(strokeClass);
+    let IconStrokeCLass = HDSColor(strokeClass);
+    if (variant === 'discord') {
+        IconStrokeCLass = 'fill-neutral-500 group-hover/icon:fill-discord'
+    }
+    if (variant === 'octoface') {
+        IconStrokeCLass = 'fill-neutral-500 group-hover/icon:fill-base-10000'
+    }
+    if (variant === 'meetup') {
+        IconStrokeCLass = 'fill-neutral-500 group-hover/icon:fill-pink-meetup'
+    }
     return (
         <div style={{ stroke: `${strokeColor}` }}>
             <CurrentActiveIcon
-                className={[`${height}`, `${IconStrokeCLass}`, `${className}` ].join(' ')}
+                className={[`${height}`, `${IconStrokeCLass}` , `${className}` ].join(' ')}
             />
         </div>
     );

package/src/HDS/helpers/Grid/storyLayout.js

@@ -2,13 +2,19 @@ import React from 'react';
 
 function StoryLayout(props) {
     return (
-        <div className='pt-10 flex flex-wrap items-center justify-center'>
+        <div className='p-4'>
+
+        <div className='pt-10 gap-10 flex flex-wrap items-center justify-center'>
             {React.Children.map(props.children, (child) => (
-                <div className='p-10'>
+                <div className='p-10 border border-neutral-200 rounded-2xl'>
+                    <div className='shadow-xl  bg-neutral-0 rounded-3xl'>
+
                     {child}
+                    </div>
                 </div>
             ))}
         </div>
+            </div>
     );
 }
 

package/src/styles/tailwind.css

@@ -1387,8 +1387,8 @@ select{
   margin-right: 2rem;
 }
 
-.mr-\[34px\]{
-  margin-right: 34px;
+.mr-\[30px\]{
+  margin-right: 30px;
 }
 
 .mr-\[50px\]{
@@ -1634,6 +1634,10 @@ select{
   height: 90px;
 }
 
+.h-\[calc\(100\%-16px\)\]{
+  height: calc(100% - 16px);
+}
+
 .h-\[calc\(100\%-1px\)\]{
   height: calc(100% - 1px);
 }
@@ -1850,6 +1854,10 @@ select{
   width: 90%;
 }
 
+.w-\[calc\(100\%-16px\)\]{
+  width: calc(100% - 16px);
+}
+
 .w-auto{
   width: auto;
 }
@@ -1896,6 +1904,10 @@ select{
   min-width: 24px;
 }
 
+.min-w-\[250px\]{
+  min-width: 250px;
+}
+
 .min-w-\[312px\]{
   min-width: 312px;
 }
@@ -1974,6 +1986,10 @@ select{
   max-width: 242px;
 }
 
+.max-w-\[250px\]{
+  max-width: 250px;
+}
+
 .max-w-\[29\.18rem\]{
   max-width: 29.18rem;
 }
@@ -2224,14 +2240,6 @@ select{
   list-style-type: none;
 }
 
-.grid-flow-col{
-  grid-auto-flow: column;
-}
-
-.grid-flow-col-dense{
-  grid-auto-flow: column dense;
-}
-
 .grid-cols-1{
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -5693,6 +5701,10 @@ select{
   --tw-gradient-to-position:  ;
 }
 
+.fill-neutral-500{
+  fill: #6C737F;
+}
+
 .stroke-amber-100{
   stroke: #FFF3D4;
 }
@@ -9895,6 +9907,10 @@ select{
   color: rgb(108 115 127 / var(--tw-text-opacity));
 }
 
+.group\/btn:hover .group-hover\/btn\:visible{
+  visibility: visible;
+}
+
 .group\/icon:hover .group-hover\/icon\:visible{
   visibility: visible;
 }
@@ -9903,6 +9919,12 @@ select{
   visibility: visible;
 }
 
+.group\/btn:hover .group-hover\/btn\:translate-x-1{
+  --tw-translate-x: 0.25rem;
+  -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));
+          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));
+}
+
 .group\/icon:hover .group-hover\/icon\:translate-x-1{
   --tw-translate-x: 0.25rem;
   -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));
@@ -9947,6 +9969,11 @@ select{
   background-color: rgb(145 245 215 / var(--tw-bg-opacity));
 }
 
+.group:hover .group-hover\:bg-neutral-100{
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
 .group:hover .group-hover\:bg-neutral-300{
   --tw-bg-opacity: 1;
   background-color: rgb(210 214 219 / var(--tw-bg-opacity));
@@ -9974,6 +10001,38 @@ select{
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.group:hover .group-hover\:fill-blue-800{
+  fill: #00288E;
+}
+
+.group:hover .group-hover\:fill-base-10000{
+  fill: #000000;
+}
+
+.group:hover .group-hover\:fill-discord{
+  fill: #5865F2;
+}
+
+.group:hover .group-hover\:fill-pink-meetup{
+  fill: #F64060;
+}
+
+.group\/icon:hover .group-hover\/icon\:fill-base-10000{
+  fill: #000000;
+}
+
+.group\/icon:hover .group-hover\/icon\:fill-discord{
+  fill: #5865F2;
+}
+
+.group\/icon:hover .group-hover\/icon\:fill-pink-meetup{
+  fill: #F64060;
+}
+
+.group\/btn:hover .group-hover\/btn\:stroke-blue-500{
+  stroke: #3970FD;
+}
+
 .group\/icon:hover .group-hover\/icon\:stroke-blue-500{
   stroke: #3970FD;
 }
@@ -9990,14 +10049,15 @@ select{
   stroke: #FFFFFF;
 }
 
-.group:hover .group-hover\:stroke-neutral-1000{
-  stroke: #000615;
-}
-
 .group:hover .group-hover\:stroke-neutral-900{
   stroke: #111927;
 }
 
+.group\/btn:hover .group-hover\/btn\:text-blue-600{
+  --tw-text-opacity: 1;
+  color: rgb(30 86 227 / var(--tw-text-opacity));
+}
+
 .group\/icon:hover .group-hover\/icon\:text-blue-600{
   --tw-text-opacity: 1;
   color: rgb(30 86 227 / var(--tw-text-opacity));
@@ -10183,8 +10243,8 @@ select{
     margin-right: 1rem;
   }
 
-  .tb\:mr-\[16px\]{
-    margin-right: 16px;
+  .tb\:mr-\[12px\]{
+    margin-right: 12px;
   }
 
   .tb\:mt-0{
@@ -10331,6 +10391,10 @@ select{
     max-width: 763px;
   }
 
+  .tb\:max-w-\[250px\]{
+    max-width: 250px;
+  }
+
   .tb\:snap-always{
     scroll-snap-stop: always;
   }
@@ -11109,10 +11173,6 @@ select{
     width: 100%;
   }
 
-  .tb-l\:min-w-\[15rem\]{
-    min-width: 15rem;
-  }
-
   .tb-l\:min-w-\[400px\]{
     min-width: 400px;
   }
@@ -11121,10 +11181,6 @@ select{
     max-width: 1240px;
   }
 
-  .tb-l\:max-w-\[210px\]{
-    max-width: 210px;
-  }
-
   .tb-l\:max-w-\[658px\]{
     max-width: 658px;
   }
@@ -11273,12 +11329,6 @@ select{
   }
 }
 
-@media (min-width: 970px){
-  .tb-xl\:max-w-\[250px\]{
-    max-width: 250px;
-  }
-}
-
 @media (min-width: 1024px){
   .lg\:flex{
     display: flex;
@@ -11463,14 +11513,6 @@ select{
     width: 100%;
   }
 
-  .db\:min-w-\[169px\]{
-    min-width: 169px;
-  }
-
-  .db\:min-w-\[28\.063rem\]{
-    min-width: 28.063rem;
-  }
-
   .db\:min-w-\[550px\]{
     min-width: 550px;
   }

package/tailwind.config.js

@@ -26,9 +26,12 @@ module.exports = {
       'storybook-default':{
         'heading' : '#111B29',
       },
+      'discord':'#5865F2',
+
       'base': {
         '0': '#FFFFFF',
         '1000': '#000615',
+        '10000':'#000000'
       },
       'neutral': {
         0: '#FFFFFF',
@@ -105,6 +108,7 @@ module.exports = {
         700: '#A50A48',
         800: '#71002C',
         900: '#49001D',
+        'meetup': '#F64060'
       },
       'amber': {
         100: '#FFF3D4',
@@ -146,6 +150,7 @@ module.exports = {
         600: '#DB252B',
         700: '#B81B20',
         800: '#981A1E',
+        
       },
     },
     letterSpacing: {
@@ -847,6 +852,9 @@ module.exports = {
       },
     }
   },
+  variants: {
+    fill: ['hover', 'focus'], // this line does the trick
+  },
   plugins: [
     // ...
     require('@tailwindcss/forms'),