feat: improve Ackee tracking (#11)

* build(deps): add use-ackee hook package

* chore: create a context provider for Ackee

The provider allows users to change the 'detailed' settings.

* chore: add a select menu to choose which info to share with Ackee

* chore: add a tooltip for askee settings

* chore: replace default select styles with custom styles

* chore: register user choice in localstorage

* chore: replace Matomo with Ackee in legal notice

1 files changed, 41 insertions, 0 deletions

diff --git a/src/components/Buttons/ButtonHelp/ButtonHelp.tsx b/src/components/Buttons/ButtonHelp/ButtonHelp.tsx
new file mode 100644
index 0000000..252e58c
--- /dev/null
+++ b/src/components/Buttons/ButtonHelp/ButtonHelp.tsx
@@ -0,0 +1,41 @@
+import { SetStateAction } from 'react';
+import { useIntl } from 'react-intl';
+import styles from './ButtonHelp.module.scss';
+
+const ButtonHelp = ({
+  showHelp,
+  setShowHelp,
+  title,
+}: {
+  showHelp: boolean;
+  setShowHelp: (value: SetStateAction<boolean>) => void;
+  title?: string;
+}) => {
+  const intl = useIntl();
+
+  const handleClick = () => {
+    setShowHelp((prev) => !prev);
+  };
+
+  const activeModifier = showHelp ? styles.active : '';
+
+  return (
+    <button
+      onClick={handleClick}
+      title={title}
+      className={`${styles.wrapper} ${activeModifier}`}
+    >
+      <span className={styles.icon} aria-hidden="true">
+        ?
+      </span>
+      <span className="screen-reader-text">
+        {intl.formatMessage({
+          defaultMessage: 'Help',
+          description: 'ButtonHelp: screen reader text',
+        })}
+      </span>
+    </button>
+  );
+};
+
+export default ButtonHelp;