hds-web 1.32.5 → 1.32.7

package/package.json

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

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

@@ -31,11 +31,11 @@ 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 signUpLink = props.signUpLink ? props.signUpLink :'https://cloud.hasura.io/signup?pg=sample-apps&plcmt=header&cta=try-hasura&tech=default';
+    const logInLink = props.logInLink ? props.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)
-
+    const hideLoginButton = props.hideLoginButton;
     //testing
     const [dropdownVisibility, setDropdownVisibility] = useState(Array(props.HEADER_LIST.length).fill(false));
     const handleDropdownEnter = (index) => {
@@ -323,7 +323,7 @@ export default function V3Header(props) {
                                 Contact Sales
                             </Typography>
                         </a>
-                        <a href={loginURL} >
+                        {!hideLoginButton && <a href={loginURL} >
                             <HDSButton
                                 label="Log In"
                                 type='tonal'
@@ -336,7 +336,7 @@ export default function V3Header(props) {
                                 animatedHoverStroke='group-hover:stroke-neutral-0'
                                 className='hds-hidden tb-l:flex'
                             />
-                        </a>
+                        </a>}
                         <a href={signupURL}>
 
                             <HDSButton
@@ -355,7 +355,7 @@ export default function V3Header(props) {
                     </div>
 
                 </div>
-
+                        {/* mobile */}
                 <div className="hds-hidden-tbl overflow-auto flex ">
                     {/* <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white pl-6 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
                             <span className="sr-only">Open menu</span> */}
@@ -454,7 +454,7 @@ export default function V3Header(props) {
 
                             <div className='flex flex-row justify-around'>
                                 <div className='w-full flex gap-2'>
-                                    <a href={loginURL} className='w-1/2'>
+                                    {!hideLoginButton && <a href={loginURL} className='w-1/2'>
                                         <HDSButton
                                             label="Log In"
                                             type='tonal'
@@ -467,8 +467,8 @@ export default function V3Header(props) {
                                             animatedHoverStroke='group-hover:stroke-neutral-0'
                                             className=' !w-full'
                                         />
-                                    </a>
-                                    <a href={signupURL} className='w-1/2'>
+                                    </a>}
+                                    <a href={signupURL} className={!hideLoginButton ? 'w-1/2' : 'w-full'}>
                                         <HDSButton
                                             label="Get Started"
                                             type='primary'
@@ -495,6 +495,7 @@ export default function V3Header(props) {
 }
 
 V3Header.defaultProps = {
+    hideLoginButton:false,
     hideSearch:false,
     HEADER_LIST: [
         {

package/src/HDS/components/Hero/herolinkcard.js

@@ -25,14 +25,14 @@ const tabCard = (Content) => (
     }
     {
       Content.buttons && (
-        <div className='flex items-center flex-wrap flex-row gap-2'>
+        <div className='flex items-center flex-wrap flex-row gap-2 pt-6'>
           {Content.buttons.map((btn, index) => (
             <Fragment key={index}>
               {btn.url && btn.text && btn.type && (
-                <a href={btn.url} key={index} className='flex pt-6'>
+                <a href={btn.url} key={index} className='flex '>
                   <HDSButton
                     label={btn.text}
-                    type={ btn.type}
+                    type={btn.type}
                     leftIconVariant='none'
                     rightIconVariant='none'
                     state='default'
@@ -47,8 +47,8 @@ const tabCard = (Content) => (
                     btnbgHoverClass={btn.btnBgColorClass}
                   />
                 </a>)}
-              </Fragment>
-            ))
+            </Fragment>
+          ))
           }
         </div>
       )
@@ -57,91 +57,91 @@ const tabCard = (Content) => (
 )
 
 export default function HeroLinkCard(props) {
-    const [showVideo, setShowVideo] = useState(false);
-    if (!props) {
-        return <div></div>; // Replace with your loading indicator or fallback UI
-    }
-    const LinkCardsFn = (props) => {
-        return (
-          props.linkCards && (
-                <div className="flex tb-m:justify-center overflow-auto no-scrollbar db:overflow-visible scrollbar-hide flex-row mt-10 tb:mt-12 db:mt-16 gap-6 tb:flex-row  ">
-                    {props.linkCards.map((card, index) => (
-                        <div key={index} className={`${HDSColor(card.cardBorderClass)} ${HDSColor(card.cardBgColor)} ${HDSColor(card.cardHoverBg)} transition-all ease-out duration-300 hover:shadow-2xl hover:border-opacity-0 border rounded-2xl w-full min-w-[11.5rem] max-w-[22.313rem]`}>
-                            <LinkCard
-                                titleTextColor={card.titleTextColor}
-                                descTextColor={card.descTextColor}
-                                linkUrl={card.linkUrl}
-                                iconVariant={card.iconVariant}
-                                iconStrokeClass={card.iconStrokeColor}
-                                iconArrowVariant={card.iconArrowVariant}
-                                iconArrowStrokeClass={card.iconArrowStrokeColor}
-                                title={card.title}
-                                description={card.description}
-                            />
-                        </div>
-                    ))}
-                </div>
-            )
-        );
-    };
-
-
+  const [showVideo, setShowVideo] = useState(false);
+  if (!props) {
+    return <div></div>; // Replace with your loading indicator or fallback UI
+  }
+  const LinkCardsFn = (props) => {
     return (
-      <div>
-        <div className="flex flex-col-reverse tb:flex tb:flex-row tb:justify-between">
-          <div className={`tb:w-1/2 db:max-w-[${props.contentWd ? props.contentWd : '535px'}]`}>
-            {props &&
-              tabCard(props)}
-          </div>
-          <div className="grid items-center relative db:max-w-[500px] tb:w-1/2 transition-opacity duration-700 ease-linear ">
-            <Typography
-              textStyle="h2"
-              as="h2"
-              className={`tb:hidden pb-6 ${props.titleTextColor ? HDSColor(props.titleTextColor) : 'text-neutral-1000'}`}
-            >
-              {props.title}
-            </Typography>
-            {showVideo ? (
-              <>
-                {props.videoUrl && (
-                  <video
-                    id="hero_vid"
-                    controls={true}
-                    autoPlay
-                    playsInline
-                    width="500"
-                    height="500"
-                    className="tb:w-full w-full rounded-3xl"
-                    src={props.videoUrl}
-                  ></video>
-                )}
-              </>
-            ) : (
-              <div className="relative">
-                {props.imgUrl && (
-                  <img src={props.imgUrl} alt="Illustration" loading="lazy" />
-                )}
-                {props.videoUrl && (
-                  <div
-                    className={`${props.currentPlayBtnClass} w-14 h-14 cursor-pointer video-play-btn rounded-full flex items-center justify-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-neutral-1000 shadow-2xl`}
-                    onClick={() => setShowVideo(true)}
-                  >
-                    <Icon
-                      variant="play"
-                      height="h-6 w-6"
-                      strokeColor="#ffffff"
-                      strokeClass="stroke-neutral-0"
-                    />
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
+      props.linkCards && (
+        <div className="flex tb-m:justify-center overflow-auto no-scrollbar db:overflow-visible scrollbar-hide flex-row mt-10 tb:mt-12 db:mt-16 gap-6 tb:flex-row  ">
+          {props.linkCards.map((card, index) => (
+            <div key={index} className={`${HDSColor(card.cardBorderClass)} ${HDSColor(card.cardBgColor)} ${HDSColor(card.cardHoverBg)} transition-all ease-out duration-300 hover:shadow-2xl hover:border-opacity-0 border rounded-2xl w-full min-w-[11.5rem] max-w-[22.313rem]`}>
+              <LinkCard
+                titleTextColor={card.titleTextColor}
+                descTextColor={card.descTextColor}
+                linkUrl={card.linkUrl}
+                iconVariant={card.iconVariant}
+                iconStrokeClass={card.iconStrokeColor}
+                iconArrowVariant={card.iconArrowVariant}
+                iconArrowStrokeClass={card.iconArrowStrokeColor}
+                title={card.title}
+                description={card.description}
+              />
+            </div>
+          ))}
         </div>
+      )
+    );
+  };
+
 
-        <div className="">
-          {LinkCardsFn(props)}
+  return (
+    <div>
+      <div className="flex flex-col-reverse tb-l:flex tb-l:flex-row tb-l:justify-between gap-4">
+        <div className={`max-w-[435px] db:max-w-[${props.contentWd ? props.contentWd : '535px'}]`}>
+          {props &&
+            tabCard(props)}
+        </div>
+        <div className="grid items-center relative db:max-w-[500px] tb:w-1/2 transition-opacity duration-700 ease-linear ">
+          <Typography
+            textStyle="h2"
+            as="h2"
+            className={`tb:hidden pb-6 ${props.titleTextColor ? HDSColor(props.titleTextColor) : 'text-neutral-1000'}`}
+          >
+            {props.title}
+          </Typography>
+          {showVideo ? (
+            <>
+              {props.videoUrl && (
+                <video
+                  id="hero_vid"
+                  controls={true}
+                  autoPlay
+                  playsInline
+                  width="500"
+                  height="500"
+                  className="tb:w-full w-full rounded-3xl"
+                  src={props.videoUrl}
+                ></video>
+              )}
+            </>
+          ) : (
+            <div className="relative">
+              {props.imgUrl && (
+                <img src={props.imgUrl} alt="Illustration" loading="lazy" />
+              )}
+              {props.videoUrl && (
+                <div
+                  className={`${props.currentPlayBtnClass} w-14 h-14 cursor-pointer video-play-btn rounded-full flex items-center justify-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-neutral-1000 shadow-2xl`}
+                  onClick={() => setShowVideo(true)}
+                >
+                  <Icon
+                    variant="play"
+                    height="h-6 w-6"
+                    strokeColor="#ffffff"
+                    strokeClass="stroke-neutral-0"
+                  />
+                </div>
+              )}
+            </div>
+          )}
         </div>
       </div>
-    );
+
+      <div className="">
+        {LinkCardsFn(props)}
+      </div>
+    </div>
+  );
 }

package/src/styles/tailwind.css

@@ -2193,6 +2193,10 @@ select{
   max-width: 430px;
 }
 
+.max-w-\[435px\]{
+  max-width: 435px;
+}
+
 .max-w-\[44\.44rem\]{
   max-width: 44.44rem;
 }
@@ -3494,10 +3498,6 @@ select{
   border-top-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
 
-.border-opacity-0{
-  --tw-border-opacity: 0;
-}
-
 .bg-amber-100{
   --tw-bg-opacity: 1;
   background-color: rgb(255 243 212 / var(--tw-bg-opacity));
@@ -12998,19 +12998,6 @@ select{
   max-width: 420px;
 }
 
-.\[\&\>p\>strong\]\:my-2>p>strong{
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.\[\&\>p\>strong\]\:mt-2>p>strong{
-  margin-top: 0.5rem;
-}
-
-.\[\&\>p\>strong\]\:pt-2>p>strong{
-  padding-top: 0.5rem;
-}
-
 .\[\&\>p\]\:pb-1>p{
   padding-bottom: 0.25rem;
 }