[DatePicker] Extract months and week names into en.json

UNRELEASED.md

@@ -12,6 +12,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 - Updates `TopBar.UserMenu` interaction states styling ([#1006](https://github.com/Shopify/polaris-react/pull/1006))
 - Added `download` prop to `Button` and `UnstyledLink` components that enables setting the download attribute ([#1027](https://github.com/Shopify/polaris-react/pull/1027))
+- Extract months and week names into translation files ([#1005](https://github.com/Shopify/polaris-react/pull/1005))
 
 ### Bug fixes
 

src/components/DatePicker/DatePicker.tsx

@@ -17,6 +17,7 @@ import {
 
 import {withAppProvider, WithAppProviderProps} from '../AppProvider';
 import Button from '../Button';
+import {monthName} from './utilities';
 
 import {Month} from './components';
 import styles from './DatePicker.scss';
@@ -98,10 +99,14 @@ export class DatePicker extends React.PureComponent<CombinedProps, State> {
     const showPreviousYear = getPreviousDisplayYear(month, year);
     const showPreviousMonth = getPreviousDisplayMonth(month);
 
-    const previousMonthName = Months[showPreviousMonth];
+    const previousMonthName = intl.translate(
+      `Polaris.DatePicker.months.${monthName(showPreviousMonth)}`,
+    );
     const nextMonth = multiMonth
-      ? Months[showNextToNextMonth]
-      : Months[showNextMonth];
+      ? intl.translate(
+          `Polaris.DatePicker.months.${monthName(showNextToNextMonth)}`,
+        )
+      : intl.translate(`Polaris.DatePicker.months.${monthName(showNextMonth)}`);
     const nextYear = multiMonth ? showNextToNextYear : showNextYear;
 
     const secondDatePicker = multiMonth ? (

src/components/DatePicker/components/Month/Month.tsx

@@ -11,13 +11,14 @@ import {
   dateIsInRange,
   dateIsSelected,
   getNewRange,
-  abbreviationForWeekday,
 } from '@shopify/javascript-utilities/dates';
 import {noop} from '@shopify/javascript-utilities/other';
 import {classNames} from '@shopify/react-utilities/styles';
+import {withAppProvider, WithAppProviderProps} from '../../../AppProvider';
 import styles from '../../DatePicker.scss';
 import Day from '../Day';
 import Weekday from '../Weekday';
+import {monthName, weekdayName} from '../../utilities';
 
 export interface Props {
   focusedDate?: Date;
@@ -36,6 +37,8 @@ export interface Props {
   weekdayName?(weekday: Weekdays): string;
 }
 
+export type CombinedProps = Props & WithAppProviderProps;
+
 const WEEKDAYS = [
   Weekdays.Sunday,
   Weekdays.Monday,
@@ -46,7 +49,7 @@ const WEEKDAYS = [
   Weekdays.Saturday,
 ];
 
-export default function Month({
+function Month({
   focusedDate,
   selected,
   hoverDate,
@@ -59,7 +62,8 @@ export default function Month({
   month,
   year,
   weekStartsOn,
-}: Props) {
+  polaris: {intl},
+}: CombinedProps) {
   const isInHoveringRange = allowRange ? hoveringDateIsInRange : () => false;
   const now = new Date();
   const current = now.getMonth() === month && now.getFullYear() === year;
@@ -71,7 +75,9 @@ export default function Month({
   const weekdays = getWeekdaysOrdered(weekStartsOn).map((weekday) => (
     <Weekday
       key={weekday}
-      title={abbreviationForWeekday(weekday)}
+      title={intl.translate(
+        `Polaris.DatePicker.daysAbbreviated.${weekdayName(weekday)}`,
+      )}
       current={current && new Date().getDay() === weekday}
       label={weekday}
     />
@@ -123,7 +129,7 @@ export default function Month({
   return (
     <div role="grid" className={styles.Month}>
       <div className={className}>
-        {Months[month]} {year}
+        {intl.translate(`Polaris.DatePicker.months.${monthName(month)}`)} {year}
       </div>
       <div role="rowheader" className={styles.WeekHeadings}>
         {weekdays}
@@ -133,6 +139,8 @@ export default function Month({
   );
 }
 
+export default withAppProvider<Props>()(Month);
+
 function hoveringDateIsInRange(
   day: Date | null,
   range: Range,

src/components/DatePicker/utilities.tsx

@@ -0,0 +1,49 @@
+import {Months, Weekdays} from '@shopify/javascript-utilities/dates';
+
+export function monthName(month: Months) {
+  switch (month) {
+    case 0:
+      return 'january';
+    case 1:
+      return 'february';
+    case 2:
+      return 'march';
+    case 3:
+      return 'april';
+    case 4:
+      return 'may';
+    case 5:
+      return 'june';
+    case 6:
+      return 'july';
+    case 7:
+      return 'august';
+    case 8:
+      return 'september';
+    case 9:
+      return 'october';
+    case 10:
+      return 'november';
+    case 11:
+      return 'december';
+  }
+}
+
+export function weekdayName(weekday: Weekdays) {
+  switch (weekday) {
+    case 0:
+      return 'sunday';
+    case 1:
+      return 'monday';
+    case 2:
+      return 'tuesday';
+    case 3:
+      return 'wednesday';
+    case 4:
+      return 'thursday';
+    case 5:
+      return 'friday';
+    case 6:
+      return 'saturday';
+  }
+}

src/locales/en.json

@@ -47,7 +47,30 @@
     "DatePicker": {
       "previousMonth": "Show previous month, {previousMonthName} {showPreviousYear}",
       "nextMonth": "Show next month, {nextMonth} {nextYear}",
-      "today": "Today "
+      "today": "Today ",
+      "months": {
+        "january": "January",
+        "february": "February",
+        "march": "March",
+        "april": "April",
+        "may": "May",
+        "june": "June",
+        "july": "July",
+        "august": "August",
+        "september": "September",
+        "october": "October",
+        "november": "November",
+        "december": "December"
+      },
+      "daysAbbreviated": {
+        "monday": "Mo",
+        "tuesday": "Tu",
+        "wednesday": "We",
+        "thursday": "Th",
+        "friday": "Fr",
+        "saturday": "Sa",
+        "sunday": "Su"
+      }
     },
 
     "DiscardConfirmationModal": {