fix: localise DatePicker validation messages based on configured locale (#4576)

Author: pomfrida

packages/eds-core-react/src/components/Datepicker/DatePicker.spec.tsx

@@ -248,6 +248,72 @@ describe('DatePicker', () => {
     })
   })
 
+  it('should display validation errors in the configured locale', () => {
+    const maxDate = new Date(2024, 0, 1)
+    const outOfRangeDate = new Date(2024, 5, 15)
+
+    const { container, rerender } = render(
+      <I18nProvider locale={'en-US'}>
+        <DatePicker
+          label={'Datepicker'}
+          value={outOfRangeDate}
+          maxValue={maxDate}
+        />
+      </I18nProvider>,
+    )
+
+    // English: "Value must be ... or earlier."
+    expect(container.textContent).toMatch(/Value must be/)
+
+    rerender(
+      <I18nProvider locale={'nb-NO'}>
+        <DatePicker
+          label={'Datepicker'}
+          value={outOfRangeDate}
+          maxValue={maxDate}
+        />
+      </I18nProvider>,
+    )
+
+    // Norwegian: "Verdien må være ... eller tidligere."
+    expect(container.textContent).toMatch(/Verdien/)
+  })
+
+  it('should display localized rangeUnderflow message', () => {
+    const minDate = new Date(2024, 11, 31)
+    const tooEarlyDate = new Date(2024, 0, 1)
+
+    const { container } = render(
+      <I18nProvider locale={'nb-NO'}>
+        <DatePicker
+          label={'Datepicker'}
+          value={tooEarlyDate}
+          minValue={minDate}
+        />
+      </I18nProvider>,
+    )
+
+    // Norwegian: "Verdien må være ... eller senere."
+    expect(container.textContent).toMatch(/Verdien/)
+  })
+
+  it('should display localized message for unavailable dates', () => {
+    const unavailableDate = new Date(2024, 4, 30)
+
+    const { container } = render(
+      <I18nProvider locale={'nb-NO'}>
+        <DatePicker
+          label={'Datepicker'}
+          value={unavailableDate}
+          isDateUnavailable={(d) => d.getDate() === 30}
+        />
+      </I18nProvider>,
+    )
+
+    // Norwegian: "Valgt dato utilgjengelig."
+    expect(container.textContent).toMatch(/utilgjengelig/)
+  })
+
   it('should be localized', () => {
     const date = new Date(2024, 4, 4)
 

packages/eds-core-react/src/components/Datepicker/DatePicker.tsx

@@ -28,6 +28,7 @@ import { tokens } from '@equinor/eds-tokens'
 import { Icon } from '../Icon'
 import { getCalendarDate } from './utils/get-calendar-date'
 import { useGetLocale } from './utils/useGetLocale'
+import { getLocalizedValidationErrors } from './utils/getLocalizedValidationErrors'
 
 /**
  * DatePicker component encapsulates the logic for selecting a single date.
@@ -144,9 +145,24 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     const { groupProps, buttonProps, fieldProps, calendarProps } =
       useDatePicker(dateCreateProps, pickerState, ref)
 
+    const localizedErrors = pickerState.displayValidation.isInvalid
+      ? getLocalizedValidationErrors(
+          pickerState.displayValidation.validationDetails,
+          locale,
+          _minValue,
+          _maxValue,
+          timezone,
+        )
+      : []
+
+    const errorMessages =
+      localizedErrors.length > 0
+        ? localizedErrors
+        : pickerState.displayValidation.validationErrors
+
     const helperPropsInvalid = pickerState.displayValidation.isInvalid
       ? {
-          text: pickerState.displayValidation.validationErrors.join('\n'),
+          text: errorMessages.join('\n'),
           color: tokens.colors.interactive.warning__text.rgba,
           icon: <Icon size={16} data={warning_outlined} />,
         }

packages/eds-core-react/src/components/Datepicker/DateRangePicker.spec.tsx

@@ -150,6 +150,40 @@ describe('DateRangePicker', () => {
     expect(disabledMaxElement).toHaveAttribute('aria-disabled', 'true')
   })
 
+  it('should display validation errors in the configured locale', () => {
+    const maxDate = new Date(2024, 0, 1)
+    const outOfRangeDate = {
+      from: new Date(2024, 5, 10),
+      to: new Date(2024, 5, 15),
+    }
+
+    const { container, rerender } = render(
+      <I18nProvider locale={'en-US'}>
+        <DateRangePicker
+          label={'DateRangePicker'}
+          value={outOfRangeDate}
+          maxValue={maxDate}
+        />
+      </I18nProvider>,
+    )
+
+    // English: "Value must be ... or earlier."
+    expect(container.textContent).toMatch(/Value must be/)
+
+    rerender(
+      <I18nProvider locale={'nb-NO'}>
+        <DateRangePicker
+          label={'DateRangePicker'}
+          value={outOfRangeDate}
+          maxValue={maxDate}
+        />
+      </I18nProvider>,
+    )
+
+    // Norwegian: "Verdien må være ... eller tidligere."
+    expect(container.textContent).toMatch(/Verdien/)
+  })
+
   it('should be possible to limit specific days', async () => {
     const date = {
       from: new Date(2024, 4, 4),

packages/eds-core-react/src/components/Datepicker/DateRangePicker.tsx

@@ -25,6 +25,7 @@ import { tokens } from '@equinor/eds-tokens'
 import { Icon } from '../Icon'
 import { getCalendarDate } from './utils/get-calendar-date'
 import { useGetLocale } from './utils/useGetLocale'
+import { getLocalizedValidationErrors } from './utils/getLocalizedValidationErrors'
 
 /**
  * DateRangePicker component encapsulates the logic for selecting a range of dates
@@ -133,9 +134,24 @@ export const DateRangePicker = forwardRef(
       calendarProps,
     } = useDateRangePicker(dateRangePickerStateProps, state, ref)
 
+    const localizedErrors = state.displayValidation.isInvalid
+      ? getLocalizedValidationErrors(
+          state.displayValidation.validationDetails,
+          locale,
+          _minValue,
+          _maxValue,
+          timezone,
+        )
+      : []
+
+    const errorMessages =
+      localizedErrors.length > 0
+        ? localizedErrors
+        : state.displayValidation.validationErrors
+
     const helperProps = state.displayValidation.isInvalid
       ? {
-          text: state.displayValidation.validationErrors.join('\n'),
+          text: errorMessages.join('\n'),
           color: tokens.colors.interactive.warning__text.rgba,
           icon: <Icon size={16} data={warning_outlined} />,
         }