feat: ✨ Add FranceConnect and MonComptePerso connexion buttons (#128)

* feat: ✨ Add FranceConnect and MonComptePerso connexion buttons

* fixup review

CONTRIBUTING.md

@@ -18,7 +18,7 @@ A few things:
 -   🙏🏻 Don't be afraid to push even if you aren't 100% happy with your code or [if it's still WIP](https://github.com/codegouvfr/react-dsfr/blob/1fdcf15cb085c67d37c31badf6ffa4725795ba0f/stories/Accordion.stories.tsx#L6).
 -   📣 Let everyone know what component you are working on by [oppening an issue](https://github.com/codegouvfr/react-dsfr/issues).
 -   📚 You can draw inspiration from [`dataesr/react-dsfr`](https://github.com/dataesr/react-dsfr/tree/master/src/components/interface) and the implementation of [france connect](https://github.com/france-connect/sources/tree/main/front/libs/dsfr).
--   🔗 Use the component returned by `useLink()` instead of `<a />`. [Example in the `<Header />` component](https://github.com/codegouvfr/react-dsfr/blob/bbaf4a81d78de08d6fdcb059a9f4cb8a78ce4d5a/src/Header.tsx#L84-L87). We want to [play nice with all routing libraries](https://react-dsfr.etalab.studio/integration-with-routing-libraries).
+-   🔗 Use the component returned by `getLink()` instead of `<a />`. [Example in the `<Header />` component](https://github.com/codegouvfr/react-dsfr/blob/bbaf4a81d78de08d6fdcb059a9f4cb8a78ce4d5a/src/Header.tsx#L84-L87). We want to [play nice with all routing libraries](https://react-dsfr.etalab.studio/integration-with-routing-libraries).
 -   🕹️ When it's relevant, try to enable components to be used either in controlled or uncontrolled mode. [Example with <Tabs />](https://react-dsfr-components.etalab.studio/?path=/docs/components-tabs--default).
 -   🌎 Avoid hard coding text in JSX, use [the i18n mechanism](https://react-dsfr.etalab.studio/i18n) instead. [Here is an example](https://github.com/codegouvfr/react-dsfr/blob/bbaf4a81d78de08d6fdcb059a9f4cb8a78ce4d5a/src/DarkModeSwitch.tsx#L162-L199). (Don't worry about providing translations other than French.)
 -   🍳 If you have to arbitrate between ease of use and customisability I'd encourage you to favor ease of use. People that would need a greater level of customizability can always fall back to making their own wrapper from the reference documentation using [`fr.cx()`](https://react-dsfr.etalab.studio/cx).

src/ConnectButton.tsx

@@ -0,0 +1,88 @@
+import React, { forwardRef, memo } from "react";
+import { symToStr } from "tsafe/symToStr";
+import { createComponentI18nApi } from "./i18n";
+import { cx } from "./tools/cx";
+import { fr } from "./fr";
+import { getLink } from "./link";
+
+export enum Service {
+    AGENT_CONNECT,
+    FRANCE_CONNECT,
+    FRANCE_CONNECT_PLUS,
+    MON_COMPTE_PRO
+}
+
+const services = {
+    [Service.AGENT_CONNECT]: {
+        name: "AgentConnect",
+        url: "https://agentconnect.gouv.fr/",
+        class: "fr-agentconnect"
+    },
+    [Service.FRANCE_CONNECT]: {
+        name: "FranceConnect",
+        url: "https://franceconnect.gouv.fr/",
+        class: ""
+    },
+    [Service.FRANCE_CONNECT_PLUS]: {
+        name: "FranceConnect+",
+        url: "https://franceconnect.gouv.fr/france-connect-plus",
+        class: "fr-connect--plus"
+    },
+    [Service.MON_COMPTE_PRO]: {
+        name: "MonComptePro",
+        url: "https://moncomptepro.beta.gouv.fr/",
+        class: "fr-moncomptepro"
+    }
+};
+
+export type ConnectButtonProps = {
+    classes?: Partial<Record<"root", string>>;
+    className?: string;
+    loginUrl: string;
+    service: Service;
+};
+
+const ConnectButton = memo(
+    forwardRef<HTMLDivElement, ConnectButtonProps>((props, ref) => {
+        const { classes = {}, className, loginUrl, service } = props;
+        const { t } = useTranslation();
+        const { Link } = getLink();
+
+        const _service = services[service];
+
+        return (
+            <div className={cx(fr.cx("fr-connect-group"), className, classes?.root)} ref={ref}>
+                <form action={loginUrl} method="post" className="fr-m-0">
+                    <button className={cx(fr.cx("fr-connect"), _service.class)}>
+                        <span className="fr-connect__login">{t("identify with")}</span>
+                        <span className="fr-connect__brand">{_service.name}</span>
+                    </button>
+                </form>
+                <p>
+                    <Link
+                        href={_service.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        title={`${t("what is", _service.name)} - nouvelle fenêtre`}
+                    >
+                        {t("what is", _service.name)}
+                    </Link>
+                </p>
+            </div>
+        );
+    })
+);
+
+ConnectButton.displayName = symToStr({ ConnectButton });
+
+export default ConnectButton;
+
+const { useTranslation } = createComponentI18nApi({
+    "componentName": symToStr({ ConnectButton }),
+    "frMessages": {
+        /* spell-checker: disable */
+        "identify with": "S’identifier avec",
+        "what is": (service: string) => `Qu’est-ce que ${service} ?`
+        /* spell-checker: enable */
+    }
+});

stories/ConnectButton.stories.tsx

@@ -0,0 +1,39 @@
+import ConnectButton, { Service } from "../dist/ConnectButton";
+import { sectionName } from "./sectionName";
+import { getStoryFactory } from "./getStory";
+
+const { meta, getStory } = getStoryFactory({
+    sectionName,
+    "wrappedComponent": { ConnectButton },
+    "description": `
+- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bouton-franceconnect/)
+- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/FranceConnect.tsx)`,
+    "disabledProps": ["lang"]
+});
+
+export default meta;
+
+export const Default = getStory({
+    "loginUrl": "https://dummy",
+    service: Service.FRANCE_CONNECT
+});
+
+export const FranceConnect = getStory({
+    "loginUrl": "https://dummy",
+    service: Service.FRANCE_CONNECT
+});
+
+export const FranceConnectPlus = getStory({
+    "loginUrl": "https://dummy",
+    service: Service.FRANCE_CONNECT_PLUS
+});
+
+export const AgentConnect = getStory({
+    "loginUrl": "https://dummy",
+    service: Service.AGENT_CONNECT
+});
+
+export const MonComptePro = getStory({
+    "loginUrl": "https://dummy",
+    service: Service.MON_COMPTE_PRO
+});