anima-ds-nucleus 1.0.16 → 1.0.18

package/src/components/Layout/Header/HeaderGeneral.jsx

@@ -4,6 +4,7 @@ import { Typography } from '../../Atoms/Typography/Typography';
 import { LogoHexa } from '../../Atoms/LogoHexa/LogoHexa';
 
 export const HeaderGeneral = ({
+  variant,
   logoText = 'HEXA',
   suiteText = 'Suite',
   languages = [
@@ -16,6 +17,9 @@ export const HeaderGeneral = ({
   ...props
 }) => {
   const [isLanguageOpen, setIsLanguageOpen] = useState(false);
+  const [hoveredLangCode, setHoveredLangCode] = useState(null);
+  const [isLanguageButtonHovered, setIsLanguageButtonHovered] = useState(false);
+  const isLoginVariant = variant === 'login';
 
   const currentLanguage = languages.find(lang => lang.code === currentLanguageCode) || languages[0];
 
@@ -27,64 +31,255 @@ export const HeaderGeneral = ({
   };
 
   return (
-    <header className={`w-full flex justify-between items-center bg-white ${className}`} style={{ paddingTop: '4px', paddingBottom: '4px', paddingLeft: '8px', paddingRight: '12px' }} {...props}>
-      {/* Logo */}
-      <div className="flex items-center gap-2">
-        <LogoHexa width={32} height={36} />
-        <div className="flex items-center" style={{ gap: '4px' }}>
-          <Typography variant="h6" className="font-normal" style={{ color: '#2D5C63', margin: 0 }}>
-            {logoText}
-          </Typography>
-          <Typography variant="h6" className="font-normal" style={{ color: '#2D5C63', margin: 0 }}>
-            {suiteText}
-          </Typography>
-        </div>
-      </div>
+    isLoginVariant ? (() => {
+      const { style: styleProp, ...restProps } = props;
 
-      {/* Language Selector - Solo se muestra si hay idiomas */}
-      {languages && languages.length > 0 && (
-        <div className="relative flex items-center gap-2">
-          <Icon name="LanguageIcon" variant="24-outline" size={18} style={{ color: '#374151' }} />
-          <button
-            onClick={() => setIsLanguageOpen(!isLanguageOpen)}
-            className="flex items-center gap-2 px-3 py-2 text-body-md color-gray-700 bg-white hover:bg-gray-50 rounded-lg transition-colors"
-            style={{ border: '1px solid #2D5C63' }}
-          >
-            <span>{currentLanguage.name}</span>
-            <Icon
-              name="ChevronDownIcon"
-              variant="24-outline"
-              size={16}
-              className={`transition-transform ${isLanguageOpen ? 'rotate-180' : ''}`}
-            />
-          </button>
+      return (
+        <header
+          className={`w-full flex justify-between items-center bg-white ${className}`}
+          style={{
+            boxShadow: '0px 2px 4px -1px #0000000F, 0px 4px 6px -1px #0000001A',
+            padding: '16px var(--mf-ds-grid-margin, 20px)',
+            ...styleProp,
+          }}
+          {...restProps}
+        >
+          {/* Logo */}
+          <div className="flex items-center gap-3">
+            <LogoHexa width={36} height={40} />
+            <div className="flex items-center" style={{ gap: '4px' }}>
+              <Typography
+                variant="h5"
+                className="font-normal"
+                style={{
+                  color: '#2D5C63',
+                  margin: 0,
+                  fontFamily: 'IBM Plex Sans',
+                  fontWeight: 400,
+                  fontStyle: 'normal',
+                  fontSize: '20px',
+                  lineHeight: '30px',
+                  letterSpacing: '0px',
+                }}
+              >
+                {logoText}
+              </Typography>
+              <Typography
+                variant="h5"
+                className="font-normal"
+                style={{
+                  color: '#2D5C63',
+                  margin: 0,
+                  fontFamily: 'IBM Plex Sans',
+                  fontWeight: 400,
+                  fontStyle: 'normal',
+                  fontSize: '20px',
+                  lineHeight: '30px',
+                  letterSpacing: '0px',
+                }}
+              >
+                {suiteText}
+              </Typography>
+            </div>
+          </div>
 
-          {isLanguageOpen && (
-            <>
-              <div
-                className="fixed inset-0 z-10"
-                onClick={() => setIsLanguageOpen(false)}
-              />
-              <div className="absolute right-0 mt-2 w-40 bg-white rounded-lg shadow-lg z-20 py-1" style={{ border: '1px solid #2D5C63' }}>
-                {languages.map((lang) => (
-                  <button
-                    key={lang.code}
-                    onClick={() => handleLanguageChange(lang.code)}
-                    className={`w-full text-left px-4 py-2 text-body-md hover:bg-gray-50 transition-colors ${
-                      currentLanguage.code === lang.code
-                        ? 'bg-gray-50 color-brand font-medium'
-                        : 'color-gray-700'
-                    }`}
-                  >
-                    {lang.name}
-                  </button>
-                ))}
+          {/* Language Selector - Solo se muestra si hay idiomas */}
+          {languages && languages.length > 0 && (
+            <div className="relative">
+              <div className="flex items-center" style={{ width: '150px', height: '40px', gap: '16px', opacity: 1 }}>
+                <Icon
+                  name="LanguageIcon"
+                  variant="24-outline"
+                  size={20}
+                  style={{ width: '20px', height: '20px', opacity: 1 }}
+                />
+                <button
+                  onClick={() => setIsLanguageOpen(!isLanguageOpen)}
+                  onMouseEnter={() => setIsLanguageButtonHovered(true)}
+                  onMouseLeave={() => setIsLanguageButtonHovered(false)}
+                  className="flex items-center gap-2 text-body-md text-gray-700 bg-white hover:bg-gray-50 transition-colors"
+                  style={{
+                    width: '114px',
+                    height: '40px',
+                    padding: '8px 12px 8px 16px',
+                    gap: '8px',
+                    borderRadius: '8px',
+                    border: '1px solid #38656D',
+                    background: isLanguageButtonHovered ? '#F9FAFB' : 'white',
+                    opacity: 1,
+                    color: '#374151',
+                  }}
+                >
+                  <span>{currentLanguage.name}</span>
+                  <Icon
+                    name="ChevronDownIcon"
+                    variant="24-outline"
+                    size={16}
+                    className={`transition-transform ${isLanguageOpen ? 'rotate-180' : ''}`}
+                  />
+                </button>
               </div>
-            </>
+
+              {isLanguageOpen && (
+                <>
+                  <div
+                    className="fixed inset-0 z-10"
+                    onClick={() => setIsLanguageOpen(false)}
+                  />
+                  <div
+                    className="absolute right-0 mt-2 bg-white z-20"
+                    style={{
+                      width: '224px',
+                      height: '112px',
+                      padding: '12px',
+                      borderRadius: '12px',
+                      border: '1px solid #E5E7EB',
+                      boxShadow: '0px 2px 4px -2px #0000001A, 0px 4px 6px -1px #0000001A',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      gap: '8px',
+                    }}
+                  >
+                    {languages.map((lang) => (
+                      <button
+                        key={lang.code}
+                        onClick={() => handleLanguageChange(lang.code)}
+                        className="w-full text-left transition-colors"
+                        style={{
+                          width: '200px',
+                          height: '40px',
+                          padding: 0,
+                          border: 'none',
+                          background: 'transparent',
+                        }}
+                        onMouseEnter={() => setHoveredLangCode(lang.code)}
+                        onMouseLeave={() => setHoveredLangCode(null)}
+                      >
+                        <div
+                          style={{
+                            width: '200px',
+                            height: '40px',
+                            padding: '8px',
+                            borderRadius: '8px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            gap: '16px',
+                            backgroundColor:
+                              currentLanguage.code === lang.code
+                                ? '#6D3856'
+                                : hoveredLangCode === lang.code
+                                  ? '#DDDDDD'
+                                  : 'transparent',
+                            color: currentLanguage.code === lang.code ? '#FFFFFF' : undefined,
+                          }}
+                        >
+                          <span
+                            style={{
+                              fontFamily: 'IBM Plex Sans',
+                              fontWeight: 400,
+                              fontStyle: 'normal',
+                              fontSize: '16px',
+                              lineHeight: '24px',
+                              letterSpacing: '0px',
+                              width: '144px',
+                              height: '24px',
+                              opacity: 1,
+                            }}
+                          >
+                            {lang.name}
+                          </span>
+
+                          {currentLanguage.code === lang.code && (
+                            <div
+                              style={{
+                                width: '24px',
+                                height: '24px',
+                                backgroundColor: '#FFFFFF',
+                                borderRadius: '999px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                              }}
+                            >
+                              <Icon
+                                name="CheckCircleIcon"
+                                variant="24-solid"
+                                size={24}
+                                style={{ width: '24px', height: '24px', color: '#6D3856' }}
+                              />
+                            </div>
+                          )}
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                </>
+              )}
+            </div>
           )}
+        </header>
+      );
+    })() : (
+      <header className={`w-full flex justify-between items-center bg-white ${className}`} style={{ paddingTop: '4px', paddingBottom: '4px', paddingLeft: '8px', paddingRight: '12px' }} {...props}>
+        {/* Logo */}
+        <div className="flex items-center gap-2">
+          <LogoHexa width={32} height={36} />
+          <div className="flex items-center" style={{ gap: '4px' }}>
+            <Typography variant="h6" className="font-normal" style={{ color: '#2D5C63', margin: 0 }}>
+              {logoText}
+            </Typography>
+            <Typography variant="h6" className="font-normal" style={{ color: '#2D5C63', margin: 0 }}>
+              {suiteText}
+            </Typography>
+          </div>
         </div>
-      )}
-    </header>
+
+        {/* Language Selector - Solo se muestra si hay idiomas */}
+        {languages && languages.length > 0 && (
+          <div className="relative flex items-center gap-2">
+            <Icon name="LanguageIcon" variant="24-outline" size={18} style={{ color: '#374151' }} />
+            <button
+              onClick={() => setIsLanguageOpen(!isLanguageOpen)}
+              className="flex items-center gap-2 px-3 py-2 text-body-md color-gray-700 bg-white hover:bg-gray-50 rounded-lg transition-colors"
+              style={{ border: '1px solid #2D5C63' }}
+            >
+              <span>{currentLanguage.name}</span>
+              <Icon
+                name="ChevronDownIcon"
+                variant="24-outline"
+                size={16}
+                className={`transition-transform ${isLanguageOpen ? 'rotate-180' : ''}`}
+              />
+            </button>
+
+            {isLanguageOpen && (
+              <>
+                <div
+                  className="fixed inset-0 z-10"
+                  onClick={() => setIsLanguageOpen(false)}
+                />
+                <div className="absolute right-0 mt-2 w-40 bg-white rounded-lg shadow-lg z-20 py-1" style={{ border: '1px solid #2D5C63' }}>
+                  {languages.map((lang) => (
+                    <button
+                      key={lang.code}
+                      onClick={() => handleLanguageChange(lang.code)}
+                      className={`w-full text-left px-4 py-2 text-body-md hover:bg-gray-50 transition-colors ${
+                        currentLanguage.code === lang.code
+                          ? 'bg-gray-50 color-brand font-medium'
+                          : 'color-gray-700'
+                      }`}
+                    >
+                      {lang.name}
+                    </button>
+                  ))}
+                </div>
+              </>
+            )}
+          </div>
+        )}
+      </header>
+    )
   );
 };
 

package/src/components/Layout/Header/HeaderGeneral.stories.jsx

@@ -62,3 +62,37 @@ export const SinIdiomas = {
   ),
 };
 
+export const Login = {
+  render: () => (
+    <HeaderGeneral
+      variant="login"
+      logoText="HEXA"
+      suiteText="Suite"
+      languages={[
+        { code: 'es-AR', name: 'Español' },
+        { code: 'en', name: 'English' },
+      ]}
+      currentLanguageCode="es-AR"
+      onLanguageChange={(langCode) => console.log('Idioma cambiado:', langCode)}
+    />
+  ),
+};
+
+export const LoginConMargenCustom = {
+  render: () => (
+    <div style={{ '--mf-ds-grid-margin': '32px' }}>
+      <HeaderGeneral
+        variant="login"
+        logoText="HEXA"
+        suiteText="Suite"
+        languages={[
+          { code: 'es-AR', name: 'Español' },
+          { code: 'en', name: 'English' },
+        ]}
+        currentLanguageCode="en"
+        onLanguageChange={(langCode) => console.log('Idioma cambiado:', langCode)}
+      />
+    </div>
+  ),
+};
+

package/src/components/Layout/Header/HeaderPoint.jsx

@@ -21,8 +21,8 @@ const FONT_SIZE_BASE = '14px';
 const LINE_HEIGHT_BASE = '20px';
 
 // Constantes de breakpoints
-const BREAKPOINT_MOBILE_MAX = '480px';
-const BREAKPOINT_DESKTOP_MIN = '481px';
+const BREAKPOINT_MOBILE_MAX = '1024px';
+const BREAKPOINT_DESKTOP_MIN = '1025px';
 const BREAKPOINT_TABLET_MAX = '700px';
 
 // Constantes de valores por defecto
@@ -127,7 +127,7 @@ export const HeaderPoint = ({
         .header-actions-wrapper {
           flex-shrink: 0;
         }
-        /* Estilos para rango intermedio (481px - 700px) */
+        /* Estilos para rango intermedio (1025px - 700px) - No aplica con nuevo breakpoint */
         @media (min-width: ${BREAKPOINT_DESKTOP_MIN}) and (max-width: ${BREAKPOINT_TABLET_MAX}) {
           .header-desktop-layout {
             gap: 0.5rem;

package/src/components/Layout/NavPoint/NavPoint.jsx

@@ -1,6 +1,21 @@
 import { Icon } from '../../Atoms/Icon/Icon';
 import { Typography } from '../../Atoms/Typography/Typography';
 
+// Constantes de diseño reutilizables
+const ICON_SIZE = 24;
+const ICON_COLOR_ACTIVE = '#FFFFFF';
+const ICON_COLOR_INACTIVE = '#374151';
+const BACKGROUND_COLOR_ACTIVE = '#2D5C63';
+const TEXT_COLOR_ACTIVE = '#FFFFFF';
+const TEXT_COLOR_INACTIVE = '#374151';
+const NAV_HEIGHT = '80px'; // Altura fija para garantizar espacio para icono + label + padding
+const BORDER_RADIUS_TOP = '16px';
+const SHADOW_COLOR = 'rgba(0, 0, 0, 0.1)';
+
+// Constantes de breakpoints
+const BREAKPOINT_MOBILE_MAX = '1024px';
+const BREAKPOINT_DESKTOP_MIN = '1025px';
+
 const DEFAULT_ITEMS = [
   { id: 'inicio', label: 'Inicio', icon: 'Squares2X2Icon' },
   { id: 'docs', label: 'Docs', icon: 'DocumentTextIcon' },
@@ -15,91 +30,96 @@ export const NavPoint = ({
   className = '',
   ...props
 }) => {
-  const shouldCompress = items.length >= 5;
-  
+  const handleItemClick = (itemId) => {
+    if (onItemClick) {
+      onItemClick(itemId);
+    }
+  };
+
+  const getBorderRadius = (isActive) => {
+    if (!isActive) return '0';
+    // Redondear ambas esquinas superiores cuando la pestaña está activa
+    return `${BORDER_RADIUS_TOP} ${BORDER_RADIUS_TOP} 0 0`;
+  };
+
   return (
-    <nav
-      className={`fixed bottom-0 left-0 right-0 z-50 md:hidden bg-white rounded-t-lg shadow-md nav-point ${shouldCompress ? 'compressed' : ''} ${className}`}
-      style={{ 
-        boxShadow: '0 -2px 8px rgba(0, 0, 0, 0.1)',
-        borderRadius: '16px 16px 0 0',
-        overflow: 'hidden'
-      }}
-      {...props}
-    >
+    <>
       <style>{`
         .nav-point {
-          border-radius: 16px 16px 0 0 !important;
+          border-radius: ${BORDER_RADIUS_TOP} ${BORDER_RADIUS_TOP} 0 0 !important;
           overflow: hidden !important;
+          min-height: ${NAV_HEIGHT} !important;
+          height: ${NAV_HEIGHT} !important;
+        }
+        /* Mostrar NavPoint de 0px a 1024px */
+        @media (max-width: ${BREAKPOINT_MOBILE_MAX}) {
+          .nav-point {
+            display: block !important;
+          }
+        }
+        /* Ocultar NavPoint desde 1025px en adelante */
+        @media (min-width: ${BREAKPOINT_DESKTOP_MIN}) {
+          .nav-point {
+            display: none !important;
+          }
         }
         .nav-point > div {
           overflow: hidden;
+          height: 100%;
+        }
+        .nav-point-item {
+          min-width: 0;
+          min-height: ${NAV_HEIGHT};
+          height: 100%;
         }
         .nav-point-text {
-          display: block;
-          transition: opacity 0.2s, max-height 0.2s;
+          display: block !important;
+          visibility: visible !important;
+          opacity: 1 !important;
+          max-height: none !important;
           overflow: hidden;
           white-space: nowrap !important;
           text-overflow: ellipsis;
           width: 100%;
           text-align: center;
         }
-        .nav-point-item {
-          min-width: 0;
-        }
-        /* Ocultar textos solo cuando hay muchos items (5+) y pantalla pequeña para evitar desorden */
-        @media (max-width: 480px) {
-          .nav-point.compressed .nav-point-text {
-            display: none !important;
-            max-height: 0;
-            opacity: 0;
-          }
-          .nav-point.compressed .nav-point-item {
-            padding-left: 0.5rem !important;
-            padding-right: 0.5rem !important;
-          }
-        }
-        /* Ocultar textos solo en pantallas muy pequeñas (< 320px) donde definitivamente no caben */
-        @media (max-width: 320px) {
-          .nav-point-text {
-            display: none !important;
-            max-height: 0;
-            opacity: 0;
-          }
-          .nav-point-item {
-            padding-left: 0.5rem !important;
-            padding-right: 0.5rem !important;
-          }
-        }
       `}</style>
-      <div className="flex items-stretch" style={{ overflow: 'hidden' }}>
+      <nav
+        className={`fixed bottom-0 left-0 right-0 z-50 bg-white rounded-t-lg shadow-md nav-point ${className}`}
+        style={{ 
+          boxShadow: `0 -2px 8px ${SHADOW_COLOR}`,
+          borderRadius: `${BORDER_RADIUS_TOP} ${BORDER_RADIUS_TOP} 0 0`,
+          overflow: 'hidden',
+          minHeight: NAV_HEIGHT,
+          height: NAV_HEIGHT,
+        }}
+        {...props}
+      >
+        <div className="flex items-stretch h-full" style={{ overflow: 'hidden' }}>
         {items.map((item, index) => {
           const isActive = activeItem === item.id;
-          const isFirst = index === 0;
-          const isLast = index === items.length - 1;
+          
           return (
             <button
               key={item.id}
-              onClick={() => onItemClick && onItemClick(item.id)}
-              className="flex flex-col items-center justify-center px-4 py-3 transition-all duration-200 cursor-pointer flex-1 relative nav-point-item"
+              onClick={() => handleItemClick(item.id)}
+              className="flex flex-col items-center justify-center px-4 py-3 transition-colors duration-200 cursor-pointer flex-1 relative nav-point-item"
               style={{
-                backgroundColor: isActive ? '#2D5C63' : 'transparent',
-                borderRadius: isActive 
-                  ? (isFirst ? '16px 0 0 0' : isLast ? '0 16px 0 0' : '0')
-                  : '0',
+                backgroundColor: isActive ? BACKGROUND_COLOR_ACTIVE : 'transparent',
+                borderRadius: getBorderRadius(isActive),
               }}
             >
               <Icon
                 name={item.icon}
                 variant="24-outline"
-                size={24}
-                style={{ color: isActive ? '#FFFFFF' : '#374151' }}
+                size={ICON_SIZE}
+                style={{ color: isActive ? ICON_COLOR_ACTIVE : ICON_COLOR_INACTIVE }}
               />
               <Typography
                 variant="body-sm"
                 className="mt-1 font-medium nav-point-text"
                 style={{ 
-                  color: isActive ? '#FFFFFF' : '#374151',
+                  color: isActive ? TEXT_COLOR_ACTIVE : TEXT_COLOR_INACTIVE,
                   whiteSpace: 'nowrap',
                   overflow: 'hidden',
                   textOverflow: 'ellipsis',
@@ -111,8 +131,9 @@ export const NavPoint = ({
             </button>
           );
         })}
-      </div>
-    </nav>
+        </div>
+      </nav>
+    </>
   );
 };
 

package/src/components/Layout/SaludoConFechaDashboard/SaludoConFechaDashboard.jsx

@@ -170,7 +170,6 @@ export const SaludoConFechaDashboard = ({
             // Responsive: ocupar el ancho disponible sin generar scroll horizontal,
             // manteniendo el ancho Figma como máximo.
             width: '100%',
-            maxWidth: '1250px',
             minHeight: '74px',
             gap: '24px',
             opacity: 1,