From 421aabadc106d2431912f92131329f9b330f8af3 Mon Sep 17 00:00:00 2001
From: Eric Rosenbaum <eric.rosenbaum@gmail.com>
Date: Mon, 3 Dec 2018 15:29:25 -0500
Subject: [PATCH] Update version requirements

---
 .../extension-landing/extension-header.jsx    |  20 ++--
 .../extension-landing/extension-landing.scss  |  65 ++++++-----
 src/views/ev3/ev3.jsx                         | 103 ++++++++--------
 src/views/microbit/microbit.jsx               | 110 +++++++++---------
 src/views/microbit/microbit.scss              |   9 --
 src/views/wedo2/wedo2.jsx                     | 109 ++++++++---------
 6 files changed, 211 insertions(+), 205 deletions(-)

diff --git a/src/components/extension-landing/extension-header.jsx b/src/components/extension-landing/extension-header.jsx
index df1957a2a..0a6509583 100644
--- a/src/components/extension-landing/extension-header.jsx
+++ b/src/components/extension-landing/extension-header.jsx
@@ -8,23 +8,21 @@ require('./extension-landing.scss');
 const ExtensionHeader = props => (
     <div className="extension-header">
         <FlexRow className="inner">
-            <FlexRow className="column extension-info">
-                {props.children}
+            <FlexRow className="extension-info">
+                {props.renderCopy}
+                <div className="extension-image">
+                    {props.renderImage}
+                </div>
             </FlexRow>
-            <div className="extension-image">
-                <img
-                    alt={props.imageAlt}
-                    src={props.imageSrc}
-                />
-            </div>
+            {props.renderRequirements}
         </FlexRow>
     </div>
 );
 
 ExtensionHeader.propTypes = {
-    children: PropTypes.node,
-    imageAlt: PropTypes.string,
-    imageSrc: PropTypes.string
+    renderCopy: PropTypes.node,
+    renderImage: PropTypes.node,
+    renderRequirements: PropTypes.node
 };
 
 module.exports = ExtensionHeader;
diff --git a/src/components/extension-landing/extension-landing.scss b/src/components/extension-landing/extension-landing.scss
index bb06fcda2..ae929a4c5 100644
--- a/src/components/extension-landing/extension-landing.scss
+++ b/src/components/extension-landing/extension-landing.scss
@@ -79,15 +79,20 @@
         .inner {
             justify-content: space-between;
             flex-wrap: nowrap;
+            flex-direction: column;
+            align-items: flex-start;
         }
 
         .extension-info {
-            max-width: $cols7;
-            align-items: flex-start;
+            flex-wrap: nowrap;
+            flex-direction: row;
+            margin-bottom: 5rem;
 
             .extension-copy {
-                margin-bottom: 5rem;
                 align-items: flex-start;
+                justify-content: start;
+                max-width: $cols7;
+                padding-right: 3.75em;
 
                 h1, h2 {
                     display: flex;
@@ -109,41 +114,39 @@
                     color: $ui-white;
                 }
             }
-
-            .extension-requirements-container {
-                font-weight: 500;
-                align-items: flex-start;
-
-                .requirements-header {
-                    margin-bottom: 1.5rem;
-                }
-
-                .extension-requirements {
-                    justify-content: space-between;
-                }
-
-                .extension-requirements span {
-                    display: flex;
-                    margin-right: 1rem;
-                    font-size: 15px; // TODO: change to rem later
-                    align-items: center;
-                }
-
-                .extension-requirements span img {
-                    padding-right: .5rem;
-                }
-            }
         }
 
         .extension-image {
-            width: 100%;
-            max-width: $cols5;
+            margin-top: auto;
 
             img {
-                max-width: 100%;
-                max-height: 100%;
+                max-width: $cols5;
+                max-height: $cols3;
+            }
+        }
+
+        .extension-requirements-container {
+            font-weight: 500;
+            align-items: flex-start;
+
+            .requirements-header {
+                margin-bottom: 1.5rem;
             }
 
+            .extension-requirements {
+                justify-content: space-between;
+            }
+
+            .extension-requirements span {
+                display: flex;
+                margin-right: 1rem;
+                font-size: 15px; // TODO: change to rem later
+                align-items: center;
+            }
+
+            .extension-requirements span img {
+                padding-right: .5rem;
+            }
         }
     }
 
diff --git a/src/views/ev3/ev3.jsx b/src/views/ev3/ev3.jsx
index 9d2fb77a0..50f29fa1e 100644
--- a/src/views/ev3/ev3.jsx
+++ b/src/views/ev3/ev3.jsx
@@ -32,57 +32,62 @@ class EV3 extends ExtensionLanding {
         return (
             <div className="extension-landing ev3">
                 <ExtensionHeader
-                    imageAlt={this.props.intl.formatMessage({id: 'ev3.imgAltEv3Illustration'})}
-                    imageSrc="/images/ev3/ev3-illustration.png"
-                >
-                    <FlexRow className="column extension-copy">
-                        <h1><img
-                            alt=""
-                            src="/images/ev3/ev3.svg"
-                        />LEGO MINDSTORMS EV3</h1>
-                        <FormattedMessage
-                            id="ev3.headerText"
-                            values={{
-                                ev3Link: (
-                                    <a
-                                        href="https://education.lego.com/en-us/middle-school/intro/mindstorms-ev3"
-                                        rel="noopener noreferrer"
-                                        target="_blank"
-                                    >
-                                                LEGO MINDSTORMS Education EV3
-                                    </a>
-                                )
-                            }}
-                        />
-                    </FlexRow>
-                    <ExtensionRequirements>
-                        <span>
-                            <img
+                    renderCopy={
+                        <FlexRow className="column extension-copy">
+                            <h1><img
                                 alt=""
-                                src="/svgs/extensions/windows.svg"
+                                src="/images/ev3/ev3.svg"
+                            />LEGO MINDSTORMS EV3</h1>
+                            <FormattedMessage
+                                id="ev3.headerText"
+                                values={{
+                                    ev3Link: (
+                                        <a
+                                            href="https://education.lego.com/en-us/middle-school/intro/mindstorms-ev3"
+                                            rel="noopener noreferrer"
+                                            target="_blank"
+                                        >
+                                                    LEGO MINDSTORMS Education EV3
+                                        </a>
+                                    )
+                                }}
                             />
-                                        Windows 10 version 1709+
-                        </span>
-                        <span>
-                            <img
-                                alt=""
-                                src="/svgs/extensions/mac.svg"
-                            />
-                                        macOS 10.13+
-                        </span>
-                        <span>
-                            <img src="/svgs/extensions/bluetooth.svg" />
-                                        Bluetooth
-                        </span>
-                        <span>
-                            <img
-                                alt=""
-                                src="/svgs/extensions/scratch-link.svg"
-                            />
-                                        Scratch Link
-                        </span>
-                    </ExtensionRequirements>
-                </ExtensionHeader>
+                        </FlexRow>
+                    }
+                    renderImage={<img
+                        alt={this.props.intl.formatMessage({id: 'ev3.imgAltEv3Illustration'})}
+                        src="/images/ev3/ev3-illustration.png"
+                    />}
+                    renderRequirements={
+                        <ExtensionRequirements>
+                            <span>
+                                <img
+                                    alt=""
+                                    src="/svgs/extensions/windows.svg"
+                                />
+                                            Windows 10 version 1709+
+                            </span>
+                            <span>
+                                <img
+                                    alt=""
+                                    src="/svgs/extensions/mac.svg"
+                                />
+                                            macOS 10.13+
+                            </span>
+                            <span>
+                                <img src="/svgs/extensions/bluetooth.svg" />
+                                            Bluetooth
+                            </span>
+                            <span>
+                                <img
+                                    alt=""
+                                    src="/svgs/extensions/scratch-link.svg"
+                                />
+                                            Scratch Link
+                            </span>
+                        </ExtensionRequirements>
+                    }
+                />
                 <OSChooser
                     currentOS={this.state.OS}
                     handleSetOS={this.onSetOS}
diff --git a/src/views/microbit/microbit.jsx b/src/views/microbit/microbit.jsx
index aa15efc9e..94ad1055c 100644
--- a/src/views/microbit/microbit.jsx
+++ b/src/views/microbit/microbit.jsx
@@ -27,65 +27,69 @@ require('../../components/extension-landing/extension-landing.scss');
 require('./microbit.scss');
 
 class MicroBit extends ExtensionLanding {
-
     render () {
         return (
             <div className="extension-landing microbit">
                 <ExtensionHeader
-                    imageAlt={this.props.intl.formatMessage({id: 'microbit.imgAltMicrobitIllustration'})}
-                    imageSrc="/images/microbit/microbit-heart.png"
-                >
-                    <FlexRow className="column extension-copy">
-                        <h1><img
-                            alt=""
-                            src="/images/microbit/microbit.svg"
-                        />micro:bit</h1>
-                        <FormattedMessage
-                            id="microbit.headerText"
-                            values={{
-                                microbitLink: (
-                                    <a
-                                        href="http://microbit.org/"
-                                        rel="noopener noreferrer"
-                                        target="_blank"
-                                    >
-                                      micro:bit
-                                    </a>
-                                )
-                            }}
-                        />
-                    </FlexRow>
-                    <ExtensionRequirements>
-                        <span>
-                            <img
+                    renderCopy={
+                        <FlexRow className="extension-copy">
+                            <h1><img
                                 alt=""
-                                src="/svgs/extensions/windows.svg"
+                                src="/images/microbit/microbit.svg"
+                            />micro:bit</h1>
+                            <FormattedMessage
+                                id="microbit.headerText"
+                                values={{
+                                    microbitLink: (
+                                        <a
+                                            href="http://microbit.org/"
+                                            rel="noopener noreferrer"
+                                            target="_blank"
+                                        >
+                                            micro:bit
+                                        </a>
+                                    )
+                                }}
                             />
-                                        Windows 10 version 1709+
-                        </span>
-                        <span>
-                            <img
-                                alt=""
-                                src="/svgs/extensions/mac.svg"
-                            />
-                                        macOS 10.13+
-                        </span>
-                        <span>
-                            <img
-                                alt=""
-                                src="/svgs/extensions/bluetooth.svg"
-                            />
-                                        Bluetooth 4.0
-                        </span>
-                        <span>
-                            <img
-                                alt=""
-                                src="/svgs/extensions/scratch-link.svg"
-                            />
-                                        Scratch Link
-                        </span>
-                    </ExtensionRequirements>
-                </ExtensionHeader>
+                        </FlexRow>
+                    }
+                    renderImage={<img
+                        alt={this.props.intl.formatMessage({id: 'microbit.imgAltMicrobitIllustration'})}
+                        src="/images/microbit/microbit-heart.png"
+                    />}
+                    renderRequirements={
+                        <ExtensionRequirements>
+                            <span>
+                                <img
+                                    alt=""
+                                    src="/svgs/extensions/windows.svg"
+                                />
+                                            Windows 10 version 1709+
+                            </span>
+                            <span>
+                                <img
+                                    alt=""
+                                    src="/svgs/extensions/mac.svg"
+                                />
+                                            macOS 10.13+
+                            </span>
+                            <span>
+                                <img
+                                    alt=""
+                                    src="/svgs/extensions/bluetooth.svg"
+                                />
+                                            Bluetooth 4.0
+                            </span>
+                            <span>
+                                <img
+                                    alt=""
+                                    src="/svgs/extensions/scratch-link.svg"
+                                />
+                                            Scratch Link
+                            </span>
+                        </ExtensionRequirements>
+                    }
+                />
                 <OSChooser
                     currentOS={this.state.OS}
                     handleSetOS={this.onSetOS}
diff --git a/src/views/microbit/microbit.scss b/src/views/microbit/microbit.scss
index 580d19e0b..cc01b5375 100644
--- a/src/views/microbit/microbit.scss
+++ b/src/views/microbit/microbit.scss
@@ -5,15 +5,6 @@
     .extension-header {
         background-color: $ui-mint-green;
         background-image: url("/images/microbit/mbit-pattern.svg");
-
-        .extension-info {
-            padding-right: $cols1;
-            max-width: $cols7 + ($gutter / $em);
-        }
-
-        .extension-image {
-            max-width: $cols4;
-        }
     }
 
     .things-to-try {
diff --git a/src/views/wedo2/wedo2.jsx b/src/views/wedo2/wedo2.jsx
index 942124f14..e23c98766 100644
--- a/src/views/wedo2/wedo2.jsx
+++ b/src/views/wedo2/wedo2.jsx
@@ -29,60 +29,65 @@ class Wedo2 extends ExtensionLanding {
         return (
             <div className="extension-landing wedo2">
                 <ExtensionHeader
-                    imageAlt={this.props.intl.formatMessage({id: 'wedo2.imgAltWeDoIllustration'})}
-                    imageSrc="/images/wedo2/wedo2-illustration.png"
-                >
-                    <FlexRow className="column extension-copy">
-                        <h1><img
-                            alt=""
-                            src="/images/wedo2/wedo2.svg"
-                        />LEGO WeDo 2.0</h1>
-                        <FormattedMessage
-                            id="wedo2.headerText"
-                            values={{
-                                wedo2Link: (
-                                    <a
-                                        href="https://education.lego.com/en-us/elementary/intro/wedo2"
-                                        rel="noopener noreferrer"
-                                        target="_blank"
-                                    >
-                                                LEGO Education WeDo 2.0
-                                    </a>
-                                )
-                            }}
-                        />
-                    </FlexRow>
-                    <ExtensionRequirements>
-                        <span>
-                            <img
+                    renderCopy={
+                        <FlexRow className="extension-copy">
+                            <h1><img
                                 alt=""
-                                src="/svgs/extensions/windows.svg"
+                                src="/images/wedo2/wedo2.svg"
+                            />LEGO WeDo 2.0</h1>
+                            <FormattedMessage
+                                id="wedo2.headerText"
+                                values={{
+                                    wedo2Link: (
+                                        <a
+                                            href="https://education.lego.com/en-us/elementary/intro/wedo2"
+                                            rel="noopener noreferrer"
+                                            target="_blank"
+                                        >
+                                            LEGO Education WeDo 2.0
+                                        </a>
+                                    )
+                                }}
                             />
-                                        Windows 10 version 1709+
-                        </span>
-                        <span>
-                            <img
-                                alt=""
-                                src="/svgs/extensions/mac.svg"
-                            />
-                                        macOS 10.13+
-                        </span>
-                        <span>
-                            <img
-                                alt=""
-                                src="/svgs/extensions/bluetooth.svg"
-                            />
-                                        Bluetooth
-                        </span>
-                        <span>
-                            <img
-                                alt=""
-                                src="/svgs/extensions/scratch-link.svg"
-                            />
-                                        Scratch Link
-                        </span>
-                    </ExtensionRequirements>
-                </ExtensionHeader>
+                        </FlexRow>
+                    }
+                    renderImage={<img
+                        alt={this.props.intl.formatMessage({id: 'wedo2.imgAltWeDoIllustration'})}
+                        src="/images/wedo2/wedo2-illustration.png"
+                    />}
+                    renderRequirements={
+                        <ExtensionRequirements>
+                            <span>
+                                <img
+                                    alt=""
+                                    src="/svgs/extensions/windows.svg"
+                                />
+                                            Windows 10 version 1709+
+                            </span>
+                            <span>
+                                <img
+                                    alt=""
+                                    src="/svgs/extensions/mac.svg"
+                                />
+                                            macOS 10.13+
+                            </span>
+                            <span>
+                                <img
+                                    alt=""
+                                    src="/svgs/extensions/bluetooth.svg"
+                                />
+                                            Bluetooth 4.0
+                            </span>
+                            <span>
+                                <img
+                                    alt=""
+                                    src="/svgs/extensions/scratch-link.svg"
+                                />
+                                            Scratch Link
+                            </span>
+                        </ExtensionRequirements>
+                    }
+                />
                 <OSChooser
                     currentOS={this.state.OS}
                     handleSetOS={this.onSetOS}