accentColor

Author: Julien Bouquillon

src/Quote.tsx

@@ -10,6 +10,7 @@ import { cx } from "./lib/tools/cx";
 // we could stop requiring users to import the hole CSS and only import on a
 // per component basis.
 import "./dsfr/component/quote/quote.css";
+import { FrClassName } from "./lib/generatedFromCss/classNames";
 
 export type QuoteProps = {
     className?: string;
@@ -19,18 +20,33 @@ export type QuoteProps = {
     sourceUrl?: string;
     image?: string;
     size?: "md" | "lg" | "xl";
+    accentColor?: QuoteProps.AccentColor;
 };
 
+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, image, size, ...rest } = props;
+        const { className, text, author, source, sourceUrl, image, size, accentColor, ...rest } =
+            props;
 
         assert<Equals<keyof typeof rest, never>>();
 
         return (
             <figure
-                className={cx(fr.cx("fr-quote"), image && fr.cx("fr-quote--column"), className)}
+                className={cx(
+                    fr.cx("fr-quote"),
+                    image && fr.cx("fr-quote--column"),
+                    accentColor && `fr-quote--${accentColor}`,
+                    className
+                )}
                 ref={ref}
             >
                 <blockquote cite={sourceUrl}>

stories/Quote.stories.tsx

@@ -63,7 +63,7 @@ export const QuoteMediumAndAccent = getStory({
     ),
     image: "//www.systeme-de-design.gouv.fr/img/placeholder.1x1.png",
     size: "md",
-    className: "fr-quote--green-emeraude"
+    accentColor: "pink-macaron"
 });
 
 export const QuoteWithoutDetails = getStory({
@@ -103,6 +103,6 @@ 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",
+    accentColor: "yellow-moutarde",
     author: "Someone"
 });