From edb6aaaf488864284ebc76a09fdfbbae171546a7 Mon Sep 17 00:00:00 2001 From: Lilian Saget-Lethias Date: Fri, 12 Jan 2024 23:26:20 +0100 Subject: [PATCH 1/2] feat(card): add tier and half ration --- src/Card.tsx | 21 ++++++++++++++++++--- stories/Card.stories.tsx | 18 ++++++++++++++++++ 2 files changed, 36 insertions(+), 3 deletions(-) diff --git a/src/Card.tsx b/src/Card.tsx index 3d6c03d78..2c86d70b0 100644 --- a/src/Card.tsx +++ b/src/Card.tsx @@ -58,9 +58,8 @@ export type CardProps = { > >; style?: CSSProperties; - /** Default false */ - horizontal?: boolean; -} & (CardProps.EnlargedLink | CardProps.NotEnlargedLink); +} & (CardProps.EnlargedLink | CardProps.NotEnlargedLink) & + (CardProps.Horizontal | CardProps.Vertical); export namespace CardProps { export type EnlargedLink = { @@ -73,6 +72,18 @@ export namespace CardProps { linkProps?: RegisteredLinkProps; iconId?: never; }; + + export type Horizontal = { + /** Default false */ + horizontal: true; + ratio?: "33/66" | "50/50"; + }; + + export type Vertical = { + /** Default false */ + horizontal?: false; + ratio?: never; + }; } /** @see */ @@ -94,6 +105,7 @@ export const Card = memo( badge, footer, horizontal = false, + ratio, size = "medium", classes = {}, enlargeLink = false, @@ -123,6 +135,9 @@ export const Card = memo( "fr-card", enlargeLink && "fr-enlarge-link", horizontal && "fr-card--horizontal", + horizontal && + ratio !== undefined && + `fr-card--horizontal-${ratio === "33/66" ? "tier" : "half"}`, (() => { switch (size) { case "large": diff --git a/stories/Card.stories.tsx b/stories/Card.stories.tsx index c741a854e..44ade8844 100644 --- a/stories/Card.stories.tsx +++ b/stories/Card.stories.tsx @@ -310,6 +310,24 @@ export const CardHorizontal = getStory( { "description": "Carte horizontale", "defaultContainerWidth": 700 } ); +export const CardHorizontalTierRatio = getStory( + { + ...defaultProps, + "horizontal": true, + ratio: "33/66" + }, + { "description": "Carte horizontale", "defaultContainerWidth": 700 } +); + +export const CardHorizontalHalfRatio = getStory( + { + ...defaultProps, + "horizontal": true, + ratio: "50/50" + }, + { "description": "Carte horizontale", "defaultContainerWidth": 700 } +); + export const CardHorizontalSM = getStory( { ...defaultProps, From 588a355c54d10af6445bb266a66201d81fbf9485 Mon Sep 17 00:00:00 2001 From: Lilian Saget-Lethias Date: Sat, 13 Jan 2024 00:50:26 +0100 Subject: [PATCH 2/2] feat(card): extend to image component --- src/Card.tsx | 40 ++++++++++++++++++++++++++++++++---- stories/Card.stories.tsx | 44 ++++++++++++++++++++++++++++++++++++---- 2 files changed, 76 insertions(+), 8 deletions(-) diff --git a/src/Card.tsx b/src/Card.tsx index 2c86d70b0..e74c986e1 100644 --- a/src/Card.tsx +++ b/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 */ @@ -98,6 +117,7 @@ export const Card = memo( desc, imageUrl, imageAlt, + imageComponent, start, detail, end, @@ -216,6 +236,18 @@ export const Card = memo( )} )} + {imageComponent !== undefined && ( +
+
+ {imageComponent} +
+ {badge !== undefined && ( +
    +
  • {badge}
    • +
+ )} +
+ )} ); }) diff --git a/stories/Card.stories.tsx b/stories/Card.stories.tsx index 44ade8844..573f8a9fc 100644 --- a/stories/Card.stories.tsx +++ b/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": (
  • @@ -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: ( + + ) +});