Bug 1514018 - Hero Component (Progress) (#4644)

content-src/components/DiscoveryStreamBase/DiscoveryStreamBase.jsx

@@ -17,7 +17,10 @@ export class _DiscoveryStreamBase extends React.PureComponent {
       case "CardGrid":
         return (<CardGrid feed={component.feed} />);
       case "Hero":
-        return (<Hero feed={component.feed} />);
+        return (<Hero
+          feed={component.feed}
+          style={component.properties.style}
+          items={component.properties.items} />);
       case "HorizontalRule":
         return (<HorizontalRule />);
       case "List":

content-src/components/DiscoveryStreamBase/_DiscoveryStreamBase.scss

@@ -2,7 +2,7 @@
   $columns: 12;
   display: grid;
   grid-template-columns: repeat($columns, 1fr);
-  grid-column-gap: 10px;
+  grid-column-gap: 48px;
   grid-row-gap: 10px;
 
   @while $columns > 0 {

content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+export class DSCard extends React.PureComponent {
+  render() {
+    return (
+      <div className="ds-card">
+        <img src={this.props.image_src} />
+        <div className="meta">
+          <header>{this.props.title}</header>
+          <p>{this.props.excerpt}</p>
+          <p>{this.props.source}</p>
+        </div>
+      </div>
+    );
+  }
+}

content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss

@@ -0,0 +1,24 @@
+.ds-card {
+  img {
+    width: 100%;
+    border: 0.5px solid $black-10;
+    box-sizing: border-box;
+    border-radius: 4px;
+  }
+
+  .meta {
+    padding: 16px;
+  }
+
+  header {
+    line-height: 24px;
+    font-size: 17px;
+    color: $grey-90;
+  }
+
+  p {
+    font-size: 13px;
+    line-height: 20px;
+    color: $grey-50;
+  }
+}

content-src/components/DiscoveryStreamComponents/Hero/Hero.jsx

@@ -1,15 +1,51 @@
 import {connect} from "react-redux";
+import {DSCard} from "../DSCard/DSCard.jsx";
 import React from "react";
 
 export class _Hero extends React.PureComponent {
   render() {
-    // const feed = this.props.DiscoveryStream.feeds[this.props.feed.url];
+    const feed = this.props.DiscoveryStream.feeds[this.props.feed.url];
+
+    // Handle a render before feed has been fetched by displaying nothing
+    if (!feed) {
+      return (
+        <div />
+      );
+    }
+
+    let [heroRec, ...otherRecs] = feed.data.recommendations;
+
+    // TODO: Let this count be determined by the endpoint
+    let cards = otherRecs.slice(1, 5).map((rec, index) => (
+      <DSCard
+        key={`dscard-${index}`}
+        image_src={rec.image_src}
+        title={rec.title}
+        excerpt={rec.excerpt}
+        source="TODO: SOURCE" />
+    ));
+
     return (
-      <div>
-        Hero
+      <div className={`ds-hero ds-hero-${this.props.style}`}>
+        <div className="wrapper">
+          <img src={heroRec.image_src} />
+          <div className="meta">
+            <header>{heroRec.title}</header>
+            <p>{heroRec.excerpt}</p>
+            <p>TODO: SOURCE</p>
+          </div>
+        </div>
+        <div className="cards">
+          { cards }
+        </div>
       </div>
     );
   }
 }
 
+_Hero.defaultProps = {
+  style: `border`,
+  items: 1, // Number of stories to display
+};
+
 export const Hero = connect(state => ({DiscoveryStream: state.DiscoveryStream}))(_Hero);

content-src/components/DiscoveryStreamComponents/Hero/_Hero.scss

@@ -0,0 +1,107 @@
+.ds-hero {
+  // "1/3 width layout" (aka "Mobile First")
+  .wrapper {
+    img {
+      width: 100%;
+      height: auto;
+    }
+
+    .meta {
+      header {
+        font-size: 22px;
+      }
+
+      p {
+        font-size: 13px;
+      }
+    }
+  }
+
+  // "2/3 width layout"
+  .column-5 &,
+  .column-6 &,
+  .column-7 &,
+  .column-8 & {
+    .wrapper {
+      display: flex;
+      align-items: flex-start;
+
+      img {
+        width: 50%;
+        height: auto;
+      }
+
+      .meta {
+        width: 50%;
+      }
+    }
+
+
+    .cards {
+      display: flex;
+      flex-wrap: wrap;
+
+      .ds-card {
+        width: 50%;
+        padding: 12px;
+
+        &:nth-child(odd) {
+          padding: 12px 12px 12px 0;
+        }
+
+        &:nth-child(even) {
+          padding: 12px 0 12px 12px;
+        }
+      }
+    }
+  }
+
+  // "Full width layout"
+  .column-9 &,
+  .column-10 &,
+  .column-11 &,
+  .column-12 & {
+    .wrapper {
+      display: flex;
+      align-items: flex-start;
+
+      img {
+        width: 67%;
+      }
+
+      .meta {
+        width: 33%;
+        padding: 24px;
+
+        header {
+          font-size: 22px;
+        }
+
+        p {
+          font-size: 15px;
+        }
+      }
+    }
+
+    .cards {
+      display: flex;
+
+      .ds-card {
+        width: 25%;
+        padding: 12px;
+
+        .meta {
+          padding: 0;
+        }
+
+        &:first-child {
+          padding: 12px 12px 12px 0;
+        }
+
+        &:last-child {
+          padding: 12px 0 12px 12px;
+        }
+      }
+    }
+  }
+}

content-src/styles/_activity-stream.scss

@@ -152,6 +152,7 @@ input {
 @import '../components/DiscoveryStreamComponents/List/List';
 @import '../components/DiscoveryStreamComponents/SectionTitle/SectionTitle';
 @import '../components/DiscoveryStreamComponents/TopSites/TopSites';
+@import '../components/DiscoveryStreamComponents/DSCard/DSCard';
 
 // AS Router
 @import '../asrouter/components/Button/Button';