Merge branch 'main' of https://github.com/codegouvfr/react-dsfr

Author: garronej

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@codegouvfr/react-dsfr",
-    "version": "0.0.77",
+    "version": "0.0.78",
     "description": "French State Design System React integration library",
     "repository": {
         "type": "git",
@@ -128,6 +128,7 @@
         "./Notice": "./dist/Notice.js",
         "./Header": "./dist/Header/index.js",
         "./DarkModeSwitch": "./dist/DarkModeSwitch.js",
+        "./Badge": "./dist/Badge.js",
         "./Alert": "./dist/Alert.js",
         "./Accordion": "./dist/Accordion.js"
     }

src/Badge.tsx

@@ -0,0 +1,54 @@
+import React, { memo, forwardRef, ReactNode } from "react";
+import { symToStr } from "tsafe/symToStr";
+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";
+
+export type BadgeProps = {
+    className?: string;
+    severity?: BadgeProps.Severity;
+    isSmall?: 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 => {
+        const { className, severity, label, isSmall, noIcon, ...rest } = props;
+
+        assert<Equals<keyof typeof rest, never>>();
+
+        return (
+            <p
+                className={cx(
+                    fr.cx(
+                        "fr-badge",
+                        { [`fr-badge--${severity}`]: severity != null },
+                        { "fr-badge--sm": isSmall },
+                        { "fr-badge--no-icon": noIcon || severity == null }
+                    ),
+                    className
+                )}
+                {...rest}
+            >
+                {label}
+            </p>
+        );
+    })
+);
+
+Badge.displayName = symToStr({ Badge });
+
+export default Badge;

stories/Badge.stories.tsx

@@ -0,0 +1,109 @@
+import { Badge } from "../dist/Badge";
+import type { BadgeProps } from "../dist/Badge";
+import { sectionName } from "./sectionName";
+import { getStoryFactory } from "./getStory";
+import { assert } from "tsafe/assert";
+import type { Equals } from "tsafe";
+
+const { meta, getStory } = getStoryFactory<BadgeProps>({
+    sectionName,
+    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;
+
+                assert<Equals<BadgeProps.Severity, BadgeProps.Severity>>();
+
+                return [null, ...severities];
+            })(),
+            control: { type: "select", labels: { null: "no severity" } }
+        },
+        noIcon: {
+            type: { name: "boolean" },
+            description: "Remove badge icon when true"
+        },
+        isSmall: {
+            type: { name: "boolean" },
+            description: "Set small badge size (`sm`) when true"
+        },
+        label: {
+            type: { name: "string", required: true },
+            description: "Label to display on tne badge"
+        }
+    },
+    disabledProps: ["lang"]
+});
+
+export default meta;
+
+export const Default = getStory({
+    severity: "success",
+    label: "Label badge"
+});
+
+export const BadgeWithoutSeverity = getStory(
+    {
+        label: "Label"
+    },
+    {
+        description: "Medium info `Badge` with icon"
+    }
+);
+
+export const InfoBadge = getStory(
+    {
+        severity: "info",
+        label: "Label info"
+    },
+    {
+        description: "Medium info `Badge` with icon"
+    }
+);
+
+export const WarningBadge = getStory(
+    {
+        severity: "warning",
+        noIcon: false,
+        label: 'Label "warning"'
+    },
+    {
+        description: "Medium warning `Badge` with icon"
+    }
+);
+
+export const SuccessBadge = getStory(
+    {
+        severity: "success",
+        noIcon: true,
+        label: "Label success"
+    },
+    {
+        description: "Medium success `Badge` without icon"
+    }
+);
+
+export const ErrorBadge = getStory(
+    {
+        severity: "error",
+        noIcon: true,
+        label: "Label error"
+    },
+    {
+        description: "Medium error `Badge` without icon"
+    }
+);
+
+export const NewBadge = getStory(
+    {
+        severity: "new",
+        isSmall: true,
+        label: "Label new"
+    },
+    {
+        description: "Small new `Badge` with icon"
+    }
+);