Skip to content

Commit d3d4855

Browse files
dorixdevdorixdev
authored
perf: dual-scroll-styles (#13)
1 parent 5590459 commit d3d4855

File tree

2 files changed

+116
-21
lines changed

2 files changed

+116
-21
lines changed

‎lib/components/DualScrollSync/DualScrollSync.module.scss‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,6 @@
77
height: 100%;
88
border: 1px solid var(--dual-scroll-sync-border-color, #{$border-color});
99
border-radius: var(--dual-scroll-sync-border-radius, #{$border-radius});
10-
11-
background-color: var(
12-
--dual-scroll-sync-highlight-background-color,
13-
#{$highlight-background-color}
14-
);
1510
}
1611

1712
.scrollSyncNav {
@@ -38,7 +33,10 @@
3833

3934
text-align: left;
4035

41-
background-color: var(--dual-scroll-sync-base-color, #{$inactive-background-color});
36+
background-color: var(
37+
--dual-scroll-sync-inactive-background-color,
38+
#{$inactive-background-color}
39+
);
4240

4341
transition: var(--dual-scroll-sync-transition, #{$transition});
4442

@@ -74,7 +72,10 @@
7472

7573
.scrollSyncNavItemActive {
7674
position: relative;
77-
background-color: var(--dual-scroll-sync-background-color, #{$highlight-background-color});
75+
background-color: var(
76+
--dual-scroll-sync-highlight-background-color,
77+
#{$highlight-background-color}
78+
);
7879

7980
span {
8081
font-weight: bold;
@@ -102,6 +103,11 @@
102103

103104
height: 100%;
104105
padding: var(--dual-scroll-sync-space-s, #{$space-s});
106+
107+
background-color: var(
108+
--dual-scroll-sync-highlight-background-color,
109+
#{$highlight-background-color}
110+
);
105111
}
106112

107113
.scrollSyncContentSection {

‎lib/components/DualScrollSync/stories/DualScrollSync.stories.tsx‎

Lines changed: 103 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,15 @@ import { DualScrollSync } from '../DualScrollSync';
55
import { MockContentSection } from './mocks';
66
import { FILTER_GROUPS } from './mocks/MockFilterGroups';
77

8+
interface ExtendedArgs {
9+
borderRadius?: number;
10+
borderColor?: string;
11+
highlightBackgroundColor?: string;
12+
highlightForegroundColor?: string;
13+
inactiveBackgroundColor?: string;
14+
maxWidthNav?: number;
15+
}
16+
817
const meta: Meta<typeof DualScrollSync> = {
918
title: 'Components/DualScrollSync',
1019
component: DualScrollSync,
@@ -37,16 +46,23 @@ export const Default: Story = {
3746
maxVisibleItems: 6,
3847
onItemClick: action('onItemClick')
3948
},
49+
decorators: [
50+
(Story) => (
51+
<section
52+
style={{ height: '50dvh', maxWidth: '360px', maxHeight: '480px', minHeight: '320px' }}
53+
>
54+
<Story />
55+
</section>
56+
)
57+
],
4058
render: ({ items, ...args }) => (
41-
<section style={{ height: '50dvh', maxWidth: '360px', maxHeight: '480px', minHeight: '320px' }}>
42-
<DualScrollSync
43-
{...args}
44-
items={items?.map((item) => ({
45-
...item,
46-
children: <MockContentSection />
47-
}))}
48-
/>
49-
</section>
59+
<DualScrollSync
60+
{...args}
61+
items={items?.map((item) => ({
62+
...item,
63+
children: <MockContentSection />
64+
}))}
65+
/>
5066
)
5167
};
5268

@@ -58,16 +74,89 @@ export const FewSectionsExample: Story = {
5874
{ sectionKey: 'section3', label: 'Section 3', children: '<Component />' }
5975
]
6076
},
77+
decorators: [
78+
(Story) => (
79+
<section
80+
style={{ height: '50dvh', maxWidth: '360px', maxHeight: '480px', minHeight: '320px' }}
81+
>
82+
<Story />
83+
</section>
84+
)
85+
],
86+
render: ({ items, ...args }) => (
87+
<DualScrollSync
88+
items={items.map((item) => ({
89+
...item,
90+
children: <MockContentSection minHeight="480px" />
91+
}))}
92+
{...args}
93+
/>
94+
)
95+
};
96+
97+
export const ThemingExample: Story & { args: ExtendedArgs; argTypes?: Record<string, unknown> } = {
98+
name: 'Theming with CSS Variables',
99+
argTypes: {
100+
borderColor: { control: { type: 'color' } },
101+
borderRadius: { control: { type: 'number', min: 0, max: 32, step: 2 } },
102+
highlightBackgroundColor: { control: { type: 'color' } },
103+
highlightForegroundColor: { control: { type: 'color' } },
104+
inactiveBackgroundColor: { control: { type: 'color' } },
105+
maxWidthNav: { control: { type: 'number', min: 60, max: 240, step: 10 } }
106+
},
107+
args: {
108+
items: [
109+
{ sectionKey: 's1', label: 'Label 1', children: '<Component />' },
110+
{ sectionKey: 's2', label: 'Label 2', children: '<Component />' },
111+
{ sectionKey: 's3', label: 'Label 3', children: '<Component />' },
112+
{ sectionKey: 's4', label: 'Label 4', children: '<Component />' },
113+
{ sectionKey: 's5', label: 'Label 5', children: '<Component />' },
114+
{ sectionKey: 's6', label: 'Label 6', children: '<Component />' },
115+
{ sectionKey: 's7', label: 'Label 7', children: '<Component />' },
116+
{ sectionKey: 's8', label: 'Label 8', children: '<Component />' },
117+
{ sectionKey: 's9', label: 'Label 9', children: '<Component />' },
118+
{ sectionKey: 's10', label: 'Label 10', children: '<Component />' }
119+
],
120+
id: 'theming-example',
121+
maxVisibleItems: 10,
122+
borderColor: '#FFEDFA',
123+
borderRadius: 0,
124+
highlightBackgroundColor: '#FFB8E0',
125+
highlightForegroundColor: '#BE5985',
126+
inactiveBackgroundColor: '#FFEDFA',
127+
maxWidthNav: 160
128+
},
129+
decorators: [
130+
(Story) => (
131+
<section
132+
style={{ height: '50dvh', maxWidth: '360px', maxHeight: '480px', minHeight: '320px' }}
133+
>
134+
<Story />
135+
</section>
136+
)
137+
],
61138
render: ({ items, ...args }) => (
62-
<section style={{ height: '50dvh', maxWidth: '360px', maxHeight: '480px', minHeight: '320px' }}>
139+
<>
140+
<style>
141+
{`
142+
:root {
143+
--dual-scroll-sync-border-color: ${(args as ExtendedArgs).borderColor};
144+
--dual-scroll-sync-border-radius: ${(args as ExtendedArgs).borderRadius}px;
145+
--dual-scroll-sync-highlight-background-color: ${(args as ExtendedArgs).highlightBackgroundColor};
146+
--dual-scroll-sync-highlight-foreground-color: ${(args as ExtendedArgs).highlightForegroundColor};
147+
--dual-scroll-sync-inactive-background-color: ${(args as ExtendedArgs).inactiveBackgroundColor};
148+
--dual-scroll-sync-max-width-nav: ${(args as ExtendedArgs).maxWidthNav}px;
149+
}
150+
`}
151+
</style>
63152
<DualScrollSync
64-
items={items.map((item) => ({
153+
{...args}
154+
items={items?.map((item) => ({
65155
...item,
66-
children: <MockContentSection minHeight="480px" />
156+
children: <MockContentSection />
67157
}))}
68-
{...args}
69158
/>
70-
</section>
159+
</>
71160
)
72161
};
73162

0 commit comments

Comments
 (0)