Merge pull request #25 from codegouvfr/stepper

feat: add Stepper component

Author: garronej

package.json

@@ -124,6 +124,7 @@
         "./mui": "./dist/mui.js",
         "./lib": "./dist/lib/index.js",
         "./Tabs": "./dist/Tabs.js",
+        "./Stepper": "./dist/Stepper.js",
         "./SkipLinks": "./dist/SkipLinks.js",
         "./Notice": "./dist/Notice.js",
         "./Highlight": "./dist/Highlight.js",

src/Stepper.tsx

@@ -0,0 +1,54 @@
+import React, { memo, forwardRef } 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/stepper/stepper.css";
+
+export type StepperProps = {
+    className?: string;
+    currentStep: number;
+    steps: number;
+    title: string;
+    nextTitle?: string;
+};
+
+/** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-stepper> */
+export const Stepper = memo(
+    forwardRef<HTMLDivElement, StepperProps>((props, ref) => {
+        const { className, currentStep, steps, title, nextTitle, ...rest } = props;
+
+        assert<Equals<keyof typeof rest, never>>();
+
+        return (
+            <div className={cx(fr.cx("fr-stepper"), className)} ref={ref}>
+                <h2 className="fr-stepper__title">
+                    <span className="fr-stepper__state">
+                        Étape {currentStep} sur {steps}
+                    </span>
+                    {title}
+                </h2>
+                <div
+                    className="fr-stepper__steps"
+                    data-fr-current-step={currentStep}
+                    data-fr-steps={steps}
+                ></div>
+                {nextTitle && (
+                    <p className="fr-stepper__details">
+                        <span className="fr-text--bold">Étape suivante :</span> {nextTitle}
+                    </p>
+                )}
+            </div>
+        );
+    })
+);
+
+Stepper.displayName = symToStr({ Stepper });
+
+export default Stepper;

stories/Stepper.stories.tsx

@@ -0,0 +1,27 @@
+import { Stepper } from "../dist/Stepper";
+import { sectionName } from "./sectionName";
+import { getStoryFactory } from "./getStory";
+
+const { meta, getStory } = getStoryFactory({
+    sectionName,
+    "wrappedComponent": { Stepper },
+    "description": `
+- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/indicateur-d-etape)
+- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Stepper.tsx)`,
+    "disabledProps": ["lang"]
+});
+
+export default meta;
+
+export const Default = getStory({
+    steps: 3,
+    currentStep: 1,
+    title: "Titre de l’étape en cours",
+    nextTitle: "Titre de la prochaine étape"
+});
+
+export const StepperWithoutNext = getStory({
+    steps: 4,
+    currentStep: 4,
+    title: "Titre de la dernière étape en cours"
+});