hds-web 1.18.4 → 1.18.6

package/package.json

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

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

@@ -40,7 +40,7 @@ export default function IconCard(props) {
     return (
         <>
             {
-                ((props.readMoreBtn && props.button) || (!props.readMoreBtn && !props.button) || (props.button && props.button.length > 1)) ? (
+                ((props.readMoreBtn && props.button) || (!props.linkHover) || (!props.readMoreBtn && !props.button) || (props.button && props.button.length > 1)) ? (
                     <div
                         className={`bg-neutral-0 grid h-full transition-all ease-in-out rounded-3xl ${cardVariant[props.cardType]['cardStyle']} ` + ((props.cardBorder) ? props.cardBorder : 'tb:shadow') + ((props.readMoreBtn || props.button) ? ' hover:shadow-lg' : '')}
                     >
@@ -85,10 +85,10 @@ export default function IconCard(props) {
                                                             rightIconVariant='none'
                                                             state='default'
                                                             size='sm'
-                                                            rightAnimatedArrow={true}
+                                                            rightAnimatedArrow={props.linkHover ?? 'true'}
                                                             rightAnimatedArrowColor='#3970FD'
                                                             animatedHoverStroke='#3970FD'
-                                                            btnTextColorClass='text-blue-500'
+                                                            btnTextColorClass={props.linkHover ? 'text-blue-500' : 'text-neutral-1000'}
                                                             btnTextHoverClass=''
                                                             className=' mt-4'
                                                         />
@@ -103,12 +103,10 @@ export default function IconCard(props) {
                             </div>
                         </div>
                         {props.button &&
-                            <div className="flex gap-2 ">
+                            <div className="flex self-end  gap-2 ">
                                 {props.button.map((btn, index) => (
-                                    <a href={btn.cta_link} key={index} className="flex self-end mt-7">
+                                    <a href={btn.cta_link} key={index} className="flex mt-7">
                                         <div className="flex">
-
-
                                             <HDSButton
                                                 label={btn.cta_text}
                                                 type={btn.cta_type || 'secondary'}
@@ -116,7 +114,7 @@ export default function IconCard(props) {
                                                 rightIconVariant='none'
                                                 state='default'
                                                 size='sm'
-                                                rightAnimatedArrow={true}
+                                                rightAnimatedArrow={(props.linkHover ?? 'true')}
                                                 rightAnimatedArrowColor={btn.rightAnimatedArrowColor || '#3970FD'}
                                                 btnBgColorClass={btn.btnBg}
                                                 btnTextHoverClass={btn.btnTextColorClass}
@@ -187,7 +185,6 @@ export default function IconCard(props) {
                                                         />
                                                     </div>
                                                 )
-
                                                 }
                                             </>
                                         )
@@ -195,7 +192,7 @@ export default function IconCard(props) {
                                 </div>
                             </div>
                             {props.button &&
-                                <div className="flex pt-4 gap-2">
+                                <div className="flex pt-4 self-end gap-2">
                                     {props.button.map((btn, index) => (
                                         <div className="flex">
                                             <HDSButton
@@ -217,9 +214,6 @@ export default function IconCard(props) {
                                     }
                                 </div>
                             }
-
-
-
                         </a>
                     )
 
@@ -230,7 +224,8 @@ export default function IconCard(props) {
 
 IconCard.defaultProps = {
     cardType: 'withoutButton',
-    iconStrokeClass: 'stroke-neutral-1000'
+    iconStrokeClass: 'stroke-neutral-1000',
+    linkHover:'true'
 }
 Icon.propTypes = {
     cardType: PropTypes.oneOf(['withoutButton', 'withButton', 'sm']),

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

@@ -47,7 +47,6 @@ export default function V3Header(props) {
 
     //testing
     const [dropdownVisibility, setDropdownVisibility] = useState(Array(props.HEADER_LIST.length).fill(false));
-    console.log(mobileNavOpen, isProduct, dropdownVisibility, currentTab)
     const handleDropdownEnter = (index) => {
         setDropdownVisibility((prevVisibility) => {
             const updatedVisibility = [...prevVisibility];
@@ -249,6 +248,14 @@ export default function V3Header(props) {
 
             setIsDeveloper(true);
         }
+        if (title === 'Customers') {
+
+            window.location.href = '/case-studies/'
+        }
+        if (title === 'Pricing') {
+
+            window.location.href ='/pricing/'
+        }
         if (title === 'Product') {
             setIsProduct(true);
         }

package/src/HDS/helpers/MarketoForm/index.js

@@ -0,0 +1 @@
+export {default as MarketoForm } from './marketo-form';

package/src/HDS/helpers/MarketoForm/marketo-form.js

@@ -0,0 +1,25 @@
+// Referance from here: https://github.com/PaulieScanlon/cockroachdb-custom-marketo-forms-with-react
+import { memo } from 'react'
+import PropTypes from 'prop-types'
+
+import useMarketo from './useMarketo'
+
+// eslint-disable-next-line react/display-name
+const MarketoForm = memo(({ formId, styleClass }) => {
+    useMarketo({
+        formId: formId,
+        callback: () => { }
+    })
+
+    return <form
+        id={`mktoForm_${formId}`}
+        className='mktoForm marketoFormWrapper eventDetailsFormWrapper'
+    ></form>
+})
+
+MarketoForm.propTypes = {
+    /** The Marketo Form Id */
+    formId: PropTypes.string.isRequired
+}
+
+export default MarketoForm;

package/src/HDS/helpers/MarketoForm/useMarketo.js

@@ -0,0 +1,67 @@
+// Referance from here: https://github.com/PaulieScanlon/cockroachdb-custom-marketo-forms-with-react
+
+import { useState, useEffect } from 'react'
+
+const useMarketo = ({ formId, callback }) => {
+    const [scriptAdded, setScriptAdded] = useState(false)
+    const [formLoaded, setFormLoaded] = useState(false)
+
+    useEffect(() => {
+        if (scriptAdded) {
+            if (!formLoaded) {
+                // eslint-disable-next-line no-undef
+                MktoForms2.loadForm(
+                    "//page.hasura.io",
+                    "631-HMN-492",
+                    formId,
+                    callback
+                )
+                // console.log(formId);
+                // MktoForms2.whenRendered((form) => {
+                //   const formElement = form.getFormElem()[0]
+                //   const formElementId = form.getFormElem()[0].id.split('_')[1]
+
+                //   /** Remove the style attribute and make for, and id attributes unique */
+                //   Array.from(formElement.querySelectorAll('[style]'))
+                //     .concat(formElement)
+                //     .forEach((element) => {
+                //       element.removeAttribute('style')
+                //       if (element.hasAttribute('id') && element.tagName !== 'FORM') {
+                //         element.setAttribute('id', `${element.getAttribute('id')}_${formElementId}`)
+                //       }
+
+                //       if (element.tagName === 'LABEL') {
+                //         element.setAttribute('for', `${element.getAttribute('for')}_${formElementId}`)
+                //       }
+                //     })
+
+                //   /** Remove <span /> from DOM */
+                //   Array.from(formElement.querySelectorAll('.mktoInstruction')).forEach((element) => {
+                //     element.remove()
+                //   })
+
+                //   /** Remove <style /> from DOM */
+                //   Array.from(formElement.children).forEach((element) => {
+                //     if (element.type && element.type === 'text/css') {
+                //       element.remove()
+                //     }
+                //   })
+                // })
+                setFormLoaded(true)
+            }
+        } else {
+            if (false) {
+                setScriptAdded(true)
+            } else {
+                const script = document.createElement('script')
+                script.defer = true
+                script.onload = () => (window?.MktoForms2 ? setScriptAdded(true) : null)
+                script.src = `//page.hasura.io/js/forms2/js/forms2.min.js`
+                document.head.appendChild(script)
+            }
+        }
+    }, [scriptAdded])
+}
+
+export default useMarketo;
+

package/src/HDS/helpers/index.js

@@ -2,4 +2,5 @@ export * from './Translations';
 export * from './Media';
 export * from './Effects';
 export * from './AlgoliaSearch';
-export * from './Paperform';
+export * from './Paperform';
+export * from './MarketoForm';

package/src/index.css

@@ -1,9 +1,61 @@
-@import url('https://fonts.googleapis.com/css2?family=Petrona:ital,wght@1,300&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Petrona:ital,wght@1,200&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 /* Typography classes */
 
+.marketoFormWrapper {
+  width: 100%;
+}
+
+.marketoFormWrapper .mktoFormRow {
+  width: 100%;
+}
+
+.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor {
+  width: 100%;
+}
+
+.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoOffset {
+  display: none;
+}
+
+.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoRequiredField,
+.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoFieldWrap {
+  width: 100%;
+}
+
+.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoRequiredField .mktoLabel {
+  display: none;
+}
+
+.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoRequiredField .mktoTextField,
+.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoRequiredField .mktoField {
+  width: 100%;
+  height: 48px;
+  border-radius: 8px;
+  text-indent: 16px;
+  padding: 0;
+}
+
+.marketoFormWrapper .mktoButtonRow {
+  width: 100%;
+  padding-top: 12px;
+}
+
+.marketoFormWrapper .mktoButtonRow .mktoButtonWrap {
+  margin-left: 0;
+}
+
+.marketoFormWrapper .mktoButtonRow .mktoButtonWrap .mktoButton {
+ 
+  height: 48px;
+  color: #35C4F0;
+ 
+ 
+}
+
+
 .hds-hidden{
   display: none;
   

package/src/styles/tailwind.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Petrona:ital,wght@1,300&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Petrona:ital,wght@1,200&display=swap');
 
 /*
 ! tailwindcss v3.3.1 | MIT License | https://tailwindcss.com
@@ -7544,6 +7544,54 @@ select{
 
 /* Typography classes */
 
+.marketoFormWrapper {
+  width: 100%;
+}
+
+.marketoFormWrapper .mktoFormRow {
+  width: 100%;
+}
+
+.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor {
+  width: 100%;
+}
+
+.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoOffset {
+  display: none;
+}
+
+.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoRequiredField,
+.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoFieldWrap {
+  width: 100%;
+}
+
+.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoRequiredField .mktoLabel {
+  display: none;
+}
+
+.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoRequiredField .mktoTextField,
+.marketoFormWrapper .mktoFormRow .mktoFieldDescriptor .mktoRequiredField .mktoField {
+  width: 100%;
+  height: 48px;
+  border-radius: 8px;
+  text-indent: 16px;
+  padding: 0;
+}
+
+.marketoFormWrapper .mktoButtonRow {
+  width: 100%;
+  padding-top: 12px;
+}
+
+.marketoFormWrapper .mktoButtonRow .mktoButtonWrap {
+  margin-left: 0;
+}
+
+.marketoFormWrapper .mktoButtonRow .mktoButtonWrap .mktoButton {
+  height: 48px;
+  color: #35C4F0;
+}
+
 .hds-hidden{
   display: none;
 }