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/atoms/buttons/button.stories.tsx    |  2 +-
 src/components/atoms/buttons/button.tsx            | 13 +++++++---
 src/components/atoms/buttons/buttons.module.scss   |  7 +++++-
 .../molecules/buttons/help-button.module.scss      | 21 ++++++++++++++++
 .../molecules/buttons/help-button.stories.tsx      | 16 ++++++++++++
 .../molecules/buttons/help-button.test.tsx         |  9 +++++++
 src/components/molecules/buttons/help-button.tsx   | 29 ++++++++++++++++++++++
 7 files changed, 92 insertions(+), 5 deletions(-)
 create mode 100644 src/components/molecules/buttons/help-button.module.scss
 create mode 100644 src/components/molecules/buttons/help-button.stories.tsx
 create mode 100644 src/components/molecules/buttons/help-button.test.tsx
 create mode 100644 src/components/molecules/buttons/help-button.tsx

(limited to 'src')

diff --git a/src/components/atoms/buttons/button.stories.tsx b/src/components/atoms/buttons/button.stories.tsx
index bec5e5d..9f4061b 100644
--- a/src/components/atoms/buttons/button.stories.tsx
+++ b/src/components/atoms/buttons/button.stories.tsx
@@ -80,7 +80,7 @@ export default {
         type: 'select',
       },
       description: 'The link shape.',
-      options: ['rectangle', 'square'],
+      options: ['circle', 'rectangle', 'square'],
       table: {
         category: 'Options',
         defaultValue: { summary: 'rectangle' },
diff --git a/src/components/atoms/buttons/button.tsx b/src/components/atoms/buttons/button.tsx
index 08b8d67..ae4c894 100644
--- a/src/components/atoms/buttons/button.tsx
+++ b/src/components/atoms/buttons/button.tsx
@@ -2,10 +2,14 @@ import { FC, MouseEventHandler } from 'react';
 import styles from './buttons.module.scss';
 
 export type ButtonProps = {
+  /**
+   * Add additional classes to the button wrapper.
+   */
+  additionalClasses?: string;
   /**
    * Button accessible label.
    */
-  'aria-label'?: string;
+  ariaLabel?: string;
   /**
    * Button state. Default: false.
    */
@@ -21,7 +25,7 @@ export type ButtonProps = {
   /**
    * Button shape. Default: rectangle.
    */
-  shape?: 'rectangle' | 'square';
+  shape?: 'circle' | 'rectangle' | 'square';
   /**
    * Button type attribute. Default: button.
    */
@@ -34,6 +38,8 @@ export type ButtonProps = {
  * Use a button as call to action.
  */
 const Button: FC<ButtonProps> = ({
+  additionalClasses,
+  ariaLabel,
   children,
   disabled = false,
   kind = 'secondary',
@@ -48,7 +54,8 @@ const Button: FC<ButtonProps> = ({
     <button
       type={type}
       disabled={disabled}
-      className={`${styles.btn} ${kindClass} ${shapeClass}`}
+      className={`${styles.btn} ${kindClass} ${shapeClass} ${additionalClasses}`}
+      aria-label={ariaLabel}
       {...props}
     >
       {children}
diff --git a/src/components/atoms/buttons/buttons.module.scss b/src/components/atoms/buttons/buttons.module.scss
index 6784de9..a1c3dba 100644
--- a/src/components/atoms/buttons/buttons.module.scss
+++ b/src/components/atoms/buttons/buttons.module.scss
@@ -14,11 +14,16 @@
     padding: var(--spacing-2xs) var(--spacing-md);
   }
 
-  &--square {
+  &--square,
+  &--circle {
     padding: var(--spacing-xs);
     aspect-ratio: 1 / 1;
   }
 
+  &--circle {
+    border-radius: 50%;
+  }
+
   &:disabled {
     cursor: wait;
   }
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;
-- 
cgit v1.2.3