Feature / Download component

COMPONENTS.md

@@ -37,7 +37,7 @@
 -   [x] Summary
 -   [ ] Table
 -   [ ] Tag
--   [ ] Download
+-   [x] Download
 -   [ ] Transcription
 -   [x] Tile
 -   [x] Input

README.md

@@ -45,7 +45,7 @@ This module is a wrapper/compatibility layer for [@gouvfr/dsfr](https://github.c
 -   [x] No [white flash when reloading in SSR setup](https://github.com/codegouvfr/@codegouvfr/react-dsfr/issues/2#issuecomment-1257263480).
 -   [x] Most components are server component ready. The others are labeled with `"use client";`
 -   [x] [Perfect integration with all major React framework: Next.js (PagesDir and AppDir), Create React App, Vue](https://react-dsfr.etalab.studio/).
--   [ ] All [the components](https://www.systeme-de-design.gouv.fr/elements-d-interface) are implemented (20/41, [see details](COMPONENTS.md))
+-   [ ] All [the components](https://www.systeme-de-design.gouv.fr/elements-d-interface) are implemented (21/41, [see details](COMPONENTS.md))
 -   [x] Three shakable distribution, cherry pick the components you import. (It's not all in a big .js bundle)
 -   [x] Optional integration with [MUI](https://mui.com/). If you use MUI components they will
         be automatically adapted to look like [DSFR components](https://www.systeme-de-design.gouv.fr/elements-d-interface). See [documentation](https://react-dsfr.etalab.studio/mui-integration).

package.json

@@ -148,6 +148,8 @@
         "./Highlight": "./dist/Highlight.js",
         "./Header": "./dist/Header.js",
         "./Footer": "./dist/Footer.js",
+        "./File": "./dist/File.js",
+        "./Download": "./dist/Download.js",
         "./Display": "./dist/Display.js",
         "./Checkbox": "./dist/Checkbox.js",
         "./Card": "./dist/Card.js",

src/Download.tsx

@@ -0,0 +1,52 @@
+import React, { memo, forwardRef, type CSSProperties } from "react";
+import { symToStr } from "tsafe/symToStr";
+import { assert } from "tsafe/assert";
+import type { Equals } from "tsafe";
+import { fr } from "./fr";
+import { cx } from "./tools/cx";
+import { getLink } from "./link";
+import { RegisteredLinkProps } from "./link";
+
+export type DownloadProps = {
+    className?: string;
+    style?: CSSProperties;
+    details: string;
+    label: string;
+    linkProps: RegisteredLinkProps;
+    classes?: Partial<Record<"root" | "wrapper" | "link" | "details", string>>;
+};
+
+/** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-download> */
+
+export const Download = memo(
+    forwardRef<HTMLDivElement, DownloadProps>((props, ref) => {
+        const { className, style, details, label, linkProps, classes = {}, ...rest } = props;
+
+        const { Link } = getLink();
+
+        assert<Equals<keyof typeof rest, never>>();
+
+        return (
+            <div
+                className={cx(fr.cx("fr-download"), className, classes.root)}
+                style={style}
+                ref={ref}
+            >
+                <p className={cx(classes.wrapper)}>
+                    <Link
+                        {...linkProps}
+                        download
+                        className={cx(fr.cx("fr-download__link"), classes.link)}
+                    >
+                        {label}
+                        <span className="fr-download__detail">{details}</span>
+                    </Link>
+                </p>
+            </div>
+        );
+    })
+);
+
+Download.displayName = symToStr({ Download });
+
+export default Download;

stories/Download.stories.tsx

@@ -0,0 +1,29 @@
+import { Download } from "../dist/Download";
+import { sectionName } from "./sectionName";
+import { getStoryFactory } from "./getStory";
+
+const { meta, getStory } = getStoryFactory({
+    sectionName,
+    "wrappedComponent": { Download },
+    description: `
+- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/telechargement-de-fichier)
+- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Download.tsx)`,
+    "argTypes": {
+        "label": {
+            "description": `Required - the label of the anchor element. In case the file to download is in a different language than the current document one, it should contains the mention of the language.`
+        },
+        "details": {
+            "description": `Required - informations about the file to download (size, format, etc.). `
+        }
+    }
+});
+
+export default meta;
+
+export const Default = getStory({
+    "label": "Télécharger le document lorem ipsum sit dolores amet",
+    "details": "JPG – 61,88 ko",
+    linkProps: {
+        href: "[À MODIFIER]"
+    }
+});