From 6f5c83369955d868e945687e596abe802efdfa45 Mon Sep 17 00:00:00 2001
From: Sara <sara.bourdon@outlook.com>
Date: Thu, 12 Oct 2023 15:48:56 +0200
Subject: [PATCH 1/2] feat(Badge): element can be a span (ref #200)

---
 src/Badge.tsx              | 25 ++++++++++++++-----------
 stories/Badge.stories.tsx  | 12 ++++++++++++
 stories/Header.stories.tsx | 24 ++++++++++++++++++++++++
 3 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/src/Badge.tsx b/src/Badge.tsx
index 1ddda8e00..97ea3cf8e 100644
--- a/src/Badge.tsx
+++ b/src/Badge.tsx
@@ -14,6 +14,8 @@ export type BadgeProps = {
     severity?: AlertProps.Severity | "new";
     small?: boolean;
     noIcon?: boolean;
+    /** Default: "p" */
+    as?: "p" | "span";
     children: NonNullable<ReactNode>;
 };
 
@@ -23,6 +25,7 @@ export const Badge = memo(
         const {
             id: props_id,
             className,
+            as = "p",
             style,
             severity,
             small: isSmall = false,
@@ -38,10 +41,10 @@ export const Badge = memo(
             "explicitlyProvidedId": props_id
         });
 
-        return (
-            <p
-                id={id}
-                className={cx(
+        return React.createElement(
+            as,
+            {
+                className: cx(
                     fr.cx(
                         "fr-badge",
                         severity !== undefined && `fr-badge--${severity}`,
@@ -49,13 +52,13 @@ export const Badge = memo(
                         { "fr-badge--no-icon": noIcon || severity === undefined }
                     ),
                     className
-                )}
-                style={style}
-                ref={ref}
-                {...rest}
-            >
-                {children}
-            </p>
+                ),
+                id,
+                style,
+                ref,
+                ...rest
+            },
+            <>{children}</>
         );
     })
 );
diff --git a/stories/Badge.stories.tsx b/stories/Badge.stories.tsx
index d28077ed9..724774c7d 100644
--- a/stories/Badge.stories.tsx
+++ b/stories/Badge.stories.tsx
@@ -29,6 +29,18 @@ const { meta, getStory } = getStoryFactory({
             "type": { "name": "boolean" },
             "description": "Set small badge size (`sm`) when true"
         },
+        "as": {
+            "options": (() => {
+                const options = ["p", "span", undefined] as const;
+
+                assert<Equals<typeof options[number], BadgeProps["as"]>>();
+
+                return options;
+            })(),
+            "control": { type: "select", labels: { null: "default p element" } },
+            "description":
+                "You can specify a 'span' element instead of default 'p' if the badge is inside a `<p>`."
+        },
         "children": {
             "type": { "name": "string", "required": true },
             "description": "Label to display on the badge"
diff --git a/stories/Header.stories.tsx b/stories/Header.stories.tsx
index f9db7d49e..8c0f6f5cf 100644
--- a/stories/Header.stories.tsx
+++ b/stories/Header.stories.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { Header } from "../dist/Header";
+import { Badge } from "../dist/Badge";
 import { MainNavigation } from "../dist/MainNavigation";
 import { sectionName } from "./sectionName";
 import { getStoryFactory } from "./getStory";
@@ -115,6 +116,29 @@ export const SimpleHeaderWithServiceTitleAndTagline = getStory({
     "serviceTagline": "baseline - précisions sur l'organisation"
 });
 
+export const SimpleHeaderWithServiceTitleAndBetaBadge = getStory({
+    "id": "fr-header-simple-header-with-service-title-and-tagline",
+    "brandTop": (
+        <>
+            INTITULE
+            <br />
+            OFFICIEL
+        </>
+    ),
+    "homeLinkProps": {
+        "href": "/",
+        "title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)"
+    },
+    "serviceTitle": (
+        <>
+            Nom du site / service{" "}
+            <Badge noIcon severity="success" as="span">
+                Beta
+            </Badge>
+        </>
+    )
+});
+
 export const HeaderWithQuickAccessItems = getStory(
     {
         "id": "fr-header-header-with-quick-access-items",

From 12b4b12a71eecea94d1783819bf10535367c50db Mon Sep 17 00:00:00 2001
From: Joseph Garrone <joseph.garrone.gj@gmail.com>
Date: Mon, 16 Oct 2023 01:03:11 +0200
Subject: [PATCH 2/2] Update src/Badge.tsx

Signed-off-by: Joseph Garrone <joseph.garrone.gj@gmail.com>
---
 src/Badge.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Badge.tsx b/src/Badge.tsx
index 97ea3cf8e..9fc723c80 100644
--- a/src/Badge.tsx
+++ b/src/Badge.tsx
@@ -44,7 +44,7 @@ export const Badge = memo(
         return React.createElement(
             as,
             {
-                className: cx(
+                "className": cx(
                     fr.cx(
                         "fr-badge",
                         severity !== undefined && `fr-badge--${severity}`,