Feat/add-onHover-for-tabs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/amplify-component-lib",
-  "version": "9.9.0",
+  "version": "9.9.1",
   "description": "Frontend Typescript components for the Amplify team",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/molecules/Tabs/Tab.tsx

@@ -5,6 +5,7 @@ import { Tab as TabType, Tabs } from './Tabs.types';
 
 type TabProps<T> = {
   onChange: Tabs<T>['onChange'];
+  onHover?: Tabs<T>['onHover'];
   selectedIndex: number;
   index: number;
   centered: boolean;
@@ -17,6 +18,7 @@ export function Tab<T>({
   selectedIndex,
   index,
   onChange,
+  onHover,
   centered,
   animated,
   disabled,
@@ -26,11 +28,17 @@ export function Tab<T>({
     onChange(value);
   };
 
+  const handleOnMouseEnter = () => {
+    if (!onHover) return;
+    onHover(value);
+  };
+
   return (
     <Button
       role="tab"
       aria-selected={selectedIndex === index}
       onClick={handleOnClick}
+      onMouseEnter={handleOnMouseEnter}
       $centered={centered}
       disabled={disabled}
     >

src/molecules/Tabs/Tabs.test.tsx

@@ -11,6 +11,7 @@ function fakeProps(): Omit<TabsProps<number>, 'selected'> {
       label: faker.vehicle.vehicle(),
     })),
     onChange: vi.fn(),
+    onHover: vi.fn(),
   };
 }
 
@@ -188,3 +189,14 @@ test('Throws error if amountPerScrollPage is set but scrollable is false', () =>
     )
   ).toThrowError();
 });
+
+test('Hovering over a tab calls the onHover callback', async () => {
+  const props = fakeProps();
+  const options = [{ value: 123, label: 'Option 1' }];
+  render(<Tabs {...props} options={options} selected={0} />);
+  const user = userEvent.setup();
+
+  await user.hover(screen.getByRole('tab', { name: options[0].label }));
+
+  expect(props.onHover).toHaveBeenCalled();
+});

src/molecules/Tabs/Tabs.tsx

@@ -52,6 +52,7 @@ export function Tabs<T>({
   scrollable = true,
   amountPerScrollPage,
   onChange,
+  onHover,
   ref,
   ...rest
 }: TabsProps<T>) {
@@ -137,6 +138,7 @@ export function Tabs<T>({
             selectedIndex={selectedIndex}
             index={index}
             onChange={onChange}
+            onHover={onHover}
             centered={centered}
             animated={animated}
             {...option}

src/molecules/Tabs/Tabs.types.ts

@@ -9,6 +9,7 @@ export interface Tab<T> {
 export interface Tabs<T> {
   selected: T;
   onChange: (value: T) => void;
+  onHover?: (hoveredTabValue: T) => void;
   options: Tab<T>[];
   scrollable?: boolean;
   amountPerScrollPage?: number;