refactor(toggle): use Checkbox component and move it to molecules

7 files changed, 26 insertions, 13 deletions

diff --git a/src/components/molecules/forms/motion-toggle.tsx b/src/components/molecules/forms/motion-toggle.tsx
index d4f7d11..9f30b42 100644
--- a/src/components/molecules/forms/motion-toggle.tsx
+++ b/src/components/molecules/forms/motion-toggle.tsx
@@ -1,7 +1,7 @@
 import Toggle, {
   ToggleChoices,
   ToggleProps,
-} from '@components/atoms/forms/toggle';
+} from '@components/molecules/forms/toggle';
 import { useState, VFC } from 'react';
 import { useIntl } from 'react-intl';
 
diff --git a/src/components/molecules/forms/prism-theme-toggle.tsx b/src/components/molecules/forms/prism-theme-toggle.tsx
index 81a211b..daee6bd 100644
--- a/src/components/molecules/forms/prism-theme-toggle.tsx
+++ b/src/components/molecules/forms/prism-theme-toggle.tsx
@@ -1,9 +1,9 @@
+import Moon from '@components/atoms/icons/moon';
+import Sun from '@components/atoms/icons/sun';
 import Toggle, {
   ToggleChoices,
   ToggleProps,
-} from '@components/atoms/forms/toggle';
-import Moon from '@components/atoms/icons/moon';
-import Sun from '@components/atoms/icons/sun';
+} from '@components/molecules/forms/toggle';
 import { useState, VFC } from 'react';
 import { useIntl } from 'react-intl';
 
diff --git a/src/components/molecules/forms/theme-toggle.tsx b/src/components/molecules/forms/theme-toggle.tsx
index 6d54591..eb56ce9 100644
--- a/src/components/molecules/forms/theme-toggle.tsx
+++ b/src/components/molecules/forms/theme-toggle.tsx
@@ -1,9 +1,9 @@
+import Moon from '@components/atoms/icons/moon';
+import Sun from '@components/atoms/icons/sun';
 import Toggle, {
   ToggleChoices,
   ToggleProps,
-} from '@components/atoms/forms/toggle';
-import Moon from '@components/atoms/icons/moon';
-import Sun from '@components/atoms/icons/sun';
+} from '@components/molecules/forms/toggle';
 import { useState, VFC } from 'react';
 import { useIntl } from 'react-intl';
 
diff --git a/src/components/atoms/forms/toggle.module.scss b/src/components/molecules/forms/toggle.module.scss
index 2e8a49f..2e8a49f 100644
--- a/src/components/atoms/forms/toggle.module.scss
+++ b/src/components/molecules/forms/toggle.module.scss
diff --git a/src/components/atoms/forms/toggle.stories.tsx b/src/components/molecules/forms/toggle.stories.tsx
index ea08694..078a34c 100644
--- a/src/components/atoms/forms/toggle.stories.tsx
+++ b/src/components/molecules/forms/toggle.stories.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react';
 import ToggleComponent from './toggle';
 
 export default {
-  title: 'Atoms/Forms',
+  title: 'Molecules/Forms',
   component: ToggleComponent,
   argTypes: {
     choices: {
@@ -34,6 +34,19 @@ export default {
         required: true,
       },
     },
+    labelClassName: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the label.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     labelSize: {
       control: {
         type: 'select',
diff --git a/src/components/atoms/forms/toggle.test.tsx b/src/components/molecules/forms/toggle.test.tsx
index fb97adc..fb97adc 100644
--- a/src/components/atoms/forms/toggle.test.tsx
+++ b/src/components/molecules/forms/toggle.test.tsx
diff --git a/src/components/atoms/forms/toggle.tsx b/src/components/molecules/forms/toggle.tsx
index c3bc09d..dff2d2d 100644
--- a/src/components/atoms/forms/toggle.tsx
+++ b/src/components/molecules/forms/toggle.tsx
@@ -1,5 +1,6 @@
+import Checkbox from '@components/atoms/forms/checkbox';
+import Label, { type LabelProps } from '@components/atoms/forms/label';
 import { ReactNode, VFC } from 'react';
-import Label, { LabelProps } from './label';
 import styles from './toggle.module.scss';
 
 export type ToggleChoices = {
@@ -65,12 +66,11 @@ const Toggle: VFC<ToggleProps> = ({
 }) => {
   return (
     <>
-      <input
-        type="checkbox"
+      <Checkbox
         name={name}
         id={id}
-        checked={value}
-        onChange={() => setValue(!value)}
+        value={value}
+        setValue={() => setValue(!value)}
         className={styles.checkbox}
       />
       <Label size={labelSize} htmlFor={id} className={styles.label}>