From 923caa66de8b2844d0a1e3939aa612938c70dfe0 Mon Sep 17 00:00:00 2001
From: maximiliano forlenza <forlenzamaximiliano@gmail.com>
Date: Tue, 5 Aug 2025 06:36:25 -0300
Subject: [PATCH] feat(buttonWithOptions): add component with stories and tests

- Add ButtonWithOptions component with dropdown menu functionality
- Create comprehensive Storybook stories with various examples
- Add unit tests for the component
- Update Table story to demonstrate ButtonWithOptions integration
- Fix ReactDOM import casing issue
- Center icons vertically in menu items
- Add colored icons example in stories
- Bump version to 7.2.1
---
 package.json                                  |   2 +-
 .../components/ButtonWithOptions.test.js      |  41 +++++++
 src/__tests__/components/ErrorMessage.test.js |   4 +-
 src/__tests__/components/Footer.test.js       |   4 +-
 src/__tests__/components/Header.test.js       |   4 +-
 src/__tests__/components/Loading.test.js      |   4 +-
 src/__tests__/components/Login.test.js        |   4 +-
 src/__tests__/components/Modal.test.js        |   4 +-
 src/__tests__/components/Pagination.test.js   |   6 +-
 src/__tests__/components/Select.test.js       |  28 ++---
 src/__tests__/components/Snackbar.test.js     |  10 +-
 src/__tests__/components/Table.test.js        |   4 +-
 src/__tests__/components/Typeahead.test.js    |  20 ++--
 src/assets/index.js                           |   6 +-
 src/components/ButtonWithOptions.jsx          | 107 ++++++++++++++++++
 src/components/Header/MobileMenu.jsx          |  38 +++----
 src/components/Header/UserMenu.jsx            |   4 +-
 src/components/Icons/InfoIcon.jsx             |   2 +-
 src/components/Login/LoginForm.jsx            |  59 +++++-----
 src/components/Login/index.jsx                |   2 +-
 src/components/index.js                       |   3 +-
 src/hooks/index.js                            |   2 +-
 src/hooks/useScreenSize.js                    |   6 +-
 src/index.js                                  |   2 +-
 src/stories/ButtonWithOptions.stories.js      |  84 ++++++++++++++
 src/stories/Footer.stories.js                 |   2 +-
 src/stories/Select.stories.js                 |  11 +-
 src/stories/Table.stories.js                  |  39 +++++++
 src/stories/Typeahead.stories.js              |   5 +-
 src/utils/index.js                            |   2 +-
 30 files changed, 386 insertions(+), 123 deletions(-)
 create mode 100644 src/__tests__/components/ButtonWithOptions.test.js
 create mode 100644 src/components/ButtonWithOptions.jsx
 create mode 100644 src/stories/ButtonWithOptions.stories.js

diff --git a/package.json b/package.json
index 6790e1d..d38d514 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@indec/react-commons",
-  "version": "7.2.0",
+  "version": "7.2.1",
   "description": "Common reactjs components for apps",
   "private": false,
   "main": "index.js",
diff --git a/src/__tests__/components/ButtonWithOptions.test.js b/src/__tests__/components/ButtonWithOptions.test.js
new file mode 100644
index 0000000..377b2b4
--- /dev/null
+++ b/src/__tests__/components/ButtonWithOptions.test.js
@@ -0,0 +1,41 @@
+import {getByTestId, queryByText} from '@testing-library/react';
+
+import ButtonWithOptions from '../../components/ButtonWithOptions.jsx';
+
+describe('<ButtonWithOptions>', () => {
+  let props;
+  const getComponent = () => render(ButtonWithOptions, props);
+  beforeEach(() => {
+    props = {
+      options: [
+        {
+          id: 1,
+          label: 'Option 1',
+          onClick: jest.fn()
+        },
+        {
+          id: 2,
+          label: 'Option 1',
+          onClick: jest.fn()
+        },
+        {
+          id: 3,
+          label: 'Option 3',
+          onClick: jest.fn()
+        }
+      ]
+    };
+  });
+
+  it('should a render a button to show options', () => {
+    const {container} = getComponent();
+    expect(getByTestId(container, 'fade-button')).toBeInTheDocument();
+  });
+
+  it('should not display `props.options`', () => {
+    const {container} = getComponent();
+    props.options.forEach(option => {
+      expect(queryByText(container, option.label)).toBeNull();
+    });
+  });
+});
diff --git a/src/__tests__/components/ErrorMessage.test.js b/src/__tests__/components/ErrorMessage.test.js
index 8442ae6..5d60028 100644
--- a/src/__tests__/components/ErrorMessage.test.js
+++ b/src/__tests__/components/ErrorMessage.test.js
@@ -5,7 +5,7 @@ import ErrorMessage from '../../components/ErrorMessage.jsx';
 describe('<ErrorMessage>', () => {
   let props;
   const getComponent = () => render(ErrorMessage, props);
-  
+
   beforeEach(() => {
     props = {
       error: 'This is an error message'
@@ -41,4 +41,4 @@ describe('<ErrorMessage>', () => {
       expect(errorElement.textContent).toBe('');
     });
   });
-});
\ No newline at end of file
+});
diff --git a/src/__tests__/components/Footer.test.js b/src/__tests__/components/Footer.test.js
index c683e6d..cddbd55 100644
--- a/src/__tests__/components/Footer.test.js
+++ b/src/__tests__/components/Footer.test.js
@@ -5,7 +5,7 @@ import Footer from '../../components/Footer.jsx';
 describe('<Footer>', () => {
   let props;
   const getComponent = () => render(Footer, props);
-  
+
   beforeEach(() => {
     props = {
       children: '© 2024 INDEC. All rights reserved.'
@@ -36,4 +36,4 @@ describe('<Footer>', () => {
       expect(footer.textContent).toBe('');
     });
   });
-});
\ No newline at end of file
+});
diff --git a/src/__tests__/components/Header.test.js b/src/__tests__/components/Header.test.js
index df2bda6..6f70c84 100644
--- a/src/__tests__/components/Header.test.js
+++ b/src/__tests__/components/Header.test.js
@@ -25,7 +25,7 @@ import Header from '../../components/Header/index.jsx';
 describe('<Header>', () => {
   let props;
   const getComponent = () => render(Header, props);
-  
+
   beforeEach(() => {
     props = {
       onRedirect: jest.fn(),
@@ -87,4 +87,4 @@ describe('<Header>', () => {
       expect(queryByText(container, 'Dashboard')).toBeNull();
     });
   });
-});
\ No newline at end of file
+});
diff --git a/src/__tests__/components/Loading.test.js b/src/__tests__/components/Loading.test.js
index 25a59e9..5cf7c38 100644
--- a/src/__tests__/components/Loading.test.js
+++ b/src/__tests__/components/Loading.test.js
@@ -5,7 +5,7 @@ import Loading from '../../components/Loading.jsx';
 describe('<Loading>', () => {
   let props;
   const getComponent = () => render(Loading, props);
-  
+
   beforeEach(() => {
     props = {};
   });
@@ -29,4 +29,4 @@ describe('<Loading>', () => {
     expect(spinner).toBeInTheDocument();
     expect(spinner).toHaveClass('animate-spin', 'rounded-full', 'h-10', 'w-10', 'border-b-2', 'border-blue-600');
   });
-});
\ No newline at end of file
+});
diff --git a/src/__tests__/components/Login.test.js b/src/__tests__/components/Login.test.js
index e3f0bd0..2ac1e25 100644
--- a/src/__tests__/components/Login.test.js
+++ b/src/__tests__/components/Login.test.js
@@ -8,8 +8,8 @@ describe('<Login>', () => {
   beforeEach(() => {
     props = {
       title: 'My Application'
-    }
-  })
+    };
+  });
 
   it('should display `My Application`', () => {
     const {container} = getComponent();
diff --git a/src/__tests__/components/Modal.test.js b/src/__tests__/components/Modal.test.js
index a4ed1c0..7735b50 100644
--- a/src/__tests__/components/Modal.test.js
+++ b/src/__tests__/components/Modal.test.js
@@ -5,7 +5,7 @@ import Modal from '../../components/Modal/index.jsx';
 describe('<Modal>', () => {
   let props;
   const getComponent = () => render(Modal, props);
-  
+
   beforeEach(() => {
     props = {
       show: true,
@@ -60,4 +60,4 @@ describe('<Modal>', () => {
       expect(modalContent).toBeInTheDocument();
     });
   });
-});
\ No newline at end of file
+});
diff --git a/src/__tests__/components/Pagination.test.js b/src/__tests__/components/Pagination.test.js
index 7313c34..842951e 100644
--- a/src/__tests__/components/Pagination.test.js
+++ b/src/__tests__/components/Pagination.test.js
@@ -5,7 +5,7 @@ import Pagination from '../../components/Pagination.jsx';
 describe('<Pagination>', () => {
   let props;
   const getComponent = () => render(Pagination, props);
-  
+
   beforeEach(() => {
     props = {
       page: 2,
@@ -36,7 +36,7 @@ describe('<Pagination>', () => {
     const {container} = getComponent();
     const pageButton = getByText(container, '1');
     fireEvent.click(pageButton);
-    
+
     expect(props.onChange).toHaveBeenCalledWith(1);
   });
 
@@ -81,4 +81,4 @@ describe('<Pagination>', () => {
       expect(getByText(container, /1 - 5 \| 5/)).toBeInTheDocument();
     });
   });
-});
\ No newline at end of file
+});
diff --git a/src/__tests__/components/Select.test.js b/src/__tests__/components/Select.test.js
index 0dfb176..09d78e0 100644
--- a/src/__tests__/components/Select.test.js
+++ b/src/__tests__/components/Select.test.js
@@ -5,7 +5,7 @@ import Select from '../../components/Select.jsx';
 describe('<Select>', () => {
   let props;
   const getComponent = () => render(Select, props);
-  
+
   beforeEach(() => {
     props = {
       options: [
@@ -37,7 +37,7 @@ describe('<Select>', () => {
     const {container} = getComponent();
     const input = container.querySelector('input');
     fireEvent.click(input);
-    
+
     expect(getByText(container, 'Option 1')).toBeInTheDocument();
     expect(getByText(container, 'Option 2')).toBeInTheDocument();
     expect(getByText(container, 'Option 3')).toBeInTheDocument();
@@ -47,10 +47,10 @@ describe('<Select>', () => {
     const {container} = getComponent();
     const input = container.querySelector('input');
     fireEvent.click(input);
-    
+
     const option = getByText(container, 'Option 1');
     fireEvent.click(option);
-    
+
     expect(props.onSelect).toHaveBeenCalledWith(props.name, 1);
   });
 
@@ -80,7 +80,7 @@ describe('<Select>', () => {
       const {container} = getComponent();
       const input = container.querySelector('input');
       fireEvent.click(input);
-      
+
       expect(queryByText(container, 'Option 1')).toBeNull();
     });
   });
@@ -94,7 +94,7 @@ describe('<Select>', () => {
       const {container} = getComponent();
       const input = container.querySelector('input');
       fireEvent.click(input);
-      
+
       expect(getByText(container, 'Cargando...')).toBeInTheDocument();
     });
   });
@@ -108,7 +108,7 @@ describe('<Select>', () => {
       const {container} = getComponent();
       const input = container.querySelector('input');
       fireEvent.click(input);
-      
+
       expect(getByText(container, 'No hay opciones')).toBeInTheDocument();
     });
   });
@@ -145,24 +145,24 @@ describe('<Select>', () => {
     it('should hide error message when dropdown is open', () => {
       const {container} = getComponent();
       const input = container.querySelector('input');
-      
+
       expect(getByText(container, 'This field is required')).toBeInTheDocument();
-      
+
       fireEvent.click(input);
-      
+
       expect(queryByText(container, 'This field is required')).toBeNull();
     });
 
     it('should show error message again when dropdown is closed', () => {
       const {container} = getComponent();
       const input = container.querySelector('input');
-      
+
       fireEvent.click(input);
       expect(queryByText(container, 'This field is required')).toBeNull();
-      
+
       const backdrop = container.querySelector('.fixed');
       fireEvent.click(backdrop);
-      
+
       expect(getByText(container, 'This field is required')).toBeInTheDocument();
     });
 
@@ -185,4 +185,4 @@ describe('<Select>', () => {
       expect(getByText(container, 'Please select a country')).toBeInTheDocument();
     });
   });
-});
\ No newline at end of file
+});
diff --git a/src/__tests__/components/Snackbar.test.js b/src/__tests__/components/Snackbar.test.js
index 5b332f4..3e1dc97 100644
--- a/src/__tests__/components/Snackbar.test.js
+++ b/src/__tests__/components/Snackbar.test.js
@@ -5,7 +5,7 @@ import Snackbar from '../../components/Snackbar.jsx';
 describe('<Snackbar>', () => {
   let props;
   const getComponent = () => render(Snackbar, props);
-  
+
   beforeEach(() => {
     props = {
       open: true,
@@ -31,7 +31,7 @@ describe('<Snackbar>', () => {
     const {container} = getComponent();
     const closeButton = container.querySelector('button');
     fireEvent.click(closeButton);
-    
+
     expect(props.onClose).toHaveBeenCalled();
   });
 
@@ -105,10 +105,10 @@ describe('<Snackbar>', () => {
 
     it('should auto close after 6 seconds', () => {
       getComponent();
-      
+
       jest.advanceTimersByTime(6000);
-      
+
       expect(props.onClose).toHaveBeenCalled();
     });
   });
-});
\ No newline at end of file
+});
diff --git a/src/__tests__/components/Table.test.js b/src/__tests__/components/Table.test.js
index 003dd85..4ff771c 100644
--- a/src/__tests__/components/Table.test.js
+++ b/src/__tests__/components/Table.test.js
@@ -5,7 +5,7 @@ import Table from '../../components/Table/index.jsx';
 describe('<Table>', () => {
   let props;
   const getComponent = () => render(Table, props);
-  
+
   beforeEach(() => {
     props = {
       columns: [
@@ -112,4 +112,4 @@ describe('<Table>', () => {
       expect(getByText(container, 'Custom no data message')).toBeInTheDocument();
     });
   });
-});
\ No newline at end of file
+});
diff --git a/src/__tests__/components/Typeahead.test.js b/src/__tests__/components/Typeahead.test.js
index 9c3f71e..f6caf21 100644
--- a/src/__tests__/components/Typeahead.test.js
+++ b/src/__tests__/components/Typeahead.test.js
@@ -5,7 +5,7 @@ import Typeahead from '../../components/Typeahead.jsx';
 describe('<Typeahead>', () => {
   let props;
   const getComponent = () => render(Typeahead, props);
-  
+
   beforeEach(() => {
     props = {
       options: [
@@ -43,7 +43,7 @@ describe('<Typeahead>', () => {
     const {container} = getComponent();
     const input = container.querySelector('input');
     fireEvent.change(input, {target: {value: 'App'}});
-    
+
     expect(props.onInputChange).toHaveBeenCalledWith('App');
   });
 
@@ -51,7 +51,7 @@ describe('<Typeahead>', () => {
     const {container} = getComponent();
     const input = container.querySelector('input');
     fireEvent.focus(input);
-    
+
     expect(getByText(container, 'Apple')).toBeInTheDocument();
     expect(getByText(container, 'Banana')).toBeInTheDocument();
   });
@@ -60,10 +60,10 @@ describe('<Typeahead>', () => {
     const {container} = getComponent();
     const input = container.querySelector('input');
     fireEvent.focus(input);
-    
+
     const option = getByText(container, 'Apple');
     fireEvent.click(option);
-    
+
     expect(props.onSelect).toHaveBeenCalledWith(props.options[0]);
   });
 
@@ -87,7 +87,7 @@ describe('<Typeahead>', () => {
       const {container} = getComponent();
       const clearButton = container.querySelector('button[type="button"]');
       fireEvent.click(clearButton);
-      
+
       expect(props.onInputChange).toHaveBeenCalledWith('');
       expect(props.onSelect).toHaveBeenCalledWith({_id: ''});
     });
@@ -145,7 +145,7 @@ describe('<Typeahead>', () => {
       const {container} = getComponent();
       const input = container.querySelector('input');
       fireEvent.focus(input);
-      
+
       fireEvent.keyDown(input, {key: 'ArrowDown'});
       const firstOption = getByText(container, 'Apple');
       expect(firstOption).toHaveClass('bg-blue-50', 'text-blue-700');
@@ -157,7 +157,7 @@ describe('<Typeahead>', () => {
       fireEvent.focus(input);
       fireEvent.keyDown(input, {key: 'ArrowDown'});
       fireEvent.keyDown(input, {key: 'Enter'});
-      
+
       expect(props.onSelect).toHaveBeenCalledWith(props.options[0]);
     });
 
@@ -166,8 +166,8 @@ describe('<Typeahead>', () => {
       const input = container.querySelector('input');
       fireEvent.focus(input);
       fireEvent.keyDown(input, {key: 'Escape'});
-      
+
       expect(queryByText(container, 'Apple')).toBeNull();
     });
   });
-});
\ No newline at end of file
+});
diff --git a/src/assets/index.js b/src/assets/index.js
index 982fc15..9441f9a 100644
--- a/src/assets/index.js
+++ b/src/assets/index.js
@@ -2,8 +2,4 @@ import footer from './footer.png';
 import logo from './logo.svg';
 import logoRight from './logoRight.png';
 
-export {
-  footer,
-  logo,
-  logoRight
-};
\ No newline at end of file
+export {footer, logo, logoRight};
diff --git a/src/components/ButtonWithOptions.jsx b/src/components/ButtonWithOptions.jsx
new file mode 100644
index 0000000..01331e3
--- /dev/null
+++ b/src/components/ButtonWithOptions.jsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import {MoreVertIcon} from './Icons';
+
+export default function ButtonWithOptions({options}) {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [menuPosition, setMenuPosition] = React.useState({top: 0, left: 0});
+  const menuRef = React.useRef(null);
+  const buttonRef = React.useRef(null);
+
+  React.useEffect(() => {
+    const handleClickOutside = event => {
+      if (
+        menuRef.current &&
+        !menuRef.current.contains(event.target) &&
+        buttonRef.current &&
+        !buttonRef.current.contains(event.target)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  React.useEffect(() => {
+    if (isOpen && buttonRef.current && menuRef.current) {
+      const buttonRect = buttonRef.current.getBoundingClientRect();
+      const menuRect = menuRef.current.getBoundingClientRect();
+      const padding = 8;
+      const gap = 4;
+
+      let top = buttonRect.bottom + gap;
+      let left = buttonRect.right - menuRect.width;
+
+      if (left < padding) {
+        left = buttonRect.left;
+      }
+
+      if (left + menuRect.width > window.innerWidth - padding) {
+        left = window.innerWidth - menuRect.width - padding;
+      }
+
+      if (top + menuRect.height > window.innerHeight - padding) {
+        top = buttonRect.top - menuRect.height - gap;
+      }
+
+      setMenuPosition({top, left});
+    }
+  }, [isOpen]);
+
+  const handleButtonClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div className="relative">
+      <button
+        ref={buttonRef}
+        aria-controls={isOpen ? 'fade-menu' : undefined}
+        aria-haspopup="true"
+        aria-expanded={isOpen ? 'true' : undefined}
+        onClick={handleButtonClick}
+        data-testid="fade-button"
+        className="p-2 rounded-full hover:bg-gray-100 group"
+        title="Más acciones"
+      >
+        <MoreVertIcon className="w-6 h-6" />
+      </button>
+
+      {isOpen &&
+        ReactDOM.createPortal(
+          <div
+            ref={menuRef}
+            id="fade-menu"
+            className="fixed bg-white border border-gray-200 shadow-lg rounded py-1 min-w-[200px] max-h-[300px] overflow-y-auto z-50"
+            style={{
+              top: `${menuPosition.top}px`,
+              left: `${menuPosition.left}px`,
+              visibility: menuPosition.top === 0 && menuPosition.left === 0 ? 'hidden' : 'visible'
+            }}
+            aria-labelledby="fade-button"
+          >
+            {options.map(option => (
+              <button
+                key={option.id}
+                onClick={() => {
+                  option.onClick();
+                  setIsOpen(false);
+                }}
+                disabled={option.disabled}
+                className={`w-full px-4 py-2 text-left flex items-center gap-2 ${
+                  option.disabled ? 'text-gray-400 cursor-not-allowed' : 'hover:bg-gray-100'
+                } ${option.selected ? 'bg-gray-100' : ''}`}
+              >
+                {option.icon && <span className="flex-shrink-0">{option.icon}</span>}
+                <span className="break-words">{option.label}</span>
+              </button>
+            ))}
+          </div>,
+          document.body
+        )}
+    </div>
+  );
+}
diff --git a/src/components/Header/MobileMenu.jsx b/src/components/Header/MobileMenu.jsx
index ebf6f5c..4948abc 100644
--- a/src/components/Header/MobileMenu.jsx
+++ b/src/components/Header/MobileMenu.jsx
@@ -8,7 +8,7 @@ export default function MobileMenu({items = [], currentPath, onChangePage}) {
   const {isMobile} = useScreenSize();
 
   React.useEffect(() => {
-    const handleClickOutside = (event) => {
+    const handleClickOutside = event => {
       if (isMenuOpen && !event.target.closest('.mobile-menu-container')) {
         handleCloseNavMenu();
       }
@@ -48,25 +48,25 @@ export default function MobileMenu({items = [], currentPath, onChangePage}) {
       {isMenuOpen && (
         <div className="fixed top-16 right-4 z-50 bg-white rounded-lg shadow-lg border min-w-48">
           {items.map((item, index) => {
-              const isActive = currentPath === item?.path;
-              const textColor = isActive ? 'text-blue-600' : 'text-gray-900';
+            const isActive = currentPath === item?.path;
+            const textColor = isActive ? 'text-blue-600' : 'text-gray-900';
 
-              return (
-                <button
-                  key={item?.path}
-                  onClick={() => {
-                    onChangePage(item);
-                    handleCloseNavMenu();
-                  }}
-                  className={`w-full text-left px-4 py-2 hover:bg-gray-50 block transition-colors ${
-                    isActive ? 'font-bold underline' : 'font-normal'
-                  } ${textColor}`}
-                  data-testid={`module-${index}`}
-                >
-                  {item.name}
-                </button>
-              );
-            })}
+            return (
+              <button
+                key={item?.path}
+                onClick={() => {
+                  onChangePage(item);
+                  handleCloseNavMenu();
+                }}
+                className={`w-full text-left px-4 py-2 hover:bg-gray-50 block transition-colors ${
+                  isActive ? 'font-bold underline' : 'font-normal'
+                } ${textColor}`}
+                data-testid={`module-${index}`}
+              >
+                {item.name}
+              </button>
+            );
+          })}
         </div>
       )}
     </div>
diff --git a/src/components/Header/UserMenu.jsx b/src/components/Header/UserMenu.jsx
index 620eec1..fa321c9 100644
--- a/src/components/Header/UserMenu.jsx
+++ b/src/components/Header/UserMenu.jsx
@@ -46,8 +46,8 @@ export default function UserMenu({user, onLogout}) {
       </button>
 
       {isOpen && (
-        <div 
-          ref={menuRef} 
+        <div
+          ref={menuRef}
           className="fixed bg-white shadow-lg rounded py-2 min-w-[200px] z-50"
           style={{
             top: `${dropdownPosition.top}px`,
diff --git a/src/components/Icons/InfoIcon.jsx b/src/components/Icons/InfoIcon.jsx
index f9d241c..3e23275 100644
--- a/src/components/Icons/InfoIcon.jsx
+++ b/src/components/Icons/InfoIcon.jsx
@@ -21,4 +21,4 @@ function InfoIcon({className = '', size = 24, ...props}) {
   );
 }
 
-export default InfoIcon;
\ No newline at end of file
+export default InfoIcon;
diff --git a/src/components/Login/LoginForm.jsx b/src/components/Login/LoginForm.jsx
index b5d33cf..f66a213 100644
--- a/src/components/Login/LoginForm.jsx
+++ b/src/components/Login/LoginForm.jsx
@@ -9,40 +9,33 @@ import loginSchema from '../../schemas/login';
 export default function LoginForm({onLogin, isLoging, error}) {
   return (
     <Formik initialValues={{username: '', password: ''}} validationSchema={loginSchema} onSubmit={onLogin}>
-        <Form>
-          <div className="flex flex-col gap-6">
-            <Field name="username">
-              {({field, meta}) => (
-                <TextField 
-                  {...field}
-                  label="Usuario *" 
-                  placeholder="usuario@indec.gob.ar"
-                  error={meta.touched && meta.error ? meta.error : null}
-                />
-              )}
-            </Field>
-            <Field name="password">
-              {({field, meta}) => (
-                <TextField 
-                  {...field}
-                  type="password"
-                  label="Contraseña *" 
-                  placeholder="123456"
-                  error={meta.touched && meta.error ? meta.error : null}
-                />
-              )}
-            </Field>
-          <Button
-            type="submit"
-            data-testid="login-button"
-            disabled={isLoging}
-            label="Ingresar"
-          />
-            {error && (
-              <ErrorMessage error={error.status === 401 ? 'Credenciales incorrectas.' : 'Ha ocurrido un error.'}/>
+      <Form>
+        <div className="flex flex-col gap-6">
+          <Field name="username">
+            {({field, meta}) => (
+              <TextField
+                {...field}
+                label="Usuario *"
+                placeholder="usuario@indec.gob.ar"
+                error={meta.touched && meta.error ? meta.error : null}
+              />
             )}
-          </div>
-        </Form>
+          </Field>
+          <Field name="password">
+            {({field, meta}) => (
+              <TextField
+                {...field}
+                type="password"
+                label="Contraseña *"
+                placeholder="123456"
+                error={meta.touched && meta.error ? meta.error : null}
+              />
+            )}
+          </Field>
+          <Button type="submit" data-testid="login-button" disabled={isLoging} label="Ingresar" />
+          {error && <ErrorMessage error={error.status === 401 ? 'Credenciales incorrectas.' : 'Ha ocurrido un error.'} />}
+        </div>
+      </Form>
     </Formik>
   );
 }
diff --git a/src/components/Login/index.jsx b/src/components/Login/index.jsx
index 5878b8a..719f2c2 100644
--- a/src/components/Login/index.jsx
+++ b/src/components/Login/index.jsx
@@ -17,7 +17,7 @@ export default function Login({title, onLogin, isLoging, error}) {
         </div>
         <div className="flex flex-col gap-3 justify-center p-3">
           <h2 className="font-bold text-2xl">Login</h2>
-          <LoginForm isLoging={isLoging} onLogin={onLogin} error={error}/>
+          <LoginForm isLoging={isLoging} onLogin={onLogin} error={error} />
         </div>
       </div>
     </>
diff --git a/src/components/index.js b/src/components/index.js
index 53b8e2f..b15a2fa 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,4 +1,5 @@
 export {default as Button} from './Button.jsx';
+export {default as ButtonWithOptions} from './ButtonWithOptions.jsx';
 export {default as ErrorMessage} from './ErrorMessage.jsx';
 export {default as Field} from './Field.jsx';
 export {default as Footer} from './Footer.jsx';
@@ -10,4 +11,4 @@ export {default as Pagination} from './Pagination.jsx';
 export {default as Select} from './Select.jsx';
 export {default as Snackbar} from './Snackbar.jsx';
 export {default as Table} from './Table/index.jsx';
-export {default as Typeahead} from './Typeahead.jsx';
\ No newline at end of file
+export {default as Typeahead} from './Typeahead.jsx';
diff --git a/src/hooks/index.js b/src/hooks/index.js
index fb72c23..e85440e 100644
--- a/src/hooks/index.js
+++ b/src/hooks/index.js
@@ -1 +1 @@
-export {useScreenSize} from './useScreenSize';
\ No newline at end of file
+export {useScreenSize} from './useScreenSize';
diff --git a/src/hooks/useScreenSize.js b/src/hooks/useScreenSize.js
index 0b6ba55..36f4e7f 100644
--- a/src/hooks/useScreenSize.js
+++ b/src/hooks/useScreenSize.js
@@ -14,12 +14,12 @@ export function useScreenSize() {
         isDesktop: width >= 768
       });
     };
-    
+
     checkScreenSize();
     window.addEventListener('resize', checkScreenSize);
-    
+
     return () => window.removeEventListener('resize', checkScreenSize);
   }, []);
 
   return screenSize;
-}
\ No newline at end of file
+}
diff --git a/src/index.js b/src/index.js
index 07179fc..124ef57 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,4 @@
 export * from './components';
 export * from './components/Icons';
 export * from './hooks';
-export * from './utils';
\ No newline at end of file
+export * from './utils';
diff --git a/src/stories/ButtonWithOptions.stories.js b/src/stories/ButtonWithOptions.stories.js
new file mode 100644
index 0000000..d19d4ae
--- /dev/null
+++ b/src/stories/ButtonWithOptions.stories.js
@@ -0,0 +1,84 @@
+import {fn} from '@storybook/test';
+
+import ButtonWithOptions from '../components/ButtonWithOptions.jsx';
+import * as Icons from '../components/Icons';
+import '../components/output.css';
+
+export default {
+  title: 'ButtonWithOptions',
+  component: ButtonWithOptions,
+  tags: ['autodocs'],
+  argTypes: {
+    options: {
+      description: 'Array of option objects with id, label, onClick, icon, disabled, and selected properties'
+    }
+  }
+};
+
+const createOption = (id, label, config = {}) => ({
+  id,
+  label,
+  onClick: fn(),
+  ...config
+});
+
+export const Default = {
+  args: {
+    options: [createOption('1', 'Edit'), createOption('2', 'Delete'), createOption('3', 'Save')]
+  }
+};
+
+export const WithDisabledOption = {
+  args: {
+    options: [createOption('1', 'Edit'), createOption('2', 'Delete (Disabled)', {disabled: true}), createOption('3', 'Save')]
+  }
+};
+
+export const WithSelectedOption = {
+  args: {
+    options: [createOption('1', 'Edit'), createOption('2', 'Current View', {selected: true}), createOption('3', 'Save')]
+  }
+};
+
+export const WithIcons = {
+  render: () => {
+    const options = [
+      {
+        id: '1',
+        label: 'Edit',
+        onClick: fn(),
+        icon: Icons.EditIcon({className: 'w-4 h-4 text-blue-600'})
+      },
+      {
+        id: '2',
+        label: 'Delete',
+        onClick: fn(),
+        icon: Icons.DeleteIcon({className: 'w-4 h-4 text-red-600'})
+      },
+      {
+        id: '3',
+        label: 'Save',
+        onClick: fn(),
+        icon: Icons.SaveIcon({className: 'w-4 h-4 text-green-600'})
+      }
+    ];
+
+    return ButtonWithOptions({options});
+  }
+};
+
+export const WithLongLabels = {
+  args: {
+    options: [
+      createOption('1', 'This is a very long option label that should wrap properly'),
+      createOption('2', 'Another long label to test the layout and text wrapping behavior'),
+      createOption('3', 'Short')
+    ]
+  }
+};
+
+export const ManyOptions = {
+  args: {
+    options: Array.from({length: 10}, (_, i) => createOption(String(i + 1), `Option ${i + 1}`))
+  }
+};
diff --git a/src/stories/Footer.stories.js b/src/stories/Footer.stories.js
index 2174f7b..992cd42 100644
--- a/src/stories/Footer.stories.js
+++ b/src/stories/Footer.stories.js
@@ -26,4 +26,4 @@ export const Empty = {
   args: {
     children: ''
   }
-};
\ No newline at end of file
+};
diff --git a/src/stories/Select.stories.js b/src/stories/Select.stories.js
index f26fbb3..a4c7585 100644
--- a/src/stories/Select.stories.js
+++ b/src/stories/Select.stories.js
@@ -108,10 +108,11 @@ export const CustomKeyValue = {
     keyValue: 'id',
     placeholder: 'Select option...'
   },
-  render: args => Select({
-    ...args,
-    options: args.options.map(opt => ({...opt, label: opt.name}))
-  })
+  render: args =>
+    Select({
+      ...args,
+      options: args.options.map(opt => ({...opt, label: opt.name}))
+    })
 };
 
 export const Searchable = {
@@ -142,4 +143,4 @@ export const WithLabelAndError = {
     value: 2,
     error: 'This category is not available in your region'
   }
-};
\ No newline at end of file
+};
diff --git a/src/stories/Table.stories.js b/src/stories/Table.stories.js
index 3b0aba3..e3ec291 100644
--- a/src/stories/Table.stories.js
+++ b/src/stories/Table.stories.js
@@ -1,6 +1,8 @@
+import React from 'react';
 import {fn} from '@storybook/test';
 
 import Table from '../components/Table/index.jsx';
+import ButtonWithOptions from '../components/ButtonWithOptions.jsx';
 import '../components/output.css';
 
 const sampleColumns = [
@@ -81,3 +83,40 @@ export const LargeDataset = {
     page: 3
   }
 };
+
+const TableWithActions = props => {
+  const columnsWithActions = [...sampleColumns, {key: 'actions', label: 'Actions'}];
+
+  const rowsWithActions = sampleRows.map(row => ({
+    ...row,
+    actions: React.createElement(ButtonWithOptions, {
+      options: [
+        {
+          id: 'edit',
+          label: 'Edit',
+          onClick: () => console.log('Edit clicked for', row.name)
+        },
+        {
+          id: 'delete',
+          label: 'Delete',
+          onClick: () => console.log('Delete clicked for', row.name)
+        },
+        {
+          id: 'view',
+          label: 'View Details',
+          onClick: () => console.log('View clicked for', row.name)
+        }
+      ]
+    })
+  }));
+
+  return React.createElement(Table, {
+    ...props,
+    columns: columnsWithActions,
+    rows: rowsWithActions
+  });
+};
+
+export const WithActions = {
+  render: args => React.createElement(TableWithActions, args)
+};
diff --git a/src/stories/Typeahead.stories.js b/src/stories/Typeahead.stories.js
index aab0576..b2b4613 100644
--- a/src/stories/Typeahead.stories.js
+++ b/src/stories/Typeahead.stories.js
@@ -167,8 +167,9 @@ export const KeyboardNavigation = {
   parameters: {
     docs: {
       description: {
-        story: 'This typeahead supports keyboard navigation. Use arrow keys to navigate options, Enter to select, and Escape to close.'
+        story:
+          'This typeahead supports keyboard navigation. Use arrow keys to navigate options, Enter to select, and Escape to close.'
       }
     }
   }
-};
\ No newline at end of file
+};
diff --git a/src/utils/index.js b/src/utils/index.js
index 0dcb1fb..fec233d 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -1 +1 @@
-export {getPaginationFields} from './getPaginationFields';
\ No newline at end of file
+export {getPaginationFields} from './getPaginationFields';