Translating FormActions component

src/components/App/__snapshots__/test.js.snap

@@ -19,7 +19,7 @@ exports[`App removing rendered expression 1`] = `
       ]
     }
   >
-    <FormActions />
+    <LoadNamespace(FormActions) />
   </LoadNamespace(Form)>
   <RenderJS
     expr="test expression"
@@ -136,7 +136,7 @@ exports[`App rendering an expression 3`] = `
       ]
     }
   >
-    <FormActions />
+    <LoadNamespace(FormActions) />
   </LoadNamespace(Form)>
   <RenderJS
     expr="test expression"
@@ -164,7 +164,7 @@ exports[`App rendering image details 1`] = `
       ]
     }
   >
-    <FormActions />
+    <LoadNamespace(FormActions) />
   </LoadNamespace(Form)>
   <RenderJS
     expr="test expression"
@@ -192,7 +192,7 @@ exports[`App rendering image details 2`] = `
       ]
     }
   >
-    <FormActions
+    <LoadNamespace(FormActions)
       imageDetails={
         Object {
           "svg": "test svg content",

src/components/FormActions/__snapshots__/test.js.snap

@@ -20,7 +20,7 @@ exports[`FormActions rendering download links 1`] = `
         color="currentColor"
         size="24"
       />
-      Example PNG Link
+      TRANSLATE(Example PNG Link)
     </a>
   </li>
   <li>
@@ -33,7 +33,7 @@ exports[`FormActions rendering download links 1`] = `
         color="currentColor"
         size="24"
       />
-      Example SVG Link
+      TRANSLATE(Example SVG Link)
     </a>
   </li>
 </ul>
@@ -51,7 +51,9 @@ exports[`FormActions rendering download links with data after mounting 1`] = `
         color="currentColor"
         size="24"
       />
+      <WithMergedOptions(TransComponent)>
         Permalink
+      </WithMergedOptions(TransComponent)>
     </a>
   </li>
 </ul>
@@ -71,7 +73,7 @@ exports[`FormActions rendering download links with data after mounting 2`] = `
         color="currentColor"
         size="24"
       />
-      Example PNG Link
+      TRANSLATE(Example PNG Link)
     </a>
   </li>
   <li>
@@ -84,7 +86,7 @@ exports[`FormActions rendering download links with data after mounting 2`] = `
         color="currentColor"
         size="24"
       />
-      Example SVG Link
+      TRANSLATE(Example SVG Link)
     </a>
   </li>
   <li>
@@ -95,7 +97,9 @@ exports[`FormActions rendering download links with data after mounting 2`] = `
         color="currentColor"
         size="24"
       />
+      <WithMergedOptions(TransComponent)>
         Permalink
+      </WithMergedOptions(TransComponent)>
     </a>
   </li>
 </ul>
@@ -115,7 +119,7 @@ exports[`FormActions rendering download links with data after mounting 3`] = `
         color="currentColor"
         size="24"
       />
-      Example PNG Link
+      TRANSLATE(Example PNG Link)
     </a>
   </li>
   <li>
@@ -128,7 +132,7 @@ exports[`FormActions rendering download links with data after mounting 3`] = `
         color="currentColor"
         size="24"
       />
-      Example SVG Link
+      TRANSLATE(Example SVG Link)
     </a>
   </li>
   <li>
@@ -139,7 +143,9 @@ exports[`FormActions rendering download links with data after mounting 3`] = `
         color="currentColor"
         size="24"
       />
+      <WithMergedOptions(TransComponent)>
         Permalink
+      </WithMergedOptions(TransComponent)>
     </a>
   </li>
 </ul>
@@ -157,7 +163,9 @@ exports[`FormActions rendering with a permalink 1`] = `
         color="currentColor"
         size="24"
       />
+      <WithMergedOptions(TransComponent)>
         Permalink
+      </WithMergedOptions(TransComponent)>
     </a>
   </li>
 </ul>

src/components/FormActions/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { withNamespaces, Trans } from 'react-i18next';
 
 import DownloadIcon from 'react-feather/dist/icons/download';
 import LinkIcon from 'react-feather/dist/icons/link';
@@ -15,7 +16,8 @@ class FormActions extends React.PureComponent {
       svg: PropTypes.string,
       width: PropTypes.number,
       height: PropTypes.number
-    })
+    }),
+    t: PropTypes.func.isRequired
   }
 
   state = {
@@ -63,9 +65,11 @@ class FormActions extends React.PureComponent {
   }
 
   downloadLink({ url, filename, type, label }) {
+    const { t } = this.props;
+
     return <li>
       <a href={ url } download={ filename } type={ type }>
-        <DownloadIcon />{ label }
+        <DownloadIcon />{ t(label) }
       </a>
     </li>;
   }
@@ -83,10 +87,11 @@ class FormActions extends React.PureComponent {
       { pngLink && this.downloadLink(pngLink) }
       { svgLink && this.downloadLink(svgLink) }
       { permalinkUrl && <li>
-        <a href={ permalinkUrl }><LinkIcon />Permalink</a>
+        <a href={ permalinkUrl }><LinkIcon /><Trans>Permalink</Trans></a>
       </li> }
     </ul>;
   }
 }
 
-export default FormActions;
+export { FormActions };
+export default withNamespaces()(FormActions);

src/components/FormActions/test.js

@@ -3,7 +3,8 @@ jest.mock('./links');
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import FormActions from 'components/FormActions';
+import { mockT } from 'i18n';
+import { FormActions } from 'components/FormActions';
 import { createPngLink, createSvgLink } from './links';
 
 createPngLink.mockResolvedValue({
@@ -22,14 +23,14 @@ createSvgLink.mockResolvedValue({
 describe('FormActions', () => {
   test('rendering', () => {
     const component = shallow(
-      <FormActions />
+      <FormActions t={ mockT } />
     );
     expect(component).toMatchSnapshot();
   });
 
   test('rendering with a permalink', () => {
     const component = shallow(
-      <FormActions permalinkUrl="http://example.com" />
+      <FormActions permalinkUrl="http://example.com" t={ mockT } />
     );
     expect(component).toMatchSnapshot();
   });
@@ -42,7 +43,7 @@ describe('FormActions', () => {
     };
 
     const component = shallow(
-      <FormActions imageDetails={ imageDetails }/>
+      <FormActions imageDetails={ imageDetails } t={ mockT } />
     );
 
     // Give a beat for mocked promises to resolve
@@ -53,7 +54,7 @@ describe('FormActions', () => {
 
   test('rendering download links with data after mounting', async () => {
     const component = shallow(
-      <FormActions />
+      <FormActions t={ mockT } />
     );
 
     component.setProps({ permalinkUrl: 'http://example.com' });

src/locales/en-AC.yaml

@@ -57,3 +57,9 @@
   JAVASCRIPT
 "PCRE": |
   PCRE
+"Permalink": |
+  PERMALINK
+"Download SVG": |
+  DOWNLOAD SVG
+"Download PNG": |
+  DOWNLOAD PNG

src/locales/en.yaml

@@ -57,3 +57,9 @@
   JavaScript
 "PCRE": |
   PCRE
+"Permalink": |
+  Permalink
+"Download SVG": |
+  Download SVG
+"Download PNG": |
+  Download PNG