Merge pull request #201 from sbourdon13/feat/badge-span

feat(Badge): element can be a span (ref #200)
codegouvfr · Oct 15, 2023 · b9e8ae2 · b9e8ae2
2 parents e4a36b9 + 12b4b12
commit b9e8ae2
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 11 deletions.
diff --git 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,24 +41,24 @@ 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}`,
                         { "fr-badge--sm": isSmall },
                         { "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
@@ -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
@@ -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",