+
(
);
JoinFlowStep.propTypes = {
children: PropTypes.node,
- className: PropTypes.string,
description: PropTypes.string,
+ descriptionClassName: PropTypes.string,
footerContent: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
headerImgSrc: PropTypes.string,
infoMessage: PropTypes.string,
- innerContentClassName: PropTypes.string,
+ innerClassName: PropTypes.string,
nextButton: PropTypes.node,
onSubmit: PropTypes.func,
title: PropTypes.string,
diff --git a/src/components/join-flow/join-flow-step.scss b/src/components/join-flow/join-flow-step.scss
index f16bcc51c..1b13cbec6 100644
--- a/src/components/join-flow/join-flow-step.scss
+++ b/src/components/join-flow/join-flow-step.scss
@@ -1,6 +1,24 @@
@import "../../colors";
@import "../../frameless";
+.join-flow-outer-content {
+ /* hopefully this lets text expand the height of the modal, if need be */
+ min-height: 32.5rem;
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+ overflow-wrap: break-word;
+}
+
+.join-flow-inner-content {
+ box-shadow: none;
+ width: calc(100% - 5.875rem);
+ /* must use padding for top, rather than margin, because margins will collapse */
+ margin: 0 auto;
+ padding: 2.3125rem 0 2.5rem;
+ font-size: .875rem;
+}
+
.join-flow-title {
color: $type-gray;
font-size: 1.875rem;
@@ -15,25 +33,21 @@
text-align: center;
}
-.join-flow-inner-content {
- box-shadow: none;
- width: calc(100% - 5.875rem);
- /* must use padding for top, rather than margin, because margins will collapse */
- margin: 0 auto;
- padding: 2.3125rem 0 2.5rem;
- font-size: .875rem;
-}
-
/* overflow will only work if this class is set on parent of img, not img itself */
-.join-flow-header-image {
+.join-flow-header-image-wrapper {
width: 100%;
- height: 7.5rem;
+ min-height: 7.5rem;
+ max-height: 8.75rem;
overflow: hidden;
margin: 0;
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
+.join-flow-header-image {
+ width: 27.5rem;
+}
+
.join-flow-footer-message {
width: 100%;
padding: 1.125rem 1.5rem 1.125rem;
diff --git a/src/components/join-flow/join-flow-steps.scss b/src/components/join-flow/join-flow-steps.scss
index ce124b89e..a8d9550ea 100644
--- a/src/components/join-flow/join-flow-steps.scss
+++ b/src/components/join-flow/join-flow-steps.scss
@@ -13,6 +13,10 @@
}
}
+.join-flow-input-password {
+ font-size: 1.5rem;
+}
+
.join-flow-password-confirm {
margin-bottom: .6875rem;
}
@@ -38,8 +42,13 @@
transform: translate(21.5625rem, 0);
}
-.validation-birthdate-input {
- transform: translate(8.75rem, .25rem);
+.validation-birthdate-month {
+ transform: translate(-9.25rem, 0);
+ width: 7.25rem;
+}
+
+.validation-birthdate-year {
+ transform: translate(8.75rem, 0);
width: 7.25rem;
}
@@ -55,9 +64,22 @@
}
}
+.select .join-flow-select {
+ height: 3.5rem;
+ background-color: white;
+ border-color: $box-shadow-light-gray;
+ font-size: 1rem;
+ font-weight: 500;
+ padding-right: 3.25rem;
+}
+
.select .join-flow-select-month {
- width: 9.125rem;
margin-right: .5rem;
+ width: 9.125rem;
+}
+
+.select .join-flow-select-year {
+ width: 9.125rem;
}
.select .join-flow-select-country {
@@ -74,24 +96,68 @@
margin: 0 auto;
}
-.join-flow-gender-step {
- height: 27.375rem;
+.join-flow-inner-username-step {
+ padding-top: 2.75rem;
+}
+
+.join-flow-inner-birthdate-step {
+ padding-top: 1rem;
+ padding-bottom: 2.25rem;
+}
+
+.join-flow-inner-gender-step {
+ /* need height so that flex will adjust children proportionately */
+ height: 27.25rem;
+ padding-top: 2.625rem;
+ padding-bottom: 1rem;
+}
+
+.join-flow-inner-country-step {
+ padding-top: 1rem;
+ padding-bottom: 2rem;
+}
+
+.join-flow-inner-email-step {
padding-top: 3rem;
}
+.join-flow-inner-welcome-step {
+ padding-top: 3rem;
+}
+
+.join-flow-birthdate-description {
+ margin-top: 1.25rem;
+ margin-right: -.5rem;
+ margin-bottom: 2rem;
+ margin-left: -.5rem;
+}
+
+.join-flow-gender-description {
+ margin-top: .625rem;
+ margin-bottom: 1.25rem;
+}
+
+.join-flow-country-description {
+ margin-top: 1rem;
+}
+
.gender-radio-row {
transition: all .125s ease;
width: 20.875rem;
height: 2.85rem;
background-color: $ui-gray;
border-radius: .5rem;
- margin-bottom: 0.375rem;
+ margin: 0 auto 0.375rem;
padding-left: 0.8125rem;
display: flex;
align-items: center;
}
-.gender-radio-row-selected {
+.gender-radio-row:hover {
+ background-color: $ui-blue-10percent;
+}
+
+.gender-radio-row-selected, .gender-radio-row-selected:hover {
transition: all .125s ease;
background-color: $ui-blue-25percent;
}
@@ -106,6 +172,11 @@
padding-top: 2.9rem;
}
+.join-flow-email-checkbox-row {
+ font-size: .75rem;
+ margin: .25rem .125rem;
+}
+
a.join-flow-link:link, a.join-flow-link:visited, a.join-flow-link:active {
text-decoration: underline;
}
diff --git a/src/components/join-flow/username-step.jsx b/src/components/join-flow/username-step.jsx
index 33092f57c..a1783a958 100644
--- a/src/components/join-flow/username-step.jsx
+++ b/src/components/join-flow/username-step.jsx
@@ -21,16 +21,34 @@ class UsernameStep extends React.Component {
super(props);
bindAll(this, [
'handleChangeShowPassword',
+ 'handleFocused',
+ 'handleSetUsernameRef',
'handleValidSubmit',
'validatePasswordIfPresent',
'validatePasswordConfirmIfPresent',
'validateUsernameIfPresent',
'validateForm'
]);
+ this.state = {
+ focused: null,
+ showPassword: false
+ };
+ }
+ componentDidMount () {
+ // automatically start with focus on username field
+ if (this.usernameInput) this.usernameInput.focus();
}
handleChangeShowPassword () {
this.setState({showPassword: !this.state.showPassword});
}
+ // track the currently focused input field, to determine whether each field should
+ // display a tooltip. (We only display it if a field is focused and has never been touched.)
+ handleFocused (fieldName) {
+ this.setState({focused: fieldName});
+ }
+ handleSetUsernameRef (usernameInputRef) {
+ this.usernameInput = usernameInputRef;
+ }
// we allow username to be empty on blur, since you might not have typed anything yet
validateUsernameIfPresent (username) {
if (!username) return null; // skip validation if username is blank; null indicates valid
@@ -109,7 +127,9 @@ class UsernameStep extends React.Component {
handleSubmit,
isSubmitting,
setFieldError,
+ setFieldTouched,
setFieldValue,
+ touched,
validateField,
values
} = props;
@@ -118,6 +138,7 @@ class UsernameStep extends React.Component {
description={this.props.intl.formatMessage({
id: 'registration.usernameStepDescriptionNonEducator'
})}
+ innerClassName="join-flow-inner-username-step"
title={this.props.intl.formatMessage({id: 'general.joinScratch'})}
waiting={isSubmitting}
onSubmit={handleSubmit}
@@ -133,15 +154,21 @@ class UsernameStep extends React.Component {
error={errors.username}
id="username"
name="username"
+ placeholder={this.props.intl.formatMessage({id: 'general.username'})}
+ toolTip={this.state.focused === 'username' && !touched.username &&
+ this.props.intl.formatMessage({id: 'registration.usernameAdviceShort'})}
validate={this.validateUsernameIfPresent}
validationClassName="validation-full-width-input"
/* eslint-disable react/jsx-no-bind */
onBlur={() => validateField('username')}
onChange={e => {
setFieldValue('username', e.target.value);
+ setFieldTouched('username');
setFieldError('username', null);
}}
+ onFocus={() => this.handleFocused('username')}
/* eslint-enable react/jsx-no-bind */
+ onSetRef={this.handleSetUsernameRef}
/>
0}
)}
error={errors.password}
id="password"
name="password"
+ placeholder={this.props.intl.formatMessage({id: 'general.password'})}
+ toolTip={this.state.focused === 'password' && !touched.password &&
+ this.props.intl.formatMessage({id: 'registration.passwordAdviceShort'})}
type={values.showPassword ? 'text' : 'password'}
/* eslint-disable react/jsx-no-bind */
validate={password => this.validatePasswordIfPresent(password, values.username)}
@@ -161,19 +193,34 @@ class UsernameStep extends React.Component {
onBlur={() => validateField('password')}
onChange={e => {
setFieldValue('password', e.target.value);
+ setFieldTouched('password');
setFieldError('password', null);
}}
+ onFocus={() => this.handleFocused('password')}
/* eslint-enable react/jsx-no-bind */
/>
0,
+ 'fail': errors.passwordConfirm
+ }
)}
error={errors.passwordConfirm}
id="passwordConfirm"
name="passwordConfirm"
+ placeholder={this.props.intl.formatMessage({
+ id: 'registration.confirmPasswordInstruction'
+ })}
+ toolTip={
+ this.state.focused === 'passwordConfirm' && !touched.passwordConfirm &&
+ this.props.intl.formatMessage({
+ id: 'registration.confirmPasswordInstruction'
+ })
+ }
type={values.showPassword ? 'text' : 'password'}
/* eslint-disable react/jsx-no-bind */
validate={() =>
@@ -181,13 +228,13 @@ class UsernameStep extends React.Component {
values.passwordConfirm)
}
validationClassName="validation-full-width-input"
- onBlur={() =>
- validateField('passwordConfirm')
- }
+ onBlur={() => validateField('passwordConfirm')}
onChange={e => {
setFieldValue('passwordConfirm', e.target.value);
+ setFieldTouched('passwordConfirm');
setFieldError('passwordConfirm', null);
}}
+ onFocus={() => this.handleFocused('passwordConfirm')}
/* eslint-enable react/jsx-no-bind */
/>
@@ -76,7 +76,7 @@ const TTTModal = props => (
rel="noopener noreferrer"
target="_blank"
>
-
diff --git a/src/components/navigation/www/navigation.jsx b/src/components/navigation/www/navigation.jsx
index ab5c13fef..7bc3ca663 100644
--- a/src/components/navigation/www/navigation.jsx
+++ b/src/components/navigation/www/navigation.jsx
@@ -23,8 +23,6 @@ const AccountNav = require('./accountnav.jsx');
require('./navigation.scss');
-const USE_SCRATCH3_REGISTRATION = false;
-
class Navigation extends React.Component {
constructor (props) {
super(props);
@@ -48,7 +46,7 @@ class Navigation extends React.Component {
}
componentDidUpdate (prevProps) {
if (prevProps.user !== this.props.user) {
- this.props.closeAccountMenus();
+ this.props.handleCloseAccountNav();
if (this.props.user) {
const intervalId = setInterval(() => {
this.props.getMessageCount(this.props.user.username);
@@ -198,17 +196,6 @@ class Navigation extends React.Component {
{props.message}
);
ValidationMessage.propTypes = {
className: PropTypes.string,
- message: PropTypes.string
+ message: PropTypes.string,
+ mode: PropTypes.string
};
module.exports = ValidationMessage;
diff --git a/src/components/forms/validation-message.scss b/src/components/forms/validation-message.scss
index d10e30e27..5cbbcb12b 100644
--- a/src/components/forms/validation-message.scss
+++ b/src/components/forms/validation-message.scss
@@ -39,6 +39,24 @@
}
}
+.validation-left {
+ $arrow-border-width: 1rem;
+ left: unset;
+ right: 0;
+ margin-left: unset;
+ margin-right: $arrow-border-width;
+ transform: translate(-16rem, 0);
+
+ &:before {
+ left: unset;
+ right: -$arrow-border-width / 2;
+ border-top: 1px solid $active-gray;
+ border-right: 1px solid $active-gray;
+ border-bottom: none;
+ border-left: none;
+ }
+}
+
@media #{$intermediate-and-smaller} {
.validation-message {
position: relative;
@@ -52,3 +70,21 @@
}
}
}
+
+.validation-error {
+ background-color: $ui-orange;
+
+ &:before {
+ background-color: $ui-orange;
+ }
+}
+
+.validation-info {
+ background-color: $ui-blue;
+ box-shadow: 0 0 4px 2px rgba(0, 0, 0, .15);
+ font-weight: 500;
+
+ &:before {
+ background-color: $ui-blue;
+ }
+}
diff --git a/src/components/info-button/info-button.jsx b/src/components/info-button/info-button.jsx
index 40b488d12..f79890c05 100644
--- a/src/components/info-button/info-button.jsx
+++ b/src/components/info-button/info-button.jsx
@@ -1,6 +1,9 @@
const bindAll = require('lodash.bindall');
const PropTypes = require('prop-types');
const React = require('react');
+const MediaQuery = require('react-responsive').default;
+
+const frameless = require('../../lib/frameless');
require('./info-button.scss');
@@ -22,25 +25,38 @@ class InfoButton extends React.Component {
this.setState({visible: true});
}
render () {
- return (
-
- {this.state.visible && (
-
+
+
+
+ );
}
}
InfoButton.propTypes = {
- message: PropTypes.string
+ message: PropTypes.string.isRequired
};
module.exports = InfoButton;
diff --git a/src/components/info-button/info-button.scss b/src/components/info-button/info-button.scss
index 7e5dfc8c6..5daa65a26 100644
--- a/src/components/info-button/info-button.scss
+++ b/src/components/info-button/info-button.scss
@@ -9,17 +9,9 @@
margin-left: .375rem;
border-radius: 50%;
background-color: $ui-blue;
-
- &:after {
- position: absolute;
- content: "?";
- color: $ui-white;
- font-family: verdana;
- font-weight: 400;
- top: -.125rem;
- left: .325rem;
- font-size: .75rem;
- }
+ background-image: url("/svgs/info-button/info-button.svg");
+ background-size: cover;
+ top: .125rem;
}
.info-button-message {
@@ -41,7 +33,7 @@
line-height: 1.25rem;
text-align: left;
font-size: .875rem;
- z-index: 1;
+ z-index: 2;
&:before {
display: block;
@@ -65,11 +57,12 @@
@media #{$intermediate-and-smaller} {
.info-button-message {
- position: relative;
+ position: absolute;
transform: none;
- margin: inherit;
- width: 100%;
- height: inherit;
+ /* since we're positioning message relative to info-button's parent,
+ we need to center this element within its width. */
+ margin: 0 calc((100% - 16.5rem) / 2);;
+ top: .125rem;
&:before {
display: none;
diff --git a/src/components/join-flow/birthdate-step.jsx b/src/components/join-flow/birthdate-step.jsx
index d83a7814d..f722b50d6 100644
--- a/src/components/join-flow/birthdate-step.jsx
+++ b/src/components/join-flow/birthdate-step.jsx
@@ -87,8 +87,10 @@ class BirthDateStep extends React.Component {
return (
diff --git a/src/components/join-flow/country-step.jsx b/src/components/join-flow/country-step.jsx
index 227ec4f94..86eee7497 100644
--- a/src/components/join-flow/country-step.jsx
+++ b/src/components/join-flow/country-step.jsx
@@ -29,7 +29,7 @@ class CountryStep extends React.Component {
this.countryOptions = [...countryData.registrationCountryOptions];
this.countryOptions.unshift({
disabled: true,
- label: this.props.intl.formatMessage({id: 'registration.selectCountry'}),
+ label: this.props.intl.formatMessage({id: 'general.country'}),
value: 'null'
});
}
@@ -68,7 +68,9 @@ class CountryStep extends React.Component {
return (
- {this.props.message}
-
- )}
+ const messageJsx = this.state.visible && (
+
+ {this.props.message}
);
+ return (
+
+
+ {messageJsx}
+
+
+ {/* for small screens, add additional position: relative element,
+ so info message can position itself relative to the width which
+ encloses info-button -- rather than relative to info-button itself */}
+
+ {messageJsx}
+
+
+
);
}}
diff --git a/src/components/join-flow/gender-step.jsx b/src/components/join-flow/gender-step.jsx
index ec6b23870..4d389ff79 100644
--- a/src/components/join-flow/gender-step.jsx
+++ b/src/components/join-flow/gender-step.jsx
@@ -11,10 +11,12 @@ const JoinFlowStep = require('./join-flow-step.jsx');
require('./join-flow-steps.scss');
const GenderOption = ({
+ id,
label,
onSetFieldValue,
selectedValue,
- value
+ value,
+ ...props
}) => (
setFieldValue('gender', values.custom, false)}
+ onClick={() => {
+ setFieldValue('gender', values.custom, false);
+ if (this.customInput) this.customInput.focus();
+ }}
/* eslint-enable react/jsx-no-bind */
>
setValues({
gender: newCustomVal,
custom: newCustomVal
})}
+ onSetCustomRef={this.handleSetCustomRef}
/* eslint-enable react/jsx-no-bind */
/>
@@ -149,11 +176,16 @@ class UsernameStep extends React.Component {
diff --git a/src/components/join-flow/welcome-step.jsx b/src/components/join-flow/welcome-step.jsx
index def0462d3..42b9ac8b1 100644
--- a/src/components/join-flow/welcome-step.jsx
+++ b/src/components/join-flow/welcome-step.jsx
@@ -27,8 +27,6 @@ class WelcomeStep extends React.Component {
render () {
return (
@@ -25,7 +24,6 @@ const JoinModal = ({
);
JoinModal.propTypes = {
- isOpen: PropTypes.bool,
onCompleteRegistration: PropTypes.func,
onRequestClose: PropTypes.func
};
diff --git a/src/components/modal/ttt/modal.jsx b/src/components/modal/ttt/modal.jsx
index e54bcb085..333f8011b 100644
--- a/src/components/modal/ttt/modal.jsx
+++ b/src/components/modal/ttt/modal.jsx
@@ -59,7 +59,7 @@ const TTTModal = props => (
rel="noopener noreferrer"
target="_blank"
>
-
-
+ 
+ |
+
+ |
+ |
+ 
+ |
+ {'Nairobi, Kenya'} | +|
+ 
+ |
+ ||
+ 
+ |
+ ||
+ 
+ |
+ #scratchafrica #scratch2019nbo | +
diff --git a/src/views/conference/2019/index/index.scss b/src/views/conference/2019/index/index.scss
index 341768bac..c8f4c403d 100644
--- a/src/views/conference/2019/index/index.scss
+++ b/src/views/conference/2019/index/index.scss
@@ -119,12 +119,6 @@ h1.title-banner-h1.mod-2019 {
margin: 2rem 0;
}
-.mod-kenya {
- .conf2019-panel-desc {
- font-style: italic;
- }
-}
-
.conf2019-mailing-list {
font-weight: normal;
}
diff --git a/src/views/conference/2019/index/l10n.json b/src/views/conference/2019/index/l10n.json
index 3f3f999a2..6f40df65e 100644
--- a/src/views/conference/2019/index/l10n.json
+++ b/src/views/conference/2019/index/l10n.json
@@ -20,11 +20,11 @@
"conference-2019.ukDesc": "Hosted by Raspberry Pi, the 2019 Scratch Conference Europe will take place in Cambridge, UK, from Friday 23 August to Sunday 25 August. The schedule is full of exciting participatory activities led by members of the Scratch community. Participants can look forward to workshops, talks, and keynotes across a range of topics, including the new Scratch 3.0, as well as plenty of informal opportunities to chat and connect!",
"conference-2019.ukAudience": "Education professionals and volunteers",
- "conference-2019.kenyaTitle": "Scratch2019NBO",
+ "conference-2019.kenyaTitle": "Scratch Conference Africa: Scratch2019NBO",
"conference-2019.kenyaSubTitle": "Waves of Innovation",
"conference-2019.kenyaDesc": "In recognition of Africa's technological contributions to the world and the potential of the youth of Africa, Scratch2019NBO will be held in Nairobi, Kenya. Join educators from around the world to share lessons, empower young people, and celebrate accomplishments in creative coding.",
"conference-2019.kenyaPostpone": "The Scratch2019NBO conference, originally planned for Nairobi, Kenya in July 2019, has been postponed. Information about future plans will be available later this year.",
- "conference-2019.kenyaAudience": "Educators, students, and enthusiasts",
+ "conference-2019.kenyaAudience": "Educators",
"conference-2019.chileDesc": "Scratch al Sur Conferencia Chile 2019 is an event aimed at teachers of all educational areas and levels, who seek to innovate in the classroom through creative learning, thus supporting public policies that are promoted through the National Plan of Digital Languages, launched by the Chilean government as of 2019. Various workshops, panels, experiences, stands, a presentation of the new Scratch 3.0, Makey-Makey, and much more will be offered.",
"conference-2019.chileAudience": "Teachers and policy makers",
diff --git a/src/views/credits/credits.jsx b/src/views/credits/credits.jsx
index 838c99786..5aa272cbe 100644
--- a/src/views/credits/credits.jsx
+++ b/src/views/credits/credits.jsx
@@ -140,7 +140,7 @@ const Credits = () => (
{' '}
Ben Berg, Amos Blanton, Karen Brennan, Juanita Buitrago, Leo Burd,
Gaia Carini, Kasia Chmielinski, Michelle Chung, Shane Clements,
- Hannah Cole, Sayamindu Dasgupta, Margarita Dekoli, Evelyn Eastmond,
+ Hannah Cole, Sayamindu Dasgupta, Margarita Dekoli,
Dave Feinberg, Chris Graves, Megan Haddadi, Connor Hudson,
Christina Huang, Tony Hwang, Abdulrahman Idlbi, Randy Jou, Lily Kim,
Tauntaun Kim, Saskia Leggett, Tim Mickel, Amon Millner, Ricarose Roque,
diff --git a/src/views/ideas/l10n.json b/src/views/ideas/l10n.json
index e2defd646..ca182da98 100644
--- a/src/views/ideas/l10n.json
+++ b/src/views/ideas/l10n.json
@@ -21,7 +21,6 @@
"ideas.seeAllTutorials": "See All Tutorials",
"ideas.cardsTitle": "Get the Entire Collection of Coding Cards",
"ideas.cardsText": "With the Scratch Coding Cards, you can learn to create interactive games, stories, music, animations, and more!",
- "ideas.downloadPDF": "Download PDF",
"ideas.starterProjectsTitle": "Starter Projects",
"ideas.starterProjectsText": "You can play with Starter Projects and remix them to make your own creations.",
"ideas.starterProjectsButton": "Explore Starter Projects",
diff --git a/src/views/microbit/l10n-static.json b/src/views/microbit/l10n-static.json
new file mode 100644
index 000000000..079f8ef82
--- /dev/null
+++ b/src/views/microbit/l10n-static.json
@@ -0,0 +1,3 @@
+{
+ "cards.microbit-cardsLink": "https://resources.scratch.mit.edu/www/cards/en/microbit-cards.pdf"
+}
diff --git a/src/views/microbit/l10n.json b/src/views/microbit/l10n.json
index 8691e56a8..fd97d6ef6 100644
--- a/src/views/microbit/l10n.json
+++ b/src/views/microbit/l10n.json
@@ -2,7 +2,9 @@
"microbit.headerText": "{microbitLink} is a tiny circuit board designed to help kids learn to code and create with technology. It has many features including an LED display, buttons, and a motion sensor. You can connect it to Scratch and build creative projects that combine the magic of the digital and physical worlds.",
"microbit.gettingStarted": "Getting Started",
"microbit.installMicrobitHex": "Install Scratch micro:bit HEX",
+ "microbit.cardsDescription": "These cards show how to start making projects with micro:bit and Scratch.",
"microbit.connectUSB": "Connect a micro:bit to your computer with a USB cable",
+ "microbit.downloadCardsTitle": "Download micro:bit Cards",
"microbit.downloadHex": "Download the Scratch micro:bit HEX file",
"microbit.dragDropHex": "Drag and drop the HEX file onto your micro:bit",
"microbit.connectingMicrobit": "Connecting micro:bit to Scratch",
diff --git a/src/views/microbit/microbit.jsx b/src/views/microbit/microbit.jsx
index 305184fcf..92df6ea77 100644
--- a/src/views/microbit/microbit.jsx
+++ b/src/views/microbit/microbit.jsx
@@ -17,6 +17,7 @@ const ExtensionRequirements = require('../../components/extension-landing/extens
const ExtensionSection = require('../../components/extension-landing/extension-section.jsx');
const InstallScratchLink = require('../../components/extension-landing/install-scratch-link.jsx');
const ProjectCard = require('../../components/extension-landing/project-card.jsx');
+const Button = require('../../components/forms/button.jsx');
const Steps = require('../../components/steps/steps.jsx');
const Step = require('../../components/steps/step.jsx');
@@ -269,6 +270,35 @@ class MicroBit extends ExtensionLanding {
/>
+
+
+
+
+
diff --git a/src/views/microbit/microbit.scss b/src/views/microbit/microbit.scss
index cc01b5375..5deb1646f 100644
--- a/src/views/microbit/microbit.scss
+++ b/src/views/microbit/microbit.scss
@@ -14,4 +14,60 @@
}
}
}
+
+ .cards {
+ /* ends with
, so no need for extra padding */ + padding-bottom: 0; + /* slightly more padding on top, since
at bottom has its own extra padding */ + padding-top: 4.5rem; + } + + .cards-row { + flex-wrap: nowrap; + } + + .cards-image-column { + width: 50%; + } + + .cards-image { + width: calc(100% - 4rem); + margin-top: 1rem; + margin-right: 2rem; + margin-bottom: 1rem; + } + + .cards-description-column { + width: 50%; + + p { + font-size: 1.2rem; + } + } + + .download-cards-button { + min-width: 10rem; + + &:before { + display: inline-block; + background-image: url("/svgs/extensions/download-white.svg"); + background-repeat: no-repeat; + width: 1.5rem; + height: 1.5rem; + margin-right: .75rem; + vertical-align: text-top; + content: ""; + } + } +} + +@media #{$medium-and-smaller} { + .microbit { + .cards-image-column { + width: calc(100% - 2rem); + } + .cards-description-column { + width: calc(100% - 2rem); + } + } } diff --git a/src/views/preview/project-view.jsx b/src/views/preview/project-view.jsx index 240996f98..f31353bc1 100644 --- a/src/views/preview/project-view.jsx +++ b/src/views/preview/project-view.jsx @@ -18,6 +18,7 @@ const ProjectInfo = require('../../lib/project-info'); const PreviewPresentation = require('./presentation.jsx'); const projectShape = require('./projectshape.jsx').projectShape; const Registration = require('../../components/registration/registration.jsx'); +const Scratch3Registration = require('../../components/registration/scratch3-registration.jsx'); const ConnectedLogin = require('../../components/login/connected-login.jsx'); const CanceledDeletionModal = require('../../components/login/canceled-deletion-modal.jsx'); const NotAvailable = require('../../components/not-available/not-available.jsx'); @@ -751,7 +752,15 @@ class Preview extends React.Component { onUpdateProjectThumbnail={this.props.handleUpdateProjectThumbnail} onUpdateProjectTitle={this.handleUpdateProjectTitle} /> -
+
+ );
+ expect(component.find('ValidationMessage').exists()).toEqual(false);
+ expect(component.find('div.validation-error').exists()).toEqual(false);
+ expect(component.find('div.validation-info').exists()).toEqual(false);
+ });
+
+ test('No validation message with false error, false toolTip', () => {
+ const component = mountWithIntl(
+
+
+ );
+ expect(component.find('ValidationMessage').exists()).toEqual(false);
+ expect(component.find('div.validation-error').exists()).toEqual(false);
+ expect(component.find('div.validation-info').exists()).toEqual(false);
+ });
+
+ test('No validation message with nonexistent error or toolTip', () => {
+ const component = mountWithIntl(
+
+
+ );
+ expect(component.find('ValidationMessage').exists()).toEqual(false);
+ expect(component.find('div.validation-error').exists()).toEqual(false);
+ expect(component.find('div.validation-info').exists()).toEqual(false);
+ });
+
+ test('Validation message shown when error given', () => {
+ const component = mountWithIntl(
+
+
+ );
+ expect(component.find('ValidationMessage').exists()).toEqual(true);
+ expect(component.find('div.validation-error').exists()).toEqual(true);
+ expect(component.find('div.validation-info').exists()).toEqual(false);
+ });
+
+ test('Tooltip shown when toolTip given', () => {
+ const component = mountWithIntl(
+
+
+ );
+ expect(component.find('ValidationMessage').exists()).toEqual(true);
+ expect(component.find('div.validation-error').exists()).toEqual(false);
+ expect(component.find('div.validation-info').exists()).toEqual(true);
+ });
+
+ test('If both error and toolTip messages, error takes precedence', () => {
+ const component = mountWithIntl(
+
+
+ );
+ expect(component.find('ValidationMessage').exists()).toEqual(true);
+ expect(component.find('div.validation-error').exists()).toEqual(true);
+ expect(component.find('div.validation-info').exists()).toEqual(false);
+ });
+});
diff --git a/test/unit/components/formik-select.test.jsx b/test/unit/components/formik-select.test.jsx
new file mode 100644
index 000000000..46accb37e
--- /dev/null
+++ b/test/unit/components/formik-select.test.jsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import {mountWithIntl} from '../../helpers/intl-helpers.jsx';
+import FormikSelect from '../../../src/components/formik-forms/formik-select.jsx';
+import {Formik} from 'formik';
+import {Field} from 'formik';
+
+describe('FormikSelect', () => {
+ test('No validation message without an error', () => {
+ const component = mountWithIntl(
+
+
+ );
+
+ expect(component.find('ValidationMessage').exists()).toEqual(false);
+ expect(component.find(Field).exists()).toEqual(true);
+ });
+
+ test('Validation message shown when error present', () => {
+ const component = mountWithIntl(
+
+
+ );
+ expect(component.find('ValidationMessage').exists()).toEqual(true);
+ expect(component.find(Field).exists()).toEqual(true);
+ });
+
+ test('list of options passed to formik', () => {
+ const optionList = [
+ {
+ disabled: false,
+ label: 'option1',
+ value: 'value1'
+ },
+ {
+ disabled: false,
+ label: 'option2',
+ value: 'value2'
+ }
+
+ ];
+ const component = mountWithIntl(
+
+
+ );
+ expect(component.find(Field).exists()).toEqual(true);
+ expect(component.find(Field).prop('children').length).toEqual(2);
+ });
+});
diff --git a/test/unit/components/info-button.test.jsx b/test/unit/components/info-button.test.jsx
index 777fa2f40..e7e48231d 100644
--- a/test/unit/components/info-button.test.jsx
+++ b/test/unit/components/info-button.test.jsx
@@ -11,6 +11,15 @@ describe('InfoButton', () => {
);
expect(component.find('div.info-button-message').exists()).toEqual(false);
});
+ test('mouseOver on info button makes info message visible', () => {
+ const component = mountWithIntl(
+ {
message="Here is some info about something!"
/>
);
- component.find('div.info-button').simulate('click');
+ component.find('div.info-button').simulate('mouseOver');
expect(component.find('div.info-button-message').exists()).toEqual(true);
component.find('div.info-button').simulate('mouseOut');
expect(component.find('div.info-button-message').exists()).toEqual(false);
diff --git a/test/unit/components/join-flow-step.test.jsx b/test/unit/components/join-flow-step.test.jsx
index 80518cddd..5c0f8b685 100644
--- a/test/unit/components/join-flow-step.test.jsx
+++ b/test/unit/components/join-flow-step.test.jsx
@@ -20,7 +20,7 @@ describe('JoinFlowStep', () => {
{...props}
/>
);
- expect(component.find('div.join-flow-header-image').exists()).toEqual(true);
+ expect(component.find('img.join-flow-header-image').exists()).toEqual(true);
expect(component.find({src: props.headerImgSrc}).exists()).toEqual(true);
expect(component.find('.join-flow-inner-content').exists()).toEqual(true);
expect(component.find('.join-flow-title').exists()).toEqual(true);
@@ -39,7 +39,7 @@ describe('JoinFlowStep', () => {
+ 
+
+
+
+ +
, so no need for extra padding */ + padding-bottom: 0; + /* slightly more padding on top, since
at bottom has its own extra padding */ + padding-top: 4.5rem; + } + + .cards-row { + flex-wrap: nowrap; + } + + .cards-image-column { + width: 50%; + } + + .cards-image { + width: calc(100% - 4rem); + margin-top: 1rem; + margin-right: 2rem; + margin-bottom: 1rem; + } + + .cards-description-column { + width: 50%; + + p { + font-size: 1.2rem; + } + } + + .download-cards-button { + min-width: 10rem; + + &:before { + display: inline-block; + background-image: url("/svgs/extensions/download-white.svg"); + background-repeat: no-repeat; + width: 1.5rem; + height: 1.5rem; + margin-right: .75rem; + vertical-align: text-top; + content: ""; + } + } +} + +@media #{$medium-and-smaller} { + .microbit { + .cards-image-column { + width: calc(100% - 2rem); + } + .cards-description-column { + width: calc(100% - 2rem); + } + } } diff --git a/src/views/preview/project-view.jsx b/src/views/preview/project-view.jsx index 240996f98..f31353bc1 100644 --- a/src/views/preview/project-view.jsx +++ b/src/views/preview/project-view.jsx @@ -18,6 +18,7 @@ const ProjectInfo = require('../../lib/project-info'); const PreviewPresentation = require('./presentation.jsx'); const projectShape = require('./projectshape.jsx').projectShape; const Registration = require('../../components/registration/registration.jsx'); +const Scratch3Registration = require('../../components/registration/scratch3-registration.jsx'); const ConnectedLogin = require('../../components/login/connected-login.jsx'); const CanceledDeletionModal = require('../../components/login/canceled-deletion-modal.jsx'); const NotAvailable = require('../../components/not-available/not-available.jsx'); @@ -751,7 +752,15 @@ class Preview extends React.Component { onUpdateProjectThumbnail={this.props.handleUpdateProjectThumbnail} onUpdateProjectTitle={this.handleUpdateProjectTitle} /> -