Fixes Bug 1514022 – Card Grid component (WIP) (#4661)

content-src/components/DiscoveryStreamBase/DiscoveryStreamBase.jsx

@@ -26,7 +26,11 @@ export class _DiscoveryStreamBase extends React.PureComponent {
       case "SectionTitle":
         return (<SectionTitle />);
       case "CardGrid":
-        return (<CardGrid feed={component.feed} />);
+        return (<CardGrid
+          title={component.header.title}
+          feed={component.feed}
+          style={component.properties.style}
+          items={component.properties.items} />);
       case "Hero":
         const feed = this.props.DiscoveryStream.feeds[component.feed.url];
         const items = Math.min(component.properties.items, MAX_ROWS_HERO);

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

@@ -1,15 +1,39 @@
 import {connect} from "react-redux";
+import {DSCard} from "../DSCard/DSCard.jsx";
 import React from "react";
 
 export class _CardGrid 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 cards = feed.data.recommendations.slice(0, this.props.items).map((rec, index) => (
+      <DSCard
+        key={`dscard-${index}`}
+        image_src={rec.image_src}
+        title={rec.title}
+        excerpt={rec.title}
+        url={rec.url}
+        source={`TODO: SOURCE`} />
+    ));
+
     return (
-      <div>
-        Card Grid
+      <div className="ds-card-grid">
+        {cards}
       </div>
     );
   }
 }
 
+_CardGrid.defaultProps = {
+  style: `border`,
+  items: 4, // Number of stories to display
+};
+
 export const CardGrid = connect(state => ({DiscoveryStream: state.DiscoveryStream}))(_CardGrid);

content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss

@@ -0,0 +1,11 @@
+.ds-card-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 24px;
+
+  .ds-card {
+    background: $white;
+    box-shadow: 0 1px 4px $grey-10-10;
+    border-radius: 4px;
+  }
+}

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

@@ -8,9 +8,9 @@ export class DSCard extends React.PureComponent {
           <div className="img" style={{backgroundImage: `url(${this.props.image_src}`}} />
         </div>
         <div className="meta">
-          <header>{this.props.title}</header>
-          <p>{this.props.excerpt}</p>
-          <p>{this.props.source}</p>
+          <header className="title">{this.props.title}</header>
+          <p className="excerpt">{this.props.excerpt}</p>
+          <p className="source">{this.props.source}</p>
         </div>
       </a>
     );

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

@@ -1,3 +1,9 @@
+// Type sizes
+$header-font-size: 17;
+$header-line-height: 24;
+$excerpt-font-size: 13;
+$excerpt-line-height: 20;
+
 .ds-card {
   border: 5px solid transparent;
 
@@ -11,7 +17,6 @@
     width: 100%;
     border: 0.5px solid $black-10;
     border-radius: 4px;
-    margin: 0 0 12px;
   }
 
   .img {
@@ -23,11 +28,21 @@
 
   .meta {
     padding: 16px;
+
+    .title {
+      // show only 2 lines of copy
+      @include limit-visibile-lines(2, $header-line-height, $header-font-size);
+    }
+
+    .excerpt {
+      // show only 4 lines of copy
+      @include limit-visibile-lines(4, $excerpt-line-height, $excerpt-font-size);
+    }
   }
 
   header {
-    line-height: 24px;
-    font-size: 17px;
+    line-height: $header-line-height * 1px;
+    font-size: $header-font-size * 1px;
     color: $grey-90;
 
     &:hover {
@@ -40,8 +55,8 @@
   }
 
   p {
-    font-size: 13px;
-    line-height: 20px;
+    font-size: $excerpt-font-size * 1px;
+    line-height: $excerpt-line-height * 1px;
     color: $grey-50;
     margin: 8px 0;
   }

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

@@ -26,6 +26,10 @@
     }
   }
 
+  .img-wrapper {
+    margin: 0 0 12px;
+  }
+
   // "1/3 width layout" (aka "Mobile First")
   .wrapper {
     color: $grey-50;

content-src/styles/_activity-stream.scss

@@ -2,6 +2,7 @@
 @import './variables';
 @import './theme';
 @import './icons';
+@import './mixins';
 
 html {
   height: 100%;

content-src/styles/_mixins.scss

@@ -0,0 +1,5 @@
+// Note: lineHeight and fontSize should be unitless but can be derived from pixel values
+@mixin limit-visibile-lines($line-count, $line-height, $font-size) {
+  max-height: 1em * $line-count * $line-height / $font-size;
+  overflow: hidden;
+}