Rework stepper

Author: garronej

src/Stepper.tsx

@@ -6,16 +6,11 @@ import type { Equals } from "tsafe";
 import { fr } from "./lib";
 import { cx } from "./lib/tools/cx";
 import { createComponentI18nApi } from "./lib/i18n";
-
-// 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;
-    step: number;
+    currentStep: number;
     stepCount: number;
     title: ReactNode;
     nextTitle?: ReactNode;
@@ -25,7 +20,15 @@ export type StepperProps = {
 /** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-stepper> */
 export const Stepper = memo(
     forwardRef<HTMLDivElement, StepperProps>((props, ref) => {
-        const { className, step, stepCount, title, nextTitle, classes = {}, ...rest } = props;
+        const {
+            className,
+            currentStep,
+            stepCount,
+            title,
+            nextTitle,
+            classes = {},
+            ...rest
+        } = props;
 
         assert<Equals<keyof typeof rest, never>>();
 
@@ -35,13 +38,13 @@ export const Stepper = memo(
             <div className={cx(fr.cx("fr-stepper"), classes.root, className)} ref={ref}>
                 <h2 className={cx(fr.cx("fr-stepper__title"), classes.title)}>
                     <span className={cx(fr.cx("fr-stepper__state"), classes.state)}>
-                        {t("progress", { step, stepCount })}
+                        {t("progress", { currentStep, stepCount })}
                     </span>
                     {title}
                 </h2>
                 <div
                     className={cx(fr.cx("fr-stepper__steps"), classes.steps)}
-                    data-fr-current-step={step}
+                    data-fr-current-step={currentStep}
                     data-fr-steps={stepCount}
                 ></div>
                 {nextTitle !== undefined && (
@@ -60,8 +63,8 @@ const { useTranslation, addStepperTranslations } = createComponentI18nApi({
     "componentName": symToStr({ Stepper }),
     "frMessages": {
         /* spell-checker: disable */
-        "progress": (p: { step: number; stepCount: number }) =>
-            `Étape ${p.step} sur ${p.stepCount}`,
+        "progress": (p: { currentStep: number; stepCount: number }) =>
+            `Étape ${p.currentStep} sur ${p.stepCount}`,
         "next step": `Étape suivante :`
         /* spell-checker: enable */
     }
@@ -70,7 +73,7 @@ const { useTranslation, addStepperTranslations } = createComponentI18nApi({
 addStepperTranslations({
     "lang": "en",
     "messages": {
-        "progress": ({ step, stepCount }) => `Step ${step} over ${stepCount}`,
+        "progress": ({ currentStep, stepCount }) => `Step ${currentStep} over ${stepCount}`,
         "next step": "Next step: "
     }
 });

src/lib/i18n.tsx

@@ -96,7 +96,7 @@ export function createComponentI18nApi<
     useTranslation: () => { t: FrMessagesToTranslationFunction<FrMessages> };
 } & Record<
     `add${ComponentName}Translations`,
-    (params: { lang: string; messages: FrMessages }) => void
+    (params: { lang: string; messages: Partial<FrMessages> }) => void
 > {
     const { componentName, frMessages } = params;
 
@@ -129,10 +129,7 @@ export function createComponentI18nApi<
         return { t };
     }
 
-    function addTranslations(params: {
-        lang: string;
-        messages: Partial<Record<keyof FrMessages, string>>;
-    }) {
+    function addTranslations(params: { lang: string; messages: Partial<FrMessages> }) {
         const { lang, messages } = params;
 
         Object.entries(messages)

stories/Stepper.stories.tsx

@@ -7,21 +7,20 @@ const { meta, getStory } = getStoryFactory({
     "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"]
+- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Stepper.tsx)`
 });
 
 export default meta;
 
 export const Default = getStory({
-    steps: 3,
-    currentStep: 1,
-    title: "Titre de l’étape en cours",
-    nextTitle: "Titre de la prochaine étape"
+    "stepCount": 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"
+    "stepCount": 4,
+    "currentStep": 4,
+    "title": "Titre de la dernière étape en cours"
 });

test/types/i18n.ts

@@ -8,7 +8,8 @@ const { useTranslation, addSomeDsfrComponentTranslations } = createComponentI18n
         /* spell-checker: disable */
 
         "do something": ({ what }: { what: string }) => `Faire ${what}`,
-        "the good": "le bien"
+        "the good": "le bien",
+        "bar": "bar"
         /* spell-checker: enable */
     }
 });