hds-web 1.20.2 → 1.20.4

package/package.json

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

package/src/HDS/components/Buttons/button.js

@@ -47,7 +47,7 @@ const Buttonclasses = {
     'default': {
       'base': 'db:w-fit tb:w-fit w-full justify-center border-2 border-neutral-0 text-neutral-0 ',
 
-      'hover': 'hover:text-neutral-0 hover:border-opacity-0 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-300',
+      'hover': 'hover:text-neutral-0 hover:border-2 hover:border-neutral-0 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-300',
       
       'focus': 'focus:text-neutrak-0 focus:border-2 border-neutral-0 focus:outline-none focus:text-neutral-0',
     },
@@ -56,11 +56,11 @@ const Buttonclasses = {
   
   'ghost': {
     'default': {
-      'base': 'db:w-fit tb:w-fit w-full  justify-center text-neutral-0',
-      'hover': ' ',
-      'focus': 'focus:outline-none',
+      'base': 'db:w-fit tb:w-fit w-full  justify-center text-blue-600',
+      'hover': 'hover:bg-blue-100 hover:text-blue-600',
+      'focus': 'focus:text-blue-700 focus:outline-none',
     },
-    'disabled': ' bg-neutral-200 text-neutral-400',
+    'disabled': 'text-neutral-300',
   },
   'primaryLink': {
     'default': {
@@ -116,7 +116,6 @@ export default function Button(props) {
     btnTextColorClass,
     btnTextHoverClass,
     btnBgColorClass,
-    btnbgHoverClass,
     rightIconVariant,
     rightIconColor,
     leftIconVariant,
@@ -157,8 +156,7 @@ export default function Button(props) {
     'group',
     defaultClasses,
     className,
-    HDSColor(btnTextHoverClass),
-    HDSColor(btnbgHoverClass)
+    HDSColor(btnTextHoverClass)
 
   ].join(' ');
 

package/src/HDS/components/Cards/Misc/talkcard2.js

@@ -17,7 +17,7 @@ export default function TalkCard2(props) {
 
     return (
 
-        <a href={props.readUrl ?? '#'} className="grid group">
+        <div className="grid">
             <div className={`flex flex-col tb-l:flex-row tb-l:justify-between `}>
                 <div className={"px-6 pt-6 tb-l:px-8 tb-l:pb-6  tb-l:border-r tb-l:border-r-neutral-200"}>
                     <div className="flex flex-row flex-wrap tb:gap-3 gap-2">
@@ -52,7 +52,7 @@ export default function TalkCard2(props) {
                         <div className="flex pb-6 tb-l:pb-0">
                             {props.readUrl &&
                                 props.para && (
-                                    <div>
+                                    <a href={props.readUrl}>
                                         <HDSButton
                                         label={props.videoUrl ? 'Watch Recording': 'Read more'}
                                             type='secondaryLink'
@@ -67,7 +67,7 @@ export default function TalkCard2(props) {
                                             animatedHoverStroke='stroke-blue-500'
                                             btnTextHoverClass='hover:text-blue-500'
                                         />
-                                    </div>
+                                    </a>
                                 )}
                         </div>
                     </div>
@@ -112,7 +112,7 @@ export default function TalkCard2(props) {
                         </div>}
                 </div>
             </div>
-        </a>
+        </div>
 
     )
 

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

@@ -6,12 +6,22 @@ import { V3Dropdown } from '../Cards/Dropdown'
 import { HDSColor } from '../../foundation/ColorPalette';
 import { motion } from "framer-motion"
 import { AnimatePresence } from 'framer-motion';
-// import { AlgoliaSearch } from '../../helpers/AlgoliaSearch';
+import { AlgoliaSearch } from '../../helpers/AlgoliaSearch';
 
 function classNames(...classes) {
     return classes.filter(Boolean).join(' ')
 }
 
+const updatePGParam = (originalLink, websiteKey) => {
+    if(websiteKey){
+        const url = new URL(originalLink);
+        url.searchParams.set("pg", websiteKey);
+        return url.toString();
+    }
+    else return originalLink;
+};
+
+
 export default function V3Header(props) {
     const listSize = props.HEADER_LIST.length;
     const [mobileNavOpen, setmobileNavOpen] = useState(false);
@@ -21,6 +31,10 @@ export default function V3Header(props) {
     const [currentTab, setCurrentTab] = useState('')
     const [isShown, setIsShown] = useState(false)
     const [isArrowActive, setIsArrowActive] = useState(false)
+    const signUpLink = 'https://cloud.hasura.io/signup?pg=sample-apps&plcmt=header&cta=try-hasura&tech=default';
+    const logInLink = 'https://cloud.hasura.io/login?pg=sample-apps&plcmt=header&cta=log-in&tech=default'
+    const signupURL = updatePGParam(signUpLink, props.website_key)
+    const loginURL = updatePGParam(logInLink, props.website_key)
 
     //testing
     const [dropdownVisibility, setDropdownVisibility] = useState(Array(props.HEADER_LIST.length).fill(false));
@@ -264,7 +278,7 @@ export default function V3Header(props) {
                     </div>
                     <div className='hds-hidden-tbl flex z-[10] items-center gap-6'>
                         <div className={'h-full ' + ((mobileNavOpen) ? " hds-hidden" : "")}>
-                            {/* <AlgoliaSearch {...props} /> */}
+                            <AlgoliaSearch {...props} />
                         </div>
                         {!(isCompany || isDeveloper || isProduct) &&
                             (
@@ -294,14 +308,14 @@ export default function V3Header(props) {
 
                     <div className='hds-hidden tb-l:flex flex-row items-center gap-x-4 '>
 
-                        {/* <AlgoliaSearch {...props} /> */}
+                        <AlgoliaSearch {...props} />
 
                         <a href='/contact-us?type=hasuraenterprise' className='hds-hidden db:flex'>
                             <Typography textStyle='body3c-medium' className='text-neutral-800 hover:text-blue-600'>
                                 Contact Sales
                             </Typography>
                         </a>
-                        <a href='https://cloud.hasura.io/login?pg=sample-apps&plcmt=header&cta=log-in&tech=default' >
+                        <a href={loginURL} >
                             <HDSButton
                                 label="Log In"
                                 type='tonal'
@@ -315,7 +329,7 @@ export default function V3Header(props) {
                                 className='hds-hidden tb-l:flex'
                             />
                         </a>
-                        <a href='https://cloud.hasura.io/signup?pg=sample-apps&plcmt=header&cta=try-hasura&tech=default'>
+                        <a href={signupURL}>
 
                             <HDSButton
                                 label="Get Started"
@@ -432,7 +446,7 @@ export default function V3Header(props) {
 
                             <div className='flex flex-row justify-around'>
                                 <div className='w-full flex gap-2'>
-                                    <a href='https://cloud.hasura.io/login?pg=sample-apps&plcmt=header&cta=log-in&tech=default' className='w-1/2'>
+                                    <a href={loginURL} className='w-1/2'>
                                         <HDSButton
                                             label="Log In"
                                             type='tonal'
@@ -446,7 +460,7 @@ export default function V3Header(props) {
                                             className=' !w-full'
                                         />
                                     </a>
-                                    <a href='https://cloud.hasura.io/signup?pg=sample-apps&plcmt=header&cta=try-hasura&tech=default' className='w-1/2'>
+                                    <a href={signupURL} className='w-1/2'>
                                         <HDSButton
                                             label="Get Started"
                                             type='primary'

package/src/styles/tailwind.css

@@ -8675,6 +8675,37 @@ select{
   }
 }
 
+.carousel-wrapper {
+  display: grid;
+  place-content: center;
+  border-radius: 2rem;
+}
+
+.carousel-content {
+  position: relative;
+  width: 10rem;
+  height: 10rem;
+}
+
+.carousel-item {
+  position: absolute;
+  width: 10rem;
+  height: 10rem;
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  border-radius: 10rem;
+}
+
+.carousel-btns {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  z-index: 6;
+}
+
 .placeholder\:text-neutral-500::-webkit-input-placeholder{
   --tw-text-opacity: 1;
   color: rgb(108 115 127 / var(--tw-text-opacity));
@@ -9115,10 +9146,6 @@ select{
   border-width: 2px;
 }
 
-.hover\:border-none:hover{
-  border-style: none;
-}
-
 .hover\:border-blue-600:hover{
   --tw-border-opacity: 1;
   border-color: rgb(30 86 227 / var(--tw-border-opacity));
@@ -12131,3 +12158,4 @@ select{
   -webkit-padding-start: 1rem;
           padding-inline-start: 1rem;
 }
+