hds-web 1.1.8 → 1.1.9

package/package.json

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

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

@@ -28,7 +28,7 @@ const Buttonclasses = {
   },
   'tonal': {
     'default': {
-      'base': 'db:w-fit tb:w-fit w-full  justify-center bg-blue-200 text-blue-600',
+      'base': 'db:w-fit tb:w-fit w-full justify-center bg-blue-200 text-blue-600',
       'hover': 'hover:bg-blue-700 hover:text-neutral-0 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-300',
       'focus': 'focus:bg-blue-100 focus:text-blue-600 focus:shadow-[0px_0px_0px_4px_#DFE8FF] focus:outline-none',
     },

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

@@ -26,7 +26,7 @@ export default function TalkCard(props) {
                     />
 
                     <Typography className='my-2 text-blue-800' textStyle='h5'>{props.title}</Typography>
-                    {props.para && <Typography className='my-2 text-neutral-700 [&>p]:pb-2 [&>p]:last:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 [&>ul>li]:last:pb-0' textStyle='body1'>
+                    {props.para && <Typography className='text-neutral-700 [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 [&>ul>li]:last:pb-0' textStyle='body1'>
                       <ReactMarkdown>{props.para}</ReactMarkdown>
                     </Typography>}
 

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

@@ -9,6 +9,19 @@ import { v4 as uuidv4 } from 'uuid';
 
 export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize }) {
   const [valumeMuteIcon, setValumeMuteIcon] = useState("volumex");
+
+  const scrollToNextDiv = (element) => {
+    const nextDiv = element.nextElementSibling;
+    if (nextDiv) {
+      nextDiv.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+  
+  const handleClick = (event) => {
+    const arrowIcon = event.target;
+    const arrowContainer = arrowIcon.parentNode;
+    scrollToNextDiv(arrowContainer);
+  };
   const videoMute = () => {
     if (heroData.video_url) {
       const videoEle = document.getElementById("hero_vid");
@@ -95,34 +108,34 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
   const heroButton = () => (
     heroData.buttons && (
       <div className={" gap-6 flex items-center tb:justify-center tb-l:justify-start db:justify-start pt-6" + ((heroData.video_url) ? " tb:justify-center" : " tb:justify-start")}>
-        
-        
-            {heroData.buttons[0] &&
-            <HDSButton
+
+
+        {heroData.buttons[0] &&
+          <HDSButton
             type="secondary"
             btnTextColorClass={HDSColor('text-neutral-0')}
-              leftIconVariant='none'
-              rightIconVariant='none'
-              label={heroData.buttons[0].cta_text}
-              state='default'
-              size='lg'
-              rightAnimatedArrow='true'
-              rightAnimatedArrowColor='#ffffff'
-            />
-      }
-            {heroData.buttons[1] && <HDSButton
-            type="primaryLink"
-            btnTextColorClass={HDSColor('text-neutral-0')}
-              leftIconVariant='none'
-              rightIconVariant='none'
-              label={heroData.buttons[1].cta_text}
-              state='default'
-              size='lg'
-              rightAnimatedArrow='true'
-              rightAnimatedArrowColor='#ffffff'
-            />}
-      
-        
+            leftIconVariant='none'
+            rightIconVariant='none'
+            label={heroData.buttons[0].cta_text}
+            state='default'
+            size='lg'
+            rightAnimatedArrow='true'
+            rightAnimatedArrowColor='#ffffff'
+          />
+        }
+        {heroData.buttons[1] && <HDSButton
+          type="primaryLink"
+          btnTextColorClass={HDSColor('text-neutral-0')}
+          leftIconVariant='none'
+          rightIconVariant='none'
+          label={heroData.buttons[1].cta_text}
+          state='default'
+          size='lg'
+          rightAnimatedArrow='true'
+          rightAnimatedArrowColor='#ffffff'
+        />}
+
+
       </div>
     )
   )
@@ -158,7 +171,7 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
       </div>
     )
   )
-  
+
   const videoGradientBg = HDSColor(heroData.video_gradient_bg);
   return (
     <div className="">
@@ -188,12 +201,12 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
 
                 {
                   heroData.description && (
-                    <Typography textStyle="sub1" className="tb-l:text-center db:text-left text-neutral-0 [&>*]:mb-8 last:[&>*]:mb-0">{heroData.description}</Typography>
+                    <Typography textStyle="sub1" className="db:text-left text-neutral-0 [&>*]:mb-8 last:[&>*]:mb-0">{heroData.description}</Typography>
                   )
                 }
                 {heroButton(heroData)}
 
-                
+
               </div>
               {imageCard(heroData)}
             </div>
@@ -203,9 +216,12 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
           </div>
         </div>
         {
-          scrollArrow && (
-            <>
-            </>
+          heroData.scrollArrow && (
+            <div className="flex justify-center flex-row" onClick={(e) => scrollToNextDiv(e.currentTarget)}>
+              <div className="flex bg-neutral-0 shadow-md -mt-5 animate-bounce justify-center rounded-full items-center w-12 h-12" >
+                <Icon variant='chevrondowndouble' strokeClass='stroke-neutral-800' height='h-6 w-6' />
+              </div>
+            </div>
           )
         }
       </div>

package/src/styles/tailwind.css

@@ -9056,6 +9056,10 @@ select {
   padding-bottom: 0px;
 }
 
+.last\:\[\&\>p\]\:pb-0>p:last-child {
+  padding-bottom: 0px;
+}
+
 .\[\&\>span\]\:pb-2>span {
   padding-bottom: 0.5rem;
 }