Feat (i18n): Added possibility to translate copy button (#3148)

ItaloPussi · AugustinMauroy · web-flow · commit befd3a8e0694 · 2023-01-11T17:08:42.000+01:00
* Feat (i18n): Added possibility to translate copy button

* Fix: Format fix

* Fix: Changed to default translation

* fix: code format

* update test for useCopyToClipboard

Co-authored-by: Augustin Mauroy &lt;97875033+AugustinMauroy@users.noreply.github.com&gt;
diff --git a/src/components/ArticleComponents/Codebox/index.tsx b/src/components/ArticleComponents/Codebox/index.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { highlight, languages } from 'prismjs';
 import { sanitize } from 'isomorphic-dompurify';
 import classnames from 'classnames';
@@ -62,7 +63,7 @@ const Codebox = ({ children: { props } }: Props): JSX.Element => {
       <div className={styles.top}>
         <span>{replaceLabelLanguages(language)}</span>
         <button type="button" onClick={handleCopyCode}>
-          {copied ? 'copied' : 'copy'}
+          <FormattedMessage id="components.codeBox.copy" values={{ copied }} />
         </button>
       </div>
       <div
diff --git a/src/components/CommonComponents/ShellBox/index.tsx b/src/components/CommonComponents/ShellBox/index.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
 import styles from './index.module.scss';
 
@@ -22,7 +23,7 @@ const ShellBox = ({
       <div className={styles.top}>
         <span>SHELL</span>
         <button type="button" onClick={handleCopyCode}>
-          {copied ? 'copied' : 'copy'}
+          <FormattedMessage id="components.shellBox.copy" values={{ copied }} />
         </button>
       </div>
       <code>{children}</code>
diff --git a/src/hooks/__tests__/useCopyToClipboard.test.tsx b/src/hooks/__tests__/useCopyToClipboard.test.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import { FormattedMessage } from 'react-intl';
 import { useCopyToClipboard } from '../useCopyToClipboard';
 
 describe('useCopyToClipboard', () => {
@@ -8,7 +9,7 @@ describe('useCopyToClipboard', () => {
 
     return (
       <button onClick={() => copyText(text)} type="button">
-        {copied ? 'copied' : 'copy'}
+        <FormattedMessage id="components.codeBox.copy" values={{ copied }} />
       </button>
     );
   };
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -95,5 +95,7 @@
   "blog.categories.release.description": "Blog category for Node.js Release announcements",
   "blog.categories.vulnerability.description": "Blog category regarding Security Vulnerabilities",
   "components.downloadToggle.ltsVersions": "LTS Versions",
-  "components.downloadToggle.currentVersions": "Current Versions"
-}
+  "components.downloadToggle.currentVersions": "Current Versions",
+  "components.shellBox.copy": "{copied, select, true {copied}other {copy}}",
+  "components.codeBox.copy": "{copied, select, true {copied}other {copy}}"
+}
diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
@@ -95,5 +95,7 @@
   "blog.categories.release.description": "Blog category for Node.js Release announcements",
   "blog.categories.vulnerability.description": "Blog category regarding Security Vulnerabilities",
   "components.downloadToggle.ltsVersions": "LTS Versions",
-  "components.downloadToggle.currentVersions": "Current Versions"
-}
+  "components.downloadToggle.currentVersions": "Current Versions",
+  "components.shellBox.copy": "{copied, select, true {copied}other {copy}}",
+  "components.codeBox.copy": "{copied, select, true {copied}other {copy}}"
+}
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
@@ -95,5 +95,7 @@
   "blog.categories.release.description": "Catégorie de blog pour les annonces des versions de Node.js",
   "blog.categories.vulnerability.description": "Catégorie de blog concernant les vulnérabilités de sécurité",
   "components.downloadToggle.ltsVersions": "LTS Versions",
-  "components.downloadToggle.currentVersions": "Versions actuelles"
-}
+  "components.downloadToggle.currentVersions": "Versions actuelles",
+  "components.shellBox.copy": "{copied, select, true {copied}other {copy}}",
+  "components.codeBox.copy": "{copied, select, true {copied}other {copy}}"
+}
diff --git a/src/i18n/locales/he.json b/src/i18n/locales/he.json
@@ -95,5 +95,7 @@
   "blog.categories.release.description": "קטגוריית הבלוגים של Node.js לגבי כל השחרורים",
   "blog.categories.vulnerability.description": "קטגוריית בלוג בנושא פגיעויות אבטחה",
   "components.downloadToggle.ltsVersions": "גרסאות LTS",
-  "components.downloadToggle.currentVersions": "גרסאות נוכחיות"
-}
+  "components.downloadToggle.currentVersions": "גרסאות נוכחיות",
+  "components.shellBox.copy": "{copied, select, true {copied}other {copy}}",
+  "components.codeBox.copy": "{copied, select, true {copied}other {copy}}"
+}
diff --git a/src/i18n/locales/ja.json b/src/i18n/locales/ja.json
@@ -95,5 +95,7 @@
   "blog.categories.release.description": "Node.jsのリリース案内カテゴリ",
   "blog.categories.vulnerability.description": "セキュリティや脆弱性カテゴリ",
   "components.downloadToggle.ltsVersions": "LTSバージョン",
-  "components.downloadToggle.currentVersions": "現在のバージョン"
-}
+  "components.downloadToggle.currentVersions": "現在のバージョン",
+  "components.shellBox.copy": "{copied, select, true {copied}other {copy}}",
+  "components.codeBox.copy": "{copied, select, true {copied}other {copy}}"
+}
diff --git a/src/i18n/locales/zh-cn.json b/src/i18n/locales/zh-cn.json
@@ -95,5 +95,7 @@
   "blog.categories.release.description": "关于 Node.js 所有的发布信息",
   "blog.categories.vulnerability.description": "涉及到安全隐患方面的所有信息",
   "components.downloadToggle.ltsVersions": "长期维护版（LTS）",
-  "components.downloadToggle.currentVersions": "尝鲜版"
-}
+  "components.downloadToggle.currentVersions": "尝鲜版",
+  "components.shellBox.copy": "{copied, select, true {copied}other {copy}}",
+  "components.codeBox.copy": "{copied, select, true {copied}other {copy}}"
+}
