scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 00:21:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge pull request #3186 from benjiwheeler/join-flow-add-images

Browse source 
Join flow add images
This commit is contained in:
Benjamin Wheeler 2019-08-19 16:23:07 +02:00 committed by GitHub
commit ff3c91f9e0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 18 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/join-flow/birthdate-step.jsx
View file

@ -87,7 +87,7 @@ class BirthDateStep extends React.Component {
return (
<JoinFlowStep
description={this.props.intl.formatMessage({id: 'registration.private'})}
headerImgSrc="/images/hoc/getting-started.jpg"
headerImgSrc="/images/join-flow/birthdate-header.png"
infoMessage={this.props.intl.formatMessage({id: 'registration.birthDateStepInfo'})}
innerClassName="join-flow-inner-birthdate-step"
title={this.props.intl.formatMessage({id: 'registration.birthDateStepTitle'})}

2
src/components/join-flow/country-step.jsx
View file

@ -68,7 +68,7 @@ class CountryStep extends React.Component {
return (
<JoinFlowStep
description={this.props.intl.formatMessage({id: 'registration.countryStepDescription'})}
headerImgSrc="/images/hoc/getting-started.jpg"
headerImgSrc="/images/join-flow/country-header.png"
innerClassName="join-flow-inner-country-step"
title={this.props.intl.formatMessage({id: 'registration.countryStepTitle'})}
waiting={isSubmitting}

2
src/components/join-flow/email-step.jsx
View file

@ -74,7 +74,7 @@ class EmailStep extends React.Component {
}}
/>
)}
headerImgSrc="/images/hoc/getting-started.jpg"
headerImgSrc="/images/join-flow/email-header.png"
innerClassName="join-flow-inner-email-step"
nextButton={this.props.intl.formatMessage({id: 'registration.createAccount'})}
title={this.props.intl.formatMessage({id: 'registration.emailStepTitle'})}

7
src/components/join-flow/join-flow-step.jsx
View file

@ -25,8 +25,11 @@ const JoinFlowStep = ({
<form onSubmit={onSubmit}>
<div className="join-flow-outer-content">
{headerImgSrc && (
<div className="join-flow-header-image">
<img src={headerImgSrc} />
<div className="join-flow-header-image-wrapper">
<img
className="join-flow-header-image"
src={headerImgSrc}
/>
</div>
)}
<div>

9
src/components/join-flow/join-flow-step.scss
View file

@ -33,15 +33,20 @@
}
/* 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;

2
src/components/join-flow/welcome-step.jsx
View file

@ -44,7 +44,7 @@ class WelcomeStep extends React.Component {
description={this.props.intl.formatMessage({
id: 'registration.welcomeStepDescriptionNonEducator'
})}
headerImgSrc="/images/hoc/getting-started.jpg"
headerImgSrc="/images/join-flow/welcome-header.png"
innerClassName="join-flow-inner-welcome-step"
nextButton={
<React.Fragment>

BIN
static/images/join-flow/birthdate-header.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
static/images/join-flow/country-header.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
static/images/join-flow/email-header.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
static/images/join-flow/welcome-header.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 22 KiB

4
test/unit/components/join-flow-step.test.jsx
View file

@ -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', () => {
<JoinFlowStep />
);
expect(component.find('div.join-flow-header-image').exists()).toEqual(false);
expect(component.find('img.join-flow-header-image').exists()).toEqual(false);
expect(component.find('.join-flow-inner-content').exists()).toEqual(true);
expect(component.find('.join-flow-title').exists()).toEqual(false);
expect(component.find('div.join-flow-description').exists()).toEqual(false);