hds-web 1.18.5 → 1.18.7

package/package.json

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

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

@@ -40,9 +40,9 @@ 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.readMoreBtn && !props.button) || (props.button && props.button.length > 1) || !props.linkHover) ? (
                     <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' : '')}
+                        className={`bg-neutral-0 grid h-full transition-all ease-in-out rounded-3xl ${cardVariant[props.cardType]['cardStyle']} ` + ((props.cardBorder) ? props.cardBorder : 'tb:shadow')}
                     >
                         <div className=" self-start">
                             <div
@@ -75,33 +75,55 @@ export default function IconCard(props) {
                                                     {props.description}
                                                 </ReactMarkdown>
                                             </Typography>
-                                            {props.readMoreBtn && (
-                                                <a href={props.readMoreBtn.cta_link} className='flex'>
-                                                    <div className="flex">
-                                                        <HDSButton
-                                                            label={props.readMoreBtn.cta_text}
-                                                            type='secondaryLink'
-                                                            leftIconVariant='none'
-                                                            rightIconVariant='none'
-                                                            state='default'
-                                                            size='sm'
-                                                            rightAnimatedArrow={true}
-                                                            rightAnimatedArrowColor='#3970FD'
-                                                            animatedHoverStroke='#3970FD'
-                                                            btnTextColorClass='text-blue-500'
-                                                            btnTextHoverClass=''
-                                                            className=' mt-4'
-                                                        />
-                                                    </div>
-                                                </a>
-                                            )
-
-                                            }
                                         </>
                                     )
                                 }
                             </div>
                         </div>
+                        {props.readMoreBtn && (
+                          <>
+                            {
+                              props.linkHover ? (
+                                <a href={props.readMoreBtn.cta_link} className='flex self-end'>
+                                    <div className="flex">
+                                        <HDSButton
+                                            label={props.readMoreBtn.cta_text}
+                                            type='secondaryLink'
+                                            leftIconVariant='none'
+                                            rightIconVariant='none'
+                                            state='default'
+                                            size='sm'
+                                            rightAnimatedArrow={true}
+                                            rightAnimatedArrowColor='#3970FD'
+                                            animatedHoverStroke='#3970FD'
+                                            btnTextColorClass='text-blue-500'
+                                            btnTextHoverClass=''
+                                            className=' mt-4'
+                                        />
+                                    </div>
+                                </a>
+                              ) : (
+                                <div className="flex self-end">
+                                    <HDSButton
+                                        label={props.readMoreBtn.cta_text}
+                                        type='secondaryLink'
+                                        leftIconVariant='none'
+                                        rightIconVariant='none'
+                                        state='default'
+                                        size='sm'
+                                        rightAnimatedArrow={false}
+                                        rightAnimatedArrowColor='#3970FD'
+                                        animatedHoverStroke='#3970FD'
+                                        btnTextColorClass='text-neutral-800'
+                                        btnTextHoverClass=''
+                                        className=' mt-4 hover:cursor-default'
+                                    />
+                                </div>
+                              )
+                            }
+                          </>
+                        )
+                        }
                         {props.button &&
                             <div className="flex gap-2 ">
                                 {props.button.map((btn, index) => (
@@ -128,15 +150,12 @@ export default function IconCard(props) {
                                 }
                             </div>
                         }
-
-
-
                     </div>
                 ) :
 
                     (
                         <a href={((props.readMoreBtn && !props.button) ? props.readMoreBtn['cta_link'] : props.button[0]['cta_link'])}
-                            className={`bg-neutral-0 group grid h-full duration-300 transition-all ease-in-out rounded-3xl ${cardVariant[props.cardType]['cardStyle']} ` + ((props.cardBorder) ? props.cardBorder : 'tb:shadow') + ((props.readMoreBtn || props.button) ? ' hover:shadow-lg hover:translate-y-0.5 ' : '')}
+                            className={`bg-neutral-0 group grid h-full duration-300 transition-all ease-in-out rounded-3xl ${cardVariant[props.cardType]['cardStyle']} ` + ((props.cardBorder) ? props.cardBorder : 'tb:shadow') + ((props.readMoreBtn || props.button || props.linkHover) ? ' hover:shadow-lg hover:translate-y-0.5 ' : '')}
                         >
                             <div className=" self-start">
                                 <div
@@ -169,33 +188,33 @@ export default function IconCard(props) {
                                                         {props.description}
                                                     </ReactMarkdown>
                                                 </Typography>
-                                                {props.readMoreBtn && (
-                                                    <div className="flex">
-                                                        <HDSButton
-                                                            label={props.readMoreBtn.cta_text}
-                                                            type='secondaryLink'
-                                                            leftIconVariant='none'
-                                                            rightIconVariant='none'
-                                                            state='default'
-                                                            size='sm'
-                                                            rightAnimatedArrow={true}
-                                                            rightAnimatedArrowColor='#3970FD'
-                                                            animatedHoverStroke='#3970FD'
-                                                            btnTextColorClass='text-blue-500'
-                                                            btnTextHoverClass=''
-                                                            className=' mt-4'
-                                                        />
-                                                    </div>
-                                                )
 
-                                                }
                                             </>
                                         )
                                     }
                                 </div>
                             </div>
+                            {props.readMoreBtn && (
+                                <div className="flex self-end">
+                                    <HDSButton
+                                        label={props.readMoreBtn.cta_text}
+                                        type='secondaryLink'
+                                        leftIconVariant='none'
+                                        rightIconVariant='none'
+                                        state='default'
+                                        size='sm'
+                                        rightAnimatedArrow={true}
+                                        rightAnimatedArrowColor='#3970FD'
+                                        animatedHoverStroke='#3970FD'
+                                        btnTextColorClass='text-blue-500'
+                                        btnTextHoverClass=''
+                                        className=' mt-4'
+                                    />
+                                </div>
+                            )
+                            }
                             {props.button &&
-                                <div className="flex pt-4 gap-2">
+                                <div className="flex pt-4 gap-2 self-end">
                                     {props.button.map((btn, index) => (
                                         <div className="flex">
                                             <HDSButton
@@ -217,9 +236,6 @@ export default function IconCard(props) {
                                     }
                                 </div>
                             }
-
-
-
                         </a>
                     )
 
@@ -235,4 +251,3 @@ IconCard.defaultProps = {
 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];

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;
 }