feat(WEB-220): label translations

components/TempDesignSystem/Form/Date/index.tsx

@@ -7,9 +7,9 @@ import {
   Group,
 } from "react-aria-components"
 import { useController, useFormContext, useWatch } from "react-hook-form"
+import { useIntl } from "react-intl"
 
 import { dt } from "@/lib/dt"
-import { _ } from "@/lib/translation"
 
 import { rangeArray } from "@/utils/rangeArray"
 
@@ -28,6 +28,7 @@ export default function DateSelect({
   name,
   registerOptions,
 }: DateProps) {
+  const { formatMessage } = useIntl()
   const d = useWatch({ name })
   const { setValue } = useFormContext()
   const { field } = useController({
@@ -58,9 +59,13 @@ export default function DateSelect({
     }
   }
 
+  const dayLabel = formatMessage({ id: "Day" })
+  const monthLabel = formatMessage({ id: "Month" })
+  const yearLabel = formatMessage({ id: "Year" })
+
   return (
     <DatePicker
-      aria-label="Select date of birth"
+      aria-label={formatMessage({ id: "Select date of birth" })}
       granularity="day"
       isRequired={!!registerOptions.required}
       name={name}
@@ -85,12 +90,12 @@ export default function DateSelect({
                 return (
                   <DateSegment className={styles.day} segment={segment}>
                     <Select
-                      aria-label={_("Day")}
+                      aria-label={dayLabel}
                       items={days}
-                      label={_("Day")}
+                      label={dayLabel}
                       name={DateName.date}
                       onSelect={createOnSelect(DateName.date)}
-                      placeholder={_("DD")}
+                      placeholder="DD"
                       value={segment.value}
                     />
                   </DateSegment>
@@ -99,12 +104,12 @@ export default function DateSelect({
                 return (
                   <DateSegment className={styles.month} segment={segment}>
                     <Select
-                      aria-label={_("Month")}
+                      aria-label={monthLabel}
                       items={months}
-                      label={_("Month")}
+                      label={monthLabel}
                       name={DateName.month}
                       onSelect={createOnSelect(DateName.month)}
-                      placeholder={_("MM")}
+                      placeholder="MM"
                       value={segment.value}
                     />
                   </DateSegment>
@@ -113,12 +118,12 @@ export default function DateSelect({
                 return (
                   <DateSegment className={styles.year} segment={segment}>
                     <Select
-                      aria-label={_("Year")}
+                      aria-label={yearLabel}
                       items={years}
-                      label={_("Year")}
+                      label={yearLabel}
                       name={DateName.year}
                       onSelect={createOnSelect(DateName.year)}
-                      placeholder={_("YYYY")}
+                      placeholder="YYYY"
                       value={segment.value}
                     />
                   </DateSegment>