refactor: use storybook and atomic design (#16)

BREAKING CHANGE: rewrite most of the Typescript types, so the content format (the meta in particular) needs to be updated.

1 files changed, 37 insertions, 0 deletions

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