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

Author: garronej

src/Footer.tsx

@@ -332,6 +332,7 @@ export const Footer = memo(
                                             )}
                                             target="_blank"
                                             href={`https://${domain}`}
+                                            title={`${domain} - ${t("open new window")}`}
                                         >
                                             {domain}
                                         </a>
@@ -502,12 +503,17 @@ const { useTranslation, addFooterTranslations } = createComponentI18nApi({
         "license mention": (p: { licenseUrl: string }) => (
             <>
                 Sauf mention contraire, tous les contenus de ce site sont sous{" "}
-                <a href={p.licenseUrl} target="_blank">
+                <a
+                    href={p.licenseUrl}
+                    target="_blank"
+                    title="licence etalab-2.0 - ouvre une nouvelle fenêtre"
+                >
                     licence etalab-2.0
                 </a>
             </>
         ),
-        "our partners": "Nos partenaires"
+        "our partners": "Nos partenaires",
+        "open new window": "ouvre une nouvelle fenêtre"
         /* spell-checker: enable */
     }
 });
@@ -524,11 +530,16 @@ addFooterTranslations({
         "license mention": p => (
             <>
                 Unless stated otherwise, all content of this website is under the{" "}
-                <a href={p.licenseUrl} target="_blank">
+                <a
+                    href={p.licenseUrl}
+                    target="_blank"
+                    title="etalab-2.0 license - open a new window"
+                >
                     etalab-2.0 license
                 </a>
             </>
-        )
+        ),
+        "open new window": "open new window"
     }
 });
 

src/Upload.tsx

@@ -14,6 +14,7 @@ export type UploadProps = {
     hint?: string;
     /** @default false */
     multiple?: boolean;
+    label?: ReactNode;
     /** @default "default" */
     state?: "success" | "error" | "default";
     /** The message won't be displayed if state is "default" */
@@ -31,6 +32,7 @@ export const Upload = memo(
             disabled = false,
             hint = t("hint"),
             multiple = false,
+            label = multiple ? t("add files") : t("add file"),
             state = "default",
             stateRelatedMessage,
             nativeInputProps = {},
@@ -71,7 +73,7 @@ export const Upload = memo(
                 ref={ref}
             >
                 <label className={fr.cx("fr-label")} aria-disabled={disabled} htmlFor={inputId}>
-                    {t("add_files")}
+                    {label}
                     <span className={fr.cx("fr-hint-text")}>{hint}</span>
                 </label>
                 <input
@@ -116,7 +118,8 @@ const { useTranslation, addUploadTranslations } = createComponentI18nApi({
     "componentName": symToStr({ Upload }),
     "frMessages": {
         /* spell-checker: disable */
-        "add_files": "Ajouter des fichiers",
+        "add file": "Ajouter un fichier",
+        "add files": "Ajouter des fichiers",
         "hint": "Taille maximale : 500 Mo. Formats supportés : jpg, png, pdf. Plusieurs fichiers possibles."
         /* spell-checker: enable */
     }
@@ -125,7 +128,8 @@ const { useTranslation, addUploadTranslations } = createComponentI18nApi({
 addUploadTranslations({
     lang: "en",
     messages: {
-        "add_files": "Add files",
+        "add file": "Add file",
+        "add files": "Add files",
         "hint": "Maximum size : 500 Mo. Supported formats : jpg, png, pdf. Many files possible."
     }
 });

stories/Upload.stories.tsx

@@ -14,6 +14,10 @@ const { meta, getStory } = getStoryFactory({
         "disabled": {
             "control": { "type": "boolean" }
         },
+        "label": {
+            "description": "By default : Ajouter un fichier / des fichiers",
+            "control": { "type": "text" }
+        },
         "state": {
             "options": (() => {
                 const options = ["default", "success", "error"] as const;
@@ -44,6 +48,7 @@ const { meta, getStory } = getStoryFactory({
 export default meta;
 
 export const Default = getStory({
+    "label": undefined,
     "hint": "Texte de description",
     "state": "default",
     "stateRelatedMessage": "Text de validation / d'explication de l'erreur",
@@ -73,3 +78,7 @@ export const WithHint = getStory({
 export const Multiple = getStory({
     "multiple": true
 });
+
+export const WithCustomLabel = getStory({
+    "label": "Téléversez votre image de profil"
+});