Restore Tile component

Author: garronej

COMPONENTS.md

@@ -40,4 +40,4 @@
 -   [ ] Tag
 -   [ ] Download
 -   [ ] Transcription
--   [ ] Tile
+-   [x] Tile

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@codegouvfr/react-dsfr",
-    "version": "0.12.1",
+    "version": "0.13.0",
     "description": "French State Design System React integration library",
     "repository": {
         "type": "git",
@@ -131,6 +131,7 @@
         "./useColors": "./dist/useColors.js",
         "./i18n": "./dist/i18n/index.js",
         "./mui": "./dist/mui.js",
+        "./Tile": "./dist/Tile.js",
         "./Tabs": "./dist/Tabs.js",
         "./Summary": "./dist/Summary.js",
         "./Stepper": "./dist/Stepper.js",

src/Tile.tsx

@@ -0,0 +1,100 @@
+import React, { memo, forwardRef } from "react";
+import type { ReactNode } from "react";
+import { symToStr } from "tsafe/symToStr";
+import { assert } from "tsafe/assert";
+import type { Equals } from "tsafe";
+import type { RegisteredLinkProps } from "./link";
+import { getLink } from "./link";
+import { fr } from "./fr";
+import { cx } from "./tools/cx";
+
+//https://main--ds-gouv.netlify.app/example/component/tile/
+export type TileProps = {
+    className?: string;
+    title: ReactNode;
+    linkProps: RegisteredLinkProps;
+    desc?: ReactNode;
+    imageUrl?: string;
+    imageAlt?: string;
+    grey?: boolean;
+
+    /** make the whole tile clickable */
+    enlargeLink?: boolean;
+    classes?: Partial<
+        Record<"root" | "title" | "link" | "body" | "desc" | "img" | "imgTag", string>
+    >;
+    /** Default false */
+    horizontal?: boolean;
+};
+
+export namespace TileProps {}
+
+/** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-tile> */
+export const Tile = memo(
+    forwardRef<HTMLDivElement, TileProps>((props, ref) => {
+        const {
+            className,
+            title,
+            linkProps,
+            desc,
+            imageUrl,
+            imageAlt,
+            horizontal = false,
+            grey = false,
+            classes = {},
+            enlargeLink = true,
+            ...rest
+        } = props;
+
+        assert<Equals<keyof typeof rest, never>>();
+
+        const { Link } = getLink();
+
+        return (
+            <div
+                className={cx(
+                    fr.cx(
+                        "fr-tile",
+                        enlargeLink && "fr-enlarge-link",
+                        horizontal && "fr-tile--horizontal",
+                        grey && "fr-tile--grey"
+                    ),
+                    classes.root,
+                    className
+                )}
+                ref={ref}
+                {...rest}
+            >
+                <div className={cx(fr.cx("fr-tile__body"), classes.body)}>
+                    <h3 className={cx(fr.cx("fr-tile__title"), classes.title)}>
+                        <Link
+                            className={cx(
+                                fr.cx("fr-tile__link"),
+                                classes.link,
+                                linkProps.className
+                            )}
+                            href={linkProps.href}
+                        >
+                            {title}
+                        </Link>
+                    </h3>
+                    <p className={cx(fr.cx("fr-tile__desc"), classes.desc)}>{desc}</p>
+                </div>
+                {(imageUrl !== undefined && imageUrl.length && (
+                    <div className={cx(fr.cx("fr-tile__img"), classes.img)}>
+                        <img
+                            className={cx(fr.cx("fr-responsive-img"), classes.imgTag)}
+                            src={imageUrl}
+                            alt={imageAlt}
+                        />
+                    </div>
+                )) ||
+                    null}
+            </div>
+        );
+    })
+);
+
+Tile.displayName = symToStr({ Tile });
+
+export default Tile;

stories/Tile.stories.tsx

@@ -0,0 +1,60 @@
+import { Tile } from "../dist/Tile";
+import { sectionName } from "./sectionName";
+import { getStoryFactory } from "./getStory";
+
+const { meta, getStory } = getStoryFactory({
+    sectionName,
+    "wrappedComponent": { Tile },
+    "defaultContainerWidth": 300,
+    "description": `
+- [See DSFR documentation](//www.systeme-de-design.gouv.fr/elements-d-interface/composants/tuile)
+- [See DSFR demos](https://main--ds-gouv.netlify.app/example/component/tile/)
+- [See source code](//github.com/codegouvfr/react-dsfr/blob/main/src/Tile.tsx)`,
+    "disabledProps": ["lang"]
+});
+
+export default meta;
+
+export const Default = getStory({
+    "linkProps": { "href": "#" },
+    "title": "Titre de la tuile",
+    "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol",
+    "enlargeLink": true,
+    "horizontal": false
+});
+
+export const TileWithoutEnlargeLink = getStory({
+    "linkProps": { href: "#" },
+    "title": "Titre de la tuile",
+    "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol",
+    "enlargeLink": false
+});
+
+export const TileWithImage = getStory({
+    "linkProps": { "href": "#" },
+    "title": "Titre de la tuile",
+    "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol",
+    "enlargeLink": false,
+    "imageUrl": "//www.gouvernement.fr/sites/default/files/static_assets/placeholder.1x1.png"
+});
+
+export const TileWithImageGrey = getStory({
+    "linkProps": { "href": "#" },
+    "title": "Titre de la tuile",
+    "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol",
+    "enlargeLink": false,
+    "imageUrl": "//www.gouvernement.fr/sites/default/files/static_assets/placeholder.1x1.png",
+    "grey": true
+});
+
+export const TileHorizontalWithImage = getStory(
+    {
+        "linkProps": { "href": "#" },
+        "horizontal": true,
+        "title": "Titre de la tuile",
+        "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol",
+        "enlargeLink": true,
+        "imageUrl": "//www.gouvernement.fr/sites/default/files/static_assets/placeholder.1x1.png"
+    },
+    { "defaultContainerWidth": "100%" }
+);

stories/getStory.tsx

@@ -12,7 +12,7 @@ export function getStoryFactory<Props extends Record<string, any>>(params: {
     wrappedComponent: Record<string, (props: Props) => JSX.Element | null>;
     /** https://storybook.js.org/docs/react/essentials/controls */
     argTypes?: Partial<Record<keyof Props, ArgType>>;
-    defaultContainerWidth?: number;
+    defaultContainerWidth?: number | string;
     disabledProps?: ("containerWidth" | "lang" | "darkMode")[];
     /** Default false */
     doHideImportInstruction?: boolean;