diff --git a/src/Card.tsx b/src/Card.tsx index 4c35f35c9..d3fe6ee25 100644 --- a/src/Card.tsx +++ b/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(
{desc}
diff --git a/stories/Card.stories.tsx b/stories/Card.stories.tsx index f161e6c7f..04bdd2063 100644 --- a/stories/Card.stories.tsx +++ b/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 } +);