hds-web 1.21.3 → 1.21.5

package/package.json

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

package/src/HDS/components/Cards/Announcement/announcementMd.js

@@ -45,7 +45,7 @@ export default function AnnouncementMd(props) {
             <a href={props.linkUrl} className="block pb-1 tb:pb-0">
               <Typography textStyle="body2-medium" className={`${linkTextClass} group flex items-center [&>div]:inline-block`}>
                 {props.linkText}
-                <Icon height={' hidden tb:block w-6 h-6 stroke-[2px] ml-3 transition ease-in-out group-hover:translate-x-[5px]'} variant='arrownarrowright' strokeClass='stroke-blue-500' />
+                <Icon height={' hds-hidden tb:block w-6 h-6 stroke-[2px] ml-3 transition ease-in-out group-hover:translate-x-[5px]'} variant='arrownarrowright' strokeClass='stroke-blue-500' />
               </Typography>
             </a>
           </div>

package/src/HDS/components/Cards/StoryCard/storyxl.js

@@ -6,7 +6,7 @@ import { Icon } from "../../common-components";
 export default function StoryCardXL(props) {
     return (
         <>
-            <div className="flex flex-col-reverse px-6 py-10 db-s:px-0 db-s:py-0 db-s:flex-row db:gap-[132px]">
+            <div className="flex flex-col-reverse px-6 py-10 db-s:px-0 db-s:py-0 db-s:flex-row db:gap-2 max-w-7xl">
 
                 <div className="flex flex-col db-s:pl-20 db-s:pt-20 db-s:pb-[74px]">
                     {
@@ -30,18 +30,18 @@ export default function StoryCardXL(props) {
                                     (
                                         <div>
                                             <div className="flex flex-col gap-4">
-                                        {props.heroList.map((value, index)=>(
-                                            <div key={index} className='flex gap-5'>
-                                                <Icon
-                                                    height='h-8 w-8 stroke-2' variant={value.heroIconVariant} strokeClass='stroke-neutral-800' />
-                                                <Typography
-                                                    textStyle='sub2' className='text-neutral-700' >
-                                                    {value.heroListTitle}
-                                                </Typography>
-                                            </div>
+                                                {props.heroList.map((value, index) => (
+                                                    <div key={index} className='flex gap-5'>
+                                                        <Icon
+                                                            height='h-8 w-8 stroke-2' variant={value.heroIconVariant} strokeClass='stroke-neutral-800' />
+                                                        <Typography
+                                                            textStyle='sub2' className='text-neutral-700' >
+                                                            {value.heroListTitle}
+                                                        </Typography>
+                                                    </div>
+
+                                                ))
 
-                                        ))
-                                                   
 
                                                 }
 
@@ -122,18 +122,18 @@ StoryCardXL.defaultProps = {
     CTA: {
         text: 'Button Label',
     },
-    heroList:[
+    heroList: [
         {
-            heroIconVariant:'calendar',
-            heroListTitle:'100 days from concept to production'
+            heroIconVariant: 'calendar',
+            heroListTitle: '100 days from concept to production'
         },
         {
-            heroIconVariant:'database03',
-            heroListTitle:'Vastly improved access to relevant data'
+            heroIconVariant: 'database03',
+            heroListTitle: 'Vastly improved access to relevant data'
         },
         {
-            heroIconVariant:'settings01',
-            heroListTitle:'Simpler data and API management'
+            heroIconVariant: 'settings01',
+            heroListTitle: 'Simpler data and API management'
         }
     ]
     // video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1654760488/samples/sea-turtle.mp4'

package/src/HDS/components/Carousels/customerStories.js

@@ -2,15 +2,13 @@ import React, { useState, useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Icon } from '../common-components';
 
-const Carousels = ({ components, variants }) => {
+export default function Carousels ({ components, variants }) {
     const [FlowDirection, setFlowDirection] = useState(true);
     const [CenterId, setCenterId] = useState(0);
     const [LeftId, setLeftId] = useState(components.length - 1);
     const [RightId, setRightId] = useState(1);
-
     const [activeSlide, setActiveSlide] = useState(0);
     const [isAutoSliding, setIsAutoSliding] = useState(true);
-
     const handleAutoSlide = () => {
         if (isAutoSliding) {
             nextBtn();
@@ -18,12 +16,10 @@ const Carousels = ({ components, variants }) => {
     };
 
     useEffect(() => {
-        const intervalId = setInterval(handleAutoSlide, 5000); 
-        return () => clearInterval(intervalId); 
+        const intervalId = setInterval(handleAutoSlide, 3000);
+        return () => clearInterval(intervalId);
     }, [CenterId, isAutoSliding]);
 
-    
-
     const nextBtn = () => {
         if (LeftId === components.length - 1) {
             setLeftId(0);
@@ -46,7 +42,6 @@ const Carousels = ({ components, variants }) => {
 
         setFlowDirection(true);
     };
-
     const prevBtn = () => {
         setFlowDirection(false);
         if (LeftId === 0) {
@@ -76,15 +71,17 @@ const Carousels = ({ components, variants }) => {
     const handleMouseLeave = () => {
         setIsAutoSliding(true);
     };
+    if(components){
 
+    
     return (
-        <div 
-        className='h-full'
-        onMouseEnter={handleMouseEnter} 
-        onMouseLeave={handleMouseLeave}
+        <div
+            className='h-full'
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
         >
-            <div 
-            className="hidden db-s:grid relative h-full"
+            <div
+                className="hidden db-s:grid relative h-full"
             >
                 <motion.div className="  ">
                     <AnimatePresence initial={false}>
@@ -130,7 +127,7 @@ const Carousels = ({ components, variants }) => {
                     ))}
                 </div> */}
             </div>
-            <div className="mt-12 ">
+            <div className="hidden db-s:flex mt-10 ">
                 <div className="gap-4 w-full h-full flex justify-center">
                     <motion.button
                         initial={{ opacity: 0, scale: 0 }}
@@ -162,19 +159,18 @@ const Carousels = ({ components, variants }) => {
                         <Icon height={'h-6 w-6'} variant={'chevronright'} strokeClass='stroke-neutral-800' />
                     </motion.button>
                 </div>
-            </div>   
-            <div className='db-s:hidden flex flex-row overflow-scroll scrollbar-hide gap-2 mb-m:gap-4 tb-m:gap-10'>
+            </div>
+            <div className='db-s:hidden flex flex-row overflow-scroll pb-10 pt-4 tb:pb-16 tb:pt-10 px-4 scrollbar-hide gap-2 mb-m:gap-4 tb-m:gap-10'>
                 {components.map((component, index) => (
                     <React.Fragment key={index}>
-                        <div className='tb-xl:min-w-[800px] tb-l:min-w-[700px] tb:min-w-[500px] mb-s:min-w-[350px]'>
-                        {component}
+                        <div className='tb-l:min-w-[700px] tb:min-w-[500px] mb-s:min-w-[350px]'>
+                            {component}
                         </div>
                     </React.Fragment>
                 ))}
             </div>
         </div>
     );
+    }
+    else return <></>;
 };
-
-
-export default Carousels;

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

@@ -5,7 +5,6 @@ import { HDSButton } from "../Buttons";
 import { HDSColor } from "../../foundation/ColorPalette";
 import { Icon } from "../common-components";
 import { LinkCard } from '../Cards/Link';
-import { v4 as uuidv4 } from 'uuid';
 
 export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize }) {
   const [valumeMuteIcon, setValumeMuteIcon] = useState("volumex");
@@ -144,8 +143,8 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
     return (
       heroData.linkCards && (
         <div className="flex mt-16 px-20 pb-20 gap-6 justify-center">
-          {heroData.linkCards.map((card) => (
-            <div key={uuidv4()} className="w-full">
+          {heroData.linkCards.map((card, index) => (
+            <div key={index} className="w-full">
               <LinkCard
                 linkUrl={card.linkUrl}
                 cardBgColor={card.cardBgColor}

package/src/HDS/components/Tables/tableA.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { v4 as uuidv4 } from 'uuid';
 export default function TableA(props) {
     const {
         head,

package/src/HDS/components/Tables/tableC.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { v4 as uuidv4 } from 'uuid';
 import { Typography } from '../../foundation/Typography';
 export default function TableA(props) {
     const {

package/src/styles/tailwind.css

@@ -10926,6 +10926,10 @@ select{
     padding-bottom: 2.5rem;
   }
 
+  .tb\:pb-16{
+    padding-bottom: 4rem;
+  }
+
   .tb\:pb-8{
     padding-bottom: 2rem;
   }
@@ -11704,12 +11708,6 @@ select{
   }
 }
 
-@media (min-width: 970px){
-  .tb-xl\:min-w-\[800px\]{
-    min-width: 800px;
-  }
-}
-
 @media (min-width: 1024px){
   .lg\:flex{
     display: flex;
@@ -11997,6 +11995,10 @@ select{
     gap: 0px;
   }
 
+  .db\:gap-2{
+    gap: 0.5rem;
+  }
+
   .db\:gap-24{
     gap: 6rem;
   }