feat(styles): enhance DualScrollSyncContentSection to support custom className and style props

Author: dorixdev

lib/components/DualScrollSync/DualScrollSyncContentSection/DualScrollSyncContentSection.test.tsx

@@ -20,4 +20,21 @@ describe('DualScrollSyncContentSection', () => {
 		expect(contentSection).toBeInTheDocument();
 		expect(getByText('Test Content')).toBeInTheDocument();
 	});
+
+	it('should apply custom className and style', () => {
+		const { getByTestId } = render(
+			<DualScrollSyncContentSection
+				sectionKey="styled-section"
+				className="custom-class"
+				style={{ borderWidth: '1px' }}
+			>
+				<div>Styled Content</div>
+			</DualScrollSyncContentSection>
+		);
+
+		const contentSection = getByTestId('test-content-id-section-styled-section');
+
+		expect(contentSection).toHaveClass('custom-class');
+		expect(contentSection).toHaveStyle({ borderWidth: '1px' });
+	});
 });

lib/components/DualScrollSync/DualScrollSyncContentSection/DualScrollSyncContentSection.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import type { FC } from 'react';
 
 import { useDualScrollSyncContext } from '@/hooks';
@@ -6,23 +7,26 @@ import styles from './DualScrollSyncContentSection.module.scss';
 import type { DualScrollSyncContentSectionProps } from './DualScrollSyncContentSection.types';
 
 export const DualScrollSyncContentSection: FC<DualScrollSyncContentSectionProps> = ({
+	children,
+	className,
 	sectionKey,
-	children
+	style = {}
 }) => {
 	const { contentId, sectionRefs } = useDualScrollSyncContext();
 
 	const contentSectionId = `${contentId}-section-${sectionKey}`;
 
 	return (
 		<article
-			className={styles.scrollSyncContentSection}
+			className={clsx(styles.scrollSyncContentSection, className)}
 			data-section={sectionKey}
 			data-testid={contentSectionId}
 			id={contentSectionId}
 			ref={(contentRef) => {
 				if (!contentRef) return;
 				sectionRefs.current[sectionKey] = contentRef;
 			}}
+			style={style}
 		>
 			{children}
 		</article>