From a6ff5eee45215effb3344cb5d631a27a7c0369aa Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 22 Sep 2023 19:34:01 +0200
Subject: refactor(components): rewrite form components

---
 src/components/organisms/modals/settings-modal.tsx | 60 +++++++++-------------
 1 file changed, 23 insertions(+), 37 deletions(-)

(limited to 'src/components/organisms/modals/settings-modal.tsx')

diff --git a/src/components/organisms/modals/settings-modal.tsx b/src/components/organisms/modals/settings-modal.tsx
index d4a3a49..bb3d886 100644
--- a/src/components/organisms/modals/settings-modal.tsx
+++ b/src/components/organisms/modals/settings-modal.tsx
@@ -1,29 +1,26 @@
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
-import { Form } from '../../atoms';
+import { Cog, Form, Heading, Modal, type ModalProps } from '../../atoms';
 import {
   AckeeToggle,
   type AckeeToggleProps,
-  Modal,
-  type ModalProps,
   MotionToggle,
   type MotionToggleProps,
   PrismThemeToggle,
   ThemeToggle,
-} from '../../molecules';
+} from '../../organisms';
 import styles from './settings-modal.module.scss';
 
-export type SettingsModalProps = Pick<ModalProps, 'className'> &
-  Pick<AckeeToggleProps, 'tooltipClassName'> & {
-    /**
-     * The local storage key for Ackee settings.
-     */
-    ackeeStorageKey: AckeeToggleProps['storageKey'];
-    /**
-     * The local storage key for Reduce motion settings.
-     */
-    motionStorageKey: MotionToggleProps['storageKey'];
-  };
+export type SettingsModalProps = Pick<ModalProps, 'className'> & {
+  /**
+   * The local storage key for Ackee settings.
+   */
+  ackeeStorageKey: AckeeToggleProps['storageKey'];
+  /**
+   * The local storage key for Reduce motion settings.
+   */
+  motionStorageKey: MotionToggleProps['storageKey'];
+};
 
 /**
  * SettingsModal component
@@ -34,7 +31,6 @@ export const SettingsModal: FC<SettingsModalProps> = ({
   className = '',
   ackeeStorageKey,
   motionStorageKey,
-  tooltipClassName,
 }) => {
   const intl = useIntl();
   const title = intl.formatMessage({
@@ -51,40 +47,30 @@ export const SettingsModal: FC<SettingsModalProps> = ({
   return (
     <Modal
       className={`${styles.wrapper} ${className}`}
-      icon="cogs"
-      title={title}
+      heading={
+        <Heading isFake level={3}>
+          <Cog className={styles.icon} />
+          {title}
+        </Heading>
+      }
     >
       <Form
         aria-label={ariaLabel}
         className={styles.form}
-        itemsClassName={styles.items}
         onSubmit={() => null}
       >
-        <ThemeToggle
-          bodyClassName={styles.fieldset__body}
-          groupClassName={styles.group}
-          legendClassName={styles.label}
-        />
-        <PrismThemeToggle
-          bodyClassName={styles.fieldset__body}
-          groupClassName={styles.group}
-          legendClassName={styles.label}
-        />
+        <ThemeToggle className={styles.item} />
+        <PrismThemeToggle className={styles.item} />
         <MotionToggle
-          bodyClassName={styles.fieldset__body}
+          className={styles.item}
           defaultValue="on"
-          groupClassName={styles.group}
-          legendClassName={styles.label}
           storageKey={motionStorageKey}
         />
         <AckeeToggle
-          bodyClassName={styles.fieldset__body}
-          buttonClassName={styles.btn}
+          className={styles.item}
+          direction="upwards"
           defaultValue="full"
-          groupClassName={`${styles.group} ${styles['group--ackee']}`}
-          legendClassName={`${styles.label} ${styles['label--ackee']}`}
           storageKey={ackeeStorageKey}
-          tooltipClassName={`${styles.tooltip} ${tooltipClassName}`}
         />
       </Form>
     </Modal>
-- 
cgit v1.2.3