From 968379d9f821f666da0205c8cdb681a3f52f707a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sylvain=20Le=20Gl=C3=A9au?= <syl@sylvainlg.fr>
Date: Fri, 9 Jun 2023 08:49:34 +0200
Subject: [PATCH 1/2] feat: :sparkles: Create BackToTop component

---
 src/BackToTop.tsx             | 47 +++++++++++++++++++++++++++++++++++
 stories/BackToTop.stories.tsx | 25 +++++++++++++++++++
 2 files changed, 72 insertions(+)
 create mode 100644 src/BackToTop.tsx
 create mode 100644 stories/BackToTop.stories.tsx

diff --git a/src/BackToTop.tsx b/src/BackToTop.tsx
new file mode 100644
index 00000000..3761f91e
--- /dev/null
+++ b/src/BackToTop.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { forwardRef, memo } from "react";
+import { cx } from "./tools/cx";
+import { fr } from "./fr";
+import { symToStr } from "tsafe/symToStr";
+import { createComponentI18nApi } from "./i18n";
+
+export type BackToTopProps = {
+    anchor?: string;
+    right?: boolean;
+};
+
+export const BackToTop = memo(
+    forwardRef<HTMLAnchorElement, BackToTopProps>((props, ref) => {
+        const { t } = useTranslation();
+        const { anchor = "#top", right = false } = props;
+        return (
+            <div className={!right ? undefined : fr.cx("fr-grid-row", "fr-grid-row--right")}>
+                <a
+                    ref={ref}
+                    className={cx(fr.cx("fr-link", "fr-icon-arrow-up-fill", "fr-link--icon-left"))}
+                    href={anchor}
+                >
+                    {t("page top")}
+                </a>
+            </div>
+        );
+    })
+);
+
+BackToTop.displayName = symToStr({ BackToTop });
+
+export default BackToTop;
+
+const { useTranslation, addBackToTopTranslations } = createComponentI18nApi({
+    "componentName": symToStr({ BackToTop }),
+    "frMessages": {
+        "page top": "Haut de page"
+    }
+});
+
+addBackToTopTranslations({
+    lang: "en",
+    messages: {
+        "page top": "Top of the page"
+    }
+});
diff --git a/stories/BackToTop.stories.tsx b/stories/BackToTop.stories.tsx
new file mode 100644
index 00000000..967972cc
--- /dev/null
+++ b/stories/BackToTop.stories.tsx
@@ -0,0 +1,25 @@
+import { BackToTop } from "../dist/BackToTop";
+import { getStoryFactory } from "./getStory";
+import { sectionName } from "./sectionName";
+
+const { meta, getStory } = getStoryFactory({
+    sectionName,
+    "wrappedComponent": { BackToTop },
+    "description": `- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/retour-en-haut-de-page/)
+- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/BackToTop.tsx)`,
+    // "argTypes": {
+    //     "anchor": {
+    //         "control": { "type": null },
+    //         "defaultValue": "#top"
+    //     },
+    //     "right": {
+    //         "control": { "type": null },
+    //         "description": "Align to right"
+    //     }
+    // },
+    "disabledProps": ["lang"]
+});
+
+export default meta;
+
+export const Default = getStory({});

From 145a614fc827a16c0efb99f6392c8addc5f481f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sylvain=20Le=20Gl=C3=A9au?= <syl@sylvainlg.fr>
Date: Mon, 12 Jun 2023 22:24:15 +0200
Subject: [PATCH 2/2] fixup

---
 src/BackToTop.tsx             |  1 +
 stories/BackToTop.stories.tsx | 25 +++++++++++++++----------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/BackToTop.tsx b/src/BackToTop.tsx
index 3761f91e..55dda119 100644
--- a/src/BackToTop.tsx
+++ b/src/BackToTop.tsx
@@ -7,6 +7,7 @@ import { createComponentI18nApi } from "./i18n";
 
 export type BackToTopProps = {
     anchor?: string;
+    /** Default: false (the back to top button is centered) */
     right?: boolean;
 };
 
diff --git a/stories/BackToTop.stories.tsx b/stories/BackToTop.stories.tsx
index 967972cc..d3abe1aa 100644
--- a/stories/BackToTop.stories.tsx
+++ b/stories/BackToTop.stories.tsx
@@ -7,19 +7,24 @@ const { meta, getStory } = getStoryFactory({
     "wrappedComponent": { BackToTop },
     "description": `- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/retour-en-haut-de-page/)
 - [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/BackToTop.tsx)`,
-    // "argTypes": {
-    //     "anchor": {
-    //         "control": { "type": null },
-    //         "defaultValue": "#top"
-    //     },
-    //     "right": {
-    //         "control": { "type": null },
-    //         "description": "Align to right"
-    //     }
-    // },
+    "argTypes": {
+        "anchor": {
+            "control": { "type": null },
+            "defaultValue": "#top",
+            "description": "The #anchor for the corresponding HTML id"
+        },
+        "right": {
+            "control": "boolean",
+            "defaultValue": false,
+            "description": "Align to right"
+        }
+    },
     "disabledProps": ["lang"]
 });
 
 export default meta;
 
 export const Default = getStory({});
+export const BackToTopOnRight = getStory({
+    right: true
+});