Merge branch 'develop' into feature-2/interactive-console

Author: catarak

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);

client/components/Dropdown.jsx

@@ -36,9 +36,7 @@ const DropdownWrapper = styled.ul`
     background-color: ${prop('Button.hover.background')};
     color: ${prop('Button.hover.foreground')};
 
-    & button, & a {
-      color: ${prop('Button.hover.foreground')};
-    }
+    * { color: ${prop('Button.hover.foreground')}; }
   }
 
   li {
@@ -48,12 +46,21 @@ const DropdownWrapper = styled.ul`
     align-items: center;
 
     & button,
+    & button span,
     & a {
+      padding: ${remSize(8)} ${remSize(16)};
+    }
+
+    * {
+      text-align: left;
+      justify-content: left;
+
       color: ${prop('primaryTextColor')};
       width: 100%;
-      text-align: left;
-      padding: ${remSize(8)} ${remSize(16)};
+      justify-content: flex-start;
     }
+
+    & button span { padding: 0px }
   }
 `;
 
@@ -63,24 +70,29 @@ const DropdownWrapper = styled.ul`
 const Dropdown = ({ items, align }) => (
   <DropdownWrapper align={align} >
     {/* className="nav__items-left" */}
-    {items && items.map(({ title, icon, href }) => (
+    {items && items.map(({
+      title, icon, href, action
+    }) => (
       <li key={`nav-${title && title.toLowerCase()}`}>
-        <Link to={href}>
-          {/* {MaybeIcon(icon, `Navigate to ${title}`)} */}
-          {title}
-        </Link>
+        {/* {MaybeIcon(icon, `Navigate to ${title}`)} */}
+        {href
+          ? <IconButton to={href}>{title}</IconButton>
+          : <IconButton onClick={() => action()}>{title}</IconButton>}
+
       </li>
     ))
     }
   </DropdownWrapper>
 );
 
+
 Dropdown.propTypes = {
   align: PropTypes.oneOf(['left', 'right']),
   items: PropTypes.arrayOf(PropTypes.shape({
     action: PropTypes.func,
     icon: PropTypes.func,
-    href: PropTypes.string
+    href: PropTypes.string,
+    title: PropTypes.string
   })),
 };
 

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 }) => (
   <nav className="nav preview-nav">
     <div className="nav__items-left">
       <div className="nav__item-logo">
-        <LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
+        <LogoIcon role="img" aria-label={t('Common.p5logoARIA')} focusable="false" className="svg__logo" />
       </div>
       <Link className="nav__item" to={`/${owner.username}/sketches/${project.id}`}>{project.name}</Link>
-      <p className="toolbar__project-owner">by</p>
+      <p className="toolbar__project-owner">{t('PreviewNav.ByUser')}</p>
       <Link className="nav__item" to={`/${owner.username}/sketches/`}>{owner.username}</Link>
     </div>
     <div className="nav__items-right">
-      <Link to={`/${owner.username}/sketches/${project.id}`} aria-label="Edit Sketch" >
+      <Link to={`/${owner.username}/sketches/${project.id}`} aria-label={t('PreviewNav.EditSketchARIA')} >
         <CodeIcon className="preview-nav__editor-svg" focusable="false" aria-hidden="true" />
       </Link>
     </div>
@@ -31,6 +32,7 @@ PreviewNav.propTypes = {
     name: PropTypes.string.isRequired,
     id: PropTypes.string.isRequired,
   }).isRequired,
+  t: PropTypes.func.isRequired
 };
 
-export default PreviewNav;
+export default withTranslation()(PreviewNav);

client/components/mobile/IconButton.jsx

@@ -17,15 +17,19 @@ const IconButton = (props) => {
   const Icon = icon;
 
   return (<ButtonWrapper
-    iconBefore={<Icon />}
+    iconBefore={icon && <Icon />}
     kind={Button.kinds.inline}
     focusable="false"
     {...otherProps}
   />);
 };
 
 IconButton.propTypes = {
-  icon: PropTypes.func.isRequired
+  icon: PropTypes.func
+};
+
+IconButton.defaultProps = {
+  icon: null
 };
 
 export default IconButton;

client/constants.js

@@ -62,6 +62,7 @@ export const COLLAPSE_CONSOLE = 'COLLAPSE_CONSOLE';
 
 export const UPDATE_LINT_MESSAGE = 'UPDATE_LINT_MESSAGE';
 export const CLEAR_LINT_MESSAGE = 'CLEAR_LINT_MESSAGE';
+export const TOGGLE_FORCE_DESKTOP = 'TOGGLE_FORCE_DESKTOP';
 
 export const UPDATE_FILE_NAME = 'UPDATE_FILE_NAME';
 export const DELETE_FILE = 'DELETE_FILE';

client/i18n-test.js

@@ -0,0 +1,26 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import translations from '../translations/locales/en-US/translations.json';
+
+i18n
+  .use(initReactI18next)
+  .init({
+    lng: 'en-US',
+    fallbackLng: 'en-US',
+
+    // have a common namespace used around the full app
+    ns: ['translations'],
+    defaultNS: 'translations',
+
+    debug: false,
+
+    interpolation: {
+      escapeValue: false, // not needed for react!!
+    },
+
+    resources: { 'en-US': { translations } },
+  });
+
+
+export default i18n;

client/jest.setup.js

@@ -3,21 +3,3 @@ import '@babel/polyfill';
 // See: https://github.com/testing-library/jest-dom
 // eslint-disable-next-line import/no-extraneous-dependencies
 import '@testing-library/jest-dom';
-
-import lodash from 'lodash';
-
-// For testing, we use en-US and provide a mock implementation
-// of t() that finds the correct translation
-import translations from '../translations/locales/en-US/translations.json';
-
-// This function name needs to be prefixed with "mock" so that Jest doesn't
-// complain that it's out-of-scope in the mock below
-const mockTranslate = key => lodash.get(translations, key);
-
-jest.mock('react-i18next', () => ({
-  // this mock makes sure any components using the translate HoC receive the t function as a prop
-  withTranslation: () => (Component) => {
-    Component.defaultProps = { ...Component.defaultProps, t: mockTranslate };
-    return Component;
-  },
-}));

client/modules/App/components/Overlay.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { browserHistory } from 'react-router';
+import { withTranslation } from 'react-i18next';
 
 import ExitIcon from '../../../images/exit.svg';
 
@@ -80,7 +81,7 @@ class Overlay extends React.Component {
               <h2 className="overlay__title">{title}</h2>
               <div className="overlay__actions">
                 {actions}
-                <button className="overlay__close-button" onClick={this.close} aria-label={`Close ${title} overlay`} >
+                <button className="overlay__close-button" onClick={this.close} aria-label={this.props.t('Overlay.AriaLabel', { title })}>
                   <ExitIcon focusable="false" aria-hidden="true" />
                 </button>
               </div>
@@ -101,6 +102,7 @@ Overlay.propTypes = {
   ariaLabel: PropTypes.string,
   previousPath: PropTypes.string,
   isFixedHeight: PropTypes.bool,
+  t: PropTypes.func.isRequired
 };
 
 Overlay.defaultProps = {
@@ -113,4 +115,4 @@ Overlay.defaultProps = {
   isFixedHeight: false,
 };
 
-export default Overlay;
+export default withTranslation()(Overlay);

client/modules/IDE/actions/editorAccessibility.js

@@ -14,3 +14,9 @@ export function clearLintMessage() {
     type: ActionTypes.CLEAR_LINT_MESSAGE
   };
 }
+
+export function toggleForceDesktop() {
+  return {
+    type: ActionTypes.TOGGLE_FORCE_DESKTOP
+  };
+}

client/modules/IDE/components/AddToCollectionList.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import { withTranslation } from 'react-i18next';
 
 import * as ProjectActions from '../actions/project';
 import * as ProjectsActions from '../actions/projects';
@@ -42,9 +43,9 @@ class CollectionList extends React.Component {
 
   getTitle() {
     if (this.props.username === this.props.user.username) {
-      return 'p5.js Web Editor | My collections';
+      return this.props.t('AddToCollectionList.Title');
     }
-    return `p5.js Web Editor | ${this.props.username}'s collections`;
+    return this.props.t('AddToCollectionList.AnothersTitle', { anotheruser: this.props.username });
   }
 
   handleCollectionAdd = (collection) => {
@@ -74,10 +75,11 @@ class CollectionList extends React.Component {
           items={collectionWithSketchStatus}
           onAdd={this.handleCollectionAdd}
           onRemove={this.handleCollectionRemove}
+          t={this.props.t}
         />
       );
     } else {
-      content = 'No collections';
+      content = this.props.t('AddToCollectionList.Empty');
     }
 
     return (
@@ -135,7 +137,8 @@ CollectionList.propTypes = {
     owner: PropTypes.shape({
       id: PropTypes.string
     })
-  })
+  }),
+  t: PropTypes.func.isRequired
 };
 
 CollectionList.defaultProps = {
@@ -164,4 +167,4 @@ function mapDispatchToProps(dispatch) {
   );
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(CollectionList);
+export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(CollectionList));