Add introductory panel and remove pop up card

rails/app/assets/stylesheets/components/_components.scss

@@ -10,3 +10,5 @@
 @import 'balloon';
 @import 'introPopup';
 @import 'navigation';
+@import 'button';
+@import 'introductoryPanel';

rails/app/assets/stylesheets/components/button.scss

@@ -0,0 +1,9 @@
+.explore-button{
+  background-color: $green;
+  border-radius: 10px;
+  color: $off-white;
+  cursor: pointer;
+  font-weight: bold;
+  margin: 20px auto;
+  padding: 15px 40px;
+}

rails/app/assets/stylesheets/components/card.scss

@@ -58,7 +58,6 @@ $el-shadow: 0 1px 4px $lighter-gray;
     height: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
   }
 
   .tab {
@@ -99,13 +98,17 @@ $el-shadow: 0 1px 4px $lighter-gray;
   .card--nav {
     display: flex;
     flex-direction: column;
-    justify-content: space-around;
     font-family: sans-serif;
     margin-bottom: 0.75rem;
 
-    &-filter, &-sort {
+    &-filter, &-intro, &-sort {
       font-family: 'OpenSansCondensed';
       color: $default-text;
+      margin: 0.75rem 0;
+    }
+
+    &-usage {
+      margin-bottom: 0.75rem;
     }
 
     .categoryFilter .storiesSort {
@@ -169,6 +172,10 @@ $el-shadow: 0 1px 4px $lighter-gray;
       }
     }
   }
+
+  .terrastory-info {
+    height: 100%;
+  }
 }
 
 // Responsive patches

rails/app/assets/stylesheets/components/introductoryPanel.scss

@@ -0,0 +1,23 @@
+img {
+  width: 32px;
+}
+
+.first-info {
+  margin-bottom: 10px;
+}
+
+.first-img {
+  display: flex;
+  float: left;
+  height: 60px;
+  margin-right: 10px;
+  width: 32px;
+}
+
+.second-img {
+  display: flex;
+  float: left;
+  height: 36px;
+  margin-right: 10px;
+  width: 32px;
+}

rails/app/javascript/components/App.jsx

@@ -2,7 +2,6 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import Map from "./Map";
 import Card from "./Card";
-import IntroPopup from "./IntroPopup";
 import FILTER_CATEGORIES from "../constants/FilterConstants";
 import bbox from "@turf/bbox";
 
@@ -39,7 +38,9 @@ class App extends Component {
     ne_boundary_lat: PropTypes.string,
     ne_boundary_long: PropTypes.string,
     pitch: PropTypes.number,
-    bearing: PropTypes.string
+    bearing: PropTypes.string,
+    number_one_path: PropTypes.string,
+    number_two_path: PropTypes.string
   };
 
   componentDidMount() {
@@ -314,8 +315,9 @@ class App extends Component {
           handleFilterCategoryChange={this.handleFilterCategoryChange}
           handleFilterItemChange={this.handleFilterItemChange}
           itemOptions={this.state.itemOptions}
+          numberOnePath={this.props.number_one_path}
+          numberTwoPath={this.props.number_two_path}
         />
-        <IntroPopup />
       </div>
     );
   }

rails/app/javascript/components/Button.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import PropTypes from 'prop-types';
+
+const Button = props => {
+  const { buttonText, handleClick, buttonType } = props;
+
+  return(
+    <button type="button" className={buttonType} onClick={handleClick}>
+      {buttonText}
+    </button>
+  )
+}
+
+Button.propTypes = {
+  buttonText: PropTypes.string.isRequired,
+  handleClick: PropTypes.func.isRequired,
+  buttonType: PropTypes.string.isRequired
+};
+
+export default Button;

rails/app/javascript/components/Card.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import StoryList from "./StoryList";
 
 class Card extends Component {
-
   constructor(props) {
     super(props);
     this.state = {
@@ -26,7 +25,9 @@ class Card extends Component {
     filterItem: PropTypes.string,
     handleFilterCategoryChange: PropTypes.func,
     handleFilterItemChange: PropTypes.func,
-    itemOptions: PropTypes.array
+    itemOptions: PropTypes.array,
+    numberOnePath: PropTypes.string,
+    numberTwoPath: PropTypes.string
   };
 
   static defaultProps = {
@@ -92,6 +93,8 @@ class Card extends Component {
               handleFilterCategoryChange={this.props.handleFilterCategoryChange}
               handleFilterItemChange={this.props.handleFilterItemChange}
               itemOptions={this.props.itemOptions}
+              numberOnePath={this.props.numberOnePath}
+              numberTwoPath={this.props.numberTwoPath}
             />
 
             <div className="card--tasks">

rails/app/javascript/components/IntroductoryPanel.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import PropTypes from 'prop-types';
+
+const IntroductoryPanel = (props) => {
+  const { numberOnePath, numberTwoPath } = props;
+
+  return (
+    <React.Fragment>
+      <span className="card--nav-intro">{I18n.t("intro.question")}</span>
+      <p>{I18n.t("intro.explanation")}</p>
+      <span className="card--nav-intro">{I18n.t("usage.question")}</span>
+      <div className="card--nav-usage">
+        <div className="first-info">
+          <div className="first-img">
+            <img src={numberOnePath} alt="First" />
+          </div>
+          <p>{I18n.t("usage.category_explanation")}</p>
+        </div>
+        <div>
+          <div className="second-img">
+            <img src={numberTwoPath} alt="Second" />
+          </div>  
+          <p>{I18n.t("usage.option_explanation")}</p>
+        </div>
+      </div>
+      <p>{I18n.t("usage.explore_explanation")}</p>
+    </React.Fragment>
+  )
+}
+
+IntroductoryPanel.propTypes = {
+  numberOnePath: PropTypes.string,
+  numberTwoPath: PropTypes.string
+};
+
+export default IntroductoryPanel;

rails/app/javascript/components/StoryList.jsx

@@ -4,8 +4,17 @@ import Story from "./Story";
 import Filter from "./Filter";
 import Sort from "./Sort";
 import ReactList from 'react-list';
+import IntroductoryPanel from "./IntroductoryPanel";
+import Button from "./Button";
 
 class StoryList extends Component {
+  constructor() {
+    super();
+    this.state = {
+      showStories: false
+    };
+  }
+
   static propTypes = {
     stories: PropTypes.array,
     handleStoriesChanged: PropTypes.func,
@@ -19,15 +28,26 @@ class StoryList extends Component {
     filterItem: PropTypes.string,
     handleFilterCategoryChange: PropTypes.func,
     handleFilterItemChange: PropTypes.func,
-    itemOptions: PropTypes.array
+    itemOptions: PropTypes.array,
+    numberOnePath: PropTypes.string,
+    numberTwoPath: PropTypes.string
   };
 
+  handleClickExplore = () => {
+    this.setState(prevState => ({
+      showStories: !prevState.showStories
+    }));
+  }
+
   handleClickStory = (story, index) => {
     this.props.onStoryClick(story);
   }
 
   handleFilterItemChange = (item) => {
     this.props.handleFilterItemChange(item);
+    this.setState(() => ({
+      showStories: true
+    }));
     this._list.scrollTo(0);
   }
 
@@ -73,19 +93,38 @@ class StoryList extends Component {
             handleFilterItemChange={this.handleFilterItemChange}
             itemOptions={this.props.itemOptions}
           />
-          <Sort
-            stories={this.props.stories}
-            handleStoriesChanged={this.props.handleStoriesChanged}
-          />
-        </div>
-        <div className="stories">
-          <ReactList
-            ref={list => this._list = list }
-            itemRenderer={this.renderStory}
-            length={this.props.stories ? this.props.stories.length : 0}
-            type='variable'
-          />
         </div>
+          {!this.state.showStories && window.innerWidth > 600
+            ?
+          <div className="card--nav terrastory-info">
+            <IntroductoryPanel 
+              numberOnePath={this.props.numberOnePath}
+              numberTwoPath={this.props.numberTwoPath}
+            />
+            <Button 
+              buttonType='explore-button' 
+              handleClick={this.handleClickExplore} 
+              buttonText='EXPLORE'
+            />
+          </div>
+            :
+            <React.Fragment>
+              <div className="card--nav">
+                <Sort
+                  stories={this.props.stories}
+                  handleStoriesChanged={this.props.handleStoriesChanged}
+                />
+              </div>
+              <div className="stories">
+                <ReactList
+                  ref={list => this._list = list }
+                  itemRenderer={this.renderStory}
+                  length={this.props.stories ? this.props.stories.length : 0}
+                  type='variable'
+                />
+              </div>
+            </React.Fragment>
+        }
       </React.Fragment>
     );
   }

rails/app/views/home/_home.json.jbuilder

@@ -35,3 +35,5 @@ json.zoom @theme.zoom.to_f
 json.pitch @theme.pitch.to_f
 json.bearing @theme.bearing
 json.marker_image_url image_url("marker1.png")
+json.number_one_path image_path("number1.svg")
+json.number_two_path image_path("number2.svg")