diff --git a/COMPONENTS.md b/COMPONENTS.md index 2776565a9..faf2541ac 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -37,7 +37,7 @@ - [x] Summary - [ ] Table - [ ] Tag -- [ ] Download +- [x] Download - [ ] Transcription - [x] Tile - [x] Input diff --git a/README.md b/README.md index 2a6a1d5e7..e34d6583c 100644 --- a/README.md +++ b/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). diff --git a/package.json b/package.json index 951055350..5edd7713e 100644 --- a/package.json +++ b/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", diff --git a/src/Download.tsx b/src/Download.tsx new file mode 100644 index 000000000..57af20a6e --- /dev/null +++ b/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>; +}; + +/** @see */ + +export const Download = memo( + forwardRef((props, ref) => { + const { className, style, details, label, linkProps, classes = {}, ...rest } = props; + + const { Link } = getLink(); + + assert>(); + + return ( +
+

+ + {label} + {details} + +

+
+ ); + }) +); + +Download.displayName = symToStr({ Download }); + +export default Download; diff --git a/stories/Download.stories.tsx b/stories/Download.stories.tsx new file mode 100644 index 000000000..b54e08a3d --- /dev/null +++ b/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]" + } +});