Merge pull request #3583 from picklesrus/footer-stuff

Add recognition text and links to the bottom of the page.

src/components/page/www/donor-recognition.jsx

+const FormattedMessage = require('react-intl').FormattedMessage;
+const injectIntl = require('react-intl').injectIntl;
+const React = require('react');
+
+require('./donor-recognition.scss');
+
+const DonorRecognition = () => (
+    <div id="donor-text">
+        <div>
+            <FormattedMessage
+                id="footer.donorRecognition"
+                values={{
+                    donorLink: (
+                        <a
+                            href="/credits#donors"
+                        >
+                            <FormattedMessage id="footer.donors" />
+                        </a>
+                    )
+                }}
+            />
+        </div>
+        <div>
+            <FormattedMessage
+                id="footer.donorList"
+                values={{
+                    donor1: 'Massachusetts Institue of Technology',
+                    donor2: 'National Science Foundation',
+                    donor3: 'Siegel Family Endowment'
+                }}
+            />
+        </div>
+    </div>
+);
+
+module.exports = injectIntl(DonorRecognition);

src/components/page/www/donor-recognition.scss

+@import "../../../colors";
+@import "../../../frameless";
+
+#donor {
+   color: $type-gray;
+   font-size: .875rem;
+   line-height: 1.5em;
+   background-color: $ui-gray;
+   padding-bottom: 2.5rem;
+   padding-top: 1rem;
+   #donor-text {
+       text-align: center;
+       width: $cols12;
+       margin: 0 auto;
+   }
+}
+
+@media only screen and (min-width: $tabletPortrait) and (max-width: $desktop) {
+    #donor {
+        #donor-text {
+            width: $cols11;
+        }
+    }
+}
+@media only screen and (min-width: $mobile) and (max-width: $tabletPortrait) {
+    #donor {
+        #donor-text {
+            width: $cols6;
+        }
+    }
+}
+@media only screen and (max-width: $mobile) {
+    #donor {
+        #donor-text {
+            width: $cols4;
+        }
+    }
+}

src/components/page/www/page.jsx

@@ -4,11 +4,13 @@ const React = require('react');
 
 const Navigation = require('../../navigation/www/navigation.jsx');
 const Footer = require('../../footer/www/footer.jsx');
+const DonorRecognition = require('./donor-recognition.jsx');
 const ErrorBoundary = require('../../errorboundary/errorboundary.jsx');
 
 const Page = ({
     children,
-    className
+    className,
+    showDonorRecognition
 }) => (
     <ErrorBoundary componentName="Page">
         <div className={classNames('page', className)}>
@@ -26,13 +28,19 @@ const Page = ({
             <div id="footer">
                 <Footer />
             </div>
+            {showDonorRecognition &&
+                <div id="donor">
+                    <DonorRecognition />
+                </div>
+            }
         </div>
     </ErrorBoundary>
 );
 
 Page.propTypes = {
     children: PropTypes.node,
-    className: PropTypes.string
+    className: PropTypes.string,
+    showDonorRecognition: PropTypes.bool
 };
 
 module.exports = Page;

src/l10n.json

@@ -122,6 +122,9 @@
 
     "footer.discuss": "Discussion Forums",
     "footer.scratchFamily": "Scratch Family",
+    "footer.donorRecognition": "Scratch is available for free, thanks to generous support from our {donorLink}. We are grateful to our Founding Partners:",
+    "footer.donors": "donors",
+    "footer.donorList": "{donor1}, {donor2}, and {donor3}",
 
     "form.validationRequired": "This field is required",
 

src/views/credits/credits.jsx

@@ -54,7 +54,10 @@ const Credits = () => (
                     ))}
                 </ul>
             </div>
-            <div className="supporters">
+            <div
+                className="supporters"
+                id="donors"
+            >
                 <div className="mid-header">
                     <h2>
                         <FormattedMessage id="credits.currentSponsors" />

src/views/splash/splash.jsx

@@ -271,7 +271,11 @@ const ConnectedSplash = connect(
 )(Splash);
 
 render(
-    <Page><ConnectedSplash /></Page>,
+    <Page
+        showDonorRecognition
+    >
+        <ConnectedSplash />
+    </Page>,
     document.getElementById('app'),
     {splash: splashActions.splashReducer}
 );

test/unit/components/page.test.jsx

+const React = require('react');
+const {shallowWithIntl} = require('../../helpers/intl-helpers.jsx');
+const Page = require('../../../src/components/page/www/page.jsx');
+
+describe('Page', () => {
+    test('Do not show donor recognition', () => {
+        const component = shallowWithIntl(
+            <Page />
+        );
+        expect(component.find('#donor')).toHaveLength(0);
+    });
+
+    test('Show donor recognition', () => {
+        const component = shallowWithIntl(
+            <Page
+                showDonorRecognition
+            />
+        );
+        expect(component.find('#donor')).toHaveLength(1);
+    });
+});