chore: replace the Ackee select by a toggle component

4 files changed, 49 insertions, 41 deletions

diff --git a/src/components/organisms/forms/settings-form.module.scss b/src/components/organisms/forms/settings-form.module.scss
index 6174304..647f1b5 100644
--- a/src/components/organisms/forms/settings-form.module.scss
+++ b/src/components/organisms/forms/settings-form.module.scss
@@ -8,7 +8,8 @@
 
   @include mix.media("screen") {
     @include mix.dimensions(null, "2xs", "height") {
-      gap: var(--spacing-md);
+      column-gap: var(--spacing-lg);
+      row-gap: var(--spacing-xs);
       font-size: var(--font-size-sm);
     }
   }
@@ -16,28 +17,31 @@
   .label {
     @include mix.media("screen") {
       @include mix.dimensions(null, "2xs", "height") {
+        margin: 0 auto;
+        float: none;
         font-size: var(--font-size-sm);
-
-        &:not(.label--select) {
-          float: none;
-          margin: 0 auto;
-        }
       }
-    }
 
-    &.label--select {
-      @include mix.media("screen") {
-        @include mix.dimensions("2xs", null, "height") {
-          margin: 0 auto 0 0;
-        }
+      @include mix.dimensions(null, "2xs") {
+        //font-size: var(--font-size-sm);
       }
     }
   }
 
   .tooltip {
+    top: unset;
+    bottom: calc(100% + var(--spacing-2xs));
+    font-size: var(--font-size-sm);
+    transform-origin: bottom center;
+
     @include mix.media("screen") {
-      @include mix.dimensions(null, "2xs") {
-        font-size: var(--font-size-sm);
+      @include mix.dimensions(null, "2xs", "height") {
+        width: 250%;
+        transform-origin: bottom left;
+      }
+
+      @include mix.dimensions("sm") {
+        font-size: var(--font-size-md);
       }
     }
   }
@@ -50,28 +54,28 @@
     @include mix.dimensions(null, "2xs", "height") {
       display: flex;
       flex-flow: column wrap;
-      width: fit-content;
-
-      &:last-of-type {
-        flex: 0 0 100%;
-        margin: 0;
-      }
+      max-width: fit-content;
+      margin: 0;
     }
   }
 }
 
-.setting {
-  &--select {
-    flex: 0 0 100%;
+.group {
+  margin-left: auto;
+
+  @include mix.media("screen") {
+    @include mix.dimensions(null, "2xs", "height") {
+      margin: auto;
+    }
   }
 }
 
-.group {
+.fieldset__body {
   margin-left: auto;
 
   @include mix.media("screen") {
     @include mix.dimensions(null, "2xs", "height") {
-      margin: auto;
+      margin: 0 auto;
     }
   }
 }
diff --git a/src/components/organisms/forms/settings-form.stories.tsx b/src/components/organisms/forms/settings-form.stories.tsx
index ceb08c7..de9f769 100644
--- a/src/components/organisms/forms/settings-form.stories.tsx
+++ b/src/components/organisms/forms/settings-form.stories.tsx
@@ -1,4 +1,4 @@
-import { storageKey as ackeeStorageKey } from '@components/molecules/forms/ackee-select.fixture';
+import { storageKey as ackeeStorageKey } from '@components/molecules/forms/ackee-toggle.fixture';
 import { storageKey as motionStorageKey } from '@components/molecules/forms/motion-toggle.fixture';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import SettingsForm from './settings-form';
diff --git a/src/components/organisms/forms/settings-form.test.tsx b/src/components/organisms/forms/settings-form.test.tsx
index 90a2751..584261d 100644
--- a/src/components/organisms/forms/settings-form.test.tsx
+++ b/src/components/organisms/forms/settings-form.test.tsx
@@ -1,9 +1,8 @@
+import { storageKey as ackeeStorageKey } from '@components/molecules/forms/ackee-toggle.fixture';
+import { storageKey as motionStorageKey } from '@components/molecules/forms/motion-toggle.fixture';
 import { render, screen } from '@test-utils';
 import SettingsForm from './settings-form';
 
-const ackeeStorageKey = 'ackee-tracking';
-const motionStorageKey = 'reduce-motion';
-
 describe('SettingsForm', () => {
   it('renders a form', () => {
     render(
@@ -17,7 +16,7 @@ describe('SettingsForm', () => {
     ).toBeInTheDocument();
   });
 
-  it('renders a theme toggle setting', () => {
+  it('renders a theme setting', () => {
     render(
       <SettingsForm
         ackeeStorageKey={ackeeStorageKey}
@@ -29,7 +28,7 @@ describe('SettingsForm', () => {
     ).toBeInTheDocument();
   });
 
-  it('renders a code blocks toggle setting', () => {
+  it('renders a code blocks setting', () => {
     render(
       <SettingsForm
         ackeeStorageKey={ackeeStorageKey}
@@ -61,7 +60,7 @@ describe('SettingsForm', () => {
       />
     );
     expect(
-      screen.getByRole('combobox', { name: /^Tracking:/i })
+      screen.getByRole('radiogroup', { name: /^Tracking:/i })
     ).toBeInTheDocument();
   });
 });
diff --git a/src/components/organisms/forms/settings-form.tsx b/src/components/organisms/forms/settings-form.tsx
index 9dc0e90..5d915a8 100644
--- a/src/components/organisms/forms/settings-form.tsx
+++ b/src/components/organisms/forms/settings-form.tsx
@@ -1,7 +1,7 @@
 import Form from '@components/atoms/forms/form';
-import AckeeSelect, {
-  type AckeeSelectProps,
-} from '@components/molecules/forms/ackee-select';
+import AckeeToggle, {
+  type AckeeToggleProps,
+} from '@components/molecules/forms/ackee-toggle';
 import MotionToggle, {
   type MotionToggleProps,
 } from '@components/molecules/forms/motion-toggle';
@@ -11,11 +11,11 @@ import { FC } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './settings-form.module.scss';
 
-export type SettingsFormProps = Pick<AckeeSelectProps, 'tooltipClassName'> & {
+export type SettingsFormProps = Pick<AckeeToggleProps, 'tooltipClassName'> & {
   /**
    * The local storage key for Ackee settings.
    */
-  ackeeStorageKey: AckeeSelectProps['storageKey'];
+  ackeeStorageKey: AckeeToggleProps['storageKey'];
   /**
    * The local storage key for Reduce motion settings.
    */
@@ -42,24 +42,29 @@ const SettingsForm: FC<SettingsFormProps> = ({
       onSubmit={() => null}
     >
       <ThemeToggle
+        bodyClassName={styles.fieldset__body}
         groupClassName={styles.group}
         legendClassName={styles.label}
       />
       <PrismThemeToggle
+        bodyClassName={styles.fieldset__body}
         groupClassName={styles.group}
         legendClassName={styles.label}
       />
       <MotionToggle
         defaultValue="on"
+        bodyClassName={styles.fieldset__body}
         groupClassName={styles.group}
         legendClassName={styles.label}
         storageKey={motionStorageKey}
       />
-      <AckeeSelect
-        initialValue="full"
-        labelClassName={`${styles.label} ${styles['label--select']}`}
-        tooltipClassName={`${styles.tooltip} ${tooltipClassName}`}
+      <AckeeToggle
+        defaultValue="full"
+        bodyClassName={styles.fieldset__body}
+        groupClassName={`${styles.group} ${styles['group--ackee']}`}
+        legendClassName={`${styles.label} ${styles['label--ackee']}`}
         storageKey={ackeeStorageKey}
+        tooltipClassName={`${styles.tooltip} ${tooltipClassName}`}
       />
     </Form>
   );