From cb8baa657088251d3966c2ac950e5176cf2e04c6 Mon Sep 17 00:00:00 2001
From: Yann Odeyer <yann.odeyer@worldline.com>
Date: Fri, 2 May 2025 18:21:48 +0200
Subject: [PATCH] feat(Badge) : add iconId and accentColor on Badge component

---
 src/Badge.tsx             | 25 ++++++++++++++++++++++++-
 stories/Badge.stories.tsx | 11 +++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/Badge.tsx b/src/Badge.tsx
index 9fc723c80..8bf220d76 100644
--- a/src/Badge.tsx
+++ b/src/Badge.tsx
@@ -2,6 +2,11 @@ import React, { memo, forwardRef, type ReactNode, type CSSProperties } from "rea
 import { symToStr } from "tsafe/symToStr";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
+import type {
+    FrClassName,
+    FrIconClassName,
+    RiIconClassName
+} from "./fr/generatedFromCss/classNames";
 import { fr } from "./fr";
 import { cx } from "./tools/cx";
 import type { AlertProps } from "./Alert";
@@ -14,11 +19,21 @@ export type BadgeProps = {
     severity?: AlertProps.Severity | "new";
     small?: boolean;
     noIcon?: boolean;
+    iconId?: FrIconClassName | RiIconClassName;
+    accentColor?: BadgeProps.AccentColor;
     /** Default: "p" */
     as?: "p" | "span";
     children: NonNullable<ReactNode>;
 };
 
+export namespace BadgeProps {
+    type ExtractAccentColor<FrClassName> = FrClassName extends `fr-badge--${infer AccentColor}`
+        ? AccentColor
+        : never;
+
+    export type AccentColor = ExtractAccentColor<FrClassName>;
+}
+
 /** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-badge> */
 export const Badge = memo(
     forwardRef<HTMLDivElement, BadgeProps>((props, ref) => {
@@ -30,6 +45,8 @@ export const Badge = memo(
             severity,
             small: isSmall = false,
             noIcon = false,
+            iconId,
+            accentColor,
             children,
             ...rest
         } = props;
@@ -49,7 +66,13 @@ export const Badge = memo(
                         "fr-badge",
                         severity !== undefined && `fr-badge--${severity}`,
                         { "fr-badge--sm": isSmall },
-                        { "fr-badge--no-icon": noIcon || severity === undefined }
+                        {
+                            "fr-badge--no-icon":
+                                noIcon || (severity === undefined && iconId === undefined)
+                        },
+                        severity === undefined && iconId,
+                        severity === undefined && iconId && "fr-badge--icon-left", // actually, it's always left but we need it in order to have the icon rendering
+                        severity === undefined && accentColor && `fr-badge--${accentColor}`
                     ),
                     className
                 ),
diff --git a/stories/Badge.stories.tsx b/stories/Badge.stories.tsx
index 724774c7d..cc4954e8d 100644
--- a/stories/Badge.stories.tsx
+++ b/stories/Badge.stories.tsx
@@ -118,3 +118,14 @@ export const NewBadge = getStory(
         "description": "Small new `Badge` with icon"
     }
 );
+
+export const BadgeWithIconAndAccentColor = getStory(
+    {
+        "iconId": "fr-icon-checkbox-circle-line",
+        "accentColor": "purple-glycine",
+        "children": "Custom badge"
+    },
+    {
+        "description": "`Badge` with custom icon and accent color"
+    }
+);