Add ButtonsGroup component

package.json

@@ -132,6 +132,7 @@
         "./Header": "./dist/Header/index.js",
         "./Footer": "./dist/Footer.js",
         "./Display": "./dist/Display.js",
+        "./ButtonsGroup": "./dist/ButtonsGroup.js",
         "./Button": "./dist/Button.js",
         "./Breadcrumb": "./dist/Breadcrumb.js",
         "./Badge": "./dist/Badge.js",

src/ButtonsGroup.tsx

@@ -0,0 +1,74 @@
+import React, { memo, forwardRef } from "react";
+import { ButtonProps } from "./Button";
+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/button/button.css";
+
+export type ButtonsGroupCommonProps = {
+    className?: string;
+    classes?: Partial<Record<"root" | "listItem", string>>;
+    children: [
+        // this component (ul) should have at least 2 children (RGAA)
+        React.ReactElement<ButtonProps>,
+        React.ReactElement<ButtonProps>,
+        ...React.ReactElement<ButtonProps>[]
+    ];
+    size?: ButtonsGroupCommonProps.Size;
+};
+
+export namespace ButtonsGroupCommonProps {
+    export type Size = "sm" | "lg";
+    export type Mode = "inline" | "inline-sm" | "inline-md" | "inline-lg";
+    export type Align = "center" | "right" | "inline-reverse" | "equisized";
+}
+
+type ButtonAlignProps = // align will take effect only on inline placements
+
+        | {
+              mode?: false;
+              align?: never;
+          }
+        | {
+              mode: ButtonsGroupCommonProps.Mode;
+              align?: ButtonsGroupCommonProps.Align;
+          };
+
+export type ButtonsGroupProps = ButtonsGroupCommonProps & ButtonAlignProps;
+
+/** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-buttons-group> */
+export const ButtonsGroup = memo(
+    forwardRef<HTMLUListElement, ButtonsGroupProps>((props, ref) => {
+        const { className, classes, mode, children, size, align, ...rest } = props;
+
+        assert<Equals<keyof typeof rest, never>>();
+
+        const buttonsGroupClassName = cx(
+            fr.cx("fr-btns-group"),
+            mode && fr.cx(`fr-btns-group--${mode}`),
+            align && fr.cx(`fr-btns-group--${align}`),
+            size && fr.cx(`fr-btns-group--${size}`),
+            className,
+            classes?.root
+        );
+
+        return (
+            <ul className={buttonsGroupClassName} ref={ref}>
+                {children.map(child => (
+                    <li className={cx(classes?.listItem)}>{child}</li>
+                ))}
+            </ul>
+        );
+    })
+);
+
+ButtonsGroup.displayName = symToStr({ ButtonsGroup });
+
+export default ButtonsGroup;

stories/ButtonsGroup.stories.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import { ButtonsGroup } from "../dist/ButtonsGroup";
+import { Button } from "../dist/Button";
+import type { ButtonsGroupProps, ButtonsGroupCommonProps } from "../dist/ButtonsGroup";
+import { sectionName } from "./sectionName";
+import { getStoryFactory } from "./getStory";
+import { assert } from "tsafe/assert";
+import type { Equals } from "tsafe";
+
+const { meta, getStory } = getStoryFactory<ButtonsGroupProps>({
+    sectionName,
+    wrappedComponent: { ButtonsGroup },
+    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: {
+        size: {
+            options: (() => {
+                const sizes = ["sm", "lg"] as const;
+
+                assert<Equals<typeof sizes[number], ButtonsGroupCommonProps.Size>>();
+
+                return [null, ...sizes];
+            })(),
+            control: { type: "select", labels: { null: "no size (md)" } }
+        },
+        mode: {
+            options: (() => {
+                const modes = ["inline", "inline-sm", "inline-md", "inline-lg"] as const;
+
+                assert<Equals<typeof modes[number], ButtonsGroupCommonProps.Mode>>();
+
+                return [null, ...modes];
+            })(),
+            control: { type: "select", labels: { null: "no mode (vertical)" } }
+        },
+        align: {
+            options: (() => {
+                const aligns = ["center", "right", "inline-reverse", "equisized"] as const;
+
+                assert<Equals<typeof aligns[number], ButtonsGroupCommonProps.Align>>();
+
+                return [null, ...aligns];
+            })(),
+            control: { type: "select", labels: { null: "no align (default to left)" } }
+        }
+    },
+    disabledProps: ["lang"]
+});
+
+export default meta;
+
+export const Default = getStory({
+    children: [
+        <Button label="Button 1 label" linkProps={{ href: "#" }} />,
+        <Button label="Button 2 label" priority="secondary" linkProps={{ href: "#" }} />
+    ]
+});
+
+export const ModeHorizontal = getStory({
+    children: [
+        <Button label="Button 1 label" linkProps={{ href: "#" }} />,
+        <Button label="Button 2 label" priority="secondary" linkProps={{ href: "#" }} />
+    ],
+    mode: "inline"
+});
+
+export const DefaultSmall = getStory({
+    children: [
+        <Button label="Button 1 label" linkProps={{ href: "#" }} />,
+        <Button label="Button 2 label" priority="secondary" linkProps={{ href: "#" }} />
+    ],
+    size: "sm"
+});
+
+export const HorizontalOnLargerBreakpoints = getStory({
+    children: [
+        <Button label="Button 1 label" linkProps={{ href: "#" }} />,
+        <Button label="Button 2 label" priority="secondary" linkProps={{ href: "#" }} />
+    ],
+    mode: "inline-sm"
+});
+
+export const HorizontalCentered = getStory({
+    children: [
+        <Button label="Button 1 label" linkProps={{ href: "#" }} />,
+        <Button label="Button 2 label" priority="secondary" linkProps={{ href: "#" }} />
+    ],
+    align: "center",
+    mode: "inline"
+});