Skip to content

Commit bbe7fb2

Browse files
belltalionbelltalion
committed
feat toggle
1 parent f18f909 commit bbe7fb2

File tree

2 files changed

+169
-1
lines changed

2 files changed

+169
-1
lines changed

‎packages/components/src/components/Toggle/__tests__/__snapshots__/index.browser.test.tsx.snap‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2+
3+
exports[`Toggle > should Toggle snapshot 1`] = `
4+
<div>
5+
<div
6+
class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-28px--255 padding-0-4px--255 background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-50px--255"
7+
>
8+
<div
9+
class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 transition-0-.25s--255"
10+
/>
11+
</div>
12+
<input
13+
type="hidden"
14+
value="false"
15+
/>
16+
</div>
17+
`;
18+
19+
exports[`Toggle > should Toggle snapshot 2`] = `
20+
<div>
21+
<div
22+
aria-disabled="true"
23+
class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-28px--255 padding-0-4px--255 background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-50px--255"
24+
>
25+
<div
26+
class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 transition-0-.25s--255"
27+
/>
28+
</div>
29+
<input
30+
type="hidden"
31+
value="false"
32+
/>
33+
</div>
34+
`;
35+
36+
exports[`Toggle > should Toggle snapshot 3`] = `
37+
<div>
38+
<div
39+
class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-28px--255 justify-content-0-flex-end--255 padding-0-4px--255 background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-50px--255"
40+
>
41+
<div
42+
class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 transform-0-translateX(calc(100% + 2px))--255 transition-0-.25s--255"
43+
/>
44+
</div>
45+
<input
46+
type="hidden"
47+
value="true"
48+
/>
49+
</div>
50+
`;
51+
52+
exports[`Toggle > should Toggle snapshot 4`] = `
53+
<div>
54+
<div
55+
class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-28px--255 justify-content-0-flex-end--255 padding-0-4px--255 background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-50px--255"
56+
>
57+
<div
58+
class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 transform-0-translateX(calc(100% + 2px))--255 transition-0-.25s--255"
59+
/>
60+
</div>
61+
<input
62+
type="hidden"
63+
value="true"
64+
/>
65+
</div>
66+
`;
67+
68+
exports[`Toggle > should Toggle snapshot 5`] = `
69+
<div>
70+
<div
71+
class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-8px--255 background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-40px--255"
72+
>
73+
<div
74+
class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 filter-0-drop-shadow(0 0 3px var(--switchShadow,#0000001A))--255 outline-0-4px solid-5575642944241722847-255 outline-color-0-var(--switchHoverOutline,light-dark(color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 50%,transparent)))-5575642944241722847-255 top-0--6px--255 transition-0-transform .25s--255"
75+
/>
76+
</div>
77+
<input
78+
type="hidden"
79+
value="false"
80+
/>
81+
</div>
82+
`;
83+
84+
exports[`Toggle > should Toggle snapshot 6`] = `
85+
<div>
86+
<div
87+
aria-disabled="true"
88+
class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-8px--255 background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-40px--255"
89+
>
90+
<div
91+
class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 filter-0-drop-shadow(0 0 3px var(--switchShadow,#0000001A))--255 outline-0-4px solid-5575642944241722847-255 outline-color-0-var(--switchHoverOutline,light-dark(color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 50%,transparent)))-5575642944241722847-255 top-0--6px--255 transition-0-transform .25s--255"
92+
/>
93+
</div>
94+
<input
95+
type="hidden"
96+
value="false"
97+
/>
98+
</div>
99+
`;
100+
101+
exports[`Toggle > should Toggle snapshot 7`] = `
102+
<div>
103+
<div
104+
class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255 background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
105+
>
106+
<div
107+
class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 filter-0-drop-shadow(0 0 3px var(--switchShadow,#0000001A))--255 outline-0-4px solid-5575642944241722847-255 outline-color-0-var(--switchHoverOutline,light-dark(color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 50%,transparent)))-5575642944241722847-255 top-0--6px--255 transform-0-translateX(calc(100% + 2px))--255 transition-0-transform .25s--255"
108+
/>
109+
</div>
110+
<input
111+
type="hidden"
112+
value="true"
113+
/>
114+
</div>
115+
`;
116+
117+
exports[`Toggle > should Toggle snapshot 8`] = `
118+
<div>
119+
<div
120+
class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--primary)--255 height-0-8px--255 justify-content-0-flex-end--255 background-0-var(--primaryHoverBg,light-dark(color-mix(in srgb,var(--primary) 100%,#000 15%),color-mix(in srgb,var(--primary) 100%,#FFF 15%)))-8554804559691125144-255 width-0-40px--255"
121+
>
122+
<div
123+
class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 filter-0-drop-shadow(0 0 3px var(--switchShadow,#0000001A))--255 outline-0-4px solid-5575642944241722847-255 outline-color-0-var(--switchHoverOutline,light-dark(color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 50%,transparent)))-5575642944241722847-255 top-0--6px--255 transform-0-translateX(calc(100% + 2px))--255 transition-0-transform .25s--255"
124+
/>
125+
</div>
126+
<input
127+
type="hidden"
128+
value="true"
129+
/>
130+
</div>
131+
`;
132+
133+
exports[`Toggle > should Toggle snapshot 9`] = `
134+
<div>
135+
<div
136+
class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-28px--255 padding-0-4px--255 background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-50px--255"
137+
style="--primary: blue; --bg: blue; --primaryHoverBg: blue; --hoverBg: blue; --disabledBg: blue;"
138+
>
139+
<div
140+
class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 transition-0-.25s--255"
141+
style="--primary: blue; --primaryHoverBg: blue; --switchShadow: blue; --switchHoverOutline: blue;"
142+
/>
143+
</div>
144+
<input
145+
type="hidden"
146+
value="false"
147+
/>
148+
</div>
149+
`;
150+
151+
exports[`Toggle > should Toggle snapshot 10`] = `
152+
<div>
153+
<div
154+
class="toggle-switch undefined border-radius-0-500px--255 box-sizing-0-border-box--255 cursor-0-pointer--255 position-0-relative--255 cursor-0-not-allowed-7839325038755874321-255 background-0-var(--disabledBg,light-dark(#D6D7DE,#373737))-7839325038755874321-255 transition-0-.25s--255 background-0-var(--bg,light-dark(#E4E4E4,#383838))--255 height-0-8px--255 background-0-var(--hoverBg,light-dark(#C3C2C8,#696A6F))-8554804559691125144-255 width-0-40px--255"
155+
style="--primary: blue; --bg: blue; --primaryHoverBg: blue; --hoverBg: blue; --disabledBg: blue;"
156+
>
157+
<div
158+
class=" background-color-0-#FFF--255 border-radius-0-100%--255 height-0-20px--255 width-0-20px--255 outline-0-4px--255 position-0-absolute--255 filter-0-drop-shadow(0 0 3px var(--switchShadow,#0000001A))--255 outline-0-4px solid-5575642944241722847-255 outline-color-0-var(--switchHoverOutline,light-dark(color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,var(--primary) 50%,transparent)))-5575642944241722847-255 top-0--6px--255 transition-0-transform .25s--255"
159+
style="--primary: blue; --primaryHoverBg: blue; --switchShadow: blue; --switchHoverOutline: blue;"
160+
/>
161+
</div>
162+
<input
163+
type="hidden"
164+
value="false"
165+
/>
166+
</div>
167+
`;

‎packages/components/src/components/Toggle/__tests__/index.browser.test.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { act, render } from '@testing-library/react'
2+
import userEvent from '@testing-library/user-event'
23

34
import { Toggle } from '../index'
45

@@ -61,7 +62,7 @@ describe('Toggle', () => {
6162
it('should change value when use onChange prop', async () => {
6263
const onChange = vi.fn()
6364
const { container } = render(<Toggle onChange={onChange} />)
64-
const toggleButton = container.querySelector(`.toggleSwitch`)
65+
const toggleButton = container.querySelector(`.toggle-switch`)
6566
const input = container.querySelector('input')
6667
toggleButton &&
6768
(await act(async () => {

0 commit comments

Comments
 (0)