feat(card): extend to image component

Author: lsagetlethias

src/Card.tsx

@@ -17,13 +17,10 @@ export type CardProps = {
     title: ReactNode;
     titleAs?: `h${2 | 3 | 4 | 5 | 6}`;
     desc?: ReactNode;
-    imageUrl?: string;
-    imageAlt?: string;
     start?: ReactNode;
     detail?: ReactNode;
     end?: ReactNode;
     endDetail?: ReactNode;
-    badge?: ReactNode;
     /** where actions can be placed */
     footer?: ReactNode;
     /** Default: "medium", only affect the text */
@@ -59,7 +56,8 @@ export type CardProps = {
     >;
     style?: CSSProperties;
 } & (CardProps.EnlargedLink | CardProps.NotEnlargedLink) &
-    (CardProps.Horizontal | CardProps.Vertical);
+    (CardProps.Horizontal | CardProps.Vertical) &
+    (CardProps.WithImageLink | CardProps.WithImageComponent | CardProps.WithoutImage);
 
 export namespace CardProps {
     export type EnlargedLink = {
@@ -84,6 +82,27 @@ export namespace CardProps {
         horizontal?: false;
         ratio?: never;
     };
+
+    export type WithImageLink = {
+        badge?: ReactNode;
+        imageUrl: string;
+        imageAlt: string;
+        imageComponent?: never;
+    };
+
+    export type WithImageComponent = {
+        badge?: ReactNode;
+        imageUrl?: never;
+        imageAlt?: never;
+        imageComponent: ReactNode;
+    };
+
+    export type WithoutImage = {
+        badge?: never;
+        imageUrl?: never;
+        imageAlt?: never;
+        imageComponent?: never;
+    };
 }
 
 /** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-card> */
@@ -98,6 +117,7 @@ export const Card = memo(
             desc,
             imageUrl,
             imageAlt,
+            imageComponent,
             start,
             detail,
             end,
@@ -216,6 +236,18 @@ export const Card = memo(
                         )}
                     </div>
                 )}
+                {imageComponent !== undefined && (
+                    <div className={cx(fr.cx("fr-card__header"), classes.header)}>
+                        <div className={cx(fr.cx("fr-card__img"), classes.img)}>
+                            {imageComponent}
+                        </div>
+                        {badge !== undefined && (
+                            <ul className={cx(fr.cx("fr-badges-group"), classes.badge)}>
+                                <li>{badge}</li>
+                            </ul>
+                        )}
+                    </div>
+                )}
             </div>
         );
     })

stories/Card.stories.tsx

@@ -7,6 +7,9 @@ import { getStoryFactory } from "./getStory";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
 
+import artworkOvoidSvgUrl from "../dist/dsfr/artwork/background/ovoid.svg";
+import artworkTechnicalErrorSvgUrl from "../dist/dsfr/artwork/pictograms/system/technical-error.svg";
+
 import { fr } from "../dist";
 
 const { meta, getStory } = getStoryFactory({
@@ -151,7 +154,7 @@ export const CardWithShadow = getStory(
 );
 
 export const CardWithoutImage = getStory(
-    { ...defaultProps, "imageUrl": undefined },
+    { ...defaultProps },
     { "description": "Carte sans image" }
 );
 
@@ -351,7 +354,6 @@ export const CardHorizontalWithoutImage = getStory(
         ...defaultProps,
         "horizontal": true,
         "size": "large",
-        "imageUrl": undefined,
         "start": (
             <ul className={fr.cx("fr-badges-group")}>
                 <li>
@@ -371,8 +373,7 @@ export const CardHorizontalWithoutImageAndEnlargeLink = getStory(
         ...defaultProps,
         "horizontal": true,
         "enlargeLink": false,
-        "size": "large",
-        "imageUrl": undefined
+        "size": "large"
     },
     { "description": "Carte horizontale sans image", "defaultContainerWidth": 900 }
 );
@@ -432,3 +433,38 @@ export const CardNoLink = getStory(
     },
     { "description": "Carte horizontale sans lien", "defaultContainerWidth": 900 }
 );
+
+export const CardWithImageComponent = getStory({
+    ...defaultProps,
+    enlargeLink: false,
+    imageUrl: undefined,
+    imageAlt: undefined,
+    imageComponent: (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="fr-responsive-img fr-artwork"
+            aria-hidden="true"
+            viewBox="0 0 160 200"
+        >
+            <use className="fr-artwork-motif" href={`${artworkOvoidSvgUrl}#artwork-motif`}></use>
+            <use
+                className="fr-artwork-background"
+                href={`${artworkOvoidSvgUrl}#artwork-background`}
+            ></use>
+            <g transform="translate(40, 60)">
+                <use
+                    className="fr-artwork-decorative"
+                    href={`${artworkTechnicalErrorSvgUrl}#artwork-decorative`}
+                ></use>
+                <use
+                    className="fr-artwork-minor"
+                    href={`${artworkTechnicalErrorSvgUrl}#artwork-minor`}
+                ></use>
+                <use
+                    className="fr-artwork-major"
+                    href={`${artworkTechnicalErrorSvgUrl}#artwork-major`}
+                ></use>
+            </g>
+        </svg>
+    )
+});