From 0a954547b2bb8136c97f3a697274319751e046ed Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 5 Jan 2022 12:00:43 +0100
Subject: chore: replace theme button with settings

I plan to add more user settings so theme options should be inside
settings.
---
 .../Buttons/ButtonSearch/ButtonSearch.tsx          | 40 -------------------
 src/components/Buttons/ButtonTheme/ButtonTheme.tsx | 40 -------------------
 .../Buttons/ButtonToolbar/ButtonToolbar.tsx        | 45 ++++++++++++++++++++++
 src/components/Buttons/Buttons.module.scss         |  4 +-
 src/components/Buttons/index.tsx                   |  5 +--
 5 files changed, 49 insertions(+), 85 deletions(-)
 delete mode 100644 src/components/Buttons/ButtonSearch/ButtonSearch.tsx
 delete mode 100644 src/components/Buttons/ButtonTheme/ButtonTheme.tsx
 create mode 100644 src/components/Buttons/ButtonToolbar/ButtonToolbar.tsx

(limited to 'src/components/Buttons')

diff --git a/src/components/Buttons/ButtonSearch/ButtonSearch.tsx b/src/components/Buttons/ButtonSearch/ButtonSearch.tsx
deleted file mode 100644
index be5a9bc..0000000
--- a/src/components/Buttons/ButtonSearch/ButtonSearch.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { CloseIcon, SearchIcon } from '@components/Icons';
-import { t } from '@lingui/macro';
-import { SetStateAction } from 'react';
-import styles from '../Buttons.module.scss';
-
-const ButtonSearch = ({
-  isActivated,
-  setIsActivated,
-}: {
-  isActivated: boolean;
-  setIsActivated: (value: SetStateAction<boolean>) => void;
-}) => {
-  const btnClasses = isActivated
-    ? `${styles.search} ${styles['search--opened']}`
-    : styles.search;
-
-  return (
-    <button
-      className={btnClasses}
-      type="button"
-      onClick={() => setIsActivated(!isActivated)}
-    >
-      <span className={styles.icon}>
-        <span className={styles.front}>
-          <SearchIcon />
-        </span>
-        <span className={styles.back}>
-          <CloseIcon />
-        </span>
-      </span>
-      {isActivated ? (
-        <span className="screen-reader-text">{t`Close search`}</span>
-      ) : (
-        <span className="screen-reader-text">{t`Open search`}</span>
-      )}
-    </button>
-  );
-};
-
-export default ButtonSearch;
diff --git a/src/components/Buttons/ButtonTheme/ButtonTheme.tsx b/src/components/Buttons/ButtonTheme/ButtonTheme.tsx
deleted file mode 100644
index afbac89..0000000
--- a/src/components/Buttons/ButtonTheme/ButtonTheme.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { CloseIcon, ThemeIcon } from '@components/Icons';
-import { t } from '@lingui/macro';
-import { SetStateAction } from 'react';
-import styles from '../Buttons.module.scss';
-
-const ButtonTheme = ({
-  isActivated,
-  setIsActivated,
-}: {
-  isActivated: boolean;
-  setIsActivated: (value: SetStateAction<boolean>) => void;
-}) => {
-  const btnClasses = isActivated
-    ? `${styles.theme} ${styles['theme--opened']}`
-    : styles.theme;
-
-  return (
-    <button
-      className={btnClasses}
-      type="button"
-      onClick={() => setIsActivated(!isActivated)}
-    >
-      <span className={styles.icon}>
-        <span className={styles.front}>
-          <ThemeIcon />
-        </span>
-        <span className={styles.back}>
-          <CloseIcon />
-        </span>
-      </span>
-      {isActivated ? (
-        <span className="screen-reader-text">{t`Close theme options`}</span>
-      ) : (
-        <span className="screen-reader-text">{t`Open theme options`}</span>
-      )}
-    </button>
-  );
-};
-
-export default ButtonTheme;
diff --git a/src/components/Buttons/ButtonToolbar/ButtonToolbar.tsx b/src/components/Buttons/ButtonToolbar/ButtonToolbar.tsx
new file mode 100644
index 0000000..22da133
--- /dev/null
+++ b/src/components/Buttons/ButtonToolbar/ButtonToolbar.tsx
@@ -0,0 +1,45 @@
+import { CloseIcon, CogIcon, SearchIcon } from '@components/Icons';
+import { t } from '@lingui/macro';
+import { SetStateAction } from 'react';
+import styles from '../Buttons.module.scss';
+
+type ButtonType = 'search' | 'settings';
+
+const ButtonToolbar = ({
+  type,
+  isActivated,
+  setIsActivated,
+}: {
+  type: ButtonType;
+  isActivated: boolean;
+  setIsActivated: (value: SetStateAction<boolean>) => void;
+}) => {
+  const ButtonIcon = () => (type === 'search' ? <SearchIcon /> : <CogIcon />);
+  const btnClasses = isActivated
+    ? `${styles.toolbar} ${styles['toolbar--activated']}`
+    : styles.toolbar;
+
+  return (
+    <button
+      className={btnClasses}
+      type="button"
+      onClick={() => setIsActivated(!isActivated)}
+    >
+      <span className={styles.icon}>
+        <span className={styles.front}>
+          <ButtonIcon />
+        </span>
+        <span className={styles.back}>
+          <CloseIcon />
+        </span>
+      </span>
+      {isActivated ? (
+        <span className="screen-reader-text">{t`Close ${type}`}</span>
+      ) : (
+        <span className="screen-reader-text">{t`Open ${type}`}</span>
+      )}
+    </button>
+  );
+};
+
+export default ButtonToolbar;
diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss
index f46de82..1a0d73a 100644
--- a/src/components/Buttons/Buttons.module.scss
+++ b/src/components/Buttons/Buttons.module.scss
@@ -167,7 +167,7 @@
   }
 }
 
-.search,
+.toolbar,
 .theme {
   display: block;
   width: var(--btn-size);
@@ -212,7 +212,7 @@
   z-index: 10;
 }
 
-.search--opened,
+.toolbar--activated,
 .theme--opened {
   .icon {
     transform: rotateY(180deg);
diff --git a/src/components/Buttons/index.tsx b/src/components/Buttons/index.tsx
index 74060f7..5c034ad 100644
--- a/src/components/Buttons/index.tsx
+++ b/src/components/Buttons/index.tsx
@@ -1,7 +1,6 @@
 import Button from './Button/Button';
 import ButtonLink from './ButtonLink/ButtonLink';
-import ButtonSearch from './ButtonSearch/ButtonSearch';
+import ButtonToolbar from './ButtonToolbar/ButtonToolbar';
 import ButtonSubmit from './ButtonSubmit/ButtonSubmit';
-import ButtonTheme from './ButtonTheme/ButtonTheme';
 
-export { Button, ButtonLink, ButtonSearch, ButtonSubmit, ButtonTheme };
+export { Button, ButtonLink, ButtonToolbar, ButtonSubmit };
-- 
cgit v1.2.3