feat: add Quote component

package.json

@@ -126,6 +126,7 @@
         "./Tabs": "./dist/Tabs.js",
         "./Stepper": "./dist/Stepper.js",
         "./SkipLinks": "./dist/SkipLinks.js",
+        "./Quote": "./dist/Quote.js",
         "./Notice": "./dist/Notice.js",
         "./Highlight": "./dist/Highlight.js",
         "./Header": "./dist/Header/index.js",

src/Quote.tsx

@@ -0,0 +1,96 @@
+import React, { memo, forwardRef, ReactNode } from "react";
+import { symToStr } from "tsafe/symToStr";
+import { assert } from "tsafe/assert";
+import type { Equals } from "tsafe";
+
+import { FrClassName } from "./lib/generatedFromCss/classNames";
+import { cx } from "./lib/tools/cx";
+import { fr } from "./lib";
+
+import "./dsfr/component/quote/quote.css";
+
+export type QuoteProps = {
+    className?: string;
+    text: ReactNode;
+    author?: ReactNode;
+    source?: ReactNode;
+    sourceUrl?: string;
+    imageUrl?: string;
+    size?: "medium" | "large" | "xlarge";
+    accentColor?: QuoteProps.AccentColor;
+    classes?: Partial<Record<"root" | "author" | "source" | "image" | "imageTag" | "text", string>>;
+};
+
+export namespace QuoteProps {
+    type ExtractAccentColor<FrClassName> = FrClassName extends `fr-quote--${infer AccentColor}`
+        ? AccentColor
+        : never;
+
+    export type AccentColor = ExtractAccentColor<FrClassName>;
+}
+
+/** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-quote> */
+export const Quote = memo(
+    forwardRef<HTMLDivElement, QuoteProps>((props, ref) => {
+        const {
+            className,
+            text,
+            author,
+            source,
+            sourceUrl,
+            imageUrl,
+            size = "xlarge",
+            accentColor,
+            classes = {},
+            ...rest
+        } = props;
+
+        assert<Equals<keyof typeof rest, never>>();
+
+        return (
+            <figure
+                className={cx(
+                    fr.cx("fr-quote"),
+                    imageUrl && fr.cx("fr-quote--column"),
+                    accentColor && `fr-quote--${accentColor}`,
+                    classes.root,
+                    className
+                )}
+                ref={ref}
+            >
+                <blockquote cite={sourceUrl}>
+                    <p
+                        className={cx(
+                            size === "large" && fr.cx("fr-text--lg"),
+                            size === "medium" && fr.cx("fr-text--md"),
+                            classes.text
+                        )}
+                    >
+                        « {text} »
+                    </p>
+                </blockquote>
+                <figcaption>
+                    {author !== undefined && (
+                        <p className={cx(fr.cx("fr-quote__author"), classes.author)}>{author}</p>
+                    )}
+                    {source !== undefined && (
+                        <ul className={cx(fr.cx("fr-quote__source"), classes.source)}>{source}</ul>
+                    )}
+                    {imageUrl !== undefined && (
+                        <div className={cx("fr-quote__image", classes.image)}>
+                            <img
+                                src={imageUrl}
+                                className={cx(fr.cx("fr-responsive-img"), classes.imageTag)}
+                                alt=""
+                            />
+                        </div>
+                    )}
+                </figcaption>
+            </figure>
+        );
+    })
+);
+
+Quote.displayName = symToStr({ Quote });
+
+export default Quote;

stories/Quote.stories.tsx

@@ -0,0 +1,108 @@
+import React from "react";
+import { Quote } from "../dist/Quote";
+import { sectionName } from "./sectionName";
+import { getStoryFactory } from "./getStory";
+
+const { meta, getStory } = getStoryFactory({
+    sectionName,
+    "wrappedComponent": { Quote },
+    "description": `
+- [See DSFR documentation](//www.systeme-de-design.gouv.fr/elements-d-interface/composants/citation)
+- [See source code](//github.com/codegouvfr/react-dsfr/blob/main/src/Quote.tsx)`,
+    "disabledProps": ["lang"]
+});
+
+export default meta;
+
+export const Default = getStory({
+    text: "Lorem [...] elit ut. ",
+    author: "Auteur",
+    source: (
+        <>
+            <li>
+                <cite>Ouvrage</cite>
+            </li>
+            <li>Détail 1</li>
+            <li>Détail 2</li>
+            <li>Détail 3</li>
+            <li>
+                <a
+                    target="_blank"
+                    href="[À MODIFIER | Lien vers la sources ou des infos complémentaires]"
+                >
+                    Détail 4
+                </a>
+            </li>
+        </>
+    ),
+    imageUrl: "//www.systeme-de-design.gouv.fr/img/placeholder.1x1.png",
+    size: "xlarge",
+    className: ""
+});
+
+export const QuoteMediumAndAccent = getStory({
+    text: "Lorem [...] elit ut. ",
+    author: "Auteur",
+    source: (
+        <>
+            <li>
+                <cite>Ouvrage</cite>
+            </li>
+            <li>Détail 1</li>
+            <li>Détail 2</li>
+            <li>Détail 3</li>
+            <li>
+                <a
+                    target="_blank"
+                    href="[À MODIFIER | Lien vers la sources ou des infos complémentaires]"
+                >
+                    Détail 4
+                </a>
+            </li>
+        </>
+    ),
+    imageUrl: "//www.systeme-de-design.gouv.fr/img/placeholder.1x1.png",
+    size: "medium",
+    accentColor: "pink-macaron"
+});
+
+export const QuoteWithoutDetails = getStory({
+    text: "Lorem [...] elit ut. ",
+    author: "Auteur",
+    imageUrl: "//www.systeme-de-design.gouv.fr/img/placeholder.1x1.png"
+});
+
+export const QuoteWithoutSource = getStory({
+    text: "Lorem [...] elit ut. ",
+    imageUrl: "//www.systeme-de-design.gouv.fr/img/placeholder.1x1.png"
+});
+
+export const QuoteWithoutIllustration = getStory({
+    text: "Lorem [...] elit ut. ",
+    author: "Auteur",
+    source: (
+        <>
+            <li>
+                <cite>Ouvrage</cite>
+            </li>
+            <li>Détail 1</li>
+            <li>Détail 2</li>
+            <li>Détail 3</li>
+            <li>
+                <a
+                    target="_blank"
+                    href="[À MODIFIER | Lien vers la sources ou des infos complémentaires]"
+                >
+                    Détail 4
+                </a>
+            </li>
+        </>
+    )
+});
+
+export const QuoteWithAccent = getStory({
+    text: "Lorem [...] elit ut. ",
+    imageUrl: "//www.systeme-de-design.gouv.fr/img/placeholder.1x1.png",
+    accentColor: "yellow-moutarde",
+    author: "Someone"
+});