feat(WEB-220): label translations

components/TempDesignSystem/Form/Country/country.ts

@@ -2,6 +2,5 @@ import type { RegisterOptions } from "react-hook-form"
 
 export type CountryProps = {
   name?: string
-  placeholder?: string
   registerOptions?: RegisterOptions
 }

components/TempDesignSystem/Form/Country/index.tsx

@@ -12,8 +12,7 @@ import {
   Popover,
 } from "react-aria-components"
 import { useController, useFormContext } from "react-hook-form"
-
-import { _ } from "@/lib/translation"
+import { useIntl } from "react-intl"
 
 import SelectChevron from "../SelectChevron"
 import { countries } from "./countries"
@@ -24,9 +23,9 @@ import type { CountryProps } from "./country"
 
 export default function CountrySelect({
   name = "country",
-  placeholder = "Select a country",
   registerOptions,
 }: CountryProps) {
+  const { formatMessage } = useIntl()
   const divRef = useRef<HTMLDivElement>(null)
   const { control, setValue } = useFormContext()
   const { field } = useController({
@@ -39,10 +38,12 @@ export default function CountrySelect({
     setValue(name, country)
   }
 
+  const selectCountryLabel = formatMessage({ id: "Select a country" })
+
   return (
     <div className={styles.container} ref={divRef}>
       <ComboBox
-        aria-label={_("Select country of residence")}
+        aria-label={formatMessage({ id: "Select country of residence" })}
         className={styles.select}
         isRequired={!!registerOptions?.required}
         name={field.name}
@@ -53,9 +54,9 @@ export default function CountrySelect({
       >
         <div className={styles.comboBoxContainer}>
           <Input
-            aria-label="Selected country"
+            aria-label={selectCountryLabel}
             className={styles.input}
-            placeholder={_(placeholder)}
+            placeholder={selectCountryLabel}
           />
           <Button className={styles.button}>
             <SelectChevron />

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>

components/TempDesignSystem/Link/link.module.css

@@ -6,6 +6,16 @@
   font-family: var(--typography-Body-Regular-fontFamily);
 }
 
+.myPage {
+  color: var(--some-black-color, #000);
+  font-family: var(--ff-fira-sans);
+  font-size: 1.6rem;
+  font-weight: 600;
+  letter-spacing: 0.6%;
+  line-height: 2.4rem;
+  text-decoration: underline;
+}
+
 .sidebar {
   align-items: center;
   color: var(--some-text-color, #111);

components/TempDesignSystem/Link/variants.ts

@@ -10,6 +10,7 @@ export const linkVariants = cva(styles.link, {
     size: {},
     variant: {
       default: styles.default,
+      myPage: styles.myPage,
       sidebar: styles.sidebar,
     },
   },