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/search-modal.tsx   | 13 +++--
 .../organisms/modals/settings-modal.module.scss    | 26 +++-------
 .../organisms/modals/settings-modal.stories.tsx    |  4 +-
 .../organisms/modals/settings-modal.test.tsx       |  4 +-
 src/components/organisms/modals/settings-modal.tsx | 60 +++++++++-------------
 5 files changed, 45 insertions(+), 62 deletions(-)

(limited to 'src/components/organisms/modals')

diff --git a/src/components/organisms/modals/search-modal.tsx b/src/components/organisms/modals/search-modal.tsx
index 7ba770f..7d772df 100644
--- a/src/components/organisms/modals/search-modal.tsx
+++ b/src/components/organisms/modals/search-modal.tsx
@@ -1,6 +1,6 @@
 import { forwardRef, ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
-import { Modal, type ModalProps } from '../../molecules';
+import { Heading, Modal, type ModalProps } from '../../atoms';
 import { SearchForm, type SearchFormProps } from '../forms';
 import styles from './search-modal.module.scss';
 
@@ -23,8 +23,15 @@ const SearchModalWithRef: ForwardRefRenderFunction<
   });
 
   return (
-    <Modal className={`${styles.wrapper} ${className}`} title={modalTitle}>
-      <SearchForm hideLabel={true} ref={ref} searchPage={searchPage} />
+    <Modal
+      className={`${styles.wrapper} ${className}`}
+      heading={
+        <Heading isFake level={3}>
+          {modalTitle}
+        </Heading>
+      }
+    >
+      <SearchForm isLabelHidden ref={ref} searchPage={searchPage} />
     </Modal>
   );
 };
diff --git a/src/components/organisms/modals/settings-modal.module.scss b/src/components/organisms/modals/settings-modal.module.scss
index e9b3b85..95626ab 100644
--- a/src/components/organisms/modals/settings-modal.module.scss
+++ b/src/components/organisms/modals/settings-modal.module.scss
@@ -20,27 +20,17 @@
   column-gap: var(--spacing-lg);
 }
 
-.items {
+.item {
+  width: 100%;
   margin: 0 0 var(--spacing-2xs);
-  max-width: unset;
-}
 
-.fieldset__body {
-  margin-left: auto;
+  > *:last-child {
+    margin-left: auto;
+  }
 }
 
-.tooltip {
-  font-size: var(--font-size-sm);
-  z-index: 2;
+.icon {
+  --icon-size: #{fun.convert-px(30)};
 
-  @media screen and (max-height: #{var.get-breakpoint("2xs")}) {
-    width: calc(100vw - var(--spacing-md));
-    padding: var(--spacing-md) var(--spacing-2xs) var(--spacing-2xs)
-      var(--spacing-2xs);
-    right: 0;
-  }
-
-  @media screen and (min-width: #{var.get-breakpoint("sm")}) {
-    width: 100%;
-  }
+  margin-right: var(--spacing-2xs);
 }
diff --git a/src/components/organisms/modals/settings-modal.stories.tsx b/src/components/organisms/modals/settings-modal.stories.tsx
index 093922d..7af0d60 100644
--- a/src/components/organisms/modals/settings-modal.stories.tsx
+++ b/src/components/organisms/modals/settings-modal.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { storageKey as ackeeStorageKey } from '../../molecules/forms/ackee-toggle.fixture';
-import { storageKey as motionStorageKey } from '../../molecules/forms/motion-toggle.fixture';
+import { storageKey as ackeeStorageKey } from '../../organisms/forms/ackee-toggle/ackee-toggle.fixture';
+import { storageKey as motionStorageKey } from '../../organisms/forms/motion-toggle/motion-toggle.fixture';
 import { SettingsModal } from './settings-modal';
 
 /**
diff --git a/src/components/organisms/modals/settings-modal.test.tsx b/src/components/organisms/modals/settings-modal.test.tsx
index ec14719..3cd64f6 100644
--- a/src/components/organisms/modals/settings-modal.test.tsx
+++ b/src/components/organisms/modals/settings-modal.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from '../../../../tests/utils';
-import { storageKey as ackeeStorageKey } from '../../molecules/forms/ackee-toggle.fixture';
-import { storageKey as motionStorageKey } from '../../molecules/forms/motion-toggle.fixture';
+import { storageKey as ackeeStorageKey } from '../../organisms/forms/ackee-toggle/ackee-toggle.fixture';
+import { storageKey as motionStorageKey } from '../../organisms/forms/motion-toggle/motion-toggle.fixture';
 import { SettingsModal } from './settings-modal';
 
 describe('SettingsModal', () => {
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