feat(i18n): add i18n support

package.json

@@ -130,6 +130,7 @@
   "dependencies": {
     "date-fns": "2.0.0-alpha.27",
     "focus-trap": "^4.0.2",
+    "just-extend": "^4.0.2",
     "memoize-one": "^5.0.0",
     "popper.js": "^1.14.3",
     "react-dropzone": "^9.0.0",

src/datepicker/calendar-header.js

@@ -8,6 +8,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import {ArrowLeft, ArrowRight} from '../icon/index.js';
 import {Select} from '../select/index.js';
+import {LocaleContext} from '../locale/index.js';
 import {
   StyledCalendarHeader,
   StyledPrevButton,
@@ -59,7 +60,7 @@ export default class CalendarHeader extends React.Component<HeaderPropsT> {
     this.props.onMonthChange({date: subMonths(this.props.date, 1)});
   };
 
-  renderPreviousMonthButton = () => {
+  renderPreviousMonthButton = ({locale}) => {
     const {date, overrides = {}} = this.props;
     const allPrevDaysDisabled = monthDisabledBefore(date, this.props);
 
@@ -81,7 +82,7 @@ export default class CalendarHeader extends React.Component<HeaderPropsT> {
     }
     return (
       <PrevButton
-        aria-label="Previous month"
+        aria-label={locale.datepicker.previousMonth}
         tabIndex={0}
         onClick={clickHandler}
         {...prevButtonProps}
@@ -98,7 +99,7 @@ export default class CalendarHeader extends React.Component<HeaderPropsT> {
     );
   };
 
-  renderNextMonthButton = () => {
+  renderNextMonthButton = ({locale}) => {
     const {date, overrides = {}} = this.props;
     const allNextDaysDisabled = monthDisabledAfter(date, this.props);
 
@@ -126,7 +127,7 @@ export default class CalendarHeader extends React.Component<HeaderPropsT> {
     }
     return (
       <NextButton
-        aria-label="Next month"
+        aria-label={locale.datepicker.nextMonth}
         tabIndex={0}
         onClick={clickHandler}
         {...nextButtonProps}
@@ -273,12 +274,16 @@ export default class CalendarHeader extends React.Component<HeaderPropsT> {
       StyledCalendarHeader,
     );
     return (
-      <CalendarHeader {...calendarHeaderProps}>
-        {this.renderPreviousMonthButton()}
-        {this.renderMonthDropdown()}
-        {this.renderYearDropdown()}
-        {this.renderNextMonthButton()}
-      </CalendarHeader>
+      <LocaleContext.Consumer>
+        {locale => (
+          <CalendarHeader {...calendarHeaderProps}>
+            {this.renderPreviousMonthButton({locale})}
+            {this.renderMonthDropdown()}
+            {this.renderYearDropdown()}
+            {this.renderNextMonthButton({locale})}
+          </CalendarHeader>
+        )}
+      </LocaleContext.Consumer>
     );
   }
 }

src/datepicker/datepicker.js

@@ -24,7 +24,6 @@ export default class Datepicker extends React.Component<
   },
 > {
   static defaultProps = {
-    'aria-label': 'Select a date',
     'aria-labelledby': null,
     'aria-describedby': 'datepicker--screenreader--message--input',
     disabled: false,
@@ -140,13 +139,6 @@ export default class Datepicker extends React.Component<
       Popover,
     );
 
-    if (__DEV__ && this.props['aria-label']) {
-      // eslint-disable-next-line no-console
-      console.warn(
-        `Providing i18n data through properties will be removed in the next major version. Please use the LocalProvider.`,
-      );
-    }
-
     return (
       <LocaleContext.Consumer>
         {locale => (
@@ -170,7 +162,7 @@ export default class Datepicker extends React.Component<
               <InputComponent
                 aria-disabled={this.props.disabled}
                 aria-label={
-                  locale.datepicker.ariaLabel || this.props['aria-label']
+                  this.props['aria-label'] || locale.datepicker.ariaLabel
                 }
                 aria-labelledby={this.props['aria-labelledby']}
                 aria-describedby={this.props['aria-describedby']}
@@ -199,8 +191,7 @@ export default class Datepicker extends React.Component<
                 clipPath: 'inset(100%)',
               }}
             >
-              Press the down arrow key to interact with the calendar and select
-              a date. Press the escape button to close the calendar.
+              {locale.datepicker.screenReaderMessageInput}
             </p>
           </React.Fragment>
         )}

src/locale/en_US.js

@@ -9,6 +9,10 @@ LICENSE file in the root directory of this source tree.
 const en_US = {
   datepicker: {
     ariaLabel: 'Select a date',
+    previousMonth: 'Previous month',
+    nextMonth: 'Next month',
+    screenReaderMessageInput:
+      'Press the down arrow key to interact with the calendar and select a date. Press the escape button to close the calendar.',
   },
 };
 

src/locale/index.js

@@ -6,6 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
+import extend from 'just-extend';
 
 import type {LocaleT} from './types.js';
 import en_US from './en_US.js';
@@ -15,7 +16,9 @@ export const LocaleContext: React.Context<LocaleT> = React.createContext(en_US);
 const LocaleProvider = (props: {locale: LocaleT, children: ?React.Node}) => {
   const {locale, children} = props;
   return (
-    <LocaleContext.Provider value={locale}>{children}</LocaleContext.Provider>
+    <LocaleContext.Provider value={extend(en_US, locale)}>
+      {children}
+    </LocaleContext.Provider>
   );
 };
 

src/locale/types.js

@@ -6,9 +6,12 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-export type DatepickerLocaleT = {
+export type DatepickerLocaleT = {|
   ariaLabel: string,
-};
+  nextMonth: string,
+  prevMonth: string,
+  screenReaderMessageInput: string,
+|};
 
 export type LocaleT = {|
   datepicker: DatepickerLocaleT,

yarn.lock

@@ -8997,6 +8997,11 @@ junk@^1.0.1:
   resolved "https://registry.yarnpkg.com/junk/-/junk-1.0.3.tgz#87be63488649cbdca6f53ab39bec9ccd2347f592"
   integrity sha1-h75jSIZJy9ym9Tqzm+yczSNH9ZI=
 
+just-extend@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/just-extend/-/just-extend-4.0.2.tgz#f3f47f7dfca0f989c55410a7ebc8854b07108afc"
+  integrity sha512-FrLwOgm+iXrPV+5zDU6Jqu4gCRXbWEQg2O3SKONsWE4w7AXFRkryS53bpWdaL9cNol+AmR3AEYz6kn+o0fCPnw==
+
 kefir@^3.7.3:
   version "3.8.3"
   resolved "https://registry.yarnpkg.com/kefir/-/kefir-3.8.3.tgz#8e0ab10084ed8a01cbb5d4f7f18a0b859f7b9bd9"