From 1d162d7aafb3cfe2c3351b5fd891bbf6d476e9b2 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Thu, 14 Apr 2022 19:25:46 +0200
Subject: chore: add a Settings component

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

(limited to 'src/components/organisms/toolbar/settings.tsx')

diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx
new file mode 100644
index 0000000..88539fb
--- /dev/null
+++ b/src/components/organisms/toolbar/settings.tsx
@@ -0,0 +1,72 @@
+import Checkbox, { CheckboxProps } from '@components/atoms/forms/checkbox';
+import Label from '@components/atoms/forms/label';
+import Cog from '@components/atoms/icons/cog';
+import { VFC } from 'react';
+import { useIntl } from 'react-intl';
+import SettingsModal from '../modals/settings-modal';
+import sharedStyles from './toolbar-items.module.scss';
+import settingsStyles from './settings.module.scss';
+
+export type SettingsProps = {
+  /**
+   * Set additional classnames to the modal wrapper.
+   */
+  className?: string;
+  /**
+   * The button state.
+   */
+  isActive: CheckboxProps['value'];
+  /**
+   * A callback function to handle button state.
+   */
+  setIsActive: CheckboxProps['setValue'];
+  /**
+   * Set additional classnames to the tooltip wrapper.
+   */
+  tooltipClassName?: string;
+};
+
+const Settings: VFC<SettingsProps> = ({
+  className = '',
+  isActive,
+  setIsActive,
+  tooltipClassName = '',
+}) => {
+  const intl = useIntl();
+  const label = isActive
+    ? intl.formatMessage({
+        defaultMessage: 'Close settings',
+        id: '+viX9b',
+        description: 'Settings: Close label',
+      })
+    : intl.formatMessage({
+        defaultMessage: 'Open settings',
+        id: 'QCW3cy',
+        description: 'Settings: Open label',
+      });
+
+  return (
+    <div className={`${sharedStyles.item} ${settingsStyles.item}`}>
+      <Checkbox
+        id="settings-button"
+        name="settings-button"
+        value={isActive}
+        setValue={setIsActive}
+        className={`${sharedStyles.checkbox} ${settingsStyles.checkbox}`}
+      />
+      <Label
+        htmlFor="settings-button"
+        aria-label={label}
+        className={`${sharedStyles.label} ${settingsStyles.label}`}
+      >
+        <Cog />
+      </Label>
+      <SettingsModal
+        className={`${sharedStyles.modal} ${settingsStyles.modal} ${className}`}
+        tooltipClassName={tooltipClassName}
+      />
+    </div>
+  );
+};
+
+export default Settings;
-- 
cgit v1.2.3