From ce3f9c07d07bfdd34aa2788a780382f99fa55956 Mon Sep 17 00:00:00 2001 From: J Alfonso Martinez Date: Thu, 4 Sep 2025 19:35:11 -0600 Subject: [PATCH 1/8] feat(types): update DualScrollSyncProps and DualScrollSyncLabelProps to include style and className --- lib/components/DualScrollSync/DualScrollSync.types.ts | 4 ++-- .../DualScrollSyncLabel/DualScrollSyncLabel.types.ts | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/lib/components/DualScrollSync/DualScrollSync.types.ts b/lib/components/DualScrollSync/DualScrollSync.types.ts index 05aaa2a..ee76bb7 100644 --- a/lib/components/DualScrollSync/DualScrollSync.types.ts +++ b/lib/components/DualScrollSync/DualScrollSync.types.ts @@ -18,7 +18,7 @@ export type DualScrollSyncOptions = { export type DualScrollSyncItem = PropsWithChildren; -export type DualScrollSyncProps = PropsWithChildren<{ +export type DualScrollSyncProps = PropsWithChildren & { /** * Unique identifier for the DualScrollSync component. (Optional) * @default 'dual-scroll-sync' @@ -41,7 +41,7 @@ export type DualScrollSyncProps = PropsWithChildren<{ * @default () => {} */ onItemClick?: (activeKey: string) => void; -}>; +}; export type DualScrollSyncType = FC & { Nav: FC; diff --git a/lib/components/DualScrollSync/DualScrollSyncLabel/DualScrollSyncLabel.types.ts b/lib/components/DualScrollSync/DualScrollSyncLabel/DualScrollSyncLabel.types.ts index e2e8e72..30a18e8 100644 --- a/lib/components/DualScrollSync/DualScrollSyncLabel/DualScrollSyncLabel.types.ts +++ b/lib/components/DualScrollSync/DualScrollSyncLabel/DualScrollSyncLabel.types.ts @@ -1,3 +1,5 @@ import type { PropsWithChildren } from 'react'; -export type DualScrollSyncLabelProps = PropsWithChildren; +import type { DualScrollSyncStyleProps } from '../DualScrollSync.types'; + +export type DualScrollSyncLabelProps = PropsWithChildren; From a6ebfdba43cfb1fe099b585646fc28d6341736e5 Mon Sep 17 00:00:00 2001 From: J Alfonso Martinez Date: Thu, 4 Sep 2025 19:38:48 -0600 Subject: [PATCH 2/8] feat(styles): add support for custom className and style in DualScrollSyncBase component --- .../DualScrollSync/DualScrollSync.test.tsx | 13 +++++++++++++ lib/components/DualScrollSync/DualScrollSync.tsx | 12 ++++++++++-- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/lib/components/DualScrollSync/DualScrollSync.test.tsx b/lib/components/DualScrollSync/DualScrollSync.test.tsx index 24ad4b5..7539df2 100644 --- a/lib/components/DualScrollSync/DualScrollSync.test.tsx +++ b/lib/components/DualScrollSync/DualScrollSync.test.tsx @@ -49,4 +49,17 @@ describe('DualScrollSync', () => { expect(getByTestId('test')).toBeInTheDocument(); expect(getByText('Child Heading')).toBeInTheDocument(); }); + + it('should apply custom className and style', () => { + const { getByTestId } = render( + + Styled Nav + + ); + + const label = getByTestId('test'); + + expect(label).toHaveClass('custom-class'); + expect(label).toHaveStyle('border-width: 1px'); + }); }); diff --git a/lib/components/DualScrollSync/DualScrollSync.tsx b/lib/components/DualScrollSync/DualScrollSync.tsx index 37bedba..c0fd19a 100644 --- a/lib/components/DualScrollSync/DualScrollSync.tsx +++ b/lib/components/DualScrollSync/DualScrollSync.tsx @@ -1,3 +1,4 @@ +import clsx from 'clsx'; import type { FC } from 'react'; import { useMemo } from 'react'; @@ -15,9 +16,11 @@ import { DualScrollSyncNavItem } from './DualScrollSyncNavItem'; export const DualScrollSyncBase: FC = ({ children, + className, id, items, - onItemClick + onItemClick, + style = {} }) => { const baseId = id ?? 'dual-scroll-sync'; const navId = `${baseId}-nav`; @@ -57,7 +60,12 @@ export const DualScrollSyncBase: FC = ({ return ( -
+
{items ? ( <> From 94c4bbffa8289ac5bb390c8aaaf685d23400c5d4 Mon Sep 17 00:00:00 2001 From: J Alfonso Martinez Date: Thu, 4 Sep 2025 19:39:09 -0600 Subject: [PATCH 3/8] feat(styles): add support for custom className and style in DualScrollSyncContent component --- .../DualScrollSyncContent.test.tsx | 13 +++++++++++++ .../DualScrollSyncContent/DualScrollSyncContent.tsx | 2 +- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/lib/components/DualScrollSync/DualScrollSyncContent/DualScrollSyncContent.test.tsx b/lib/components/DualScrollSync/DualScrollSyncContent/DualScrollSyncContent.test.tsx index a4ca290..bc67ecc 100644 --- a/lib/components/DualScrollSync/DualScrollSyncContent/DualScrollSyncContent.test.tsx +++ b/lib/components/DualScrollSync/DualScrollSyncContent/DualScrollSyncContent.test.tsx @@ -17,4 +17,17 @@ describe('DualScrollSyncContent', () => { expect(getByTestId('test-content-id')).toBeInTheDocument(); }); + + it('should apply custom className and style', () => { + const { getByTestId } = render( + +
Styled Content
+ + ); + + const content = getByTestId('test-content-id'); + + expect(content).toHaveClass('custom-class'); + expect(content).toHaveStyle('border-width: 1px'); + }); }); diff --git a/lib/components/DualScrollSync/DualScrollSyncContent/DualScrollSyncContent.tsx b/lib/components/DualScrollSync/DualScrollSyncContent/DualScrollSyncContent.tsx index 202d331..2ad38f4 100644 --- a/lib/components/DualScrollSync/DualScrollSyncContent/DualScrollSyncContent.tsx +++ b/lib/components/DualScrollSync/DualScrollSyncContent/DualScrollSyncContent.tsx @@ -16,10 +16,10 @@ export const DualScrollSyncContent: FC = ({ return (
{children}
From f082c49499d9b8b5776998e5133943f29b38ac54 Mon Sep 17 00:00:00 2001 From: J Alfonso Martinez Date: Thu, 4 Sep 2025 19:39:21 -0600 Subject: [PATCH 4/8] feat(styles): enhance DualScrollSyncContentSection to support custom className and style props --- .../DualScrollSyncContentSection.test.tsx | 17 +++++++++++++++++ .../DualScrollSyncContentSection.tsx | 8 ++++++-- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/lib/components/DualScrollSync/DualScrollSyncContentSection/DualScrollSyncContentSection.test.tsx b/lib/components/DualScrollSync/DualScrollSyncContentSection/DualScrollSyncContentSection.test.tsx index a13ecbd..5d23254 100644 --- a/lib/components/DualScrollSync/DualScrollSyncContentSection/DualScrollSyncContentSection.test.tsx +++ b/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( + +
Styled Content
+ + ); + + const contentSection = getByTestId('test-content-id-section-styled-section'); + + expect(contentSection).toHaveClass('custom-class'); + expect(contentSection).toHaveStyle({ borderWidth: '1px' }); + }); }); diff --git a/lib/components/DualScrollSync/DualScrollSyncContentSection/DualScrollSyncContentSection.tsx b/lib/components/DualScrollSync/DualScrollSyncContentSection/DualScrollSyncContentSection.tsx index 21b757e..f916979 100644 --- a/lib/components/DualScrollSync/DualScrollSyncContentSection/DualScrollSyncContentSection.tsx +++ b/lib/components/DualScrollSync/DualScrollSyncContentSection/DualScrollSyncContentSection.tsx @@ -1,3 +1,4 @@ +import clsx from 'clsx'; import type { FC } from 'react'; import { useDualScrollSyncContext } from '@/hooks'; @@ -6,8 +7,10 @@ import styles from './DualScrollSyncContentSection.module.scss'; import type { DualScrollSyncContentSectionProps } from './DualScrollSyncContentSection.types'; export const DualScrollSyncContentSection: FC = ({ + children, + className, sectionKey, - children + style = {} }) => { const { contentId, sectionRefs } = useDualScrollSyncContext(); @@ -15,7 +18,7 @@ export const DualScrollSyncContentSection: FC return (
if (!contentRef) return; sectionRefs.current[sectionKey] = contentRef; }} + style={style} > {children}
From 790d88fcd96b05a3ef0dfc9ad2f108f13f785f7f Mon Sep 17 00:00:00 2001 From: J Alfonso Martinez Date: Thu, 4 Sep 2025 19:39:31 -0600 Subject: [PATCH 5/8] feat(styles): add support for custom className and style props in DualScrollSyncLabel component --- .../DualScrollSyncLabel.test.tsx | 26 +++++++++++++++++++ .../DualScrollSyncLabel.tsx | 13 ++++++++-- 2 files changed, 37 insertions(+), 2 deletions(-) diff --git a/lib/components/DualScrollSync/DualScrollSyncLabel/DualScrollSyncLabel.test.tsx b/lib/components/DualScrollSync/DualScrollSyncLabel/DualScrollSyncLabel.test.tsx index 72a622c..803af5b 100644 --- a/lib/components/DualScrollSync/DualScrollSyncLabel/DualScrollSyncLabel.test.tsx +++ b/lib/components/DualScrollSync/DualScrollSyncLabel/DualScrollSyncLabel.test.tsx @@ -24,4 +24,30 @@ describe('DualScrollSyncLabel', () => { expect(getByText('Bold Label')).toBeInTheDocument(); expect(getByText('Bold Label').tagName).toBe('STRONG'); }); + + it('should apply custom className and style', () => { + const { getByText } = render( + + Styled Label + + ); + + const label = getByText('Styled Label'); + + expect(label).toHaveClass('custom-class'); + expect(label).toHaveStyle('border-width: 1px'); + }); + + it('should not apply custom className or style if children is not a string', () => { + const { getByText } = render( + + Styled Child + + ); + + const label = getByText('Styled Child'); + + expect(label).not.toHaveClass('custom-class'); + expect(label).not.toHaveStyle('border-width: 1px'); + }); }); diff --git a/lib/components/DualScrollSync/DualScrollSyncLabel/DualScrollSyncLabel.tsx b/lib/components/DualScrollSync/DualScrollSyncLabel/DualScrollSyncLabel.tsx index d3f77d9..0ebcc85 100644 --- a/lib/components/DualScrollSync/DualScrollSyncLabel/DualScrollSyncLabel.tsx +++ b/lib/components/DualScrollSync/DualScrollSyncLabel/DualScrollSyncLabel.tsx @@ -1,3 +1,4 @@ +import clsx from 'clsx'; import type { FC } from 'react'; import { useDualScrollSyncContext } from '@/hooks'; @@ -5,13 +6,21 @@ import { useDualScrollSyncContext } from '@/hooks'; import styles from './DualScrollSyncLabel.module.scss'; import type { DualScrollSyncLabelProps } from './DualScrollSyncLabel.types'; -export const DualScrollSyncLabel: FC = ({ children }) => { +export const DualScrollSyncLabel: FC = ({ + children, + className, + style = {} +}) => { useDualScrollSyncContext(); if (typeof children !== 'string') return children; return ( - + {children} ); From bd7e64957793ea7677f459c8e476ca7c0432b323 Mon Sep 17 00:00:00 2001 From: J Alfonso Martinez Date: Thu, 4 Sep 2025 19:39:42 -0600 Subject: [PATCH 6/8] feat(styles): add custom className and style support in DualScrollSyncNav component --- .../DualScrollSyncNav/DualScrollSyncNav.test.tsx | 13 +++++++++++++ .../DualScrollSyncNav/DualScrollSyncNav.tsx | 4 ++-- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/lib/components/DualScrollSync/DualScrollSyncNav/DualScrollSyncNav.test.tsx b/lib/components/DualScrollSync/DualScrollSyncNav/DualScrollSyncNav.test.tsx index 8a8cfde..81adff5 100644 --- a/lib/components/DualScrollSync/DualScrollSyncNav/DualScrollSyncNav.test.tsx +++ b/lib/components/DualScrollSync/DualScrollSyncNav/DualScrollSyncNav.test.tsx @@ -44,4 +44,17 @@ describe('DualScrollSyncNav', () => { const navElement = getByTestId('test-nav-id'); expect(navElement).toHaveStyle({ '--menu-nav-visible-count': '3' }); }); + + it('should apply custom className and style', () => { + const { getByTestId } = render( + +
Styled Content
+ + ); + + const nav = getByTestId('test-nav-id'); + + expect(nav).toHaveClass('custom-class'); + expect(nav).toHaveStyle('border-width: 1px'); + }); }); diff --git a/lib/components/DualScrollSync/DualScrollSyncNav/DualScrollSyncNav.tsx b/lib/components/DualScrollSync/DualScrollSyncNav/DualScrollSyncNav.tsx index c00e9b0..d12ebc5 100644 --- a/lib/components/DualScrollSync/DualScrollSyncNav/DualScrollSyncNav.tsx +++ b/lib/components/DualScrollSync/DualScrollSyncNav/DualScrollSyncNav.tsx @@ -10,8 +10,8 @@ import type { DualScrollSyncNavProps } from './DualScrollSyncNav.types'; export const DualScrollSyncNav: FC = ({ children, className, - style = {}, - maxVisibleItems = 6 + maxVisibleItems = 6, + style = {} }) => { const { navId, navRef } = useDualScrollSyncContext(); const navItemCount = Children.count(children); From c2e78cf95d76a94a8c00104e01560a7a147b3676 Mon Sep 17 00:00:00 2001 From: J Alfonso Martinez Date: Thu, 4 Sep 2025 19:39:47 -0600 Subject: [PATCH 7/8] feat(styles): add support for custom className and style props in DualScrollSyncNavItem component --- .../DualScrollSyncNavItem.test.tsx | 17 +++++++++++++++++ .../DualScrollSyncNavItem.tsx | 4 ++-- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/lib/components/DualScrollSync/DualScrollSyncNavItem/DualScrollSyncNavItem.test.tsx b/lib/components/DualScrollSync/DualScrollSyncNavItem/DualScrollSyncNavItem.test.tsx index d2de717..1a7a219 100644 --- a/lib/components/DualScrollSync/DualScrollSyncNavItem/DualScrollSyncNavItem.test.tsx +++ b/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( + +
Styled Content
+ + ); + + const navItem = getByTestId('test-nav-id-item-custom'); + + expect(navItem).toHaveClass('custom-class'); + expect(navItem).toHaveStyle('border-width: 1px'); + }); }); diff --git a/lib/components/DualScrollSync/DualScrollSyncNavItem/DualScrollSyncNavItem.tsx b/lib/components/DualScrollSync/DualScrollSyncNavItem/DualScrollSyncNavItem.tsx index 3746548..dbdcb82 100644 --- a/lib/components/DualScrollSync/DualScrollSyncNavItem/DualScrollSyncNavItem.tsx +++ b/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 = ({ - sectionKey, children, className, - style + sectionKey, + style = {} }) => { const { navId, onMenuItemSelect, onItemClick, activeKey, navItemRefs } = useDualScrollSyncContext(); From 2622a147fad36d1aa5edcbb89e662107107fc8c6 Mon Sep 17 00:00:00 2001 From: J Alfonso Martinez Date: Thu, 4 Sep 2025 19:44:22 -0600 Subject: [PATCH 8/8] test(DualScrollSyncLabel): ensure label is in the document when children is not a string --- .../DualScrollSyncLabel/DualScrollSyncLabel.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/components/DualScrollSync/DualScrollSyncLabel/DualScrollSyncLabel.test.tsx b/lib/components/DualScrollSync/DualScrollSyncLabel/DualScrollSyncLabel.test.tsx index 803af5b..0aa2a9a 100644 --- a/lib/components/DualScrollSync/DualScrollSyncLabel/DualScrollSyncLabel.test.tsx +++ b/lib/components/DualScrollSync/DualScrollSyncLabel/DualScrollSyncLabel.test.tsx @@ -47,6 +47,7 @@ describe('DualScrollSyncLabel', () => { const label = getByText('Styled Child'); + expect(label).toBeInTheDocument(); expect(label).not.toHaveClass('custom-class'); expect(label).not.toHaveStyle('border-width: 1px'); });