feat(i18n): add i18n support

documentation-site/pages/getting-started/internationalization.mdx

@@ -0,0 +1,31 @@
+<!--
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+import Layout from '../../components/layout';
+import en_US from '../../../src/locale/en_US.js'
+
+export default Layout;
+
+# Internationalization
+
+Base UI supports English as the default language. Following the instructions below, you
+can use other languages too.
+
+```javascript
+import { LocaleProvider } from 'baseui';
+import {huHU} from '{YOUR_PROJECT}/hu.json';
+import App from '{YOUR_PROJECT}/app.js';
+
+return (
+  <LocaleProvider locale={huHU}>
+    <App />
+  </LocaleProvider>
+);
+```
+
+If you'd like to contribute a locale, please send a Pull Request based
+on the [en_US](https://github.com/uber-web/baseui/tree/master/src/locale) locale.

documentation-site/routes.js

@@ -36,6 +36,10 @@ const routes = [
         text: 'Comparison with other component libraries',
         path: '/getting-started/comparison',
       },
+      {
+        text: 'Internationalization',
+        path: '/getting-started/internationalization',
+      },
     ],
   },
   {

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/accordion/locale.js

@@ -0,0 +1,19 @@
+/*
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+
+export type AccordionLocaleT = {|
+  collapse: string,
+  expand: string,
+|};
+
+const locale = {
+  collapse: 'Collapse',
+  expand: 'Expand',
+};
+
+export default locale;

src/accordion/panel.js

@@ -6,6 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
+import {LocaleContext} from '../locale/index.js';
 import {getOverrides, mergeOverrides} from '../helpers/overrides.js';
 import {
   Plus as PlusIcon,
@@ -91,31 +92,37 @@ class Panel extends React.Component<PanelPropsT> {
     );
     const ToggleIconComponent = expanded ? CheckIndeterminateIcon : PlusIcon;
     return (
-      <PanelContainer {...sharedProps} {...panelContainerProps}>
-        <Header
-          tabIndex={0}
-          role="button"
-          aria-expanded={expanded}
-          aria-disabled={disabled || null}
-          {...sharedProps}
-          {...headerProps}
-          onClick={this.onClick}
-          onKeyDown={this.onKeyDown}
-        >
-          {title}
-          <ToggleIconComponent
-            size={16}
-            title={expanded ? 'Collapse' : 'Expand'}
-            {...sharedProps}
-            {...toggleIconProps}
-            // $FlowFixMe
-            overrides={toggleIconOverrides}
-          />
-        </Header>
-        <Content {...sharedProps} {...contentProps}>
-          {children}
-        </Content>
-      </PanelContainer>
+      <LocaleContext.Consumer>
+        {locale => (
+          <PanelContainer {...sharedProps} {...panelContainerProps}>
+            <Header
+              tabIndex={0}
+              role="button"
+              aria-expanded={expanded}
+              aria-disabled={disabled || null}
+              {...sharedProps}
+              {...headerProps}
+              onClick={this.onClick}
+              onKeyDown={this.onKeyDown}
+            >
+              {title}
+              <ToggleIconComponent
+                size={16}
+                title={
+                  expanded ? locale.accordion.collapse : locale.accordion.expand
+                }
+                {...sharedProps}
+                {...toggleIconProps}
+                // $FlowFixMe
+                overrides={toggleIconOverrides}
+              />
+            </Header>
+            <Content {...sharedProps} {...contentProps}>
+              {children}
+            </Content>
+          </PanelContainer>
+        )}
+      </LocaleContext.Consumer>
     );
   }
 }

src/breadcrumbs/breadcrumbs.js

@@ -9,6 +9,7 @@ LICENSE file in the root directory of this source tree.
 
 import React, {Children} from 'react';
 
+import {LocaleContext} from '../locale/index.js';
 import type {BreadcrumbsPropsT} from './types.js';
 import {StyledRoot, StyledSeparator, StyledIcon} from './styled-components.js';
 import {getOverrides} from '../helpers/overrides.js';
@@ -37,9 +38,13 @@ function Breadcrumbs({children, overrides = {}}: BreadcrumbsPropsT) {
   });
 
   return (
-    <Root aria-label="Breadcrumbs navigation" {...baseRootProps}>
-      {childrenWithSeparators}
-    </Root>
+    <LocaleContext.Consumer>
+      {locale => (
+        <Root aria-label={locale.breadcrumbs.ariaLabel} {...baseRootProps}>
+          {childrenWithSeparators}
+        </Root>
+      )}
+    </LocaleContext.Consumer>
   );
 }
 

src/breadcrumbs/locale.js

@@ -0,0 +1,17 @@
+/*
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+
+export type BreadcrumbLocaleT = {|
+  ariaLabel: string,
+|};
+
+const locale = {
+  ariaLabel: 'Breadcrumbs navigation',
+};
+
+export default locale;

src/button-group/button-group.js

@@ -10,6 +10,7 @@ import React from 'react';
 
 import {KIND, SIZE, SHAPE} from '../button/index.js';
 import {getOverrides} from '../helpers/overrides.js';
+import {LocaleContext} from '../locale/index.js';
 
 import {StyledRoot} from './styled-components.js';
 import type {PropsT} from './types.js';
@@ -54,43 +55,51 @@ export default function ButtonGroup(props: PropsT) {
   const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
 
   return (
-    <Root aria-label={props.ariaLabel} {...rootProps}>
-      {React.Children.map(props.children, (child, index) => {
-        if (!React.isValidElement(child)) {
-          return null;
-        }
-
-        return React.cloneElement(child, {
-          disabled: props.disabled ? true : child.props.disabled,
-          isSelected: isSelected(props.selected, index),
-          kind: KIND.tertiary,
-          onClick: event => {
-            if (props.disabled) {
-              return;
+    <LocaleContext.Consumer>
+      {locale => (
+        <Root
+          aria-label={props.ariaLabel || locale.buttongroup.ariaLabel}
+          {...rootProps}
+        >
+          {React.Children.map(props.children, (child, index) => {
+            if (!React.isValidElement(child)) {
+              return null;
             }
 
-            if (child.props.onClick) {
-              child.props.onClick(event);
-            }
-
-            if (props.onClick) {
-              props.onClick(event, index);
-            }
-          },
-          overrides: {
-            BaseButton: {style: getBorderRadii(index, props.children.length)},
-            ...child.props.overrides,
-          },
-          shape: props.shape,
-          size: props.size,
-        });
-      })}
-    </Root>
+            return React.cloneElement(child, {
+              disabled: props.disabled ? true : child.props.disabled,
+              isSelected: isSelected(props.selected, index),
+              kind: KIND.tertiary,
+              onClick: event => {
+                if (props.disabled) {
+                  return;
+                }
+
+                if (child.props.onClick) {
+                  child.props.onClick(event);
+                }
+
+                if (props.onClick) {
+                  props.onClick(event, index);
+                }
+              },
+              overrides: {
+                BaseButton: {
+                  style: getBorderRadii(index, props.children.length),
+                },
+                ...child.props.overrides,
+              },
+              shape: props.shape,
+              size: props.size,
+            });
+          })}
+        </Root>
+      )}
+    </LocaleContext.Consumer>
   );
 }
 
 ButtonGroup.defaultProps = {
-  ariaLabel: 'button group',
   disabled: false,
   onClick: () => {},
   shape: SHAPE.default,

src/button-group/locale.js

@@ -0,0 +1,17 @@
+/*
+Copyright (c) 2018 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+
+export type ButtonGroupLocaleT = {|
+  ariaLabel: string,
+|};
+
+const locale = {
+  ariaLabel: 'button group',
+};
+
+export default locale;

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,
@@ -27,6 +28,7 @@ import {
 import {getOverrides, mergeOverrides} from '../helpers/overrides.js';
 import type {HeaderPropsT} from './types.js';
 import type {SharedStylePropsT} from '../select/types.js';
+import type {LocaleT} from '../locale/types.js';
 
 const navBtnStyle = ({$theme}) => ({
   cursor: 'pointer',
@@ -59,7 +61,7 @@ export default class CalendarHeader extends React.Component<HeaderPropsT> {
     this.props.onMonthChange({date: subMonths(this.props.date, 1)});
   };
 
-  renderPreviousMonthButton = () => {
+  renderPreviousMonthButton = ({locale}: {locale: LocaleT}) => {
     const {date, overrides = {}} = this.props;
     const allPrevDaysDisabled = monthDisabledBefore(date, this.props);
 
@@ -81,7 +83,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 +100,7 @@ export default class CalendarHeader extends React.Component<HeaderPropsT> {
     );
   };
 
-  renderNextMonthButton = () => {
+  renderNextMonthButton = ({locale}: {locale: LocaleT}) => {
     const {date, overrides = {}} = this.props;
     const allNextDaysDisabled = monthDisabledAfter(date, this.props);
 
@@ -126,7 +128,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 +275,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>
     );
   }
 }