hds-web 1.12.4 → 1.12.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.12.4",
+  "version": "1.12.6",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/HDS/components/Footers/v3Footer.js

@@ -256,6 +256,10 @@ V3Footer.defaultProps = {
           linkText: 'Brand',
           linkUrl: 'https://hasura.io/brand/',
         },
+        {
+          linkText: 'Partners',
+          linkUrl: 'https://hasura.io/partners/',
+        },
       ]
     },
     {
@@ -298,6 +302,10 @@ V3Footer.defaultProps = {
           linkText: 'Github',
           linkUrl: 'https://github.com/hasura',
         },
+        {
+          linkText: "Swag Store",
+          linkUrl: "https://store.hasura.io/",
+        },
         {
           linkText: 'Contact Sales',
           linkUrl: 'https://hasura.io/contact-us/',

package/src/HDS/components/Tabs/tab.js

@@ -39,7 +39,6 @@ export default function Tab(props) {
   let tabTextClass = ''; 
 
   function tabClass(name) {
-    
     // console.log(currentTab['tabTextColorClass']);
     
     if(activeTab['tabTextColorClass']){
@@ -66,7 +65,7 @@ export default function Tab(props) {
               onClick={(event) => handleTabClick(event, tab)}
             >
               <Typography 
-              className={`${tabClass(tab.name)} cursor-pointer px-3 py-1  z-[2] relative whitespace-nowrap`} 
+                className={`${tabClass(tab.name)} ${tab.name === activeTab.name ? '' : 'hover:bg-neutral-150'} cursor-pointer px-3 py-1  z-[2] relative whitespace-nowrap`} 
               textStyle='body3c-medium'>
                 {tab.name}
               </Typography>
@@ -74,7 +73,7 @@ export default function Tab(props) {
           ))}
           <span
             ref={pillRef}
-            className={`absolute left-0 z-[1] ${pillColorClass} rounded-full transition-all ease-in duration-150`}
+            className={`absolute left-0 z-[1] ${pillColorClass}  rounded-full transition-all ease-in duration-150`}
             style={{
               left: `${activeTab.index * 100}%`,
               width: `${activeTab.width}px`, // Use the width of the clicked tab

package/src/HDS/modules/navCard/navCard.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 
 const tabCard = (tabContent) => (
     <>
-        <div className='px-3'>
+        <div className=''>
             {tabContent.title && <Typography textStyle='h4' className={HDSColor(tabContent.title_color)}>{tabContent.title}</Typography>}
 
             {tabContent.sub_title && <Typography textStyle='body1c' className={HDSColor(tabContent.sub_title_color)}>{tabContent.sub_title}</Typography>}
@@ -62,9 +62,9 @@ export default function NavCard(props) {
             <div>
                 {props.navTabs &&
 
-                    <div className='max-w-[44.44rem] bg-neutral-0 shadow rounded-2xl'>
+                    <div className='max-w-[44.44rem] rounded-2xl'>
 
-                        <div className='flex justify-center pb-8'>
+                        <div className='flex pb-8'>
                             <Tab
                                 onTabClick={handleTabClick}
                                 tabs={props.navTabs}

package/src/styles/tailwind.css

@@ -1427,6 +1427,10 @@ select{
   display: grid;
 }
 
+.inline-grid{
+  display: inline-grid;
+}
+
 .hidden{
   display: none;
 }
@@ -2385,6 +2389,12 @@ select{
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
 }
 
+.divide-y-2 > :not([hidden]) ~ :not([hidden]){
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
+}
+
 .divide-blue-600\/10 > :not([hidden]) ~ :not([hidden]){
   border-color: rgb(30 86 227 / 0.1);
 }
@@ -2420,6 +2430,10 @@ select{
   overflow: hidden;
 }
 
+.overflow-clip{
+  overflow: clip;
+}
+
 .overflow-scroll{
   overflow: scroll;
 }
@@ -9744,6 +9758,15 @@ select{
   stroke: #111927;
 }
 
+.group\/icon:hover .group-hover\/icon\:stroke-blue-800{
+  stroke: #00288E;
+}
+
+.group:hover .group-hover\:text-neutral-1000{
+  --tw-text-opacity: 1;
+  color: rgb(0 6 21 / var(--tw-text-opacity));
+}
+
 .group:hover .group-hover\:opacity-30{
   opacity: 0.3;
 }
@@ -9754,6 +9777,12 @@ select{
   transition-duration: 150ms;
 }
 
+.group\/icon:hover .group-hover\/icon\:transition-all{
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .group:hover .group-hover\:delay-100{
   transition-delay: 100ms;
 }
@@ -9766,10 +9795,18 @@ select{
   transition-duration: 300ms;
 }
 
+.group\/icon:hover .group-hover\/icon\:duration-1000{
+  transition-duration: 1000ms;
+}
+
 .group:hover .group-hover\:ease-in-out{
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+.group\/icon:hover .group-hover\/icon\:ease-in-out{
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 .group:focus .group-focus\:stroke-neutral-0{
   stroke: #FFFFFF;
 }