Rework the Badge component

Author: garronej

src/Badge.tsx

@@ -4,29 +4,27 @@ import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
 import { fr } from "./lib";
 import { cx } from "./lib/tools/cx";
-
-// We make users import dsfr.css, so we don't need to import the scoped CSS
-// but in the future if we have a complete component coverage it
-// we could stop requiring users to import the hole CSS and only import on a
-// per component basis.
-import "./dsfr/component/badge/badge.css";
+import type { AlertProps } from "./Alert";
 
 export type BadgeProps = {
     className?: string;
-    severity?: BadgeProps.Severity;
-    isSmall?: boolean;
+    severity?: AlertProps.Severity | "new";
+    small?: boolean;
     noIcon?: boolean;
     label: NonNullable<ReactNode>;
 };
 
-export namespace BadgeProps {
-    export type Severity = "info" | "success" | "error" | "warning" | "new";
-}
-
 /** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-badge> */
 export const Badge = memo(
     forwardRef<HTMLDivElement, BadgeProps>((props, ref) => {
-        const { className, severity, label, isSmall, noIcon, ...rest } = props;
+        const {
+            className,
+            severity,
+            label,
+            small: isSmall = false,
+            noIcon = false,
+            ...rest
+        } = props;
 
         assert<Equals<keyof typeof rest, never>>();
 
@@ -35,9 +33,9 @@ export const Badge = memo(
                 className={cx(
                     fr.cx(
                         "fr-badge",
-                        { [`fr-badge--${severity}`]: severity != null },
+                        severity !== undefined && `fr-badge--${severity}`,
                         { "fr-badge--sm": isSmall },
-                        { "fr-badge--no-icon": noIcon || severity == null }
+                        { "fr-badge--no-icon": noIcon || severity === undefined }
                     ),
                     className
                 )}

stories/Badge.stories.tsx

@@ -7,103 +7,103 @@ import type { Equals } from "tsafe";
 
 const { meta, getStory } = getStoryFactory<BadgeProps>({
     sectionName,
-    wrappedComponent: { Badge },
+    "wrappedComponent": { Badge },
     description: `
 - [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/badge)
 - [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Badge.tsx)`,
-    argTypes: {
-        severity: {
-            options: (() => {
-                const severities = ["success", "warning", "info", "error", "new"] as const;
+    "argTypes": {
+        "severity": {
+            "options": (() => {
+                const options = ["success", "warning", "info", "error", "new", undefined] as const;
 
-                assert<Equals<typeof severities[number], BadgeProps.Severity>>();
+                assert<Equals<typeof options[number], BadgeProps["severity"]>>();
 
-                return [null, ...severities];
+                return options;
             })(),
-            control: { type: "select", labels: { null: "no severity" } }
+            "control": { type: "select", labels: { null: "no severity" } }
         },
-        noIcon: {
-            type: { name: "boolean" },
-            description: "Remove badge icon when true"
+        "noIcon": {
+            "type": { "name": "boolean" },
+            "description": "Remove badge icon when true"
         },
-        isSmall: {
-            type: { name: "boolean" },
-            description: "Set small badge size (`sm`) when true"
+        "small": {
+            "type": { "name": "boolean" },
+            "description": "Set small badge size (`sm`) when true"
         },
-        label: {
-            type: { name: "string", required: true },
-            description: "Label to display on the badge"
+        "label": {
+            "type": { "name": "string", "required": true },
+            "description": "Label to display on the badge"
         }
     },
-    disabledProps: ["lang"]
+    "disabledProps": ["lang"]
 });
 
 export default meta;
 
 export const Default = getStory({
-    severity: "success",
-    label: "Label badge"
+    "severity": "success",
+    "label": "Label badge"
 });
 
 export const BadgeWithoutSeverity = getStory(
     {
-        label: "Label"
+        "label": "Label"
     },
     {
-        description: "Medium info `Badge` with icon"
+        "description": "Medium info `Badge` with icon"
     }
 );
 
 export const InfoBadge = getStory(
     {
-        severity: "info",
-        label: "Label info"
+        "severity": "info",
+        "label": "Label info"
     },
     {
-        description: "Medium info `Badge` with icon"
+        "description": "Medium info `Badge` with icon"
     }
 );
 
 export const WarningBadge = getStory(
     {
-        severity: "warning",
-        noIcon: false,
-        label: 'Label "warning"'
+        "severity": "warning",
+        "noIcon": false,
+        "label": 'Label "warning"'
     },
     {
-        description: "Medium warning `Badge` with icon"
+        "description": "Medium warning `Badge` with icon"
     }
 );
 
 export const SuccessBadge = getStory(
     {
-        severity: "success",
-        noIcon: true,
-        label: "Label success"
+        "severity": "success",
+        "noIcon": true,
+        "label": "Label success"
     },
     {
-        description: "Medium success `Badge` without icon"
+        "description": "Medium success `Badge` without icon"
     }
 );
 
 export const ErrorBadge = getStory(
     {
-        severity: "error",
-        noIcon: true,
-        label: "Label error"
+        "severity": "error",
+        "noIcon": true,
+        "label": "Label error"
     },
     {
-        description: "Medium error `Badge` without icon"
+        "description": "Medium error `Badge` without icon"
     }
 );
 
 export const NewBadge = getStory(
     {
-        severity: "new",
-        isSmall: true,
-        label: "Label new"
+        "severity": "new",
+        "small": true,
+        "label": "Label new"
     },
     {
-        description: "Small new `Badge` with icon"
+        "description": "Small new `Badge` with icon"
     }
 );