From bfa7a9052be4dd69ed3883a6911b64890e9c02d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Hapl?= <tomas.hapl@gmail.com>
Date: Tue, 30 Apr 2019 15:42:16 +0200
Subject: [PATCH] NEW: Translations layer (#1016)

---
 .eslintrc                                     |  3 +-
 .github/dictionary.md                         | 43 +++++++++++
 .github/theming.md                            |  6 +-
 config/fetchTranslations.js                   | 72 +++++++++++++++++++
 package.json                                  |  4 ++
 readme.md                                     |  3 +-
 src/Dictionary/index.js                       | 12 ++++
 src/Dictionary/index.js.flow                  | 17 +++++
 src/Popover/README.MD                         |  1 -
 .../__snapshots__/index.test.js.snap          |  8 ++-
 src/Popover/components/ContentWrapper.js      | 12 ++--
 src/Popover/index.js.flow                     |  3 +-
 src/ThemeProvider/README.md                   | 20 ++++++
 src/ThemeProvider/index.js                    | 19 +++++
 src/ThemeProvider/index.js.flow               | 14 ++++
 src/Tooltip/README.md                         |  1 -
 src/Tooltip/index.js                          | 12 +---
 src/Tooltip/index.js.flow                     |  3 +-
 src/Translate/README.md                       | 48 +++++++++++++
 src/Translate/index.js                        | 30 ++++++++
 src/Translate/index.js.flow                   | 12 ++++
 src/data/dictionary/ar-AE.json                |  1 +
 src/data/dictionary/bg-BG.json                |  1 +
 src/data/dictionary/cs-CZ.json                |  1 +
 src/data/dictionary/da-DK.json                |  1 +
 src/data/dictionary/de-DE.json                |  1 +
 src/data/dictionary/el-GR.json                |  1 +
 src/data/dictionary/en-GB.json                | 11 +++
 src/data/dictionary/en-US.json                |  1 +
 src/data/dictionary/es-AR.json                |  1 +
 src/data/dictionary/es-ES.json                |  1 +
 src/data/dictionary/es-MX.json                |  1 +
 src/data/dictionary/fi-FI.json                |  1 +
 src/data/dictionary/fr-FR.json                |  1 +
 src/data/dictionary/he-IL.json                |  1 +
 src/data/dictionary/hu-HU.json                |  1 +
 src/data/dictionary/id-ID.json                |  1 +
 src/data/dictionary/it-IT.json                |  1 +
 src/data/dictionary/ja-JP.json                |  1 +
 src/data/dictionary/ko-KR.json                |  1 +
 src/data/dictionary/lt-LT.json                |  1 +
 src/data/dictionary/nb-NO.json                |  1 +
 src/data/dictionary/nl-NL.json                |  1 +
 src/data/dictionary/pl-PL.json                |  1 +
 src/data/dictionary/pt-PT.json                |  1 +
 src/data/dictionary/ro-RO.json                |  1 +
 src/utils/rtl/RenderInRtl.js                  |  3 +-
 yarn.lock                                     | 18 +++++
 48 files changed, 369 insertions(+), 30 deletions(-)
 create mode 100644 .github/dictionary.md
 create mode 100644 config/fetchTranslations.js
 create mode 100644 src/Dictionary/index.js
 create mode 100644 src/Dictionary/index.js.flow
 create mode 100644 src/ThemeProvider/README.md
 create mode 100644 src/ThemeProvider/index.js
 create mode 100644 src/ThemeProvider/index.js.flow
 create mode 100644 src/Translate/README.md
 create mode 100644 src/Translate/index.js
 create mode 100644 src/Translate/index.js.flow
 create mode 100644 src/data/dictionary/ar-AE.json
 create mode 100644 src/data/dictionary/bg-BG.json
 create mode 100644 src/data/dictionary/cs-CZ.json
 create mode 100644 src/data/dictionary/da-DK.json
 create mode 100644 src/data/dictionary/de-DE.json
 create mode 100644 src/data/dictionary/el-GR.json
 create mode 100644 src/data/dictionary/en-GB.json
 create mode 100644 src/data/dictionary/en-US.json
 create mode 100644 src/data/dictionary/es-AR.json
 create mode 100644 src/data/dictionary/es-ES.json
 create mode 100644 src/data/dictionary/es-MX.json
 create mode 100644 src/data/dictionary/fi-FI.json
 create mode 100644 src/data/dictionary/fr-FR.json
 create mode 100644 src/data/dictionary/he-IL.json
 create mode 100644 src/data/dictionary/hu-HU.json
 create mode 100644 src/data/dictionary/id-ID.json
 create mode 100644 src/data/dictionary/it-IT.json
 create mode 100644 src/data/dictionary/ja-JP.json
 create mode 100644 src/data/dictionary/ko-KR.json
 create mode 100644 src/data/dictionary/lt-LT.json
 create mode 100644 src/data/dictionary/nb-NO.json
 create mode 100644 src/data/dictionary/nl-NL.json
 create mode 100644 src/data/dictionary/pl-PL.json
 create mode 100644 src/data/dictionary/pt-PT.json
 create mode 100644 src/data/dictionary/ro-RO.json

diff --git a/.eslintrc b/.eslintrc
index bba564a76b..8b4531697e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -55,6 +55,7 @@
     "import/no-self-import": "off",
     "react/destructuring-assignment": "off",
     "react/no-access-state-in-setstate": "off",
-    "jsx-a11y/label-has-associated-control": "off"
+    "jsx-a11y/label-has-associated-control": "off",
+    "no-await-in-loop": "off"
   }
 }
diff --git a/.github/dictionary.md b/.github/dictionary.md
new file mode 100644
index 0000000000..ad075eb439
--- /dev/null
+++ b/.github/dictionary.md
@@ -0,0 +1,43 @@
+# Dictionary
+We added support to our own dictionary. It handles common translations in components like `Close` 
+
+You have available our dictionary in `@kiwicom/orbit-components/lib/data/dictionary/...`
+There are files which contains our own translations.
+
+**Example:**
+```jsx
+import en_GB from "@kiwicom/orbit-components/lib/data/dictionary/en-GB.json"; 
+import ThemeProvider from "@kiwicom/orbit-components/lib/ThemeProvider";
+import Tooltip from "@kiwicom/orbit-components/lib/Tooltip";
+import Heading from "@kiwicom/orbit-components/lib/Heading";
+
+const App = () => 
+  <ThemeProvider dictionary={en_GB}>
+    <Tooltip content="Write your text here. If it’s longer than three li…">
+      <Heading>
+        Orbit design system
+      </Heading>
+    </Tooltip>
+  </ThemeProvider>;
+```
+
+**Fallbacks**
+
+* If translation key not exists in your language the fallback is `en_GB` which is our default lang
+* If translation key not exists in both files (your language, default language), the translation key will be rendered e.g. `button_close`
+
+**Your own dictionary**
+
+There is option to add your own dictionary, just pass object containing keys and values.
+
+```jsx
+import ThemeProvider from "@kiwicom/orbit-components/lib/ThemeProvider";
+
+const App = () => 
+  <ThemeProvider dictionary={{
+    "button_close": "My own translation"
+  }}>
+    <Button type="secondary" size="large" />
+  </ThemeProvider>;
+```
+
diff --git a/.github/theming.md b/.github/theming.md
index 5927caa02d..4f21345672 100644
--- a/.github/theming.md
+++ b/.github/theming.md
@@ -1,12 +1,12 @@
 # Theming
 Our entire CSS styling for our components is based on [orbit-design-tokens](https://github.com/kiwicom/orbit-design-tokens), which contains variables with colors, sizings, spacings, etc. It also contains the functionality to create custom themes that can be used inside `orbit-components`.
 
-All you need to do is pass colors into the `getTokens` function and then pass this object into `<ThemeProvider />`. The component from `styled-components` will do all the magic for you thanks to React's context API.
+All you need to do is pass colors into the `getTokens` function and then pass this object into `<ThemeProvider />`. The component re-exports `ThemeProvider` from `styled-components` and will do all the magic for you thanks to React's context API.
 
 **Example:**
 ```jsx
-import { getTokens } from "@kiwicom/orbit-design-tokens"; 
-import { ThemeProvider } from "styled-components";
+import getTokens from "@kiwicom/orbit-components/lib/getTokens"; 
+import ThemeProvider from "@kiwicom/orbit-components/lib/ThemeProvider";
 
 const customTokens = getTokens({
   palette: {
diff --git a/config/fetchTranslations.js b/config/fetchTranslations.js
new file mode 100644
index 0000000000..9f055ee030
--- /dev/null
+++ b/config/fetchTranslations.js
@@ -0,0 +1,72 @@
+// @flow
+import fetch from "isomorphic-unfetch";
+import path from "path";
+import dotenv from "dotenv";
+import fs from "fs-extra";
+
+dotenv.config();
+const env = name => process.env[name] || "";
+
+const PHRASE_APP_BASE_URL = "https://api.phraseapp.com/api/v2";
+const PHRASE_APP_PROJECT_ID = env("PHRASE_APP_PROJECT_ID");
+const PHRASE_APP_ACCESS_TOKEN = env("PHRASE_APP_ACCESS_TOKEN");
+
+const LOCALES_URL = `${PHRASE_APP_BASE_URL}/projects/${PHRASE_APP_PROJECT_ID}/locales`;
+const FILE_FORMAT = "nested_json";
+
+const fetchJSON = async url => {
+  const options = {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `token ${PHRASE_APP_ACCESS_TOKEN}`,
+    },
+  };
+  return (await fetch(url, options)).json();
+};
+
+const writeJSON = (filename, obj) =>
+  new Promise((resolve, reject) => {
+    fs.outputFile(filename, JSON.stringify(obj, null, 2), "utf8", err => {
+      if (err) {
+        reject(err);
+      }
+
+      resolve();
+    });
+  });
+
+const flatten = (obj = {}, keyPrefix = "") =>
+  Object.entries(obj).reduce((result, [key, value]) => {
+    if (value && typeof value === "object") {
+      return {
+        ...result,
+        ...flatten(value, `${keyPrefix}${key}.`),
+      };
+    }
+    return {
+      ...result,
+      [keyPrefix + key]: value,
+    };
+  }, {});
+
+(async () => {
+  try {
+    const allLocales = await fetchJSON(LOCALES_URL);
+    const LOCALES_DATA = path.join(__dirname, "..", "src", "data", "dictionary");
+
+    // PhraseApp has limits on parallel requests
+    // that's why we process requests in sequence
+    // eslint-disable-next-line no-restricted-syntax
+    for (const locale of allLocales) {
+      const translation = await fetchJSON(
+        `${LOCALES_URL}/${locale.id}/download?file_format=${FILE_FORMAT}&tags=orbit&encoding=UTF-8`,
+      );
+
+      await writeJSON(path.join(LOCALES_DATA, `${locale.code}.json`), flatten(translation.orbit));
+    }
+  } catch (error) {
+    console.error(error); // eslint-disable-line no-console
+    process.exit(1);
+  }
+})();
diff --git a/package.json b/package.json
index 6441246224..a854d38ad2 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "flow:check": "flow check",
     "test": "jest --config=jest.json",
     "test-ci": "yarn flow:check && yarn eslint && yarn test --ci --maxWorkers=2",
+    "fetch-translations": "babel-node config/fetchTranslations.js",
     "deploy:storybook": "storybook-to-ghpages",
     "deploy:surge": "yarn surge .out/ https://orbit-components-$(git rev-parse --abbrev-ref HEAD | sed -e 's/[^a-zA-Z0-9]/-/g').surge.sh",
     "deploy:updateURL": "yarn babel-node config/deploymentUtils.js updateLiveURL"
@@ -107,6 +108,7 @@
     "camelcase": "^5.0.0",
     "capitalize": "^1.0.0",
     "copyfiles": "^2.1.0",
+    "dotenv": "^7.0.0",
     "enzyme": "^3.6.0",
     "enzyme-adapter-react-16": "^1.6.0",
     "enzyme-to-json": "^3.3.3",
@@ -120,7 +122,9 @@
     "eslint-plugin-prettier": "^3.0.1",
     "eslint-plugin-react": "^7.7.0",
     "flow-bin": "^0.89.0",
+    "fs-extra": "^7.0.1",
     "glob": "^7.1.2",
+    "isomorphic-unfetch": "^3.0.0",
     "jest": "^24.5.0",
     "jest-styled-components": "^6.2.1",
     "jsdom": "^12.0.0",
diff --git a/readme.md b/readme.md
index 3a9e68a7b4..4f17ca03e2 100644
--- a/readme.md
+++ b/readme.md
@@ -49,7 +49,7 @@ import Alert from "@kiwicom/orbit-components/lib/Alert"
 <Alert>Hello World!</Alert>
 ```
 
-If you want to use a custom theme inside your project, it’s necessary to generate a theme object from `orbit-design-tokens` and use it in `<ThemeProvider />` component from `styled-components`. See [this document](https://github.com/kiwicom/orbit-components/tree/master/.github/theming.md) for more information.
+If you want to use custom theme or dictionary inside your project, it's necessary to wrap your app into `<ThemeProvider>`. See [this document](https://github.com/kiwicom/orbit-components/tree/master/src/ThemeProvider/README.md) for more information.
 
 For live preview check out [Storybook](https://kiwicom.github.io/orbit-components/) or [orbit.kiwi](https://orbit.kiwi).
 
@@ -60,6 +60,7 @@ You can also try `orbit-components` live on [CodeSandbox](https://codesandbox.io
 * [Icons](https://github.com/kiwicom/orbit-components/tree/master/src/Icon/README.md)
 * [Right to left languages](https://github.com/kiwicom/orbit-components/tree/master/src/utils/rtl/README.md)
 * [Theming](https://github.com/kiwicom/orbit-components/tree/master/.github/theming.md)
+* [Dictionary](https://github.com/kiwicom/orbit-components/tree/master/.github/dictionary.md)
 
 ## Contributing
 We are working on making this project fully open source. We appreciate any contributions you might make.
diff --git a/src/Dictionary/index.js b/src/Dictionary/index.js
new file mode 100644
index 0000000000..b26886ad14
--- /dev/null
+++ b/src/Dictionary/index.js
@@ -0,0 +1,12 @@
+// @flow
+import * as React from "react";
+
+import type { DictionaryContextType, Props } from "./index";
+
+export const DictionaryContext: DictionaryContextType = React.createContext({});
+
+const Dictionary = ({ values, children }: Props) => (
+  <DictionaryContext.Provider value={values}>{children}</DictionaryContext.Provider>
+);
+
+export default Dictionary;
diff --git a/src/Dictionary/index.js.flow b/src/Dictionary/index.js.flow
new file mode 100644
index 0000000000..5c158ed40d
--- /dev/null
+++ b/src/Dictionary/index.js.flow
@@ -0,0 +1,17 @@
+// @flow
+import * as React from "react";
+
+export type Translations = {
+  [key: string]: string,
+};
+
+export type DictionaryContextType = React.Context<Translations>;
+
+export type Props = {
+  +values: Translations,
+  +children: React$Node,
+};
+
+declare export default React$ComponentType<Props>;
+
+declare export var DictionaryContext: DictionaryContextType;
diff --git a/src/Popover/README.MD b/src/Popover/README.MD
index c27642fd98..81572e1093 100644
--- a/src/Popover/README.MD
+++ b/src/Popover/README.MD
@@ -16,7 +16,6 @@ Table below contains all types of the props available in the Popover component.
 | Name              | Type                   | Default         | Description                      |
 | :---------------- | :--------------------- | :-------------- | :------------------------------- |
 | **content**       | `React.Node`           |                 | The content to display in the Popover.
-| closeText         | `Translation`          | `"Close"`       | The text of the close button to display on mobile devices.
 | **children**      | `React.Node`           |                 | The reference element where the Popover will appear.
 | dataTest          | `string`               |                 | Optional prop for testing purposes.
 | noPadding        | `boolean`              | `true`          | Adds or removes padding around popover's content.
diff --git a/src/Popover/__tests__/__snapshots__/index.test.js.snap b/src/Popover/__tests__/__snapshots__/index.test.js.snap
index bd894ad260..6f27fa8b5f 100644
--- a/src/Popover/__tests__/__snapshots__/index.test.js.snap
+++ b/src/Popover/__tests__/__snapshots__/index.test.js.snap
@@ -921,7 +921,7 @@ exports[`ContentWrapper it should match snapshot 1`] = `
       <Button>
         Content
       </Button>
-      <ContentWrapper__StyledTooltipClose
+      <ContentWrapper__StyledPopoverClose
         theme={
           Object {
             "orbit": Object {
@@ -1378,9 +1378,11 @@ exports[`ContentWrapper it should match snapshot 1`] = `
           onClick={[MockFunction]}
           type="secondary"
         >
-          Close
+          <Translate
+            tKey="button_close"
+          />
         </Button>
-      </ContentWrapper__StyledTooltipClose>
+      </ContentWrapper__StyledPopoverClose>
     </ContentWrapper__StyledPopoverContent>
   </ContentWrapper__StyledPopoverParent>
 </Fragment>
diff --git a/src/Popover/components/ContentWrapper.js b/src/Popover/components/ContentWrapper.js
index 47c6d7b448..c9073c1bcb 100644
--- a/src/Popover/components/ContentWrapper.js
+++ b/src/Popover/components/ContentWrapper.js
@@ -12,6 +12,7 @@ import type { Props } from "./ContentWrapper.js.flow";
 import useDimensions from "../hooks/useDimensions";
 import useVerticalPosition from "../hooks/useVerticalPosition";
 import useHorizontalPosition from "../hooks/useHorizontalPosition";
+import Translate from "../../Translate";
 
 const showAnimation = keyframes`
   from {
@@ -93,7 +94,7 @@ StyledOverlay.defaultProps = {
   theme: defaultTheme,
 };
 
-const StyledTooltipClose = styled.div`
+const StyledPopoverClose = styled.div`
   padding: ${({ theme, noPadding }) => (noPadding ? theme.orbit.spaceSmall : 0)};
   padding-top: ${({ theme }) => theme.orbit.spaceMedium};
 
@@ -103,13 +104,12 @@ const StyledTooltipClose = styled.div`
     padding-bottom: 0;
   `)}
 `;
-StyledTooltipClose.defaultProps = {
+StyledPopoverClose.defaultProps = {
   theme: defaultTheme,
 };
 
 const PopoverContentWrapper = ({
   children,
-  closeText,
   onClose,
   width,
   dataTest,
@@ -160,11 +160,11 @@ const PopoverContentWrapper = ({
       >
         <StyledPopoverContent ref={content}>
           {children}
-          <StyledTooltipClose noPadding={noPadding}>
+          <StyledPopoverClose noPadding={noPadding}>
             <Button type="secondary" block onClick={onClose}>
-              {closeText || "Close"}
+              <Translate tKey="button_close" />
             </Button>
-          </StyledTooltipClose>
+          </StyledPopoverClose>
         </StyledPopoverContent>
       </StyledPopoverParent>
     </React.Fragment>
diff --git a/src/Popover/index.js.flow b/src/Popover/index.js.flow
index eb95df6ed1..6fcaba8280 100644
--- a/src/Popover/index.js.flow
+++ b/src/Popover/index.js.flow
@@ -1,5 +1,5 @@
 // @flow
-import type { Globals, Translation } from "../common/common.js.flow";
+import type { Globals } from "../common/common.js.flow";
 
 export type PositionsCore = "top" | "bottom";
 export type AnchorsCore = "start" | "end";
@@ -28,7 +28,6 @@ export type Props = {|
   ...Globals,
   +children: React$Node,
   +content: React$Node,
-  +closeText?: Translation,
   +preferredPosition?: PositionsCore,
   +opened?: boolean,
   +width?: string,
diff --git a/src/ThemeProvider/README.md b/src/ThemeProvider/README.md
new file mode 100644
index 0000000000..3dc1ab7fbb
--- /dev/null
+++ b/src/ThemeProvider/README.md
@@ -0,0 +1,20 @@
+# ThemeProvider
+orbit-components has theming support via our own `<ThemeProvider>` which adds you possibilities to add your own theme and dictionary.
+```jsx
+import ThemeProvider from "@kiwicom/orbit-components/lib/ThemeProvider";
+```
+After adding import please wrap your application into `ThemeProvider` and you can provide your own [`theme`](https://github.com/kiwicom/orbit-components/blob/master/.github/theming.md) and [`dictionary`](https://github.com/kiwicom/orbit-components/blob/master/.github/dictionary.md)
+
+```jsx
+<ThemeProvider theme={...} dictionary={...}>
+  <App />
+</ThemeProvider>
+```
+## Props
+Table below contains all types of the props available in the ThemeProvider component.
+
+| Name          | Type                      | Default         | Description                      |
+| :------------ | :------------------------ | :-------------- | :------------------------------- |
+| **children**  | `React.Node`              |                 | Your app
+| theme         | `[Object]`                |                 | See [`theming`](https://github.com/kiwicom/orbit-components/blob/master/.github/theming.md)
+| dictionary    | `[Object]`                |                 | See [`dictionary`](https://github.com/kiwicom/orbit-components/blob/master/.github/dictionary.md)
diff --git a/src/ThemeProvider/index.js b/src/ThemeProvider/index.js
new file mode 100644
index 0000000000..1e87ba2f2d
--- /dev/null
+++ b/src/ThemeProvider/index.js
@@ -0,0 +1,19 @@
+// @flow
+import React from "react";
+import { ThemeProvider as StyledThemeProvider } from "styled-components";
+
+import Dictionary from "../Dictionary";
+
+import type { Props } from "./index";
+
+const ThemeProvider = ({ theme, dictionary, children }: Props) => (
+  <StyledThemeProvider theme={theme}>
+    {dictionary ? (
+      <Dictionary values={dictionary}>{React.Children.only(children)}</Dictionary>
+    ) : (
+      React.Children.only(children)
+    )}
+  </StyledThemeProvider>
+);
+
+export default ThemeProvider;
diff --git a/src/ThemeProvider/index.js.flow b/src/ThemeProvider/index.js.flow
new file mode 100644
index 0000000000..f20b8d34c7
--- /dev/null
+++ b/src/ThemeProvider/index.js.flow
@@ -0,0 +1,14 @@
+// @flow
+/*
+  DOCUMENTATION: https://orbit.kiwi/components/themeprovider/
+*/
+
+import type { Translations } from "../Dictionary";
+
+export type Props = {|
+  +theme: any,
+  +dictionary?: Translations,
+  +children: React$Node,
+|};
+
+declare export default React$ComponentType<Props>;
diff --git a/src/Tooltip/README.md b/src/Tooltip/README.md
index 4a9c828878..13b9c97f8c 100644
--- a/src/Tooltip/README.md
+++ b/src/Tooltip/README.md
@@ -20,7 +20,6 @@ Table below contains all types of the props available in the Tooltip component.
 | **content**       | `React.Node`          |                 | The content to display in the Tooltip.
 | preferredPosition | [`enum`](#enum)       |                 | The preferred position to choose [See Functional specs](#functional-specs)
 | size              | [`enum`](#enum)       |                 | The maximum possible size of the Tooltip.
-| closeText         | `Translation`         |                 | The text of the close button to display on mobile devices.
 | tabIndex          | `string`              | `"0"`           | Specifies the tab order of an element
 
 ## enum
diff --git a/src/Tooltip/index.js b/src/Tooltip/index.js
index 2141ae82df..8db4d8551e 100644
--- a/src/Tooltip/index.js
+++ b/src/Tooltip/index.js
@@ -34,6 +34,7 @@ import tooltipPadding from "./helpers/tooltipPadding";
 import RandomID from "../utils/randomID";
 import type { ThemeProps } from "../defaultTheme";
 import { QUERIES } from "../utils/mediaQuery/consts";
+import Translate from "../Translate";
 
 import type { Props, State, Aligns, Positions } from "./index";
 
@@ -440,14 +441,7 @@ class Tooltip extends React.PureComponent<Props & ThemeProps, State> {
   tooltipId: string;
 
   render() {
-    const {
-      content,
-      children,
-      size = SIZE_OPTIONS.SMALL,
-      closeText = "Close",
-      dataTest,
-      tabIndex = "0",
-    } = this.props;
+    const { content, children, size = SIZE_OPTIONS.SMALL, dataTest, tabIndex = "0" } = this.props;
     const { shown, shownMobile, position, align } = this.state;
     const {
       containerTop,
@@ -505,7 +499,7 @@ class Tooltip extends React.PureComponent<Props & ThemeProps, State> {
               <StyledTooltipContent ref={this.content}>{content}</StyledTooltipContent>
               <StyledTooltipClose>
                 <Button type="secondary" block onClick={this.handleClose} ref={this.closeButton}>
-                  {closeText}
+                  <Translate tKey="button_close" />
                 </Button>
               </StyledTooltipClose>
             </StyledTooltipWrapper>
diff --git a/src/Tooltip/index.js.flow b/src/Tooltip/index.js.flow
index 50586f579f..de463b6072 100644
--- a/src/Tooltip/index.js.flow
+++ b/src/Tooltip/index.js.flow
@@ -2,7 +2,7 @@
 /*
   DOCUMENTATION: https://orbit.kiwi/components/tooltip/
 */
-import type { Globals, Translation } from "../common/common.js.flow";
+import type { Globals } from "../common/common.js.flow";
 
 export type Dimensions = {|
   containerTop: number,
@@ -35,7 +35,6 @@ export type Props = {|
   +children: React$Node,
   +content: React$Node,
   +size?: "small" | "medium",
-  +closeText?: Translation,
   +preferredPosition?: Positions,
   +tabIndex?: string,
 |};
diff --git a/src/Translate/README.md b/src/Translate/README.md
new file mode 100644
index 0000000000..c8d9d10dc6
--- /dev/null
+++ b/src/Translate/README.md
@@ -0,0 +1,48 @@
+# Translate
+We have support of our `Dictionary` see [this document](https://github.com/kiwicom/orbit-components/blob/master/.github/dictionary.md)
+
+This component adds you possibility to take some strings from our dictionary. 
+
+## Props
+Table below contains all types of the props available in Translate component.
+
+| Name          | Type                            | Default         | Description                      |
+| :------------ | :------------------------------ | :-------------- | :------------------------------- |
+| tKey          | `string`                        |                 | Translation key that dictionary object must contain
+| values        | [`Object`](#values)             |                 | For placeholder values [See Functional specs](#functional-specs)
+
+
+**Example:**
+```jsx
+import en_GB from "@kiwicom/orbit-components/lib/data/dictionary/en-GB.json"; 
+import ThemeProvider from "@kiwicom/orbit-components/lib/ThemeProvider";
+import Button from "@kiwicom/orbit-components/lib/Button";
+
+const App = () => 
+  <ThemeProvider theme={...} dictionary={en_GB}>
+    <Button>
+      <Translate tKey="button_close" />
+    </Button>
+  </ThemeProvider>;
+```
+
+### Values
+```jsx
+{
+  [key]: "replacement string",
+  [key2]: "replacement string2"
+}
+```
+
+`key` is placeholder without `__` - if placeholder is `__time__` the object will look like this
+
+```jsx
+{
+  time: "today"
+}
+```
+
+
+## Functional specs
+
+* If you have some key that contains placeholders like `We like __placeholder__` you can easily replace by this way:`<Translate tKey="translation_key_with_placeholder" values={{ placeholder: "orbit"}} />` then the result will be `We like orbit`
diff --git a/src/Translate/index.js b/src/Translate/index.js
new file mode 100644
index 0000000000..a71d715375
--- /dev/null
+++ b/src/Translate/index.js
@@ -0,0 +1,30 @@
+// @flow
+import React from "react";
+
+import { DictionaryContext } from "../Dictionary";
+import DEFAULT_DICTIONARY from "../data/dictionary/en-GB";
+import type { Translations } from "../Dictionary";
+
+import type { Props, Values } from "./index";
+
+function translate(translations: Translations, key: string, values: Values = {}) {
+  const translation = translations[key] || DEFAULT_DICTIONARY[key];
+
+  if (!translation) {
+    return key;
+  }
+
+  return Object.keys(values).reduce(
+    (acc, placeholder) =>
+      acc.replace(new RegExp(`__${placeholder}__`, "g"), String(values[placeholder])),
+    translation,
+  );
+}
+
+const Translate = ({ tKey, values }: Props) => (
+  <DictionaryContext.Consumer>
+    {dictionary => translate(dictionary, tKey, values)}
+  </DictionaryContext.Consumer>
+);
+
+export default Translate;
diff --git a/src/Translate/index.js.flow b/src/Translate/index.js.flow
new file mode 100644
index 0000000000..9661b19b0a
--- /dev/null
+++ b/src/Translate/index.js.flow
@@ -0,0 +1,12 @@
+// @flow
+
+export type Values = {
+  [key: string]: string | number,
+};
+
+export type Props = {
+  tKey: string,
+  values?: Values,
+};
+
+declare export default React$ComponentType<Props>;
diff --git a/src/data/dictionary/ar-AE.json b/src/data/dictionary/ar-AE.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/src/data/dictionary/ar-AE.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/data/dictionary/bg-BG.json b/src/data/dictionary/bg-BG.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/src/data/dictionary/bg-BG.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/data/dictionary/cs-CZ.json b/src/data/dictionary/cs-CZ.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/src/data/dictionary/cs-CZ.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/data/dictionary/da-DK.json b/src/data/dictionary/da-DK.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/src/data/dictionary/da-DK.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/data/dictionary/de-DE.json b/src/data/dictionary/de-DE.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/src/data/dictionary/de-DE.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/data/dictionary/el-GR.json b/src/data/dictionary/el-GR.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/src/data/dictionary/el-GR.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/data/dictionary/en-GB.json b/src/data/dictionary/en-GB.json
new file mode 100644
index 0000000000..982879b526
--- /dev/null
+++ b/src/data/dictionary/en-GB.json
@@ -0,0 +1,11 @@
+{
+  "a11ymenu_jump_to": "Jump to",
+  "a11ymenu_page_actions": "Common actions on this page",
+  "a11ymenu_page_sections": "Sections of this page",
+  "a11ymenu_send_feedback": "Send feedback",
+  "button_close": "Close",
+  "choicegroup_only": "Only",
+  "pagination_label_next": "Next",
+  "pagination_label_prev": "Previous",
+  "ratingstar_description": "Rating __number__ out of __number__"
+}
\ No newline at end of file
diff --git a/src/data/dictionary/en-US.json b/src/data/dictionary/en-US.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/src/data/dictionary/en-US.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/data/dictionary/es-AR.json b/src/data/dictionary/es-AR.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/src/data/dictionary/es-AR.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/data/dictionary/es-ES.json b/src/data/dictionary/es-ES.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/src/data/dictionary/es-ES.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/data/dictionary/es-MX.json b/src/data/dictionary/es-MX.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/src/data/dictionary/es-MX.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/data/dictionary/fi-FI.json b/src/data/dictionary/fi-FI.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/src/data/dictionary/fi-FI.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/data/dictionary/fr-FR.json b/src/data/dictionary/fr-FR.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/src/data/dictionary/fr-FR.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/data/dictionary/he-IL.json b/src/data/dictionary/he-IL.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/src/data/dictionary/he-IL.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/data/dictionary/hu-HU.json b/src/data/dictionary/hu-HU.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/src/data/dictionary/hu-HU.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/data/dictionary/id-ID.json b/src/data/dictionary/id-ID.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/src/data/dictionary/id-ID.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/data/dictionary/it-IT.json b/src/data/dictionary/it-IT.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/src/data/dictionary/it-IT.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/data/dictionary/ja-JP.json b/src/data/dictionary/ja-JP.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/src/data/dictionary/ja-JP.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/data/dictionary/ko-KR.json b/src/data/dictionary/ko-KR.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/src/data/dictionary/ko-KR.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/data/dictionary/lt-LT.json b/src/data/dictionary/lt-LT.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/src/data/dictionary/lt-LT.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/data/dictionary/nb-NO.json b/src/data/dictionary/nb-NO.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/src/data/dictionary/nb-NO.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/data/dictionary/nl-NL.json b/src/data/dictionary/nl-NL.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/src/data/dictionary/nl-NL.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/data/dictionary/pl-PL.json b/src/data/dictionary/pl-PL.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/src/data/dictionary/pl-PL.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/data/dictionary/pt-PT.json b/src/data/dictionary/pt-PT.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/src/data/dictionary/pt-PT.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/data/dictionary/ro-RO.json b/src/data/dictionary/ro-RO.json
new file mode 100644
index 0000000000..9e26dfeeb6
--- /dev/null
+++ b/src/data/dictionary/ro-RO.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/src/utils/rtl/RenderInRtl.js b/src/utils/rtl/RenderInRtl.js
index 40f1940fce..5b30c11d21 100644
--- a/src/utils/rtl/RenderInRtl.js
+++ b/src/utils/rtl/RenderInRtl.js
@@ -1,8 +1,9 @@
 // @flow
 import * as React from "react";
-import { ThemeProvider } from "styled-components";
 import { defaultTokens } from "@kiwicom/orbit-design-tokens";
 
+import ThemeProvider from "../../ThemeProvider";
+
 type Props = {|
   +children: React.Node,
 |};
diff --git a/yarn.lock b/yarn.lock
index 4fc91dca64..c019a4057c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4585,6 +4585,11 @@ dotenv@^6.0.0, dotenv@^6.2.0:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-6.2.0.tgz#941c0410535d942c8becf28d3f357dbd9d476064"
   integrity sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==
 
+dotenv@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-7.0.0.tgz#a2be3cd52736673206e8a85fb5210eea29628e7c"
+  integrity sha512-M3NhsLbV1i6HuGzBUH8vXrtxOk+tWmzWKDMbAVSUp3Zsjm7ywFeuwrUXhmhQyRK1q5B5GGy7hcXPbj3bnfZg2g==
+
 duplexer3@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
@@ -6824,6 +6829,14 @@ isomorphic-fetch@^2.1.1:
     node-fetch "^1.0.1"
     whatwg-fetch ">=0.10.0"
 
+isomorphic-unfetch@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/isomorphic-unfetch/-/isomorphic-unfetch-3.0.0.tgz#de6d80abde487b17de2c400a7ef9e5ecc2efb362"
+  integrity sha512-V0tmJSYfkKokZ5mgl0cmfQMTb7MLHsBMngTkbLY0eXvKqiVRRoZP04Ly+KhKrJfKtzC9E6Pp15Jo+bwh7Vi2XQ==
+  dependencies:
+    node-fetch "^2.2.0"
+    unfetch "^4.0.0"
+
 isstream@0.1.x, isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -11662,6 +11675,11 @@ uglify-js@^3.1.4:
     commander "~2.19.0"
     source-map "~0.6.1"
 
+unfetch@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-4.1.0.tgz#6ec2dd0de887e58a4dee83a050ded80ffc4137db"
+  integrity sha512-crP/n3eAPUJxZXM9T80/yv0YhkTEx2K1D3h7D1AJM6fzsWZrxdyRuLN0JH/dkZh1LNH8LxCnBzoPFCPbb2iGpg==
+
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"