fix(i18n): add missing calendar labels (#5011)

sanity-io · Oct 20, 2023 · c0b2a8f · c0b2a8f
1 parent c98759f
commit c0b2a8f
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 33 deletions.
diff --git a/dev/test-studio/plugins/locale-no-nb/bundles/studio.ts b/dev/test-studio/plugins/locale-no-nb/bundles/studio.ts
@@ -114,16 +114,20 @@ const studioResources: Record<StudioLocaleResourceKeys, string> = {
 
   /** --- DateTime (and Date) Input --- */
 
+  /** Action message for navigating to next month */
+  'inputs.datetime.calendar.action.go-to-next-month': 'Gå til forrige måned',
   /** Action message for navigating to previous month */
-  'inputs.datetime.calendar.action.previous-month': `Forrige måned`,
+  'inputs.datetime.calendar.action.go-to-previous-month': 'Gå til neste måned',
   /** Action message for navigating to next year */
-  'inputs.datetime.calendar.action.next-year': `Neste år`,
+  'inputs.datetime.calendar.action.go-to-next-year': 'Gå til neste år',
   /** Action message for navigating to previous year */
-  'inputs.datetime.calendar.action.previous-year': `Forrige år`,
-  /** Action message for selecting hour */
-  'inputs.datetime.calendar.action.select-hour': `Velg time`,
-  /** Action message for setting to current time */
-  'inputs.datetime.calendar.action.set-to-current-time': `Sett til nå`,
+  'inputs.datetime.calendar.action.go-to-previous-year': 'Gå til forrige år',
+  /** Action message for setting to the current time */
+  'inputs.datetime.calendar.action.set-to-current-time': 'Sett til nå',
+  /** Action message for selecting the hour */
+  'inputs.datetime.calendar.action.select-hour': 'Velg time',
+  /** Action message for selecting the minute */
+  'inputs.datetime.calendar.action.select-minute': 'Velg minutt',
 
   /** Month names */
   'inputs.datetime.calendar.month-names.january': 'Januar',

diff --git a/packages/sanity/src/core/form/inputs/DateInputs/__tests__/CommonDateTimeInput.test.tsx b/packages/sanity/src/core/form/inputs/DateInputs/__tests__/CommonDateTimeInput.test.tsx
@@ -30,10 +30,12 @@ function serialize(date: Date): string {
 }
 
 const CALENDAR_LABELS: CalendarLabels = {
-  previousYear: 'Previous year',
-  nextYear: 'Next year',
-  goToPreviousMonth: 'Goto previous mont',
+  goToPreviousYear: 'Previous year',
+  goToNextYear: 'Next year',
+  goToNextMonth: 'Go to next month',
+  goToPreviousMonth: 'Go to previous month',
   selectHour: 'Select hour',
+  selectMinute: 'Select minute',
   setToCurrentTime: 'Set to current time',
   monthNames: [
     'January',

diff --git a/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/Calendar.tsx b/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/Calendar.tsx
@@ -188,15 +188,21 @@ export const Calendar = forwardRef(function Calendar(
             <CalendarMonthSelect
               moveFocusedDate={moveFocusedDate}
               onChange={handleFocusedMonthChange}
-              labels={{goToPreviousMonth: labels.goToPreviousMonth}}
+              labels={{
+                goToPreviousMonth: labels.goToPreviousMonth,
+                goToNextMonth: labels.goToNextMonth,
+              }}
               monthNames={labels.monthNames}
               value={focusedDate?.getMonth()}
             />
           </Box>
           <Box marginLeft={2}>
             <CalendarYearSelect
               moveFocusedDate={moveFocusedDate}
-              labels={{nextYear: labels.nextYear, previousYear: labels.previousYear}}
+              labels={{
+                goToNextYear: labels.goToNextYear,
+                goToPreviousYear: labels.goToPreviousYear,
+              }}
               onChange={setFocusedDateYear}
               value={focusedDate.getFullYear()}
             />
@@ -247,7 +253,7 @@ export const Calendar = forwardRef(function Calendar(
 
               <Box>
                 <Select
-                  aria-label="Select minutes"
+                  aria-label={labels.selectMinute}
                   value={selectedDate?.getMinutes()}
                   onChange={handleMinutesChange}
                 >
@@ -319,6 +325,7 @@ function CalendarMonthSelect(props: {
   monthNames: MonthNames
   labels: {
     goToPreviousMonth: string
+    goToNextMonth: string
   }
 }) {
   const {moveFocusedDate, onChange, value, labels, monthNames} = props
@@ -339,16 +346,16 @@ function CalendarMonthSelect(props: {
       />
       <Box flex={1}>
         <Select radius={0} value={value} onChange={onChange}>
-          {monthNames.map((m, i) => (
+          {monthNames.map((monthName, i) => (
             // eslint-disable-next-line react/no-array-index-key
             <option key={i} value={i}>
-              {m}
+              {monthName}
             </option>
           ))}
         </Select>
       </Box>
       <Button
-        aria-label="Go to next month"
+        aria-label={labels.goToNextMonth}
         mode="bleed"
         icon={ChevronRightIcon}
         onClick={handleNextMonthClick}
@@ -363,7 +370,7 @@ function CalendarYearSelect(props: {
   moveFocusedDate: (by: number) => void
   onChange: (year: number) => void
   value?: number
-  labels: {nextYear: string; previousYear: string}
+  labels: {goToNextYear: string; goToPreviousYear: string}
 }) {
   const {moveFocusedDate, onChange, value, labels} = props
 
@@ -374,7 +381,7 @@ function CalendarYearSelect(props: {
   return (
     <Flex>
       <Button
-        aria-label={labels.previousYear}
+        aria-label={labels.goToPreviousYear}
         onClick={handlePrevYearClick}
         mode="bleed"
         icon={ChevronLeftIcon}
@@ -383,7 +390,7 @@ function CalendarYearSelect(props: {
       />
       <YearInput value={value} onChange={onChange} radius={0} style={{width: 65}} />
       <Button
-        aria-label={labels.nextYear}
+        aria-label={labels.goToNextYear}
         onClick={handleNextYearClick}
         mode="bleed"
         icon={ChevronRightIcon}

diff --git a/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/types.ts b/packages/sanity/src/core/form/inputs/DateInputs/base/calendar/types.ts
@@ -1,8 +1,10 @@
 export interface CalendarLabels {
-  previousYear: string
-  nextYear: string
+  goToPreviousYear: string
+  goToNextYear: string
   goToPreviousMonth: string
+  goToNextMonth: string
   selectHour: string
+  selectMinute: string
   setToCurrentTime: string
   monthNames: MonthNames
   weekDayNamesShort: WeekDayNames

diff --git a/packages/sanity/src/core/form/inputs/DateInputs/utils.ts b/packages/sanity/src/core/form/inputs/DateInputs/utils.ts
@@ -1,18 +1,20 @@
-import {CalendarLabels} from './base/calendar/types'
+import type {CalendarLabels} from './base/calendar/types'
 
-export function isValidDate(date: Date) {
+export function isValidDate(date: Date): boolean {
   return date instanceof Date && !isNaN(date.valueOf())
 }
 
 export function getCalendarLabels(
   t: (key: string, values?: Record<string, unknown>) => string,
 ): CalendarLabels {
   return {
-    goToPreviousMonth: t('inputs.datetime.calendar.go-to-previous-month'),
-    nextYear: t('inputs.datetime.calendar.action.next-year'),
-    previousYear: t('inputs.datetime.calendar.action.previous-year'),
+    goToNextMonth: t('inputs.datetime.calendar.action.go-to-next-month'),
+    goToPreviousMonth: t('inputs.datetime.calendar.action.go-to-previous-month'),
+    goToNextYear: t('inputs.datetime.calendar.action.go-to-next-year'),
+    goToPreviousYear: t('inputs.datetime.calendar.action.go-to-previous-year'),
     setToCurrentTime: t('inputs.datetime.calendar.action.set-to-current-time'),
     selectHour: t('inputs.datetime.calendar.action.select-hour'),
+    selectMinute: t('inputs.datetime.calendar.action.select-minute'),
     monthNames: [
       t('inputs.datetime.calendar.month-names.january'),
       t('inputs.datetime.calendar.month-names.february'),

diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts
@@ -120,16 +120,20 @@ export const studioLocaleStrings = {
 
   /** --- DateTime (and Date) Input --- */
 
+  /** Action message for navigating to next month */
+  'inputs.datetime.calendar.action.go-to-next-month': 'Go to next month',
   /** Action message for navigating to previous month */
-  'inputs.datetime.calendar.action.previous-month': `Previous month`,
+  'inputs.datetime.calendar.action.go-to-previous-month': 'Go to previous month',
   /** Action message for navigating to next year */
-  'inputs.datetime.calendar.action.next-year': `Next year`,
+  'inputs.datetime.calendar.action.go-to-next-year': 'Go to next year',
   /** Action message for navigating to previous year */
-  'inputs.datetime.calendar.action.previous-year': `Previous year`,
-  /** Action message for selecting hour */
-  'inputs.datetime.calendar.action.select-hour': `Select hour`,
-  /** Action message for setting to current time */
-  'inputs.datetime.calendar.action.set-to-current-time': `Set to current time`,
+  'inputs.datetime.calendar.action.go-to-previous-year': 'Go to previous year',
+  /** Action message for setting to the current time */
+  'inputs.datetime.calendar.action.set-to-current-time': 'Set to current time',
+  /** Action message for selecting the hour */
+  'inputs.datetime.calendar.action.select-hour': 'Select hour',
+  /** Action message for selecting the minute */
+  'inputs.datetime.calendar.action.select-minute': 'Select minute',
 
   /** Month names */
   'inputs.datetime.calendar.month-names.january': 'January',