feat(styles): add support for custom className and style props in DualScrollSyncNavItem component

Author: dorixdev

lib/components/DualScrollSync/DualScrollSyncNavItem/DualScrollSyncNavItem.test.tsx

@@ -54,4 +54,21 @@ describe('DualScrollSyncNavItem', () => {
 		expect(navItem).toBeInTheDocument();
 		expect(getByText('Custom Child')).toBeInTheDocument();
 	});
+
+	it('should apply custom className and style', () => {
+		const { getByTestId } = render(
+			<DualScrollSyncNavItem
+				sectionKey="custom"
+				className="custom-class"
+				style={{ borderWidth: '1px' }}
+			>
+				<div>Styled Content</div>
+			</DualScrollSyncNavItem>
+		);
+
+		const navItem = getByTestId('test-nav-id-item-custom');
+
+		expect(navItem).toHaveClass('custom-class');
+		expect(navItem).toHaveStyle('border-width: 1px');
+	});
 });

lib/components/DualScrollSync/DualScrollSyncNavItem/DualScrollSyncNavItem.tsx

@@ -7,10 +7,10 @@ import styles from './DualScrollSyncNavItem.module.scss';
 import type { DualScrollSyncNavItemProps } from './DualScrollSyncNavItem.types';
 
 export const DualScrollSyncNavItem: FC<DualScrollSyncNavItemProps> = ({
-	sectionKey,
 	children,
 	className,
-	style
+	sectionKey,
+	style = {}
 }) => {
 	const { navId, onMenuItemSelect, onItemClick, activeKey, navItemRefs } =
 		useDualScrollSyncContext();