From 388e687857345c85ee550cd5da472675e05a6ff5 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 26 Sep 2023 18:43:11 +0200
Subject: refactor(components): rewrite Button and ButtonLink components

Both:
* move styles to Sass placeholders

Button:
* add `isPressed` prop to Button
* add `isLoading` prop to Button (to differentiate state from
disabled)

ButtonLink:
* replace `external` prop with `isExternal` prop
* replace `href` prop with `to` prop
---
 .../molecules/buttons/back-to-top.module.scss      |  5 +++-
 .../molecules/buttons/back-to-top.stories.tsx      |  6 ++---
 .../molecules/buttons/back-to-top.test.tsx         | 11 +++++----
 src/components/molecules/buttons/back-to-top.tsx   | 28 ++++++++++++++--------
 src/components/molecules/buttons/help-button.tsx   |  4 ++--
 5 files changed, 34 insertions(+), 20 deletions(-)

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

diff --git a/src/components/molecules/buttons/back-to-top.module.scss b/src/components/molecules/buttons/back-to-top.module.scss
index f5b3acd..7eae03b 100644
--- a/src/components/molecules/buttons/back-to-top.module.scss
+++ b/src/components/molecules/buttons/back-to-top.module.scss
@@ -4,6 +4,7 @@
   .link {
     width: clamp(#{fun.convert-px(48)}, 8vw, #{fun.convert-px(55)});
     height: clamp(#{fun.convert-px(48)}, 8vw, #{fun.convert-px(55)});
+    padding: 0;
 
     svg {
       width: 100%;
@@ -18,7 +19,9 @@
       .arrow-bar {
         opacity: 0;
         transform: translateY(30%) scaleY(0);
-        transition: transform 0.45s ease-in-out 0s, opacity 0.1s linear 0.2s;
+        transition:
+          transform 0.45s ease-in-out 0s,
+          opacity 0.1s linear 0.2s;
       }
     }
 
diff --git a/src/components/molecules/buttons/back-to-top.stories.tsx b/src/components/molecules/buttons/back-to-top.stories.tsx
index 5de12d4..40acd33 100644
--- a/src/components/molecules/buttons/back-to-top.stories.tsx
+++ b/src/components/molecules/buttons/back-to-top.stories.tsx
@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { BackToTop as BackToTopComponent } from './back-to-top';
 
 /**
@@ -21,7 +21,7 @@ export default {
         required: false,
       },
     },
-    target: {
+    to: {
       control: {
         type: 'text',
       },
@@ -43,5 +43,5 @@ const Template: ComponentStory<typeof BackToTopComponent> = (args) => (
  */
 export const BackToTop = Template.bind({});
 BackToTop.args = {
-  target: 'top',
+  to: 'top',
 };
diff --git a/src/components/molecules/buttons/back-to-top.test.tsx b/src/components/molecules/buttons/back-to-top.test.tsx
index aaae3ef..a775841 100644
--- a/src/components/molecules/buttons/back-to-top.test.tsx
+++ b/src/components/molecules/buttons/back-to-top.test.tsx
@@ -1,11 +1,14 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
+import { render, screen as rtlScreen } from '../../../../tests/utils';
 import { BackToTop } from './back-to-top';
 
 describe('BackToTop', () => {
   it('renders a BackToTop link', () => {
-    render(<BackToTop target="top" />);
-    expect(screen.getByRole('link')).toHaveAccessibleName('Back to top');
-    expect(screen.getByRole('link')).toHaveAttribute('href', '#top');
+    const id = 'top';
+
+    render(<BackToTop to={id} />);
+
+    expect(rtlScreen.getByRole('link')).toHaveAccessibleName('Back to top');
+    expect(rtlScreen.getByRole('link')).toHaveAttribute('href', `#${id}`);
   });
 });
diff --git a/src/components/molecules/buttons/back-to-top.tsx b/src/components/molecules/buttons/back-to-top.tsx
index d28d6c1..6ca6f10 100644
--- a/src/components/molecules/buttons/back-to-top.tsx
+++ b/src/components/molecules/buttons/back-to-top.tsx
@@ -1,13 +1,13 @@
-import { FC } from 'react';
+import type { FC, HTMLAttributes } from 'react';
 import { useIntl } from 'react-intl';
-import { Arrow, ButtonLink, type ButtonLinkProps } from '../../atoms';
+import { Arrow, ButtonLink } from '../../atoms';
 import styles from './back-to-top.module.scss';
 
-export type BackToTopProps = Pick<ButtonLinkProps, 'target'> & {
+export type BackToTopProps = HTMLAttributes<HTMLDivElement> & {
   /**
-   * Set additional classnames to the button wrapper.
+   * Define the element id to us as anchor.
    */
-  className?: string;
+  to: string;
 };
 
 /**
@@ -15,23 +15,31 @@ export type BackToTopProps = Pick<ButtonLinkProps, 'target'> & {
  *
  * Render a back to top link.
  */
-export const BackToTop: FC<BackToTopProps> = ({ className = '', target }) => {
+export const BackToTop: FC<BackToTopProps> = ({
+  className = '',
+  to,
+  ...props
+}) => {
   const intl = useIntl();
   const linkName = intl.formatMessage({
     defaultMessage: 'Back to top',
     description: 'BackToTop: link text',
     id: 'm+SUSR',
   });
+  const btnClass = `${styles.wrapper} ${className}`;
+  const anchor = `#${to}`;
 
   return (
-    <div className={`${styles.wrapper} ${className}`}>
+    <div {...props} className={btnClass}>
       <ButtonLink
-        shape="square"
-        target={`#${target}`}
         aria-label={linkName}
         className={styles.link}
+        // eslint-disable-next-line react/jsx-no-literals -- Shape allowed
+        shape="square"
+        to={anchor}
       >
-        <Arrow aria-hidden={true} direction="top" />
+        {/* eslint-disable-next-line react/jsx-no-literals -- Direction allowed */}
+        <Arrow aria-hidden direction="top" />
       </ButtonLink>
     </div>
   );
diff --git a/src/components/molecules/buttons/help-button.tsx b/src/components/molecules/buttons/help-button.tsx
index 1234835..7a01b14 100644
--- a/src/components/molecules/buttons/help-button.tsx
+++ b/src/components/molecules/buttons/help-button.tsx
@@ -1,11 +1,11 @@
-import { forwardRef, ForwardRefRenderFunction } from 'react';
+import { forwardRef, type ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
 import { Button, type ButtonProps } from '../../atoms';
 import styles from './help-button.module.scss';
 
 export type HelpButtonProps = Pick<
   ButtonProps,
-  'aria-pressed' | 'className' | 'onClick'
+  'className' | 'isPressed' | 'onClick'
 >;
 
 const HelpButtonWithRef: ForwardRefRenderFunction<
-- 
cgit v1.2.3