Merge branch 'feature/gh-981' into release/hoc-nov-21

* feature/gh-981:
  Add hoc banner
  Move padding to splash element
  trello-ize title banner h1,p styling

# Conflicts:
#	src/components/title-banner/title-banner.scss
#	src/views/hoc/hoc.jsx

src/components/informationpage/informationpage.jsx

@@ -23,7 +23,9 @@ var InformationPage = React.createClass({
             <div className="information-page">
                 <TitleBanner className="masthead">
                     <div className="inner">
-                        <h1>{this.props.title}</h1>
+                        <h1 className="title-banner-h1">
+                            {this.props.title}
+                        </h1>
                     </div>
                 </TitleBanner>
                 <div className={classes}>

src/components/teacher-banner/teacher-banner.jsx

@@ -39,7 +39,10 @@ var TeacherBanner = React.createClass({
                                     {this.props.messages['teacherbanner.greeting']},{' '}
                                     {this.props.session.session.user.username}
                                 </h3>,
-                                <p key="subgreeting">
+                                <p
+                                    key="subgreeting"
+                                    className="title-banner-p"
+                                >
                                     {this.props.messages['teacherbanner.subgreeting']}
                                 </p>
                             ] : []

src/components/teacher-banner/teacher-banner.scss

@@ -7,7 +7,7 @@
 
     &.title-banner {
         transition: none;
-        margin-bottom: 20px;
+        margin-bottom: 0;
         text-align: left;
 
         h3,

src/components/title-banner/title-banner.scss

@@ -9,21 +9,21 @@
     background-size: cover;
     padding: 20px 0;
     width: 100%;
-
-    h1,
-    p {
-        margin: 0 auto;
-        padding: 5px 0;
-        text-align: center;
-        color: $type-white;
-    }
-
-    p {
-        max-width: 500px;
-    }
-
-    // On windows strong gets reset to font-weight 500, so make sure to override for banners
-    strong {
-        font-weight: 700;
-    }
+}
+
+.title-banner-h1, 
+.title-banner-p {
+    margin: 0 auto;
+    padding: 5px 0;
+    text-align: center;
+    color: $type-white;        
+}
+
+.title-banner-p {
+    max-width: 500px;
+}
+
+// On windows strong gets reset to font-weight 500, so make sure to override for banners
+.title-banner-strong {
+    font-weight: 700;  
 }

src/components/ttt-tile/ttt-tile.jsx

@@ -26,7 +26,7 @@ var TTTTile = React.createClass({
                         <div className="ttt-tile-image">
                             <img className="ttt-tile-image-img" src={this.props.thumbUrl} alt="" />
                             <div className="ttt-tile-image-try">
-                                <div className="button mod-ttt-tile-image-try-button">
+                                <div className="button mod-ttt-try-button">
                                     <FormattedMessage id="ttt.tryIt" />
                                 </div>
                             </div>

src/components/ttt-tile/ttt-tile.scss

@@ -54,10 +54,10 @@
     left: 50%;
     transform: translate(-50%, 0);
     text-align: center;
-    color: $ui-white;
+    color: $type-white;
 }
 
-.mod-ttt-tile-image-try-button {
+.mod-ttt-try-button {
     border: 1px solid $ui-white;
     background-color: transparent;
 }

src/views/developers/developers.jsx

@@ -18,8 +18,10 @@ var Developers = React.createClass({
             <div className="developers">
                 <TitleBanner className="masthead">
                     <div className="inner">
-                        <h1><FormattedMessage id='developers.title' /></h1>
-                        <p className="intro">
+                        <h1 className="title-banner-h1">
+                            <FormattedMessage id='developers.title' />
+                        </h1>
+                        <p className="title-banner-p intro">
                             <FormattedHTMLMessage id='developers.intro' />
                         </p>
                     </div>

src/views/explore/explore.jsx

@@ -137,7 +137,7 @@ var Explore = injectIntl(React.createClass({
                 <div className='outer'>
                     <TitleBanner className="masthead">
                         <div className="inner">
-                            <h1>Explore</h1>
+                            <h1 className="title-banner-h1">Explore</h1>
                         </div>
                     </TitleBanner>
                     <Tabs>

src/views/search/search.jsx

@@ -103,7 +103,7 @@ var Search = injectIntl(React.createClass({
                 <div className='outer'>
                         <TitleBanner className="masthead">
                             <div className="inner">
-                                <h1>Search</h1>
+                                <h1 className="title-banner-h1">Search</h1>
                                 <div className="search">
                                     <Form onSubmit={this.onSearchSubmit}>
                                         <Button type="submit" className="btn-search" />

src/views/splash/hoc-banner/hoc-banner.jsx

@@ -0,0 +1,115 @@
+var FormattedMessage = require('react-intl').FormattedMessage;
+var injectIntl = require('react-intl').injectIntl;
+var MediaQuery = require('react-responsive');
+var React = require('react');
+
+var FlexRow = require('../../../components/flex-row/flex-row.jsx');
+var TitleBanner = require('../../../components/title-banner/title-banner.jsx');
+var TTTModal = require('../../../components/modal/ttt/modal.jsx');
+var TTTTile = require('../../../components/ttt-tile/ttt-tile.jsx');
+
+var frameless = require('../../../lib/frameless');
+var tiles = require('../../thingstotry/ttt');
+
+require('../../../components/forms/button.scss');
+require('./hoc-banner.scss');
+
+var HocBanner = injectIntl(React.createClass({
+    getInitialState: function () {
+        return {
+            currentTile: tiles[1],
+            TTTModalOpen: false
+        };
+    },
+    showTTTModal: function (tile) {
+        return this.setState({
+            currentTile: tile,
+            TTTModalOpen: true
+        });
+    },
+    hideTTTModal: function () {
+        return this.setState({TTTModalOpen: false});
+    },
+    renderTTTTiles: function () {
+        var formatMessage = this.props.intl.formatMessage;
+        
+        var tileObjects = {
+            flyTile: {
+                title: formatMessage({id: tiles[1].title}),
+                description: formatMessage({id: tiles[1].description}),
+                tutorialLoc: tiles[1].tutorialLoc,
+                activityLoc: formatMessage({id: tiles[1].activityLoc}),
+                guideLoc: formatMessage({id: tiles[1].guideLoc}),
+                thumbUrl: tiles[1].thumbUrl,
+                bannerUrl: tiles[1].bannerUrl
+            },
+            nameTile: {
+                title: formatMessage({id: tiles[0].title}),
+                description: formatMessage({id: tiles[0].description}),
+                tutorialLoc: tiles[0].tutorialLoc,
+                activityLoc: formatMessage({id: tiles[0].activityLoc}),
+                guideLoc: formatMessage({id: tiles[0].guideLoc}),
+                thumbUrl: tiles[0].thumbUrl,
+                bannerUrl: tiles[0].bannerUrl
+            },
+            musicTile: {
+                title: formatMessage({id: tiles[2].title}),
+                description: formatMessage({id: tiles[2].description}),
+                tutorialLoc: tiles[2].tutorialLoc,
+                activityLoc: formatMessage({id: tiles[2].activityLoc}),
+                guideLoc: formatMessage({id: tiles[2].guideLoc}),
+                thumbUrl: tiles[2].thumbUrl,
+                bannerUrl: tiles[2].bannerUrl
+            }
+        };
+        
+        return [
+            <TTTTile
+                key={1}
+                className="mod-banner"
+                onGuideClick={this.showTTTModal.bind(this, tileObjects.flyTile)}
+                {...tileObjects.flyTile}
+            />,
+            <TTTTile
+                key={0}
+                className="mod-banner"
+                onGuideClick={this.showTTTModal.bind(this, tileObjects.nameTile)}
+                {...tileObjects.nameTile}
+            />,
+            <TTTTile
+                key={2}
+                className="mod-banner"
+                onGuideClick={this.showTTTModal.bind(this, tileObjects.musicTile)}
+                {...tileObjects.musicTile}
+            />
+        ];
+    },
+    render: function () {
+        return (
+            <TitleBanner className="mod-splash-hoc">
+                <div className="hoc-banner inner">
+                    <FlexRow className="hoc-banner-header">
+                        <h1 className="hoc-banner-header-h1">
+                            <FormattedMessage id="hoc-banner.header" />
+                        </h1>
+                        <a href="/go" className="button mod-ttt-try-button">
+                            <FormattedMessage id="hoc-banner.ttt" />
+                        </a>
+                    </FlexRow>
+                    <MediaQuery minWidth={frameless.desktop}>
+                        <FlexRow className="hoc-banner-tiles">
+                            {this.renderTTTTiles()}
+                        </FlexRow>
+                        <TTTModal
+                            isOpen={this.state.TTTModalOpen}
+                            onRequestClose={this.hideTTTModal}
+                            {...this.state.currentTile}
+                        />
+                    </MediaQuery>
+                </div>
+            </TitleBanner>
+        );
+    }
+}));
+
+module.exports = HocBanner;

src/views/splash/hoc-banner/hoc-banner.scss

@@ -0,0 +1,28 @@
+@import "../../../colors";
+
+.title-banner.mod-splash-hoc {
+    background: url("/images/blocks-pattern.png");
+    background-color: $ui-blue;
+    background-repeat: repeat;
+    background-size: 180px 180px;
+}
+
+.hoc-banner-header {
+    justify-content: space-between;
+}
+
+.hoc-banner-header-h1 {
+    margin-bottom: 1.25rem;
+    color: $type-white;
+}
+
+.mod-ttt-try-button:link,
+.mod-ttt-try-button:visited,
+.mod-ttt-try-button:active
+.mod-ttt-try-button:hover {
+    color: $type-white;
+}
+
+.ttt-tile.mod-banner {
+    background-color: $background-color;
+}

src/views/splash/l10n-static.json

@@ -0,0 +1,8 @@
+{
+    "ttt.MakeItFlyActivityLoc": "/pdfs/cards/FlyCards.pdf",
+    "ttt.MakeItFlyGuideLoc": "/pdfs/guides/FlyGuide.pdf",
+    "ttt.AnimateYourNameActivityLoc": "/pdfs/cards/AnimateYourNameCards.pdf",
+    "ttt.AnimateYourNameGuideLoc": "/pdfs/guides/NameGuide.pdf",
+    "ttt.MakeMusicActivityLoc": "/pdfs/cards/MusicCards.pdf",
+    "ttt.MakeMusicGuideLoc": "/pdfs/guides/MusicGuide.pdf"
+}

src/views/splash/l10n.json

@@ -28,6 +28,23 @@
     "teacherbanner.classesButton": "My Classes",
     "teacherbanner.faqButton": "Teacher Account FAQ",
 
+    "hoc-banner.header": "Get Creative with Coding",
+    "hoc-banner.ttt": "See things to try",
+    "ttt.tutorialTitle": "Tutorial",
+    "ttt.tutorialSubtitle": "Find out how to make this project using a step-by-step tutorial in Scratch.",
+    "ttt.activityTitle": "Activity Cards",
+    "ttt.activitySubtitle": "Explore new coding ideas using this set of illustrated cards you can print out.",
+    "ttt.educatorTitle": "Educator Guide",
+    "ttt.educatorSubtitle": "Use this educator guide to plan and lead a one-hour Scratch workshop.",
+    "ttt.tryIt": "Try It",
+    "ttt.download": "Download",
+    "ttt.MakeItFlyTitle": "Make It Fly",
+    "ttt.MakeItFlyDescription": "Animate the Scratch Cat, The Powerpuff Girls, or even a taco!",
+    "ttt.AnimateYourNameTitle": "Animate Your Name",
+    "ttt.AnimateYourNameDescription": "Animate the letters of your name, initials, or favorite word.",
+    "ttt.MakeMusicTitle": "Make Music",
+    "ttt.MakeMusicDescription": "Choose instruments, add sounds, and press keys to play music.",
+
     "welcome.welcomeToScratch": "Welcome to Scratch!",
     "welcome.learn": "Learn how to make a project in Scratch",
     "welcome.tryOut": "Try out starter projects",

src/views/splash/splash.jsx

@@ -14,6 +14,7 @@ var DropdownBanner = require('../../components/dropdown-banner/banner.jsx');
 var Box = require('../../components/box/box.jsx');
 var Button = require('../../components/forms/button.jsx');
 var Carousel = require('../../components/carousel/carousel.jsx');
+var HocBanner = require('./hoc-banner/hoc-banner.jsx');
 var Intro = require('../../components/intro/intro.jsx');
 var IframeModal = require('../../components/modal/iframe/modal.jsx');
 var News = require('../../components/news/news.jsx');
@@ -366,7 +367,8 @@ var Splash = injectIntl(React.createClass({
                 {this.props.permissions.educator ? [
                     <TeacherBanner key="teacherbanner" messages={messages} />
                 ] : []}
-                <div key="inner" className="inner">
+                <HocBanner />
+                <div key="inner" className="inner mod-splash">
                     {this.props.session.status === sessionActions.Status.FETCHED ? (
                         this.props.session.session.user ? [
                             <div key="header" className="splash-header">

src/views/splash/splash.scss

@@ -1,5 +1,13 @@
 @import "../../frameless";
 
+#view {
+    padding: 0;
+}
+
+.inner.mod-splash {
+    margin-top: 20px;
+}
+
 .splash {
     .splash-header {
         display: flex;
@@ -33,10 +41,6 @@
         }
     }
 
-    .teacher-banner {
-        margin-top: -20px;
-    }
-
     .box {
         margin-bottom: 20px;
     }

src/views/teachers/landing/landing.jsx

@@ -19,9 +19,11 @@ var Landing = injectIntl(React.createClass({
             <div className="educators">
                 <TitleBanner className="masthead">
                     <div className="inner">
-                        <h1><FormattedMessage id="teacherlanding.title" /></h1>
+                        <h1 className="title-banner-h1">
+                            <FormattedMessage id="teacherlanding.title" />
+                        </h1>
                         <FlexRow className="masthead-info">
-                            <p className="intro">
+                            <p className="title-banner-p intro">
                                 <FormattedMessage id="teacherlanding.intro" />
                             </p>
                             <div className="ted-talk">

src/views/thingstotry/l10n.json

@@ -1,7 +1,7 @@
 {
     "ttt.placeholder": "Placeholder text",
     "ttt.title": "Things to Try",
-    "ttt.subTitle": "You can get started with Scratch in a variety of ways. Click a picture to try the <strong>Tutorial</strong>. You can also download a set of <strong>Activity Cards</strong> and <strong>Educator Guide</strong> for each theme.",
+    "ttt.subTitle": "You can get started with Scratch in a variety of ways. Click a picture to try the <strong className=\"title-banner-strong\">Tutorial</strong>. You can also download a set of <strong className=\"title-banner-strong\">Activity Cards</strong> and <strong className=\"title-banner-strong\">Educator Guide</strong> for each theme.",
     "tile.tutorial": "Tutorial",
     "tile.guides": "See Cards and Guides",
     "ttt.tutorialTitle": "Tutorial",

src/views/thingstotry/thingstotry.jsx

@@ -61,10 +61,10 @@ var ThingsToTry = injectIntl(React.createClass({
                     <section className="ttt-section">
                         <img className="ttt-banner-image" src="/svgs/ttt/resources.svg" alt=""/>
                     </section>
-                    <h1>
+                    <h1 className="title-banner-h1">
                         <FormattedMessage id="ttt.title" />
                     </h1>
-                    <p className="intro">
+                    <p className="intro title-banner-p">
                         <FormattedHTMLMessage id="ttt.subTitle" />
                     </p>
                 </TitleBanner>