chore: add a HelpButton component

I also added a new shape to the button base.

4 files changed, 75 insertions, 0 deletions

diff --git a/src/components/molecules/buttons/help-button.module.scss b/src/components/molecules/buttons/help-button.module.scss
new file mode 100644
index 0000000..42d49f6
--- /dev/null
+++ b/src/components/molecules/buttons/help-button.module.scss
@@ -0,0 +1,21 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+
+.btn {
+  padding: var(--spacing-xs);
+
+  &:not(:disabled) {
+    &:focus {
+      text-decoration: none;
+    }
+  }
+
+  @include mix.pointer("fine") {
+    padding: var(--spacing-2xs);
+  }
+}
+
+.icon {
+  color: var(--color-primary-dark);
+  font-weight: 600;
+}
diff --git a/src/components/molecules/buttons/help-button.stories.tsx b/src/components/molecules/buttons/help-button.stories.tsx
new file mode 100644
index 0000000..2b04a9c
--- /dev/null
+++ b/src/components/molecules/buttons/help-button.stories.tsx
@@ -0,0 +1,16 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { IntlProvider } from 'react-intl';
+import HelpButtonComponent from './help-button';
+
+export default {
+  title: 'Molecules/Buttons',
+  component: HelpButtonComponent,
+} as ComponentMeta<typeof HelpButtonComponent>;
+
+const Template: ComponentStory<typeof HelpButtonComponent> = (args) => (
+  <IntlProvider locale="en">
+    <HelpButtonComponent {...args} />
+  </IntlProvider>
+);
+
+export const HelpButton = Template.bind({});
diff --git a/src/components/molecules/buttons/help-button.test.tsx b/src/components/molecules/buttons/help-button.test.tsx
new file mode 100644
index 0000000..78987ef
--- /dev/null
+++ b/src/components/molecules/buttons/help-button.test.tsx
@@ -0,0 +1,9 @@
+import { render, screen } from '@test-utils';
+import HelpButton from './help-button';
+
+describe('Help', () => {
+  it('renders a help button', () => {
+    render(<HelpButton />);
+    expect(screen.getByRole('button', { name: 'Help ?' })).toBeInTheDocument();
+  });
+});
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;