test: add translation story

Author: streamich

README.md

@@ -72,7 +72,7 @@ const MyComponent = mock();
      - [`<Theme>`](./docs/theme.md#theme), [`<Themed>`](./docs/theme.md#themed), [`withTheme()`](./docs/theme.md#withtheme), and `@withTheme`
      - `<CssVars>`
      - [`<Router>`](./docs/route.md#router), [`<Route>`](./docs/route.md#route), [`withRoute()`](./docs/route.md#withroute), `@withRoute`, `go()`, and `<Go>`
-     - `<Translations>`, `<Translate>`, `withTranslations`, and `@withTranslations`
+     - `<Translations>`, `<Translate>`, `<T>`, `withT()`, and `@withT`
   - [CSS resets](./docs/CSS-resets.md)
      - [`<CssResetEricMeyer>`](./docs/reset/CssResetEricMeyer.md) and [`<CssResetEricMeyerCondensed>`](./docs/reset/CssResetEricMeyerCondensed.md)
      - [`<CssResetMinimalistic>`](./docs/reset/CssResetMinimalistic.md), [`<CssResetMinimalistic2>`](./docs/reset/CssResetMinimalistic2.md), and [`<CssResetMinimalistic3>`](./docs/reset/CssResetMinimalistic3.md)

src/translate/__story__/story.tsx

@@ -4,7 +4,15 @@ import {action} from '@storybook/addon-actions';
 import {linkTo} from '@storybook/addon-links';
 import {LocationSensor} from '../../LocationSensor';
 import {Translations, Translate, T, withT} from '..';
-import ShowDocs from '../../../.storybook/ShowDocs'
+import ShowDocs from '../../../.storybook/ShowDocs';
+
+const Demo = ({T}) => {
+  return (
+    <span>{T('foo')}: {T('hello')}</span>
+  );
+};
+
+const Hoc1 = withT(Demo);
 
 storiesOf('Context/translate', module)
   .add('Documentation', () => h(ShowDocs, {name: 'translate'}))
@@ -14,8 +22,40 @@ storiesOf('Context/translate', module)
     }}>
       <div>
         <T>{(T) =>
-          <span>{T('omg')}: {T('hello')}</span>
+          <Demo T={T} />
         }</T>
       </div>
     </Translations>
+  ))
+  .add('HOC', () => (
+    <Translations map={{
+      foo: 'bar',
+      hello: (T) => `Hello, ${T('foo')}`
+    }}>
+      <div>
+        <Hoc1 />
+      </div>
+    </Translations>
+  ))
+  .add('Multiple namespaces', () => (
+    <Translations ns='a' map={{
+      foo: 'bar'
+    }}>
+      <Translations ns='b' map={{
+        foo: 'baz'
+      }}>
+        <div>
+          <div>
+            <T ns='a'>{(T) =>
+              <span>{T('foo')}</span>
+            }</T>
+          </div>
+          <div>
+            <T ns='b'>{(T) =>
+              <span>{T('foo')}</span>
+            }</T>
+          </div>
+        </div>
+      </Translations>
+    </Translations>
   ));

src/translate/index.ts

@@ -5,7 +5,7 @@ import faccToHoc from '../util/faccToHoc';
 import renderProp from '../util/renderProp';
 
 export interface ITranslationsProps {
-  map: {[key: string]: string | React.StatelessComponent<any>};
+  map: {[key: string]: string | ((...args) => string)};
   ns?: string;
 }
 
@@ -33,11 +33,11 @@ export interface ITranslateState {
 export class Translate extends Component<ITranslateProps, ITranslateState> {
   render () {
     return h(Consumer, {name: ns(`T/${this.props.ns}`)}, (map) => {
-      const T = (key) => {
+      const T = (key, ...args) => {
         const value = map[key];
 
         if (typeof value === 'function') {
-          return value(T);
+          return value(T, ...args);
         }
 
         return value || key;