fix(card): make link optional when enlargeLink false (#133)

* fix(card): optional link when enlargeLink false

* fix(card): set default enlargeLink to false

Author: lsagetlethias

src/Card.tsx

@@ -13,7 +13,6 @@ import { cx } from "./tools/cx";
 export type CardProps = {
     className?: string;
     title: ReactNode;
-    linkProps: RegisteredLinkProps;
     desc?: ReactNode;
     imageUrl?: string;
     imageAlt?: string;
@@ -63,10 +62,12 @@ export type CardProps = {
 export namespace CardProps {
     export type EnlargedLink = {
         enlargeLink: true;
+        linkProps: RegisteredLinkProps;
         iconId?: FrIconClassName | RiIconClassName;
     };
     export type NotEnlargedLink = {
         enlargeLink?: false;
+        linkProps?: RegisteredLinkProps;
         iconId?: never;
     };
 }
@@ -90,7 +91,7 @@ export const Card = memo(
             horizontal = false,
             size = "medium",
             classes = {},
-            enlargeLink = true,
+            enlargeLink = false,
             background = true,
             border = true,
             shadow = false,
@@ -137,9 +138,16 @@ export const Card = memo(
                 <div className={cx(fr.cx("fr-card__body"), classes.body)}>
                     <div className={cx(fr.cx("fr-card__content"), classes.content)}>
                         <h3 className={cx(fr.cx("fr-card__title"), classes.title)}>
-                            <Link {...linkProps} className={cx(linkProps.className, classes.link)}>
-                                {title}
-                            </Link>
+                            {linkProps !== undefined ? (
+                                <Link
+                                    {...linkProps}
+                                    className={cx(linkProps.className, classes.link)}
+                                >
+                                    {title}
+                                </Link>
+                            ) : (
+                                title
+                            )}
                         </h3>
                         {desc !== undefined && (
                             <p className={cx(fr.cx("fr-card__desc"), classes.desc)}>{desc}</p>

stories/Card.stories.tsx

@@ -20,10 +20,10 @@ const { meta, getStory } = getStoryFactory({
         "title": { "description": `Required.` },
         "desc": { "description": `` },
         linkProps: {
-            "description": `Required. the Card Link props`
+            "description": `Required only if enlargeLink is true. The Card Link props.`
         },
         enlargeLink: {
-            "description": `default: true. Set to false to restrict the link area to the Card title only.`,
+            "description": `Set to false to restrict the link area to the Card title only.`,
             "control": { "type": "boolean" }
         },
         size: {
@@ -277,7 +277,17 @@ export const CardGrey = getStory(
     {
         ...defaultProps,
         "horizontal": true,
-        "grey": false
+        "grey": true
     },
     { "description": "Carte horizontale grey", "defaultContainerWidth": 900 }
 );
+
+export const CardNoLink = getStory(
+    {
+        ...defaultProps,
+        "enlargeLink": false,
+        "horizontal": true,
+        "linkProps": undefined
+    },
+    { "description": "Carte horizontale sans lien", "defaultContainerWidth": 900 }
+);