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

Join flow add images

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

@@ -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'})}

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

@@ -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}

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

@@ -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'})}

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

@@ -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>

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

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

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

@@ -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>

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', () => {
             <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);