Merge pull request #3196 from LLK/develop

Update release branch with latest changes.

README.md

@@ -57,10 +57,10 @@ These currently exist in static/js/lib
 ### To Run
 If you would like to create a temporary version of the site on your machine that you can access through your web browser run the command below.  Building (see To Build above) is not necessary for this step and the temporary server can be turned off (see To Stop below).
 
-The intl directory must be built separately with the `make translations` line below in order for the text to appear properly.
+The intl directory must be built separately with the `npm run translate` line below in order for the text to appear properly.
 
 ```bash
-make translations
+npm run translate
 npm start
 ```
 

package-lock.json

@@ -15084,15 +15084,15 @@
       }
     },
     "scratch-gui": {
-      "version": "0.1.0-prerelease.20190725155313",
+      "version": "0.1.0-prerelease.20190731192641",
-      "resolved": "https://registry.npmjs.org/scratch-gui/-/scratch-gui-0.1.0-prerelease.20190725155313.tgz",
+      "resolved": "https://registry.npmjs.org/scratch-gui/-/scratch-gui-0.1.0-prerelease.20190731192641.tgz",
-      "integrity": "sha512-L2qJNu3HGi8KbuPxw/3DSa56eeqR2N67MA6SZ5r+at3UrwSH68dzqp7NDJqmAjm66+dX7IaiammZ0QE6fLbKUQ==",
+      "integrity": "sha512-f5fQKHt1LjJ5jBvtuFu1ULOwggs0g54FARVr1dz4oi98yL64jP6tlowORKoejX5P1sO9Awt1/26d6Gp+411L0A==",
       "dev": true
     },
     "scratch-l10n": {
-      "version": "3.5.20190724182907",
+      "version": "3.5.20190731161310",
-      "resolved": "https://registry.npmjs.org/scratch-l10n/-/scratch-l10n-3.5.20190724182907.tgz",
+      "resolved": "https://registry.npmjs.org/scratch-l10n/-/scratch-l10n-3.5.20190731161310.tgz",
-      "integrity": "sha512-HEYsebVd53+eugt2N8OkWUYhnn/GEtAhH33dwUCIKAkzRJAwMmzcDUf1MyNzpAcGMH8Zr0K5QtyYH95bGfcpZA==",
+      "integrity": "sha512-9McnU3CVt8BdLP1rYmlb6IhJNFYdhcI6AaBs9dEH+C+dBJ2ncPg71nLt3Te4OE2v8L2JyKvVsWSTrffeEHLlfQ==",
       "dev": true,
       "requires": {
         "@babel/cli": "^7.1.2",

package.json

@@ -120,7 +120,7 @@
     "redux": "3.5.2",
     "redux-thunk": "2.0.1",
     "sass-loader": "6.0.6",
-    "scratch-gui": "0.1.0-prerelease.20190725155313",
+    "scratch-gui": "0.1.0-prerelease.20190731192641",
     "scratch-l10n": "latest",
     "selenium-webdriver": "3.6.0",
     "slick-carousel": "1.6.0",

src/components/formik-forms/formik-select.jsx

@@ -24,7 +24,7 @@ const FormikSelect = ({
         </option>
     ));
     return (
-        <div className="select">
+        <div className="select row-with-tooltip">
             <Field
                 className={classNames(
                     className

src/components/forms/validation-message.scss

@@ -17,6 +17,7 @@
     min-height: 1rem;
     overflow: visible;
     color: $type-white;
+    z-index: 1;
 
     &:before {
         display: block;

src/components/join-flow/birthdate-step.jsx

@@ -86,9 +86,9 @@ class BirthDateStep extends React.Component {
                     } = props;
                     return (
                         <JoinFlowStep
-                            description={this.props.intl.formatMessage({id: 'registration.birthDateStepDescription'})}
+                            description={this.props.intl.formatMessage({id: 'registration.private'})}
                             headerImgSrc="/images/hoc/getting-started.jpg"
-                            title={this.props.intl.formatMessage({id: 'general.joinScratch'})}
+                            title={this.props.intl.formatMessage({id: 'registration.birthDateStepTitle'})}
                             waiting={isSubmitting}
                             onSubmit={handleSubmit}
                         >
@@ -110,7 +110,7 @@ class BirthDateStep extends React.Component {
                                     name="birth_month"
                                     options={birthMonthOptions}
                                     validate={this.validateSelect}
-                                    validationClassName="validation-full-width-input"
+                                    validationClassName="validation-birthdate-input"
                                 />
                                 <FormikSelect
                                     className={classNames(
@@ -122,7 +122,7 @@ class BirthDateStep extends React.Component {
                                     name="birth_year"
                                     options={birthYearOptions}
                                     validate={this.validateSelect}
-                                    validationClassName="validation-full-width-input"
+                                    validationClassName="validation-birthdate-input"
                                 />
                             </div>
                         </JoinFlowStep>

src/components/join-flow/email-step.jsx

@@ -0,0 +1,61 @@
+const bindAll = require('lodash.bindall');
+const React = require('react');
+const PropTypes = require('prop-types');
+import {Formik} from 'formik';
+const {injectIntl, intlShape} = require('react-intl');
+
+const JoinFlowStep = require('./join-flow-step.jsx');
+
+require('./join-flow-steps.scss');
+
+class EmailStep extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleValidSubmit',
+            'validateForm'
+        ]);
+    }
+    validateForm () {
+        return {};
+    }
+    handleValidSubmit (formData, formikBag) {
+        formikBag.setSubmitting(false);
+        this.props.onNextStep(formData);
+    }
+    render () {
+        return (
+            <Formik
+                initialValues={{
+                }}
+                validate={this.validateForm}
+                validateOnBlur={false}
+                validateOnChange={false}
+                onSubmit={this.handleValidSubmit}
+            >
+                {props => {
+                    const {
+                        handleSubmit,
+                        isSubmitting
+                    } = props;
+                    return (
+                        <JoinFlowStep
+                            description={this.props.intl.formatMessage({id: 'registration.emailStepDescription'})}
+                            headerImgSrc="/images/hoc/getting-started.jpg"
+                            title={this.props.intl.formatMessage({id: 'registration.emailStepTitle'})}
+                            waiting={isSubmitting}
+                            onSubmit={handleSubmit}
+                        />
+                    );
+                }}
+            </Formik>
+        );
+    }
+}
+
+EmailStep.propTypes = {
+    intl: intlShape,
+    onNextStep: PropTypes.func
+};
+
+module.exports = injectIntl(EmailStep);

src/components/join-flow/join-flow-step.scss

@@ -9,6 +9,8 @@
 .join-flow-description {
     font-size: .875rem;
     font-weight: bold;
+    line-height: 1.37500rem;
+    margin-top: 0.78125rem;
     margin-bottom: 1.875rem;
     text-align: center;
 }

src/components/join-flow/join-flow-steps.scss

@@ -22,7 +22,24 @@
     transform: translate(21.5625rem, 0);
 }
 
-select.join-flow-select {
+.validation-birthdate-input {
+    transform: translate(8.75rem, .25rem);
+    width: 7.25rem;
+}
+
+@media #{$intermediate-and-smaller} {
+    .validation-full-width-input {
+        transform: unset;
+        margin-bottom: .75rem;
+    }
+
+    .validation-birthdate-input {
+        transform: unset;
+        width: 8rem;
+    }
+}
+
+.select .join-flow-select {
     width: 9.125rem;
 }
 

src/components/join-flow/join-flow.jsx

@@ -9,6 +9,8 @@ const intlShape = require('../../lib/intl.jsx').intlShape;
 const Progression = require('../progression/progression.jsx');
 const UsernameStep = require('./username-step.jsx');
 const BirthDateStep = require('./birthdate-step.jsx');
+const EmailStep = require('./email-step.jsx');
+const WelcomeStep = require('./welcome-step.jsx');
 
 /*
 eslint-disable react/prefer-stateless-function, react/no-unused-prop-types, no-useless-constructor
@@ -38,6 +40,11 @@ class JoinFlow extends React.Component {
                 <Progression step={this.state.step}>
                     <UsernameStep onNextStep={this.handleAdvanceStep} />
                     <BirthDateStep onNextStep={this.handleAdvanceStep} />
+                    <EmailStep onNextStep={this.handleAdvanceStep} />
+                    <WelcomeStep
+                        username={this.state.formData.username}
+                        onNextStep={this.handleAdvanceStep}
+                    />
                 </Progression>
             </React.Fragment>
         );

src/components/join-flow/username-step.jsx

@@ -110,7 +110,9 @@ class UsernameStep extends React.Component {
                     } = props;
                     return (
                         <JoinFlowStep
-                            description={this.props.intl.formatMessage({id: 'registration.usernameStepDescription'})}
+                            description={this.props.intl.formatMessage({
+                                id: 'registration.usernameStepDescriptionNonEducator'
+                            })}
                             title={this.props.intl.formatMessage({id: 'general.joinScratch'})}
                             waiting={isSubmitting}
                             onSubmit={handleSubmit}
@@ -133,7 +135,7 @@ class UsernameStep extends React.Component {
                                 />
                                 <div className="join-flow-password-section">
                                     <div className="join-flow-input-title">
-                                        {this.props.intl.formatMessage({id: 'general.password'})}
+                                        {this.props.intl.formatMessage({id: 'registration.choosePasswordStepTitle'})}
                                     </div>
                                     <FormikInput
                                         className={classNames(

src/components/join-flow/welcome-step.jsx

@@ -0,0 +1,67 @@
+const bindAll = require('lodash.bindall');
+const React = require('react');
+const PropTypes = require('prop-types');
+import {Formik} from 'formik';
+const {injectIntl, intlShape} = require('react-intl');
+
+const JoinFlowStep = require('./join-flow-step.jsx');
+
+require('./join-flow-steps.scss');
+
+class WelcomeStep extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleValidSubmit',
+            'validateForm'
+        ]);
+    }
+    validateForm () {
+        return {};
+    }
+    handleValidSubmit (formData, formikBag) {
+        formikBag.setSubmitting(false);
+        this.props.onNextStep(formData);
+    }
+    render () {
+        return (
+            <Formik
+                initialValues={{
+                }}
+                validate={this.validateForm}
+                validateOnBlur={false}
+                validateOnChange={false}
+                onSubmit={this.handleValidSubmit}
+            >
+                {props => {
+                    const {
+                        handleSubmit,
+                        isSubmitting
+                    } = props;
+                    return (
+                        <JoinFlowStep
+                            description={this.props.intl.formatMessage({
+                                id: 'registration.welcomeStepDescriptionNonEducator'
+                            })}
+                            headerImgSrc="/images/hoc/getting-started.jpg"
+                            title={`${this.props.intl.formatMessage(
+                                {id: 'registration.welcomeStepTitleNonEducator'},
+                                {username: this.props.username}
+                            )}`}
+                            waiting={isSubmitting}
+                            onSubmit={handleSubmit}
+                        />
+                    );
+                }}
+            </Formik>
+        );
+    }
+}
+
+WelcomeStep.propTypes = {
+    intl: intlShape,
+    onNextStep: PropTypes.func,
+    username: PropTypes.string
+};
+
+module.exports = injectIntl(WelcomeStep);

src/l10n.json

@@ -40,6 +40,7 @@
     "general.learnMore": "Learn More",
     "general.male": "Male",
     "general.messages": "Messages",
+    "general.month": "Month",
     "general.monthJanuary": "January",
     "general.monthFebruary": "February",
     "general.monthMarch": "March",
@@ -110,6 +111,7 @@
     "general.unsupportedBrowser": "This browser is not supported",
     "general.unsupportedBrowserDescription": "We're very sorry, but Scratch 3.0 does not support Internet Explorer, Vivaldi, Opera or Silk. We recommend trying a newer browser such as Google Chrome, Mozilla Firefox, or Microsoft Edge.",
     "general.3faq": "To learn more, go to the {faqLink}.",
+    "general.year": "Year",
 
     "footer.discuss": "Discussion Forums",
     "footer.scratchFamily": "Scratch Family",
@@ -137,6 +139,7 @@
     "parents.FaqResourcesQ": "What resources are available for learning Scratch?",
     "parents.introDescription": "Scratch is a programming language and an online community where children can program and share interactive media such as stories, games, and animation with people from all over the world. As children create with Scratch, they learn to think creatively, work collaboratively, and reason systematically. Scratch is designed and maintained by the Lifelong Kindergarten group at the MIT Media Lab.",
 
+    "registration.birthDateStepTitle": "When were you born?",
     "registration.checkOutResources": "Get Started with Resources",
     "registration.checkOutResourcesDescription": "Explore materials for educators and facilitators written by the Scratch Team, including <a href='/educators#resources'>tips, tutorials, and guides</a>.",
     "registration.choosePasswordStepDescription": "Type in a new password for your account. You will use this password the next time you log into Scratch.",
@@ -148,7 +151,9 @@
     "registration.classroomInviteNewStudentStepDescription": "Your teacher has invited you to join a class:",
     "registration.confirmYourEmail": "Confirm Your Email",
     "registration.confirmYourEmailDescription": "If you haven't already, please click the link in the confirmation email sent to:",
-    "registration.createUsername": "Create a Username",
+    "registration.createUsername": "Create a username",
+    "registration.emailStepTitle": "What's your email?",
+    "registration.emailStepDescription": "We need this to finish creating your account. Scratch will always keep this information private.",
     "registration.goToClass": "Go to Class",
     "registration.invitedBy": "invited by",
     "registration.lastStepTitle": "Thank you for requesting a Scratch Teacher Account",
@@ -161,10 +166,12 @@
     "registration.optIn": "Send me updates on using Scratch in educational settings",
     "registration.personalStepTitle": "Personal Information",
     "registration.personalStepDescription": "Your individual responses will not be displayed publicly, and will be kept confidential and secure",
+    "registration.private": "Scratch will always keep this information private.",
     "registration.selectCountry": "select country",
     "registration.studentPersonalStepDescription": "This information will not appear on the Scratch website.",
     "registration.showPassword": "Show password",
     "registration.usernameStepDescription": "Fill in the following forms to request an account. The approval process may take up to one day.",
+    "registration.usernameStepDescriptionNonEducator": "Create projects, share ideas, make friends. It’s free!",
     "registration.usernameStepRealName": "Please do not use any portion of your real name in your username.",
     "registration.studentUsernameStepDescription": "You can make games, animations, and stories using Scratch. Setting up an account is easy and it's free. Fill in the form below to get started.",
     "registration.studentUsernameStepHelpText": "Already have a Scratch account?",
@@ -185,8 +192,10 @@
     "registration.waitForApproval": "Wait for Approval",
     "registration.waitForApprovalDescription": "You can log into your Scratch Account now, but the features specific to Teachers are not yet available. Your information is being reviewed. Please be patient, the approval process can take up to one day. You will receive an email indicating your account has been upgraded once your account has been approved.",
     "registration.welcomeStepDescription": "You have successfully set up a Scratch account! You are now a member of the class:",
+    "registration.welcomeStepDescriptionNonEducator": "You’re now logged in! You can start exploring and creating projects.",
     "registration.welcomeStepPrompt": "To get started, click on the button below.",
     "registration.welcomeStepTitle": "Hurray! Welcome to Scratch!",
+    "registration.welcomeStepTitleNonEducator": "Welcome to Scratch, {username}!",
 
     "thumbnail.by": "by",
     "report.error": "Something went wrong when trying to send your message. Please try again.",

src/views/preview/comment/comment.jsx

@@ -196,11 +196,12 @@ class Comment extends React.Component {
                           */}
 
                         <span className="comment-content">
-                            {commentText.map(fragment => {
+                            {commentText.map((fragment, index) => {
                                 if (typeof fragment === 'string') {
                                     return (
                                         <EmojiText
                                             as="span"
+                                            key={`comments-${id}-fragment-${index}`}
                                             text={fragment}
                                         />
                                     );