From b89fe1a985d5e9873f59361da7168271c9ffc616 Mon Sep 17 00:00:00 2001
From: picklesrus <picklesrus@users.noreply.github.com>
Date: Wed, 4 Dec 2019 16:28:23 -0500
Subject: [PATCH] Add recognition text and links to the bottom of the page.
 Adds a prop to the Page component so each page can say whether or not it
 wants them to appear.

---
 src/components/page/www/donor-recognition.jsx | 36 ++++++++++++++++++
 .../page/www/donor-recognition.scss           | 38 +++++++++++++++++++
 src/components/page/www/page.jsx              | 12 +++++-
 src/l10n.json                                 |  3 ++
 src/views/credits/credits.jsx                 |  5 ++-
 src/views/splash/splash.jsx                   |  6 ++-
 test/unit/components/page.test.jsx            | 21 ++++++++++
 7 files changed, 117 insertions(+), 4 deletions(-)
 create mode 100644 src/components/page/www/donor-recognition.jsx
 create mode 100644 src/components/page/www/donor-recognition.scss
 create mode 100644 test/unit/components/page.test.jsx

diff --git a/src/components/page/www/donor-recognition.jsx b/src/components/page/www/donor-recognition.jsx
new file mode 100644
index 000000000..033e8c3fe
--- /dev/null
+++ b/src/components/page/www/donor-recognition.jsx
@@ -0,0 +1,36 @@
+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);
diff --git a/src/components/page/www/donor-recognition.scss b/src/components/page/www/donor-recognition.scss
new file mode 100644
index 000000000..99e5bb87b
--- /dev/null
+++ b/src/components/page/www/donor-recognition.scss
@@ -0,0 +1,38 @@
+@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;
+        }
+    }
+}
diff --git a/src/components/page/www/page.jsx b/src/components/page/www/page.jsx
index 77f3712ba..23676a325 100644
--- a/src/components/page/www/page.jsx
+++ b/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;
diff --git a/src/l10n.json b/src/l10n.json
index 840295d2c..a1a17c168 100644
--- a/src/l10n.json
+++ b/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",
 
diff --git a/src/views/credits/credits.jsx b/src/views/credits/credits.jsx
index 5aa272cbe..05d7abe08 100644
--- a/src/views/credits/credits.jsx
+++ b/src/views/credits/credits.jsx
@@ -46,7 +46,10 @@ const Credits = () => (
                     ))}
                 </ul>
             </div>
-            <div className="supporters">
+            <div
+                className="supporters"
+                id="donors"
+            >
                 <div className="mid-header">
                     <h2>
                         <FormattedMessage id="credits.currentSponsors" />
diff --git a/src/views/splash/splash.jsx b/src/views/splash/splash.jsx
index 8910c0ce2..2c92600b6 100644
--- a/src/views/splash/splash.jsx
+++ b/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}
 );
diff --git a/test/unit/components/page.test.jsx b/test/unit/components/page.test.jsx
new file mode 100644
index 000000000..1fecbf52e
--- /dev/null
+++ b/test/unit/components/page.test.jsx
@@ -0,0 +1,21 @@
+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);
+    });
+});