Skip to content

Commit 10b3b77

Browse files
greatertomigreatertomi
committed
feat: add icon to toggle switch
1 parent a20b810 commit 10b3b77

File tree

6 files changed

+100
-0
lines changed

6 files changed

+100
-0
lines changed

‎src/design-system/toggle-switch/toggle-switch.component.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ type Props = Omit<
2222
required?: boolean;
2323
id?: string;
2424
testId?: string;
25+
checkedChildren?: ReactNode;
26+
unCheckedChildren?: ReactNode;
2527
};
2628

2729
export const ToggleSwitch = ({
@@ -30,6 +32,9 @@ export const ToggleSwitch = ({
3032
icon,
3133
disabled,
3234
testId,
35+
checkedChildren,
36+
unCheckedChildren,
37+
checked,
3338
...props
3439
}: Readonly<Props>): JSX.Element => {
3540
return (
@@ -51,12 +56,17 @@ export const ToggleSwitch = ({
5156
)}
5257
<Switch.Root
5358
{...props}
59+
checked={checked}
5460
disabled={disabled}
5561
className={cx.toogleSwitch}
5662
id={id}
5763
data-testid={testId + 'toggle-switch'}
5864
>
5965
<Switch.Thumb className={cx.thumb} />
66+
{checked && <span className={cx.checkedIcon}>{checkedChildren}</span>}
67+
{!checked && (
68+
<span className={cx.uncheckedIcon}>{unCheckedChildren}</span>
69+
)}
6070
</Switch.Root>
6171
</Flex>
6272
);

‎src/design-system/toggle-switch/toggle-switch.css.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,3 +87,32 @@ export const iconContainer = style([
8787
overflow: 'hidden',
8888
},
8989
]);
90+
91+
const icon = style([
92+
sx({
93+
display: 'flex',
94+
alignItems: 'center',
95+
justifyContent: 'center',
96+
}),
97+
{
98+
position: 'absolute',
99+
top: '50%',
100+
transform: 'translateY(-50%)',
101+
pointerEvents: 'none',
102+
transition: 'opacity 0.2s',
103+
},
104+
]);
105+
106+
export const checkedIcon = style([
107+
icon,
108+
{
109+
left: '4px',
110+
},
111+
]);
112+
113+
export const uncheckedIcon = style([
114+
icon,
115+
{
116+
right: '2px',
117+
},
118+
]);

‎src/design-system/toggle-switch/toggle-switch.stories.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import InfoIcon from '@icons/InfoComponent';
44
import type { Meta } from '@storybook/react';
55

66
import { ThemeColorScheme, LocalThemeProvider } from '../../design-tokens';
7+
import { Moon, Sun } from '../../icons';
78
import { page, Variants, Section, UIStateTable } from '../decorators';
89
import { Divider } from '../divider';
910
import { Grid, Cell } from '../grid';
@@ -12,6 +13,25 @@ import { ToggleSwitch } from './toggle-switch.component';
1213

1314
const subtitle = `The toggle switch represents a physical switch that allows users to turn things on or off. Use toggle switch controls to present users with two mutually exclusive options (such as on/off), where choosing an option provides immediate results.`;
1415

16+
const WithCheckedAndUncheckedChildren = (): JSX.Element => {
17+
const [checked, setChecked] = React.useState(false);
18+
19+
return (
20+
<Variants.Row>
21+
<Variants.Cell>
22+
<ToggleSwitch
23+
label="Light / Dark mode"
24+
id="theme-switch"
25+
checked={checked}
26+
onCheckedChange={setChecked}
27+
checkedChildren={<Sun width={20} height={20} />}
28+
unCheckedChildren={<Moon width={20} height={20} />}
29+
/>
30+
</Variants.Cell>
31+
</Variants.Row>
32+
);
33+
};
34+
1535
export default {
1636
title: 'Basic Input/Toggle switch',
1737
component: ToggleSwitch,
@@ -204,6 +224,19 @@ export const Overview = (): JSX.Element => (
204224
<SwitchPreview />
205225
</UIStateTable>
206226
</Section>
227+
228+
<Divider my="$64" />
229+
230+
<Section title="Toogle switch with icons">
231+
<Variants.Table>
232+
<WithCheckedAndUncheckedChildren />
233+
</Variants.Table>
234+
<LocalThemeProvider colorScheme={ThemeColorScheme.Dark}>
235+
<Variants.Table>
236+
<WithCheckedAndUncheckedChildren />
237+
</Variants.Table>
238+
</LocalThemeProvider>
239+
</Section>
207240
</Cell>
208241
</Grid>
209242
);

‎src/icons/MoonComponent.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React, { type SVGProps } from 'react';
2+
3+
const SvgMoonComponent = (props: SVGProps<SVGSVGElement>) => (
4+
<svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
5+
<path d="M13.9999 10.3067C13.2119 10.6631 12.3371 10.8615 11.416 10.8615C7.94916 10.8615 5.13868 8.051 5.13868 4.5841C5.13868 3.66292 5.3371 2.78808 5.69354 2C3.51549 2.98496 2 5.17681 2 7.72263C2 11.1895 4.81047 14 8.27737 14C10.8231 14 13.0149 12.4846 13.9999 10.3067Z" fill="white"/>
6+
</svg>
7+
);
8+
9+
export default SvgMoonComponent;

‎src/icons/SunComponent.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import type { SVGProps } from 'react';
2+
3+
const SvgSunComponent = (props: SVGProps<SVGSVGElement>) => (
4+
<svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
5+
<path d="M7.99967 1.33333C8.45991 1.33333 8.83301 1.70642 8.83301 2.16666V2.99999C8.83301 3.46023 8.45991 3.83333 7.99967 3.83333C7.53944 3.83333 7.16634 3.46023 7.16634 2.99999V2.16666C7.16634 1.70642 7.53944 1.33333 7.99967 1.33333Z" fill="white"/>
6+
<path d="M11.333 8C11.333 9.84094 9.84062 11.3333 7.99967 11.3333C6.15873 11.3333 4.66634 9.84094 4.66634 8C4.66634 6.15905 6.15873 4.66666 7.99967 4.66666C9.84062 4.66666 11.333 6.15905 11.333 8Z" fill="white"/>
7+
<path d="M10.946 12.1248L11.5353 12.714C11.8607 13.0394 12.3883 13.0394 12.7138 12.714C13.0392 12.3886 13.0392 11.8609 12.7138 11.5355L12.1245 10.9462C11.7991 10.6208 11.2714 10.6208 10.946 10.9462C10.6206 11.2717 10.6206 11.7993 10.946 12.1248Z" fill="white"/>
8+
<path d="M12.7137 3.28591C13.0391 3.61134 13.0391 4.13898 12.7137 4.46442L12.1244 5.05367C11.799 5.37911 11.2714 5.37911 10.9459 5.05367C10.6205 4.72824 10.6205 4.2006 10.9459 3.87516L11.5352 3.28591C11.8606 2.96047 12.3882 2.96047 12.7137 3.28591Z" fill="white"/>
9+
<path d="M13.833 8.83333C14.2932 8.83333 14.6663 8.46023 14.6663 8C14.6663 7.53976 14.2932 7.16666 13.833 7.16666H12.9997C12.5394 7.16666 12.1663 7.53976 12.1663 8C12.1663 8.46023 12.5394 8.83333 12.9997 8.83333H13.833Z" fill="white"/>
10+
<path d="M7.99967 12.1667C8.45991 12.1667 8.83301 12.5398 8.83301 13V13.8333C8.83301 14.2936 8.45991 14.6667 7.99967 14.6667C7.53944 14.6667 7.16634 14.2936 7.16634 13.8333V13C7.16634 12.5398 7.53944 12.1667 7.99967 12.1667Z" fill="white"/>
11+
<path d="M3.87493 5.05369C4.20037 5.37912 4.72801 5.37912 5.05344 5.05369C5.37888 4.72825 5.37888 4.20061 5.05344 3.87518L4.46419 3.28592C4.13875 2.96048 3.61111 2.96048 3.28568 3.28592C2.96024 3.61136 2.96024 4.139 3.28568 4.46443L3.87493 5.05369Z" fill="white"/>
12+
<path d="M5.05337 12.1247L4.46411 12.714C4.13867 13.0394 3.61104 13.0394 3.2856 12.714C2.96016 12.3886 2.96016 11.8609 3.2856 11.5355L3.87486 10.9462C4.20029 10.6208 4.72793 10.6208 5.05337 10.9462C5.3788 11.2717 5.3788 11.7993 5.05337 12.1247Z" fill="white"/>
13+
<path d="M2.99967 8.83333C3.45991 8.83333 3.83301 8.46023 3.83301 8C3.83301 7.53976 3.45991 7.16666 2.99967 7.16666H2.16634C1.7061 7.16666 1.33301 7.53976 1.33301 8C1.33301 8.46023 1.7061 8.83333 2.16634 8.83333H2.99967Z" fill="white"/>
14+
</svg>
15+
);
16+
17+
export default SvgSunComponent;

‎src/icons/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,3 +79,5 @@ export { default as WalletComponent } from './WalletComponent';
7979
export { default as WarningIconCircleComponent } from './WarningIconCircleComponent';
8080
export { default as WarningIconTriangleSolidComponent } from './WarningIconTriangleSolidComponent';
8181
export { default as WarningIconTriangleComponent } from './WarningIconTriangleComponent';
82+
export { default as Sun } from './SunComponent';
83+
export { default as Moon } from './MoonComponent';

0 commit comments

Comments
 (0)