From 2c1c8028338a92e800c62e9e004e4d26c7888824 Mon Sep 17 00:00:00 2001
From: Lilian Saget-Lethias <lilian.sagetlethias@gmail.com>
Date: Thu, 1 Jun 2023 02:59:55 +0200
Subject: [PATCH] feat: add onclick to connect buttons and refacto agentconnect

---
 src/AgentConnectButton.tsx              | 58 ++++++++++---------------
 src/Button.tsx                          |  2 +-
 src/FranceConnectButton.tsx             | 37 +++++++++++-----
 src/MonCompteProButton.tsx              | 36 +++++++++++----
 src/assets/agentconnect.css             | 26 ++++++++++-
 stories/AgentConnectButton.stories.tsx  |  6 ++-
 stories/FranceConnectButton.stories.tsx |  6 ++-
 stories/MonComptePro.stories.tsx        |  6 ++-
 8 files changed, 116 insertions(+), 61 deletions(-)

diff --git a/src/AgentConnectButton.tsx b/src/AgentConnectButton.tsx
index 98decc20a..4489341b6 100644
--- a/src/AgentConnectButton.tsx
+++ b/src/AgentConnectButton.tsx
@@ -1,57 +1,45 @@
-"use client";
-import React, { forwardRef, memo, useState, type CSSProperties } from "react";
+import React, { forwardRef, memo, type CSSProperties } from "react";
 import { symToStr } from "tsafe/symToStr";
 import { createComponentI18nApi } from "./i18n";
 import { fr } from "./fr";
 import { assert, type Equals } from "tsafe/assert";
-import agentconnectBtnPrincipalSvgUrl from "./assets/agentconnect-btn-principal.svg";
-import agentconnectBtnPrincipalHoverSvgUrl from "./assets/agentconnect-btn-principal-hover.svg";
-import agentconnectBtnAlternatifSvgUrl from "./assets/agentconnect-btn-alternatif.svg";
-import agentconnectBtnAlternatifHoverSvgUrl from "./assets/agentconnect-btn-alternatif-hover.svg";
 import "./assets/agentconnect.css";
-import { useIsDark } from "./useIsDark";
-import { getAssetUrl } from "./tools/getAssetUrl";
 import { cx } from "./tools/cx";
 
-export type AgentConnectButtonProps = {
-    className?: string;
-    url: string;
-    style?: CSSProperties;
-};
+export type AgentConnectButtonProps = AgentConnectButtonProps.Common &
+    (AgentConnectButtonProps.WithUrl | AgentConnectButtonProps.WithOnClick);
+
+export namespace AgentConnectButtonProps {
+    export type Common = {
+        className?: string;
+        style?: CSSProperties;
+    };
+    export type WithUrl = {
+        url: string;
+        onClick?: never;
+    };
+    export type WithOnClick = {
+        url?: never;
+        onClick: React.MouseEventHandler<HTMLButtonElement>;
+    };
+}
 
 /** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-franceconnectbutton> */
 export const AgentConnectButton = memo(
     forwardRef<HTMLDivElement, AgentConnectButtonProps>((props, ref) => {
-        const { className, url, style, ...rest } = props;
+        const { className, url: href, style, onClick, ...rest } = props;
 
         assert<Equals<keyof typeof rest, never>>();
 
         const { t } = useTranslation();
 
-        const [isMouseHover, setIsMouseHover] = useState(false);
-
-        const { isDark } = useIsDark();
+        const Inner = onClick !== undefined ? "button" : "a";
+        const innerProps = (onClick !== undefined ? { onClick } : { href }) as any;
 
         return (
             <div className={className} style={style} ref={ref}>
-                <a
-                    className="agentconnect-button__link"
-                    href={url}
-                    onMouseEnter={() => setIsMouseHover(true)}
-                    onMouseLeave={() => setIsMouseHover(false)}
-                >
-                    <img
-                        src={getAssetUrl(
-                            isDark
-                                ? isMouseHover
-                                    ? agentconnectBtnAlternatifHoverSvgUrl
-                                    : agentconnectBtnAlternatifSvgUrl
-                                : isMouseHover
-                                ? agentconnectBtnPrincipalHoverSvgUrl
-                                : agentconnectBtnPrincipalSvgUrl
-                        )}
-                    />
-                </a>
+                <span className="agentconnect-button__preload-hover" />
+                <Inner className="agentconnect-button__link" {...innerProps} />
                 <p>
                     <a
                         className={cx(
diff --git a/src/Button.tsx b/src/Button.tsx
index 26877cb98..c7b62ee18 100644
--- a/src/Button.tsx
+++ b/src/Button.tsx
@@ -123,7 +123,7 @@ export const Button = memo(
             prop_className
         );
 
-        return linkProps ? (
+        return linkProps !== undefined ? (
             <Link
                 {...linkProps}
                 title={title ?? linkProps.title}
diff --git a/src/FranceConnectButton.tsx b/src/FranceConnectButton.tsx
index 58a842fbf..0362f9018 100644
--- a/src/FranceConnectButton.tsx
+++ b/src/FranceConnectButton.tsx
@@ -5,38 +5,53 @@ import { fr } from "./fr";
 import { assert, type Equals } from "tsafe/assert";
 import { cx } from "./tools/cx";
 
-export type FranceConnectButtonProps = {
-    className?: string;
-    url: string;
-    /** Default: false */
-    plus?: boolean;
-    classes?: Partial<Record<"root" | "login" | "brand", string>>;
-    style?: CSSProperties;
-};
+export type FranceConnectButtonProps = FranceConnectButtonProps.Common &
+    (FranceConnectButtonProps.WithUrl | FranceConnectButtonProps.WithOnClick);
+
+export namespace FranceConnectButtonProps {
+    export type Common = {
+        className?: string;
+        /** Default: false */
+        plus?: boolean;
+        classes?: Partial<Record<"root" | "login" | "brand", string>>;
+        style?: CSSProperties;
+    };
+    export type WithUrl = {
+        url: string;
+        onClick?: never;
+    };
+    export type WithOnClick = {
+        url?: never;
+        onClick: React.MouseEventHandler<HTMLButtonElement>;
+    };
+}
 
 /** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-franceconnectbutton> */
 export const FranceConnectButton = memo(
     forwardRef<HTMLDivElement, FranceConnectButtonProps>((props, ref) => {
-        const { classes = {}, className, url, plus = false, style, ...rest } = props;
+        const { classes = {}, className, url: href, plus = false, style, onClick, ...rest } = props;
 
         assert<Equals<keyof typeof rest, never>>();
 
         const { t } = useTranslation();
 
+        const Inner = onClick !== undefined ? "button" : "a";
+        const innerProps = (onClick !== undefined ? { onClick } : { href }) as any;
+
         return (
             <div
                 className={cx(fr.cx("fr-connect-group"), classes.root, className)}
                 style={style}
                 ref={ref}
             >
-                <a className={fr.cx("fr-btn", "fr-connect")} href={url}>
+                <Inner className={fr.cx("fr-btn", "fr-connect")} {...innerProps}>
                     <span className={cx(fr.cx("fr-connect__login"), classes.login)}>
                         S’identifier avec
                     </span>
                     <span className={cx(fr.cx("fr-connect__brand"), classes.brand)}>
                         FranceConnect{plus ? "+" : ""}
                     </span>
-                </a>
+                </Inner>
                 <p>
                     <a
                         href={
diff --git a/src/MonCompteProButton.tsx b/src/MonCompteProButton.tsx
index 4d8eab50a..6c689d57b 100644
--- a/src/MonCompteProButton.tsx
+++ b/src/MonCompteProButton.tsx
@@ -6,36 +6,54 @@ import { assert, type Equals } from "tsafe/assert";
 import { cx } from "./tools/cx";
 import "./assets/moncomptepro.css";
 
-export type FranceConnectButtonProps = {
-    className?: string;
-    url: string;
-    classes?: Partial<Record<"root" | "login" | "brand", string>>;
-    style?: CSSProperties;
-};
+export type FranceConnectButtonProps = FranceConnectButtonProps.Common &
+    (FranceConnectButtonProps.WithUrl | FranceConnectButtonProps.WithOnClick);
+
+export namespace FranceConnectButtonProps {
+    export type Common = {
+        className?: string;
+        classes?: Partial<Record<"root" | "login" | "brand", string>>;
+        style?: CSSProperties;
+    };
+    export type WithUrl = {
+        url: string;
+        onClick?: never;
+    };
+    export type WithOnClick = {
+        url?: never;
+        onClick: React.MouseEventHandler<HTMLButtonElement>;
+    };
+}
 
 /** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-franceconnectbutton> */
 export const MonCompteProButton = memo(
     forwardRef<HTMLDivElement, FranceConnectButtonProps>((props, ref) => {
-        const { classes = {}, className, url, style, ...rest } = props;
+        const { classes = {}, className, url: href, style, onClick, ...rest } = props;
 
         assert<Equals<keyof typeof rest, never>>();
 
         const { t } = useTranslation();
 
+        const Inner = onClick !== undefined ? "button" : "a";
+        const innerProps = (onClick !== undefined ? { onClick } : { href }) as any;
+
         return (
             <div
                 className={cx(fr.cx("fr-connect-group"), classes.root, className)}
                 style={style}
                 ref={ref}
             >
-                <a className={cx(fr.cx("fr-btn", "fr-connect"), "moncomptepro-button")} href={url}>
+                <Inner
+                    className={cx(fr.cx("fr-btn", "fr-connect"), "moncomptepro-button")}
+                    {...innerProps}
+                >
                     <span className={cx(fr.cx("fr-connect__login"), classes.login)}>
                         S’identifier avec
                     </span>
                     <span className={cx(fr.cx("fr-connect__brand"), classes.brand)}>
                         MonComptePro
                     </span>
-                </a>
+                </Inner>
                 <p>
                     <a
                         href="https://moncomptepro.beta.gouv.fr/"
diff --git a/src/assets/agentconnect.css b/src/assets/agentconnect.css
index 3c6384037..5e03693b7 100644
--- a/src/assets/agentconnect.css
+++ b/src/assets/agentconnect.css
@@ -1,8 +1,30 @@
 
 .agentconnect-button__link {
-    display: block;
-    background-image: unset;
+    width: 206px;
+    height: 60px;
+    display: inline-block;
+    background-image: url("./agentconnect-btn-principal.svg");
     --active-tint: unset;
+    background-color: transparent;
+    background-position: 0 0;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+.agentconnect-button__preload-hover {
+    display: none;
+}
+.agentconnect-button__link:hover, .agentconnect-button__preload-hover {
+    background-image: url("./agentconnect-btn-principal-hover.svg");
+}
+
+:root[data-fr-theme=dark] .agentconnect-button__link {
+    background-image: url("./agentconnect-btn-alternatif.svg");
+}
+
+:root[data-fr-theme=dark] .agentconnect-button__link:hover,
+:root[data-fr-theme=dark] .agentconnect-button__preload-hover {
+    background-image: url("./agentconnect-btn-alternatif-hover.svg");
 }
 
 .agentconnect-button__hint {
diff --git a/stories/AgentConnectButton.stories.tsx b/stories/AgentConnectButton.stories.tsx
index d68440518..9862c3b61 100644
--- a/stories/AgentConnectButton.stories.tsx
+++ b/stories/AgentConnectButton.stories.tsx
@@ -1,6 +1,6 @@
 import { AgentConnectButton } from "../dist/AgentConnectButton";
 import { sectionName } from "./sectionName";
-import { getStoryFactory } from "./getStory";
+import { getStoryFactory, logCallbacks } from "./getStory";
 
 const { meta, getStory } = getStoryFactory({
     sectionName,
@@ -22,3 +22,7 @@ export const Centered = getStory({
     },
     "url": "https://example.com"
 });
+
+export const WithOnClick = getStory({
+    ...logCallbacks(["onClick"])
+});
diff --git a/stories/FranceConnectButton.stories.tsx b/stories/FranceConnectButton.stories.tsx
index c037bed3c..7a2fc5a38 100644
--- a/stories/FranceConnectButton.stories.tsx
+++ b/stories/FranceConnectButton.stories.tsx
@@ -1,6 +1,6 @@
 import { FranceConnectButton } from "../dist/FranceConnectButton";
 import { sectionName } from "./sectionName";
-import { getStoryFactory } from "./getStory";
+import { getStoryFactory, logCallbacks } from "./getStory";
 
 const { meta, getStory } = getStoryFactory({
     sectionName,
@@ -27,3 +27,7 @@ export const Centered = getStory({
     },
     "url": "https://example.com"
 });
+
+export const WithOnClick = getStory({
+    ...logCallbacks(["onClick"])
+});
diff --git a/stories/MonComptePro.stories.tsx b/stories/MonComptePro.stories.tsx
index 997997b54..222cfb1dc 100644
--- a/stories/MonComptePro.stories.tsx
+++ b/stories/MonComptePro.stories.tsx
@@ -1,6 +1,6 @@
 import { MonCompteProButton } from "../dist/MonCompteProButton";
 import { sectionName } from "./sectionName";
-import { getStoryFactory } from "./getStory";
+import { getStoryFactory, logCallbacks } from "./getStory";
 
 const { meta, getStory } = getStoryFactory({
     sectionName,
@@ -22,3 +22,7 @@ export const Centered = getStory({
     },
     "url": "https://example.com"
 });
+
+export const WithOnClick = getStory({
+    ...logCallbacks(["onClick"])
+});