fix

Author: Julien Bouquillon

src/Quote.tsx

@@ -18,22 +18,30 @@ export type QuoteProps = {
     source?: ReactNode;
     sourceUrl?: string;
     image?: string;
+    size?: "md" | "lg" | "xl";
 };
 
 /** @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, image, ...rest } = props;
+        const { className, text, author, source, sourceUrl, image, size, ...rest } = props;
 
         assert<Equals<keyof typeof rest, never>>();
 
         return (
             <figure
-                className={cx(fr.cx("fr-quote"), fr.cx("fr-quote--column"), className)}
+                className={cx(fr.cx("fr-quote"), image && fr.cx("fr-quote--column"), className)}
                 ref={ref}
             >
                 <blockquote cite={sourceUrl}>
-                    <p>« {text} »</p>
+                    <p
+                        className={cx(
+                            size === "lg" && fr.cx("fr-text--lg"),
+                            size === "md" && fr.cx("fr-text--md")
+                        )}
+                    >
+                        « {text} »
+                    </p>
                 </blockquote>
                 <figcaption>
                     {author && <p className="fr-quote__author">{author}</p>}

stories/Quote.stories.tsx

@@ -7,8 +7,8 @@ const { meta, getStory } = getStoryFactory({
     sectionName,
     "wrappedComponent": { Quote },
     "description": `
-- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/citation)
-- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Quote.tsx)`,
+- [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"]
 });
 
@@ -35,18 +35,46 @@ export const Default = getStory({
             </li>
         </>
     ),
-    image: "https://www.systeme-de-design.gouv.fr/img/placeholder.1x1.png"
+    image: "//www.systeme-de-design.gouv.fr/img/placeholder.1x1.png",
+    size: "xl",
+    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>
+        </>
+    ),
+    image: "//www.systeme-de-design.gouv.fr/img/placeholder.1x1.png",
+    size: "md",
+    className: "fr-quote--green-emeraude"
 });
 
 export const QuoteWithoutDetails = getStory({
     text: "Lorem [...] elit ut. ",
     author: "Auteur",
-    image: "https://www.systeme-de-design.gouv.fr/img/placeholder.1x1.png"
+    image: "//www.systeme-de-design.gouv.fr/img/placeholder.1x1.png"
 });
 
 export const QuoteWithoutSource = getStory({
     text: "Lorem [...] elit ut. ",
-    image: "https://www.systeme-de-design.gouv.fr/img/placeholder.1x1.png"
+    image: "//www.systeme-de-design.gouv.fr/img/placeholder.1x1.png"
 });
 
 export const QuoteWithoutIllustration = getStory({
@@ -71,3 +99,10 @@ export const QuoteWithoutIllustration = getStory({
         </>
     )
 });
+
+export const QuoteWithAccent = getStory({
+    text: "Lorem [...] elit ut. ",
+    image: "//www.systeme-de-design.gouv.fr/img/placeholder.1x1.png",
+    className: "fr-quote--green-emeraude",
+    author: "Someone"
+});