[LENS-606] Update Calendar components to accept external localization strings (#1019)

Author: dbchristopher

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - `ButtonGroup` and `ButtonToggle` accessibility issues due to hidden `input`s (they now render a list of `button`s instead)
+- `Calendar`, `InputDate`, and `InputDateRange` localization props
 
 ### Removed
 

packages/components/src/Calendar/Calendar.tsx

@@ -24,21 +24,26 @@
 
  */
 import React, { FC } from 'react'
-import DayPicker, { RangeModifier } from 'react-day-picker'
+import DayPicker, { RangeModifier, LocaleUtils } from 'react-day-picker'
 import 'react-day-picker/lib/style.css'
 import styled from 'styled-components'
 import has from 'lodash/has'
 import { mix } from 'polished'
 import noop from 'lodash/noop'
 import { reset } from '@looker/design-tokens'
-import { LocaleCodes } from '../utils/i18n'
 import { inputTextFocus } from '../Form/Inputs/InputText'
 import { CalendarSize, calendarSize, calendarSpacing } from './calendar-size'
 import { CalendarContext } from './CalendarContext'
 import { CalendarNav } from './CalendarNav'
 
+export interface CalendarLocalization {
+  months: string[]
+  weekdaysShort: string[]
+  firstDayOfWeek: number
+}
+
 interface CalendarProps {
-  locale?: LocaleCodes
+  localization?: CalendarLocalization
   selectedDates?: Date | Date[] | RangeModifier
   onDayClick?: (day: Date) => void
   className?: string
@@ -56,7 +61,7 @@ interface CalendarProps {
 const NoopComponent: FC = () => null
 
 const InternalCalendar: FC<CalendarProps> = ({
-  locale = 'en',
+  localization = {},
   onDayClick,
   className,
   size,
@@ -73,11 +78,19 @@ const InternalCalendar: FC<CalendarProps> = ({
   const renderDateRange = selectedDates && has(selectedDates, 'from')
   const modifiers = renderDateRange ? selectedDates : {}
 
-  const disableCallback = (cb: any) => {
+  const disableCallback = (cb: Function = noop) => {
     // allows provided callback to be circumvented by disabled prop
     return (...args: any[]) => (disabled ? noop() : cb(...args)) // eslint-disable-line standard/no-callback-literal
   }
 
+  const formatMonthTitle = (month: Date) => {
+    if (localization.months) {
+      return `${localization.months[month.getMonth()]} ${month.getFullYear()}`
+    } else {
+      return LocaleUtils.formatMonthTitle(month)
+    }
+  }
+
   return (
     <CalendarContext.Provider
       value={{
@@ -90,9 +103,10 @@ const InternalCalendar: FC<CalendarProps> = ({
       }}
     >
       <DayPicker
+        {...localization}
+        localeUtils={{ ...LocaleUtils, formatMonthTitle }}
         className={`${renderDateRange && 'render-date-range'} ${className}`}
         selectedDays={selectedDates}
-        locale={locale}
         month={viewMonth}
         showOutsideDays={true}
         onDayClick={disableCallback(onDayClick)}

packages/components/src/Calendar/CalendarNav.tsx

@@ -50,7 +50,6 @@ export const CalendarNav: FC<NavbarElementProps> = ({
   month,
   labels,
   localeUtils,
-  locale,
   nextMonth,
   previousMonth,
 }) => {
@@ -94,7 +93,7 @@ export const CalendarNav: FC<NavbarElementProps> = ({
       <Tooltip content="View Current Month">
         <ButtonTransparent onClick={handleLabelClick} color="neutral">
           <Heading as={headingSizeMap(size)} fontWeight="semiBold">
-            {localeUtils.formatMonthTitle(month, locale)}
+            {localeUtils.formatMonthTitle(month)}
           </Heading>
         </ButtonTransparent>
       </Tooltip>

packages/components/src/Form/Inputs/InputDate/InputDate.test.tsx

@@ -28,6 +28,7 @@ import React from 'react'
 import { fireEvent } from '@testing-library/react'
 import { renderWithTheme } from '@looker/components-test-utils'
 
+import { Locales } from '../../../utils'
 import { InputDate } from './InputDate'
 
 const realDateNow = Date.now.bind(global.Date)
@@ -114,3 +115,63 @@ test('validates text input to match localized date format', () => {
 
   expect(mockProps.onValidationFail).toHaveBeenCalledTimes(1)
 })
+
+test('localizes calendar', () => {
+  const months = [
+    'Gennaio',
+    'Febbraio',
+    'Marzo',
+    'Aprile',
+    'Maggio',
+    'Giugno',
+    'Luglio',
+    'Agosto',
+    'Settembre',
+    'Ottobre',
+    'Novembre',
+    'Dicembre',
+  ]
+  const weekdaysShort = ['Do', 'Lu', 'Ma', 'Me', 'Gi', 'Ve', 'Sa']
+  const firstDayOfWeek = 1 // monday
+  const localizationProps = { firstDayOfWeek, months, weekdaysShort }
+
+  const { getByText, container } = renderWithTheme(
+    <InputDate localization={localizationProps} />
+  )
+
+  expect(getByText('Febbraio 2020')).toBeInTheDocument()
+  expect(
+    (container.querySelector('.DayPicker-WeekdaysRow') as HTMLElement)
+      .textContent
+  ).toMatchInlineSnapshot(`"LuMaMeGiVeSaDo"`)
+})
+
+describe('localizes text input', () => {
+  test('Korean', () => {
+    const { getByDisplayValue } = renderWithTheme(
+      <InputDate
+        dateStringLocale={Locales.Korean}
+        defaultValue={new Date(Date.now())}
+      />
+    )
+    expect(getByDisplayValue('2020.02.01')).toBeInTheDocument()
+  })
+  test('Italian', () => {
+    const { getByDisplayValue } = renderWithTheme(
+      <InputDate
+        dateStringLocale={Locales.Italian}
+        defaultValue={new Date(Date.now())}
+      />
+    )
+    expect(getByDisplayValue('01/02/2020')).toBeInTheDocument()
+  })
+  test('English', () => {
+    const { getByDisplayValue } = renderWithTheme(
+      <InputDate
+        dateStringLocale={Locales.English}
+        defaultValue={new Date(Date.now())}
+      />
+    )
+    expect(getByDisplayValue('02/01/2020')).toBeInTheDocument()
+  })
+})

packages/components/src/Form/Inputs/InputDate/InputDate.tsx

@@ -36,10 +36,9 @@ import isFunction from 'lodash/isFunction'
 import isEqual from 'lodash/isEqual'
 import { BorderProps, SpaceProps } from '@looker/design-tokens'
 import { InputText } from '../InputText'
-import { Calendar } from '../../../Calendar'
+import { Calendar, CalendarLocalization } from '../../../Calendar'
 import { ValidationType } from '../../ValidationMessage'
 import {
-  LocaleCodes,
   Locales,
   formatDateString,
   parseDateFromString,
@@ -52,7 +51,8 @@ export interface InputDateProps extends SpaceProps, BorderProps {
   onChange?: (date?: Date) => void
   validationType?: ValidationType
   onValidationFail?: (value: string) => void
-  locale?: LocaleCodes
+  localization?: CalendarLocalization
+  dateStringLocale?: Locales
   id?: string
   ref?: Ref<HTMLInputElement>
   disabled?: boolean
@@ -78,7 +78,8 @@ export const InputDate: FC<InputDateProps> = forwardRef(
     {
       onChange,
       defaultValue,
-      locale = Locales.English,
+      localization,
+      dateStringLocale,
       validationType,
       onValidationFail,
       value,
@@ -92,7 +93,7 @@ export const InputDate: FC<InputDateProps> = forwardRef(
     const [selectedDate, setSelectedDate] = useState(value || defaultValue)
     const [validDate, setValidDate] = useState(validationType !== 'error')
     const [textInputValue, setTextInputValue] = useState(
-      selectedDate ? formatDateString(selectedDate, locale) : ''
+      selectedDate ? formatDateString(selectedDate, dateStringLocale) : ''
     )
     const [viewMonth, setViewMonth] = useState<Date | undefined>(
       value || defaultValue || new Date(Date.now())
@@ -110,7 +111,7 @@ export const InputDate: FC<InputDateProps> = forwardRef(
     }
 
     const handleDayClick = (date: Date) => {
-      setTextInputValue(formatDateString(date, locale))
+      setTextInputValue(formatDateString(date, dateStringLocale))
       handleDateChange(date)
     }
 
@@ -121,7 +122,7 @@ export const InputDate: FC<InputDateProps> = forwardRef(
       if (value.length === 0) {
         handleDateChange()
       } else {
-        const parsedValue = parseDateFromString(value, locale)
+        const parsedValue = parseDateFromString(value, dateStringLocale)
         if (parsedValue) {
           handleDateChange(parsedValue)
         }
@@ -134,7 +135,7 @@ export const InputDate: FC<InputDateProps> = forwardRef(
         const value = (e.target as HTMLInputElement).value
         // is valid if text input is blank or parseDateFromString returns a date object
         const isValid =
-          value.length === 0 || !!parseDateFromString(value, locale)
+          value.length === 0 || !!parseDateFromString(value, dateStringLocale)
         setValidDate(isValid)
         if (!isValid && isFunction(onValidationFail)) {
           onValidationFail(value)
@@ -153,7 +154,7 @@ export const InputDate: FC<InputDateProps> = forwardRef(
       // controlled component: update state when value changes externally
       if (value && !isEqual(value, selectedDate)) {
         setSelectedDate(value)
-        value && setTextInputValue(formatDateString(value, locale))
+        value && setTextInputValue(formatDateString(value, dateStringLocale))
         value &&
           viewMonth &&
           !isDateInView(value, viewMonth) &&
@@ -167,7 +168,7 @@ export const InputDate: FC<InputDateProps> = forwardRef(
         <InputText
           placeholder={`Date (${formatDateString(
             new Date(Date.now()),
-            locale
+            dateStringLocale
           )})`}
           value={textInputValue}
           onChange={handleTextInputChange}
@@ -183,7 +184,7 @@ export const InputDate: FC<InputDateProps> = forwardRef(
           <Calendar
             selectedDates={selectedDate}
             onDayClick={handleDayClick}
-            locale={locale}
+            localization={localization}
             viewMonth={viewMonth}
             onNowClick={handleNavClick}
             onNextClick={handleNavClick}

packages/components/src/Form/Inputs/InputDateRange/InputDateRange.test.tsx

@@ -28,6 +28,7 @@ import React from 'react'
 import { fireEvent } from '@testing-library/react'
 import { renderWithTheme } from '@looker/components-test-utils'
 
+import { Locales } from '../../../utils'
 import { InputDateRange } from './InputDateRange'
 
 const realDateNow = Date.now.bind(global.Date)
@@ -205,3 +206,72 @@ test('validates TO text input to match localized date format', () => {
 
   expect(mockProps.onValidationFail).toHaveBeenCalledTimes(1)
 })
+
+test('localizes calendar', () => {
+  const months = [
+    'Gennaio',
+    'Febbraio',
+    'Marzo',
+    'Aprile',
+    'Maggio',
+    'Giugno',
+    'Luglio',
+    'Agosto',
+    'Settembre',
+    'Ottobre',
+    'Novembre',
+    'Dicembre',
+  ]
+  const weekdaysShort = ['Do', 'Lu', 'Ma', 'Me', 'Gi', 'Ve', 'Sa']
+  const firstDayOfWeek = 1 // monday
+  const localizationProps = { firstDayOfWeek, months, weekdaysShort }
+
+  const { getByText, container } = renderWithTheme(
+    <InputDateRange localization={localizationProps} />
+  )
+
+  expect(getByText('Febbraio 2020')).toBeInTheDocument()
+  expect(
+    (container.querySelector('.DayPicker-WeekdaysRow') as HTMLElement)
+      .textContent
+  ).toMatchInlineSnapshot(`"LuMaMeGiVeSaDo"`)
+})
+
+describe('localizes text input', () => {
+  test('Korean', () => {
+    const { getByDisplayValue } = renderWithTheme(
+      <InputDateRange
+        dateStringLocale={Locales.Korean}
+        defaultValue={{
+          from: new Date(Date.now()),
+          to: new Date('May 2, 2020'),
+        }}
+      />
+    )
+    expect(getByDisplayValue('2020.02.01')).toBeInTheDocument()
+  })
+  test('Italian', () => {
+    const { getByDisplayValue } = renderWithTheme(
+      <InputDateRange
+        dateStringLocale={Locales.Italian}
+        defaultValue={{
+          from: new Date(Date.now()),
+          to: new Date('May 2, 2020'),
+        }}
+      />
+    )
+    expect(getByDisplayValue('01/02/2020')).toBeInTheDocument()
+  })
+  test('English', () => {
+    const { getByDisplayValue } = renderWithTheme(
+      <InputDateRange
+        dateStringLocale={Locales.English}
+        defaultValue={{
+          from: new Date(Date.now()),
+          to: new Date('May 2, 2020'),
+        }}
+      />
+    )
+    expect(getByDisplayValue('02/01/2020')).toBeInTheDocument()
+  })
+})