feat toggle

Author: belltalion

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

@@ -131,6 +131,40 @@ exports[`Toggle > should Toggle snapshot 8`] = `
 `;
 
 exports[`Toggle > should Toggle snapshot 9`] = `
+<div>
+  <div
+    class="toggle-switch test 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"
+  >
+    <div
+      class="testToggle 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"
+    />
+  </div>
+  <input
+    type="hidden"
+    value="true"
+  />
+</div>
+`;
+
+exports[`Toggle > should Toggle snapshot 10`] = `
+<div>
+  <div
+    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"
+    style="background-color: blue;"
+  >
+    <div
+      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"
+      style="background-color: blue;"
+    />
+  </div>
+  <input
+    type="hidden"
+    value="true"
+  />
+</div>
+`;
+
+exports[`Toggle > should Toggle snapshot 11`] = `
 <div>
   <div
     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"
@@ -148,7 +182,7 @@ exports[`Toggle > should Toggle snapshot 9`] = `
 </div>
 `;
 
-exports[`Toggle > should Toggle snapshot 10`] = `
+exports[`Toggle > should Toggle snapshot 12`] = `
 <div>
   <div
     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"

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

@@ -26,6 +26,32 @@ describe('Toggle', () => {
     expect(
       render(<Toggle value={true} variant="switch" />).container,
     ).toMatchSnapshot()
+    expect(
+      render(
+        <Toggle
+          className="test"
+          classNames={{ toggle: 'testToggle' }}
+          value={true}
+          variant="switch"
+        />,
+      ).container,
+    ).toMatchSnapshot()
+    expect(
+      render(
+        <Toggle
+          style={{
+            backgroundColor: 'blue',
+          }}
+          styles={{
+            toggle: {
+              backgroundColor: 'blue',
+            },
+          }}
+          value={true}
+          variant="switch"
+        />,
+      ).container,
+    ).toMatchSnapshot()
     expect(
       render(
         <Toggle