From c840734122c3256a3b2896b331367801f5cb30a2 Mon Sep 17 00:00:00 2001 From: ov Date: Tue, 25 Aug 2020 08:20:16 +0100 Subject: [PATCH 1/6] Spanish translation: Editor- Editor Accessibility- Timer (#1567) * Editor translation for ARIA labels * Timer translation for ARIA labels * Remove unused i18next import * Editor KeyUp translation --- client/modules/IDE/components/Editor.jsx | 14 +++++++------ .../IDE/components/EditorAccessibility.jsx | 8 +++++--- client/modules/IDE/components/Timer.jsx | 20 +++++++++++-------- translations/locales/en-US/translations.json | 17 ++++++++++++++++ translations/locales/es-419/translations.json | 17 ++++++++++++++++ 5 files changed, 59 insertions(+), 17 deletions(-) diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx index e07dd001..f8269ed0 100644 --- a/client/modules/IDE/components/Editor.jsx +++ b/client/modules/IDE/components/Editor.jsx @@ -2,6 +2,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import CodeMirror from 'codemirror'; import beautifyJS from 'js-beautify'; +import { withTranslation } from 'react-i18next'; import 'codemirror/mode/css/css'; import 'codemirror/addon/selection/active-line'; import 'codemirror/addon/lint/lint'; @@ -136,7 +137,7 @@ class Editor extends React.Component { }, 1000)); this._cm.on('keyup', () => { - const temp = `line ${parseInt((this._cm.getCursor().line) + 1, 10)}`; + const temp = this.props.t('Editor.KeyUpLineNumber', { lineNumber: parseInt((this._cm.getCursor().line) + 1, 10) }); document.getElementById('current-line').innerHTML = temp; }); @@ -317,14 +318,14 @@ class Editor extends React.Component {
@@ -129,7 +129,7 @@ class Toolbar extends React.Component { } }} disabled={!canEditProjectName} - aria-label="Edit sketch name" + aria-label={this.props.t('Toolbar.EditSketchARIA')} > {this.props.project.name} { @@ -145,7 +145,7 @@ class Toolbar extends React.Component { type="text" maxLength="128" className="toolbar__project-name-input" - aria-label="New sketch name" + aria-label={this.props.t('Toolbar.NewSketchNameARIA')} value={this.state.projectNameInputValue} onChange={this.handleProjectNameChange} ref={(element) => { this.projectNameInput = element; }} @@ -165,7 +165,7 @@ class Toolbar extends React.Component { @@ -200,6 +200,7 @@ Toolbar.propTypes = { saveProject: PropTypes.func.isRequired, currentUser: PropTypes.string, t: PropTypes.func.isRequired + }; Toolbar.defaultProps = { @@ -225,6 +226,5 @@ const mapDispatchToProps = { ...projectActions, }; -export const ToolbarComponent = Toolbar; -// export default connect(mapStateToProps, mapDispatchToProps)(Toolbar); -export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(Toolbar)); +export const ToolbarComponent = withTranslation()(Toolbar); +export default connect(mapStateToProps, mapDispatchToProps)(ToolbarComponent); diff --git a/client/modules/IDE/components/Toolbar.test.jsx b/client/modules/IDE/components/Toolbar.test.jsx index cd435302..79b0f9ee 100644 --- a/client/modules/IDE/components/Toolbar.test.jsx +++ b/client/modules/IDE/components/Toolbar.test.jsx @@ -1,8 +1,7 @@ import React from 'react'; -import { fireEvent, render, screen, waitFor } from '@testing-library/react'; import lodash from 'lodash'; - +import { fireEvent, render, screen, waitFor } from '../../../test-utils'; import { ToolbarComponent } from './Toolbar'; const renderComponent = (extraProps = {}) => { diff --git a/client/test-utils.js b/client/test-utils.js new file mode 100644 index 00000000..b8e9e382 --- /dev/null +++ b/client/test-utils.js @@ -0,0 +1,40 @@ +/** + * This file re-exports @testing-library but ensures that + * any calls to render have translations available. + * + * This means tested components will be able to call + * `t()` and have the translations of the default + * language + * + * See: https://react.i18next.com/misc/testing#testing-without-stubbing + */ + +// eslint-disable-next-line import/no-extraneous-dependencies +import { render } from '@testing-library/react'; +import React from 'react'; +import PropTypes from 'prop-types'; + + +import { I18nextProvider } from 'react-i18next'; +import i18n from './i18n-test'; + +// re-export everything +// eslint-disable-next-line import/no-extraneous-dependencies +export * from '@testing-library/react'; + +const Providers = ({ children }) => ( + // eslint-disable-next-line react/jsx-filename-extension + + {children} + +); + +Providers.propTypes = { + children: PropTypes.element.isRequired, +}; + +const customRender = (ui, options) => + render(ui, { wrapper: Providers, ...options }); + +// override render method +export { customRender as render }; From f918669116d49772d6acc7fac528f252ef20e944 Mon Sep 17 00:00:00 2001 From: ov Date: Wed, 26 Aug 2020 16:28:53 +0100 Subject: [PATCH 4/6] Spanish Translation: Copyable/Editable/AddRemove/SearchBar/PreviewNav (#1569) * AddRemoveButton Translation * CopyableInput EditableInput translations.json * Translation in PreviewNav.jsx * Translation in Feedback.jsx * Translation in AssetList.jsx * Translation in SearchBarComponent * Translations.json merged * Translations.json AddRemoved, feedback and Preview Nav --- client/components/AddRemoveButton.jsx | 9 +++-- client/components/PreviewNav.jsx | 12 +++--- client/modules/IDE/components/AssetList.jsx | 27 +++++++------ .../modules/IDE/components/CopyableInput.jsx | 10 +++-- .../modules/IDE/components/EditableInput.jsx | 11 +++-- client/modules/IDE/components/Feedback.jsx | 5 ++- .../IDE/components/Searchbar/Collection.jsx | 4 +- .../IDE/components/Searchbar/Searchbar.jsx | 11 +++-- .../IDE/components/Searchbar/Sketch.jsx | 2 + translations/locales/en-US/translations.json | 40 +++++++++++++++++++ translations/locales/es-419/translations.json | 40 +++++++++++++++++++ 11 files changed, 136 insertions(+), 35 deletions(-) diff --git a/client/components/AddRemoveButton.jsx b/client/components/AddRemoveButton.jsx index 7350c177..ea600cf9 100644 --- a/client/components/AddRemoveButton.jsx +++ b/client/components/AddRemoveButton.jsx @@ -1,11 +1,13 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { withTranslation } from 'react-i18next'; + import AddIcon from '../images/plus.svg'; import RemoveIcon from '../images/minus.svg'; -const AddRemoveButton = ({ type, onClick }) => { - const alt = type === 'add' ? 'Add to collection' : 'Remove from collection'; +const AddRemoveButton = ({ type, onClick, t }) => { + const alt = type === 'add' ? t('AddRemoveButton.AltAddARIA') : t('AddRemoveButton.AltRemoveARIA'); const Icon = type === 'add' ? AddIcon : RemoveIcon; return ( @@ -22,6 +24,7 @@ const AddRemoveButton = ({ type, onClick }) => { AddRemoveButton.propTypes = { type: PropTypes.oneOf(['add', 'remove']).isRequired, onClick: PropTypes.func.isRequired, + t: PropTypes.func.isRequired }; -export default AddRemoveButton; +export default withTranslation()(AddRemoveButton); diff --git a/client/components/PreviewNav.jsx b/client/components/PreviewNav.jsx index 6a983e19..8c430050 100644 --- a/client/components/PreviewNav.jsx +++ b/client/components/PreviewNav.jsx @@ -1,22 +1,23 @@ import PropTypes from 'prop-types'; import React from 'react'; import { Link } from 'react-router'; +import { withTranslation } from 'react-i18next'; import LogoIcon from '../images/p5js-logo-small.svg'; import CodeIcon from '../images/code.svg'; -const PreviewNav = ({ owner, project }) => ( +const PreviewNav = ({ owner, project, t }) => (