From a1e8f1e4426ed3560ce1b76fb73a6969388ed253 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Thu, 7 Apr 2022 22:57:15 +0200
Subject: chore: add a SelectWithTooltip component

---
 .../molecules/buttons/help-button.stories.tsx      | 28 ++++++++++++++++++++++
 src/components/molecules/buttons/help-button.tsx   | 15 +++++++++---
 2 files changed, 40 insertions(+), 3 deletions(-)

(limited to 'src/components/molecules/buttons')

diff --git a/src/components/molecules/buttons/help-button.stories.tsx b/src/components/molecules/buttons/help-button.stories.tsx
index 2b04a9c..7ed953e 100644
--- a/src/components/molecules/buttons/help-button.stories.tsx
+++ b/src/components/molecules/buttons/help-button.stories.tsx
@@ -5,6 +5,34 @@ import HelpButtonComponent from './help-button';
 export default {
   title: 'Molecules/Buttons',
   component: HelpButtonComponent,
+  argTypes: {
+    classes: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classes to the button.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    onClick: {
+      control: {
+        type: null,
+      },
+      description: 'A callback function to handle click on button.',
+      table: {
+        category: 'Events',
+      },
+      type: {
+        name: 'function',
+        required: false,
+      },
+    },
+  },
 } as ComponentMeta<typeof HelpButtonComponent>;
 
 const Template: ComponentStory<typeof HelpButtonComponent> = (args) => (
diff --git a/src/components/molecules/buttons/help-button.tsx b/src/components/molecules/buttons/help-button.tsx
index 4945bb4..d933829 100644
--- a/src/components/molecules/buttons/help-button.tsx
+++ b/src/components/molecules/buttons/help-button.tsx
@@ -3,14 +3,19 @@ import { FC } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './help-button.module.scss';
 
-export type HelpButtonProps = Pick<ButtonProps, 'onClick'>;
+export type HelpButtonProps = Pick<ButtonProps, 'onClick'> & {
+  /**
+   * Set additional classes to the button.
+   */
+  classes?: string;
+};
 
 /**
  * HelpButton component
  *
  * Render a button with an interrogation mark icon.
  */
-const HelpButton: FC<HelpButtonProps> = ({ onClick }) => {
+const HelpButton: FC<HelpButtonProps> = ({ classes = '', onClick }) => {
   const intl = useIntl();
   const text = intl.formatMessage({
     defaultMessage: 'Help',
@@ -19,7 +24,11 @@ const HelpButton: FC<HelpButtonProps> = ({ onClick }) => {
   });
 
   return (
-    <Button shape="circle" additionalClasses={styles.btn} onClick={onClick}>
+    <Button
+      shape="circle"
+      additionalClasses={`${styles.btn} ${classes}`}
+      onClick={onClick}
+    >
       <span className="screen-reader-text">{text}</span>
       <span className={styles.icon}>?</span>
     </Button>
-- 
cgit v1.2.3