fix(i18n): prepare for Lokalise

components/TempDesignSystem/Form/Label/index.tsx

@@ -11,10 +11,8 @@ export default function Label({
   const classNames = labelVariants({
     className,
     size,
+    required,
   })
-  return (
-    <span className={classNames}>
-      {children} {required ? "*" : ""}
-    </span>
-  )
+
+  return <span className={classNames}>{children}</span>
 }

components/TempDesignSystem/Form/Label/label.module.css

@@ -24,6 +24,10 @@ span.discreet {
   order: unset;
 }
 
+span.required:after {
+  content: " *";
+}
+
 /* Handle input and textarea fields */
 input:active ~ .label,
 input:not(:placeholder-shown) ~ .label,
@@ -64,7 +68,6 @@ textarea:disabled ~ .label,
 :global(.select-container)[data-open="true"] .label:not(.discreet),
 :global(.react-aria-SelectValue):has(:nth-child(2)) .label:not(.discreet),
 :global(.select-button):active .label:not(.discreet) {
-  display: grid;
   font-size: 12px;
   margin-bottom: var(--Spacing-x-half);
 }

components/TempDesignSystem/Form/Label/variants.ts

@@ -9,8 +9,13 @@ export const labelVariants = cva(styles.label, {
       regular: styles.regular,
       discreet: styles.discreet,
     },
+    required: {
+      true: styles.required,
+      false: "",
+    },
   },
   defaultVariants: {
     size: "regular",
+    required: false,
   },
 })

components/TempDesignSystem/Form/NewPassword/index.tsx

@@ -124,15 +124,32 @@ function PasswordValidation({
   function getErrorMessage(key: PasswordValidatorKey) {
     switch (key) {
       case "length":
-        return `10 ${intl.formatMessage({ id: "to" })} 40 ${intl.formatMessage({ id: "characters" })}`
+        return intl.formatMessage(
+          {
+            id: "{min} to {max} characters",
+          },
+          {
+            min: 10,
+            max: 40,
+          }
+        )
       case "hasUppercase":
-        return `1 ${intl.formatMessage({ id: "uppercase letter" })}`
+        return intl.formatMessage(
+          { id: "{count} uppercase letter" },
+          { count: 1 }
+        )
       case "hasLowercase":
-        return `1 ${intl.formatMessage({ id: "lowercase letter" })}`
+        return intl.formatMessage(
+          { id: "{count} lowercase letter" },
+          { count: 1 }
+        )
       case "hasNumber":
-        return `1 ${intl.formatMessage({ id: "number" })}`
+        return intl.formatMessage({ id: "{count} number" }, { count: 1 })
       case "hasSpecialChar":
-        return `1 ${intl.formatMessage({ id: "special character" })}`
+        return intl.formatMessage(
+          { id: "{count} special character" },
+          { count: 1 }
+        )
     }
   }