From 51889773b12c576dc199fc84d0188f822ac7baae Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 6 Apr 2022 19:17:15 +0200
Subject: chore: add a HelpButton component

I also added a new shape to the button base.
---
 src/components/molecules/buttons/help-button.tsx | 29 ++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 src/components/molecules/buttons/help-button.tsx

(limited to 'src/components/molecules/buttons/help-button.tsx')

diff --git a/src/components/molecules/buttons/help-button.tsx b/src/components/molecules/buttons/help-button.tsx
new file mode 100644
index 0000000..4945bb4
--- /dev/null
+++ b/src/components/molecules/buttons/help-button.tsx
@@ -0,0 +1,29 @@
+import Button, { ButtonProps } from '@components/atoms/buttons/button';
+import { FC } from 'react';
+import { useIntl } from 'react-intl';
+import styles from './help-button.module.scss';
+
+export type HelpButtonProps = Pick<ButtonProps, 'onClick'>;
+
+/**
+ * HelpButton component
+ *
+ * Render a button with an interrogation mark icon.
+ */
+const HelpButton: FC<HelpButtonProps> = ({ onClick }) => {
+  const intl = useIntl();
+  const text = intl.formatMessage({
+    defaultMessage: 'Help',
+    id: 'i+/ckF',
+    description: 'HelpButton: screen reader text',
+  });
+
+  return (
+    <Button shape="circle" additionalClasses={styles.btn} onClick={onClick}>
+      <span className="screen-reader-text">{text}</span>
+      <span className={styles.icon}>?</span>
+    </Button>
+  );
+};
+
+export default HelpButton;
-- 
cgit v1.2.3