feat: ✨ Create BackToTop component

src/BackToTop.tsx

@@ -0,0 +1,48 @@
+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;
+    /** Default: false (the back to top button is centered) */
+    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"
+    }
+});

stories/BackToTop.stories.tsx

@@ -0,0 +1,30 @@
+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",
+            "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
+});