src/components/Buttons/ButtonHelp/ButtonHelp.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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;