anima-ds-nucleus 1.0.13 → 1.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anima-ds-nucleus",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "Anima Design System - A comprehensive React component library",
   "author": "Nucleus Labs <ipvasallo@nucleus.com.ar>",
   "license": "UNLICENSED",

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

@@ -48,7 +48,7 @@ export const HeaderCore = ({
   notificationMobileButtonStyle,
   notificationMobileIconWrapperClassName = '',
   notificationMobileIconWrapperStyle,
-  notificationMobileIconSize = 24,
+  notificationMobileIconSize = 18,
   notificationMobileIconStrokeWidth = 1.5,
   notificationMobileIconStyle,
   showNotificationBadgeOnMobile = false,
@@ -80,6 +80,7 @@ export const HeaderCore = ({
   const [shouldRenderSidebarMobile, setShouldRenderSidebarMobile] = useState(false);
   const [internalSidebarActiveItem, setInternalSidebarActiveItem] = useState(undefined);
   const closeTimeoutRef = useRef(null);
+  const bellIconName = notificationCount > 0 ? 'BellAlertIcon' : 'BellIcon';
 
   const openSidebarMobile = () => {
     if (closeTimeoutRef.current) {
@@ -278,8 +279,8 @@ export const HeaderCore = ({
                     ...(notificationDesktopIconWrapperStyle || {}),
                   }}
               >
-                  <Icon 
-                    name="BellIcon" 
+                <Icon 
+                    name={bellIconName} 
                   variant="24-outline" 
                     size={notificationDesktopIconSize}
                     strokeWidth={notificationDesktopIconStrokeWidth}
@@ -434,24 +435,24 @@ export const HeaderCore = ({
                   <span
                     className={`relative inline-block ${notificationMobileIconWrapperClassName}`}
                     style={{
-                      width: '32px',
-                      height: '32px',
+                      width: '24px',
+                      height: '24px',
                       opacity: 1,
                       ...(notificationMobileIconWrapperStyle || {}),
                     }}
                 >
-                    <Icon 
-                      name="BellIcon" 
+                  <Icon 
+                      name={bellIconName} 
                     variant="24-outline" 
                       size={notificationMobileIconSize}
                       strokeWidth={notificationMobileIconStrokeWidth}
                       className={`color-gray-600 ${notificationIconClassName}`}
                       style={{
-                        width: '22.163536071777344px',
-                        height: '24px',
+                        width: '17.75112533569336px',
+                        height: '18px',
                         position: 'absolute',
-                        top: '4px',
-                        left: '4.92px',
+                        top: '3px',
+                        left: '3.12px',
                         opacity: 1,
                         transform: 'rotate(0deg)',
                         ...(notificationIconStyle || {}),

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

@@ -31,6 +31,20 @@ export const SinNotificaciones = {
   ),
 };
 
+export const ConNotificaciones = {
+  render: () => (
+    <HeaderCore
+      searchPlaceholder="Buscar empleados, reportes, configuraciones..."
+      userName="Maria García Alonso"
+      userAvatar="https://i.pravatar.cc/150?img=12"
+      notificationCount={7}
+      onSearch={(value) => console.log('Búsqueda:', value)}
+      onNotificationClick={() => console.log('Notificaciones clickeadas')}
+      onUserClick={() => console.log('Usuario clickeado')}
+    />
+  ),
+};
+
 export const ConMuchasNotificaciones = {
   render: () => (
     <HeaderCore