From b214baab3e17d92f784b4f782863deafc5558ee4 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 18 May 2022 14:27:11 +0200
Subject: chore: close toolbar modals on click/focus outside

---
 src/components/organisms/forms/settings-form.tsx | 36 ++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 src/components/organisms/forms/settings-form.tsx

(limited to 'src/components/organisms/forms/settings-form.tsx')

diff --git a/src/components/organisms/forms/settings-form.tsx b/src/components/organisms/forms/settings-form.tsx
new file mode 100644
index 0000000..0a34601
--- /dev/null
+++ b/src/components/organisms/forms/settings-form.tsx
@@ -0,0 +1,36 @@
+import Form from '@components/atoms/forms/form';
+import AckeeSelect, {
+  type AckeeSelectProps,
+} from '@components/molecules/forms/ackee-select';
+import MotionToggle from '@components/molecules/forms/motion-toggle';
+import PrismThemeToggle from '@components/molecules/forms/prism-theme-toggle';
+import ThemeToggle from '@components/molecules/forms/theme-toggle';
+import { FC } from 'react';
+import { useIntl } from 'react-intl';
+import styles from './settings-form.module.scss';
+
+export type SettingsFormProps = Pick<AckeeSelectProps, 'tooltipClassName'>;
+
+const SettingsForm: FC<SettingsFormProps> = ({ tooltipClassName }) => {
+  const intl = useIntl();
+  const ariaLabel = intl.formatMessage({
+    defaultMessage: 'Settings form',
+    id: 'gX+YVy',
+    description: 'SettingsForm: an accessible form name',
+  });
+
+  return (
+    <Form aria-label={ariaLabel} onSubmit={() => null}>
+      <ThemeToggle labelClassName={styles.label} value={false} />
+      <PrismThemeToggle labelClassName={styles.label} value={false} />
+      <MotionToggle labelClassName={styles.label} value={false} />
+      <AckeeSelect
+        initialValue="full"
+        labelClassName={styles.label}
+        tooltipClassName={tooltipClassName}
+      />
+    </Form>
+  );
+};
+
+export default SettingsForm;
-- 
cgit v1.2.3