From b563a8bc2a73eb0357c549854795680598557dbe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Dubigny?= <rdubigny@users.noreply.github.com>
Date: Mon, 7 Oct 2024 15:23:33 +0200
Subject: [PATCH] fix(ProConnectButton): ProConnect is out! (#315)

* fix: conflict between proconnect and franceconnect buttons

* fix: proconnect link, root domain is not available yet

* fix: franceconnect documentation link

* feat: hide AC & MCP buttons, shows PC button instead
---
 .storybook/preview.js                   | 3 +--
 src/ProConnectButton.tsx                | 4 ++--
 src/assets/proconnect-btn.css           | 4 ++--
 stories/FranceConnectButton.stories.tsx | 2 +-
 4 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 688f47609..e1cbc3033 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -110,8 +110,7 @@ const { getHardCodedWeight } = (() => {
         "components/Stepper",
         "components/Button",
         "components/FranceConnectButton",
-        "components/AgentConnectButton",
-        "components/MonCompteProButton"
+        "components/ProConnectButton"
     ];
 
     function getHardCodedWeight(kind) {
diff --git a/src/ProConnectButton.tsx b/src/ProConnectButton.tsx
index de83cc7cf..9cd945755 100644
--- a/src/ProConnectButton.tsx
+++ b/src/ProConnectButton.tsx
@@ -53,7 +53,7 @@ export const ProConnectButton = memo(
                 style={style}
                 ref={ref}
             >
-                <Inner className={fr.cx("fr-btn", "fr-connect")} {...innerProps}>
+                <Inner className={cx(fr.cx("fr-btn", "fr-connect"), "pro-connect")} {...innerProps}>
                     <span className={cx(fr.cx("fr-connect__login"), classes.login)}>
                         S’identifier avec
                     </span>
@@ -63,7 +63,7 @@ export const ProConnectButton = memo(
                 </Inner>
                 <p>
                     <a
-                        href={"https://proconnect.gouv.fr/"}
+                        href={"https://www.proconnect.gouv.fr/"}
                         target="_blank"
                         rel="noopener"
                         title={`${t("what is service")} - ${t("new window")}`}
diff --git a/src/assets/proconnect-btn.css b/src/assets/proconnect-btn.css
index 51e7ed9da..b10b079b6 100644
--- a/src/assets/proconnect-btn.css
+++ b/src/assets/proconnect-btn.css
@@ -1,8 +1,8 @@
-.fr-connect {
+.pro-connect {
   padding-left: 4.375em !important;
 }
 
-.fr-connect:before {
+.pro-connect:before {
   width: 3.375em !important;
   background-size: 3.375em 3em !important;
   left: 0.625em !important;
diff --git a/stories/FranceConnectButton.stories.tsx b/stories/FranceConnectButton.stories.tsx
index 7a2fc5a38..154e9441a 100644
--- a/stories/FranceConnectButton.stories.tsx
+++ b/stories/FranceConnectButton.stories.tsx
@@ -6,7 +6,7 @@ const { meta, getStory } = getStoryFactory({
     sectionName,
     "wrappedComponent": { FranceConnectButton },
     "description": `
-- [See DSFR documentation](https://github.com/france-connect/Documentation-AgentConnect/blob/main/doc_fs/implementation_fca/bouton_fca.md)
+- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bouton-franceconnect/)
 - [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/FranceConnectButton.tsx)`
 });