feat(SW-706): make eslint rule 'formatjs/no-literal-string-in-jsx' pass

apps/scandic-web/components/TempDesignSystem/Form/Country/index.tsx

@@ -56,13 +56,17 @@ export default function CountrySelect({
     setValue(name, country ?? "")
   }
 
-  const selectCountryLabel = intl.formatMessage({ id: "Select a country" })
+  const selectCountryLabel = intl.formatMessage({
+    defaultMessage: "Select a country",
+  })
   const collator = new Intl.Collator(lang)
 
   return (
     <div className={`${styles.container} ${className}`} ref={setRef}>
       <ComboBox
-        aria-label={intl.formatMessage({ id: "Select country of residence" })}
+        aria-label={intl.formatMessage({
+          defaultMessage: "Select country of residence",
+        })}
         isReadOnly={readOnly}
         isRequired={!!registerOptions?.required}
         name={field.name}

apps/scandic-web/components/TempDesignSystem/Form/Date/date.test.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable formatjs/no-literal-string-in-jsx */
+
 import { describe, expect, test } from "@jest/globals" // importing because of type conflict with globals from Cypress
 import { render, screen } from "@testing-library/react"
 import { type UserEvent, userEvent } from "@testing-library/user-event"

apps/scandic-web/components/TempDesignSystem/Form/Date/index.tsx

@@ -61,9 +61,15 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
     label: `${day}`,
   }))
 
-  const dayLabel = intl.formatMessage({ id: "Day" })
-  const monthLabel = intl.formatMessage({ id: "Month" })
-  const yearLabel = intl.formatMessage({ id: "Year" })
+  const dayLabel = intl.formatMessage({
+    defaultMessage: "Day",
+  })
+  const monthLabel = intl.formatMessage({
+    defaultMessage: "Month",
+  })
+  const yearLabel = intl.formatMessage({
+    defaultMessage: "Year",
+  })
 
   useEffect(() => {
     if (formState.isSubmitting) return
@@ -120,7 +126,9 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
 
   return (
     <DatePicker
-      aria-label={intl.formatMessage({ id: "Select date of birth" })}
+      aria-label={intl.formatMessage({
+        defaultMessage: "Select date of birth",
+      })}
       isRequired={!!registerOptions.required}
       isInvalid={!formState.isValid}
       name={name}

apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx

@@ -81,7 +81,9 @@ const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
           {fieldState.error && !hideError ? (
             <Caption className={styles.error} fontOnly>
               <MaterialIcon icon="info" color="Icon/Interactive/Accent" />
-              {intl.formatMessage({ id: fieldState.error.message })}
+              {intl.formatMessage({
+                defaultMessage: fieldState.error.message,
+              })}
             </Caption>
           ) : null}
         </TextField>

apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx

@@ -67,8 +67,12 @@ export default function PasswordInput({
                 label={
                   label ||
                   (isNewPassword
-                    ? intl.formatMessage({ id: "New password" })
-                    : intl.formatMessage({ id: "Password" }))
+                    ? intl.formatMessage({
+                        defaultMessage: "New password",
+                      })
+                    : intl.formatMessage({
+                        defaultMessage: "Password",
+                      }))
                 }
                 placeholder={placeholder}
                 type={
@@ -85,7 +89,13 @@ export default function PasswordInput({
                   intent="tertiary"
                   onClick={() => setIsPasswordVisible((value) => !value)}
                   aria-label={
-                    isPasswordVisible ? "Hide password" : "Show password"
+                    isPasswordVisible
+                      ? intl.formatMessage({
+                          defaultMessage: "Hide password",
+                        })
+                      : intl.formatMessage({
+                          defaultMessage: "Show password",
+                        })
                   }
                   aria-controls={field.name}
                   className={styles.toggleButton}
@@ -114,7 +124,9 @@ export default function PasswordInput({
               <Caption className={styles.error} fontOnly>
                 <MaterialIcon icon="info" color="Icon/Feedback/Error" />
                 {fieldState.error &&
-                  intl.formatMessage({ id: fieldState.error.message })}
+                  intl.formatMessage({
+                    defaultMessage: fieldState.error.message,
+                  })}
               </Caption>
             ) : null}
           </TextField>
@@ -148,7 +160,7 @@ function NewPasswordValidation({
       case "length":
         return intl.formatMessage(
           {
-            id: "{min} to {max} characters",
+            defaultMessage: "{min} to {max} characters",
           },
           {
             min: 10,
@@ -157,19 +169,30 @@ function NewPasswordValidation({
         )
       case "hasUppercase":
         return intl.formatMessage(
-          { id: "{count} uppercase letter" },
+          {
+            defaultMessage: "{count} uppercase letter",
+          },
           { count: 1 }
         )
       case "hasLowercase":
         return intl.formatMessage(
-          { id: "{count} lowercase letter" },
+          {
+            defaultMessage: "{count} lowercase letter",
+          },
           { count: 1 }
         )
       case "hasNumber":
-        return intl.formatMessage({ id: "{count} number" }, { count: 1 })
+        return intl.formatMessage(
+          {
+            defaultMessage: "{count} number",
+          },
+          { count: 1 }
+        )
       case "hasSpecialChar":
         return intl.formatMessage(
-          { id: "{count} special character" },
+          {
+            defaultMessage: "{count} special character",
+          },
           { count: 1 }
         )
     }

apps/scandic-web/components/TempDesignSystem/Form/Phone/index.tsx

@@ -106,7 +106,9 @@ export default function Phone({
             data-testid="country-selector"
           >
             <Label required={!!registerOptions.required} size="small">
-              {intl.formatMessage({ id: "Country code" })}
+              {intl.formatMessage({
+                defaultMessage: "Country code",
+              })}
             </Label>
             <span className={styles.selectContainer}>
               {props.children}