hds-web 1.2.3 → 1.2.5

package/package.json

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

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

@@ -63,7 +63,7 @@ const Buttonclasses = {
   'secondaryLink': {
     'default': {
       'base': 'db:w-fit tb:w-fit w-full  justify-center ',
-      'hover': 'hover:text-neutral-900 ',
+      'hover': '',
       'focus': 'focus:text-neutral-900 focus:outline-none focus:shadow-[0px_0px_0px_4px_#E5E7EB]',
     },
     'disabled': 'text-neutral-300',

package/src/HDS/components/Cards/Feedback/feedback.js

@@ -8,7 +8,7 @@ export default function FeedbackCard(props) {
   return (
     <div className='bg-neutral-0 rounded-3xl shadow p-6 tb-l:p-10'>
       <div className='pb-8'>
-        <img src={props.brandImgUrl} alt={props.brandImgAlt} />
+        <img src={props.brandImgUrl} alt={props.brandImgAlt} className=' h-8 '/>
       </div>
       <div className="pb-10">
         <Typography textStyle="quote" className='text-neutral-1000'>{props.description}</Typography>

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

@@ -9,9 +9,7 @@ export default function TableA(props) {
         children
 
     } = props;
-    console.log(tableValue.length);
-    const tableLength = tableValue.length;
-    
+    const firstObjectLength = Object.keys(tableValue[0]).length;
     return (
         <div className=" ">
             <div className="sm:flex sm:items-center ">
@@ -19,51 +17,50 @@ export default function TableA(props) {
                     <h1 className="text-base font-semibold leading-6 text-gray-900">{head}</h1>
                     <p className="mt-2 text-sm text-gray-700">{description}</p>
                 </div>
-                
-            </div>
 
+            </div>
             <div>
-                <div className="border bg-neutral-50 border-neutral-100 rounded-2xl">
+                <div className="border border-neutral-100 rounded-2xl">
                     <table className="min-w-full divide-y divide-neutral-100 ">
-                       <div>
-
-
                         <thead>
                             <tr className='divide-x divide-neutral-100'>
-                                {Object.keys(tableValue[0]).map((key) => (
+                                {Object.keys(tableValue[0]).map((key, index) => (
                                     <th
                                         key={key}
                                         scope="col"
-                                        className="text-left sm:table-cell"
+                                        className={(index === 0) ? 'rounded-tl-2xl text-left sm:table-cell bg-neutral-50' : 'text-left sm:table-cell bg-neutral-50 rounded-tr-2xl'}
                                     >
                                         <Typography className='p-6' textStyle='body3c-bold'>{key}</Typography>
-                                        
+
                                     </th>
                                 ))}
+
                             </tr>
                         </thead>
-                      
-                        <tbody className="divide-y rounded-b-3xl divide-neutral-100 bg-white">
-                            {tableValue.map((value,index) => (
-                                <tr key={index} className='divide-x divide-neutral-100'>
+                        <tbody className="divide-y rounded-b-3xl divide-neutral-100 ">
+                            {tableValue.slice(1).map((value, index) => (
+                                <tr key={index} className='divide-x divide-neutral-100 '>
                                     {Object.keys(value).map((key, index2) => (
+
+
+
                                         <td
-                                             key={index2+index}
+                                            key={index2 + index}
                                             className={
-                                                'p-6 bg-neutral-0 ' + ((index == `${tableValue.length-1}`) ? 'rounded-3xl' : '')
+                                                'p-6 ' + ((index == `${tableValue.length - 2}`) ? 'rounded-3xl' : '')
                                             }
                                         >
-                                            
-                                            <Typography textStyle='body3c-bold' className='bg-transparent text-neutral-800'>{key}</Typography>
-                                            <Typography textStyle='body3' className='text-neutral-800 mt-2'>Endless hours spent writing boilerplate code, resolvers, or mapping logic.</Typography>
+
+                                            <Typography textStyle='body3c-bold' className='bg-transparent text-neutral-800'>{key.toString()}</Typography>
+                                            <Typography textStyle='body3' className='text-neutral-800 mt-2'>{value[key].toString()}</Typography>
 
                                         </td>
+
                                     ))}
                                 </tr>
                             ))}
                         </tbody>
-                        </div>
-                        </table>
+                    </table>
                 </div>
             </div>
         </div>

package/src/HDS/helpers/Media/mediabox.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Icon } from '../../components/common-components/Icon';
 
-const MediaViewer = ({ img_url, video_url, video_poster, width }) => {
+export default function MediaViewer ({ img_url, video_url, video_poster, width }){
   const [isVideoPlaying, setIsVideoPlaying] = useState(false);
 
   const handleVideoClick = () => {
@@ -16,7 +16,7 @@ const MediaViewer = ({ img_url, video_url, video_poster, width }) => {
     <div>
       {img_url && (
         <div className='flex justify-center'>
-        <img src={img_url} alt="Image" style={{ width }} onClick={handleVideoClick} />
+        <img src={img_url} alt="Image" className='rounded-2xl' onClick={handleVideoClick} />
         </div>
       )}
 
@@ -40,9 +40,8 @@ const MediaViewer = ({ img_url, video_url, video_poster, width }) => {
               <img
                 src={video_poster}
                 alt="Video Poster"
-                style={{ width }}
                 onClick={handleVideoClick}
-                className="cursor-pointer"
+                className="cursor-pointer rounded-2xl"
               />
               </div>
             </div>
@@ -73,4 +72,4 @@ const MediaViewer = ({ img_url, video_url, video_poster, width }) => {
   );
 };
 
-export default MediaViewer;
+

package/src/HDS/helpers/index.js

@@ -1 +1,2 @@
-export * from './Translations';
+export * from './Translations';
+export * from './Media';

package/src/HDS/modules/navCard/navCard.js

@@ -1,4 +1,4 @@
-import { React, useState } from 'react';
+import { React, useState, useEffect } from 'react';
 import { MediaBox } from '../../helpers/Media';
 import { Typography } from '../../foundation/Typography';
 import { HDSButton } from '../../components/Buttons';
@@ -23,7 +23,7 @@ const tabCard = (tabContent) => (
                 size='sm'
                 rightAnimatedArrow={true}
                 rightAnimatedArrowColor='#1E56E3'
-                animatedHoverStroke='group-hover:stroke-neutral-900'
+                animatedHoverStroke='group-hover:stroke-blue-600'
                 className='flex'
                 btnTextColorClass='text-blue-600'
             />
@@ -40,13 +40,20 @@ const tabCard = (tabContent) => (
 )
 
 export default function NavCard(props) {
-    const tabNames = Object.keys(props.tabContent);
-    const [activeTab, setActiveTab] = useState(tabNames[0]);
-    
+    const [activeTab, setActiveTab] = useState('');
+  
+    useEffect(() => {
+      if (props.tabContent) {
+        const tabNames = Object.keys(props.tabContent);
+        setActiveTab(tabNames[0]);
+      }
+    }, [props.tabContent]);
+  
     function handleTabClick(tab) {
-        setActiveTab(tab.name);
-        // Perform any other actions based on the clicked tab
+      setActiveTab(tab.name);
+      // Perform any other actions based on the clicked tab
     }
+  
     return (
         <>
             {props.navTabs &&

package/src/styles/tailwind.css

@@ -2136,6 +2136,19 @@ select {
   border-top-right-radius: 0.375rem;
 }
 
+.rounded-t-lg {
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+}
+
+.rounded-tl-2xl {
+  border-top-left-radius: 1rem;
+}
+
+.rounded-tr-2xl {
+  border-top-right-radius: 1rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -7374,15 +7387,38 @@ select {
   margin-left: 0px;
 }
 
+.first\:rounded-full:first-child {
+  border-radius: 9999px;
+}
+
+.first\:rounded-t-lg:first-child {
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+}
+
 .first\:bg-blue-500:first-child {
   --tw-bg-opacity: 1;
   background-color: rgb(57 112 253 / var(--tw-bg-opacity));
 }
 
+.first\:bg-green-400:first-child {
+  --tw-bg-opacity: 1;
+  background-color: rgb(57 218 170 / var(--tw-bg-opacity));
+}
+
 .last\:mr-0:last-child {
   margin-right: 0px;
 }
 
+.last\:rounded-full:last-child {
+  border-radius: 9999px;
+}
+
+.last\:rounded-b-2xl:last-child {
+  border-bottom-right-radius: 1rem;
+  border-bottom-left-radius: 1rem;
+}
+
 .last\:border-b-0:last-child {
   border-bottom-width: 0px;
 }
@@ -7569,11 +7605,6 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.hover\:text-neutral-900:hover {
-  --tw-text-opacity: 1;
-  color: rgb(17 25 39 / var(--tw-text-opacity));
-}
-
 .hover\:shadow:hover {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -7937,6 +7968,10 @@ select {
   stroke: #111927;
 }
 
+.group:hover .group-hover\:stroke-blue-600 {
+  stroke: #1E56E3;
+}
+
 .group:hover .group-hover\:opacity-30 {
   opacity: 0.3;
 }