no bug - Stubbing out Discovery Stream components. (#4630)

* no bug - Stubbing out Discovery Stream components.

* Updated to section title

* Redux topsites and container classname

* Endpoint stuff.

* Remove props for now

content-src/components/DiscoveryStreamBase/DiscoveryStreamBase.jsx

@@ -1,15 +1,41 @@
+import {CardGrid} from "content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid";
 import {connect} from "react-redux";
+import {Hero} from "content-src/components/DiscoveryStreamComponents/Hero/Hero";
+import {HorizontalRule} from "content-src/components/DiscoveryStreamComponents/HorizontalRule/HorizontalRule";
+import {List} from "content-src/components/DiscoveryStreamComponents/List/List";
 import React from "react";
+import {SectionTitle} from "content-src/components/DiscoveryStreamComponents/SectionTitle/SectionTitle";
+import {TopSites} from "content-src/components/DiscoveryStreamComponents/TopSites/TopSites";
 
 export class _DiscoveryStreamBase extends React.PureComponent {
+  renderComponent(component) {
+    switch (component.type) {
+      case "TopSites":
+        return (<TopSites />);
+      case "SectionTitle":
+        return (<SectionTitle />);
+      case "CardGrid":
+        return (<CardGrid />);
+      case "Hero":
+        return (<Hero />);
+      case "HorizontalRule":
+        return (<HorizontalRule />);
+      case "List":
+        return (<List />);
+      default:
+        return (<div>{component.type}</div>);
+    }
+  }
+
   render() {
+    const {layout} = this.props.DiscoveryStream;
     return (
       <div className="discovery-stream layout">
-        {this.props.DiscoveryStream.layout.map((section, sectionIndex) => (
-          <div key={`section-${sectionIndex}`} className={`column column-${section.width}`}>
-            {section.components.map((component, componentIndex) => (
+        {layout.map((row, rowIndex) => (
+          <div key={`row-${rowIndex}`} className={`column column-${row.width}`}>
+            {row.components.map((component, componentIndex) => (
               <div key={`component-${componentIndex}`}>
-                <div>{component.type}</div>
+                {this.renderComponent(component)}
               </div>
             ))}
           </div>

content-src/components/DiscoveryStreamBase/_DiscoveryStreamBase.scss

@@ -5,10 +5,6 @@
   grid-column-gap: 10px;
   grid-row-gap: 10px;
 
-  .column {
-    border: 1px solid $black;
-  }
-
   @while $columns > 0 {
     .column-#{$columns} {
       grid-column-start: auto;

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

@@ -0,0 +1,11 @@
+import React from "react";
+
+export class CardGrid extends React.PureComponent {
+  render() {
+    return (
+      <div>
+        Card Grid
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,11 @@
+import React from "react";
+
+export class Hero extends React.PureComponent {
+  render() {
+    return (
+      <div>
+        Hero
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,9 @@
+import React from "react";
+
+export class HorizontalRule extends React.PureComponent {
+  render() {
+    return (
+      <hr />
+    );
+  }
+}

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

@@ -0,0 +1,11 @@
+import React from "react";
+
+export class List extends React.PureComponent {
+  render() {
+    return (
+      <div>
+        List
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,22 @@
+import React from "react";
+
+export class Topic extends React.PureComponent {
+  render() {
+    const {url, name} = this.props;
+    return (<li><a key={name} href={url}>{name}</a></li>);
+  }
+}
+
+export class SectionTitle extends React.PureComponent {
+  render() {
+    const {topics} = this.props;
+    return (
+      <span className="section-title">
+        <ul>
+          {topics && topics.map(t => <Topic key={t.name} url={t.url} name={t.name} />)}
+          <li><a className="ds-more-recommendations">More Recommendations</a></li>
+        </ul>
+      </span>
+    );
+  }
+}

content-src/components/DiscoveryStreamComponents/SectionTitle/_SectionTitle.scss

@@ -0,0 +1,33 @@
+.section-title {
+  text-align: center;
+  width: 100%;
+
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+
+  ul li {
+    display: inline-block;
+
+    &::after {
+      content: '•';
+      padding: 8px;
+    }
+
+    &:last-child::after {
+      content: none;
+    }
+  }
+
+  .ds-more-recommendations::after {
+    background: url('../data/content/assets/topic-show-more-12.svg') no-repeat center center;
+    content: '';
+    -moz-context-properties: fill;
+    display: inline-block;
+    height: 16px;
+    margin-inline-start: 5px;
+    vertical-align: top;
+    width: 12px;
+  }
+}

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

@@ -0,0 +1,14 @@
+import {connect} from "react-redux";
+import React from "react";
+
+export class _TopSites extends React.PureComponent {
+  render() {
+    return (
+      <div className="ds-topsites">
+        Top Sites
+      </div>
+    );
+  }
+}
+
+export const TopSites = connect(state => ({TopSites: state.TopSites}))(_TopSites);

content-src/styles/_activity-stream.scss

@@ -145,6 +145,14 @@ input {
 @import '../components/MoreRecommendations/MoreRecommendations';
 @import '../components/DiscoveryStreamBase/DiscoveryStreamBase';
 
+// Discovery Stream Components
+@import '../components/DiscoveryStreamComponents/CardGrid/CardGrid';
+@import '../components/DiscoveryStreamComponents/Hero/Hero';
+@import '../components/DiscoveryStreamComponents/HorizontalRule/HorizontalRule';
+@import '../components/DiscoveryStreamComponents/List/List';
+@import '../components/DiscoveryStreamComponents/SectionTitle/SectionTitle';
+@import '../components/DiscoveryStreamComponents/TopSites/TopSites';
+
 // AS Router
 @import '../asrouter/components/Button/Button';
 @import '../asrouter/components/SnippetBase/SnippetBase';

lib/ActivityStream.jsm

@@ -219,8 +219,8 @@ const PREFS_CONFIG = new Map([
     title: "Configuration for the new pocket new tab",
     value: JSON.stringify({
       enabled: false,
-      // Set this to https://gist.githubusercontent.com/ScottDowne/164995d9535b4203846048bdee29d169/raw/0cf538411e6ee898eb116208d70842c62c8d52f1/spoc.json to test
-      layout_endpoint: "",
+      // This is currently an exmple layout used for dev purposes.
+      layout_endpoint: "https://getpocket.com/v3/newtab/layout?version=1&consumer_key=40249-e88c401e1b1f2242d9e441c4&layout_variant=dev-test-1",
     }),
   }],
 ]);