Spanish Translation Modals for Sketch Menu (#1538)

* NewFileModal spanish transaltion
 translations.json (both languages EN - ES)
 changes in NewFileForm.jsx and NewFileModal.jsx to link the new keys.

* NewFolderModal spanish translation
 translations.json (both languages EN - ES)
 changes in NewFileForm.jsx and NewFileModal.jsx to link the new keys.

Author: oruburos

client/modules/IDE/components/NewFileForm.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { withTranslation } from 'react-i18next';
 import { domOnlyProps } from '../../../utils/reduxFormUtils';
 
 import Button from '../../../common/Button';
@@ -30,14 +31,14 @@ class NewFileForm extends React.Component {
             className="new-file-form__name-input"
             id="name"
             type="text"
-            placeholder="Name"
+            placeholder={this.props.t('NewFileForm.Placeholder')}
             maxLength="128"
             {...domOnlyProps(name)}
             ref={(element) => { this.fileName = element; }}
           />
           <Button
             type="submit"
-          >Add File
+          >{this.props.t('NewFileForm.AddFileSubmit')}
           </Button>
         </div>
         {name.touched && name.error && <span className="form-error">{name.error}</span>}
@@ -52,7 +53,8 @@ NewFileForm.propTypes = {
   }).isRequired,
   handleSubmit: PropTypes.func.isRequired,
   createFile: PropTypes.func.isRequired,
-  focusOnModal: PropTypes.func.isRequired
+  focusOnModal: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired
 };
 
-export default NewFileForm;
+export default withTranslation()(NewFileForm);

client/modules/IDE/components/NewFileModal.jsx

@@ -3,6 +3,8 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, compose } from 'redux';
 import { reduxForm } from 'redux-form';
+import { withTranslation } from 'react-i18next';
+import i18n from 'i18next';
 import NewFileForm from './NewFileForm';
 import { closeNewFileModal } from '../actions/ide';
 import { createFile } from '../actions/files';
@@ -33,11 +35,11 @@ class NewFileModal extends React.Component {
       <section className="modal" ref={(element) => { this.modal = element; }}>
         <div className="modal-content">
           <div className="modal__header">
-            <h2 className="modal__title">Create File</h2>
+            <h2 className="modal__title">{this.props.t('NewFileModal.Title')}</h2>
             <button
               className="modal__exit-button"
               onClick={this.props.closeNewFileModal}
-              aria-label="Close New File Modal"
+              aria-label={this.props.t('NewFileModal.CloseButtonARIA')}
             >
               <ExitIcon focusable="false" aria-hidden="true" />
             </button>
@@ -54,16 +56,17 @@ class NewFileModal extends React.Component {
 
 NewFileModal.propTypes = {
   createFile: PropTypes.func.isRequired,
-  closeNewFileModal: PropTypes.func.isRequired
+  closeNewFileModal: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired
 };
 
 function validate(formProps) {
   const errors = {};
 
   if (!formProps.name) {
-    errors.name = 'Please enter a name';
+    errors.name = i18n.t('NewFileModal.EnterName');
   } else if (!formProps.name.match(CREATE_FILE_REGEX)) {
-    errors.name = 'Invalid file type. Valid extensions are .js, .css, .json, .txt, .csv, .tsv, .frag, and .vert.';
+    errors.name = i18n.t('NewFileModal.InvalidType');
   }
 
   return errors;
@@ -77,11 +80,11 @@ function mapDispatchToProps(dispatch) {
   return bindActionCreators({ createFile, closeNewFileModal }, dispatch);
 }
 
-export default compose(
+export default withTranslation()(compose(
   connect(mapStateToProps, mapDispatchToProps),
   reduxForm({
     form: 'new-file',
     fields: ['name'],
     validate
   })
-)(NewFileModal);
+)(NewFileModal));

client/modules/IDE/components/NewFolderForm.jsx

@@ -1,9 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { withTranslation } from 'react-i18next';
 import { domOnlyProps } from '../../../utils/reduxFormUtils';
 
 import Button from '../../../common/Button';
 
+
 class NewFolderForm extends React.Component {
   constructor(props) {
     super(props);
@@ -32,13 +34,13 @@ class NewFolderForm extends React.Component {
             id="name"
             type="text"
             maxLength="128"
-            placeholder="Name"
+            placeholder={this.props.t('NewFolderForm.Placeholder')}
             ref={(element) => { this.fileName = element; }}
             {...domOnlyProps(name)}
           />
           <Button
             type="submit"
-          >Add Folder
+          >{this.props.t('NewFolderForm.AddFolderSubmit')}
           </Button>
         </div>
         {name.touched && name.error && <span className="form-error">{name.error}</span>}
@@ -55,10 +57,11 @@ NewFolderForm.propTypes = {
   createFolder: PropTypes.func.isRequired,
   closeModal: PropTypes.func.isRequired,
   submitting: PropTypes.bool,
-  pristine: PropTypes.bool
+  pristine: PropTypes.bool,
+  t: PropTypes.func.isRequired
 };
 NewFolderForm.defaultProps = {
   submitting: false,
   pristine: true
 };
-export default NewFolderForm;
+export default withTranslation()(NewFolderForm);

client/modules/IDE/components/NewFolderModal.jsx

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { reduxForm } from 'redux-form';
+import { withTranslation } from 'react-i18next';
+import i18n from 'i18next';
 import NewFolderForm from './NewFolderForm';
 
 import ExitIcon from '../../../images/exit.svg';
@@ -15,11 +17,11 @@ class NewFolderModal extends React.Component {
       <section className="modal" ref={(element) => { this.newFolderModal = element; }} >
         <div className="modal-content-folder">
           <div className="modal__header">
-            <h2 className="modal__title">Create Folder</h2>
+            <h2 className="modal__title">{this.props.t('NewFolderModal.Title')}</h2>
             <button
               className="modal__exit-button"
               onClick={this.props.closeModal}
-              aria-label="Close New Folder Modal"
+              aria-label={this.props.t('NewFolderModal.CloseButtonARIA')}
             >
               <ExitIcon focusable="false" aria-hidden="true" />
             </button>
@@ -32,23 +34,24 @@ class NewFolderModal extends React.Component {
 }
 
 NewFolderModal.propTypes = {
-  closeModal: PropTypes.func.isRequired
+  closeModal: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired
 };
 
 function validate(formProps) {
   const errors = {};
   if (!formProps.name) {
-    errors.name = 'Please enter a name';
+    errors.name = i18n.t('NewFolderModal.EnterName');
   } else if (formProps.name.trim().length === 0) {
-    errors.name = 'Folder name cannot contain only spaces';
+    errors.name = i18n.t('NewFolderModal.EmptyName');
   } else if (formProps.name.match(/\.+/i)) {
-    errors.name = 'Folder name cannot contain an extension';
+    errors.name = i18n.t('NewFolderModal.InvalidExtension');
   }
 
   return errors;
 }
-export default reduxForm({
+export default withTranslation()(reduxForm({
   form: 'new-folder',
   fields: ['name'],
   validate
-})(NewFolderModal);
+})(NewFolderModal));

translations/locales/en-US/translations.json

@@ -173,5 +173,26 @@
   },
   "IDEView": {
     "SubmitFeedback": "Submit Feedback"
+  },
+  "NewFileModal": {
+    "Title": "Create File",
+     "CloseButtonARIA": "Close New File Modal",
+    "EnterName": "Please enter a name",
+    "InvalidType": "Invalid file type. Valid extensions are .js, .css, .json, .txt, .csv, .tsv, .frag, and .vert."
+  },
+  "NewFileForm": {
+  "AddFileSubmit": "Add File",
+    "Placeholder": "Name"
+},
+  "NewFolderModal": {
+    "Title": "Create Folder",
+    "CloseButtonARIA": "Close New Folder Modal",
+    "EnterName": "Please enter a name",
+    "EmptyName": "Folder name cannot contain only spaces",
+    "InvalidExtension": "Folder name cannot contain an extension"
+  },
+  "NewFolderForm": {
+    "AddFolderSubmit": "Add Folder",
+    "Placeholder": "Name"
   }
 }

translations/locales/es-419/translations.json

@@ -172,6 +172,27 @@
   },
   "IDEView": {
     "SubmitFeedback": "Enviar retroalimentación"
+  },
+  "NewFileModal": {
+  "Title": "Crear Archivo",
+  "CloseButtonARIA": "Cerrar diálogo de crear archivo",
+    "EnterName": "Por favor introduce un nombre",
+    "InvalidType": "Tipo de archivo inválido. Las extensiones válidas son .js, .css, .json, .txt, .csv, .tsv, .frag y .vert."
+  },
+  "NewFileForm": {
+    "AddFileSubmit": "Agregar Archivo",
+    "Placeholder": "Nombre"
+  },
+  "NewFolderModal": {
+  "Title": "Crear Directorio",
+  "CloseButtonARIA": "Cerrar Diálogo de Nuevo Directorio",
+  "EnterName": "Por favor introduce un nombre",
+  "EmptyName": " El nombre del directorio no debe contener solo espacios vacíos",
+  "InvalidExtension": "El nombre del directorio no debe contener una extensión"
+},
+  "NewFolderForm": {
+    "AddFolderSubmit": "Agregar Directorio",
+    "Placeholder": "Nombre"
   }
 }