diff --git a/README.md b/README.md index 6b69db03c..a6d38d01a 100644 --- a/README.md +++ b/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 ``` diff --git a/package-lock.json b/package-lock.json index efb2e5446..5d4c6b08e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15084,15 +15084,15 @@ } }, "scratch-gui": { - "version": "0.1.0-prerelease.20190725155313", - "resolved": "https://registry.npmjs.org/scratch-gui/-/scratch-gui-0.1.0-prerelease.20190725155313.tgz", - "integrity": "sha512-L2qJNu3HGi8KbuPxw/3DSa56eeqR2N67MA6SZ5r+at3UrwSH68dzqp7NDJqmAjm66+dX7IaiammZ0QE6fLbKUQ==", + "version": "0.1.0-prerelease.20190731192641", + "resolved": "https://registry.npmjs.org/scratch-gui/-/scratch-gui-0.1.0-prerelease.20190731192641.tgz", + "integrity": "sha512-f5fQKHt1LjJ5jBvtuFu1ULOwggs0g54FARVr1dz4oi98yL64jP6tlowORKoejX5P1sO9Awt1/26d6Gp+411L0A==", "dev": true }, "scratch-l10n": { - "version": "3.5.20190724182907", - "resolved": "https://registry.npmjs.org/scratch-l10n/-/scratch-l10n-3.5.20190724182907.tgz", - "integrity": "sha512-HEYsebVd53+eugt2N8OkWUYhnn/GEtAhH33dwUCIKAkzRJAwMmzcDUf1MyNzpAcGMH8Zr0K5QtyYH95bGfcpZA==", + "version": "3.5.20190731161310", + "resolved": "https://registry.npmjs.org/scratch-l10n/-/scratch-l10n-3.5.20190731161310.tgz", + "integrity": "sha512-9McnU3CVt8BdLP1rYmlb6IhJNFYdhcI6AaBs9dEH+C+dBJ2ncPg71nLt3Te4OE2v8L2JyKvVsWSTrffeEHLlfQ==", "dev": true, "requires": { "@babel/cli": "^7.1.2", diff --git a/package.json b/package.json index 6cc2a5d30..f4231a313 100644 --- a/package.json +++ b/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", diff --git a/src/components/formik-forms/formik-select.jsx b/src/components/formik-forms/formik-select.jsx index 5ec1bcdf5..defff80ef 100644 --- a/src/components/formik-forms/formik-select.jsx +++ b/src/components/formik-forms/formik-select.jsx @@ -24,7 +24,7 @@ const FormikSelect = ({ )); return ( -
+
@@ -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" />
diff --git a/src/components/join-flow/email-step.jsx b/src/components/join-flow/email-step.jsx new file mode 100644 index 000000000..fcfe613a3 --- /dev/null +++ b/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 ( + + {props => { + const { + handleSubmit, + isSubmitting + } = props; + return ( + + ); + }} + + ); + } +} + +EmailStep.propTypes = { + intl: intlShape, + onNextStep: PropTypes.func +}; + +module.exports = injectIntl(EmailStep); diff --git a/src/components/join-flow/join-flow-step.scss b/src/components/join-flow/join-flow-step.scss index 499646956..3ddb67718 100644 --- a/src/components/join-flow/join-flow-step.scss +++ b/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; } diff --git a/src/components/join-flow/join-flow-steps.scss b/src/components/join-flow/join-flow-steps.scss index a56ff467f..64bfa562d 100644 --- a/src/components/join-flow/join-flow-steps.scss +++ b/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; } diff --git a/src/components/join-flow/join-flow.jsx b/src/components/join-flow/join-flow.jsx index efa663abd..8fba007f1 100644 --- a/src/components/join-flow/join-flow.jsx +++ b/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 { + + ); diff --git a/src/components/join-flow/username-step.jsx b/src/components/join-flow/username-step.jsx index 2d0a8bb49..2feb38b59 100644 --- a/src/components/join-flow/username-step.jsx +++ b/src/components/join-flow/username-step.jsx @@ -110,7 +110,9 @@ class UsernameStep extends React.Component { } = props; return (
- {this.props.intl.formatMessage({id: 'general.password'})} + {this.props.intl.formatMessage({id: 'registration.choosePasswordStepTitle'})}
+ {props => { + const { + handleSubmit, + isSubmitting + } = props; + return ( + + ); + }} + + ); + } +} + +WelcomeStep.propTypes = { + intl: intlShape, + onNextStep: PropTypes.func, + username: PropTypes.string +}; + +module.exports = injectIntl(WelcomeStep); diff --git a/src/l10n.json b/src/l10n.json index c9920e4d3..7b5c693e5 100644 --- a/src/l10n.json +++ b/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 tips, tutorials, and guides.", "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.", diff --git a/src/views/preview/comment/comment.jsx b/src/views/preview/comment/comment.jsx index cbdeb7642..ef23195ea 100644 --- a/src/views/preview/comment/comment.jsx +++ b/src/views/preview/comment/comment.jsx @@ -196,11 +196,12 @@ class Comment extends React.Component { */} - {commentText.map(fragment => { + {commentText.map((fragment, index) => { if (typeof fragment === 'string') { return ( );