Fixes bug 1514025 - Create a top sites section component for Activity Stream experiment functionality (#4645)

content-src/components/DiscoveryStreamBase/DiscoveryStreamBase.jsx

@@ -30,9 +30,9 @@ export class _DiscoveryStreamBase extends React.PureComponent {
   render() {
     const {layout} = this.props.DiscoveryStream;
     return (
-      <div className="discovery-stream layout">
+      <div className="discovery-stream ds-layout">
         {layout.map((row, rowIndex) => (
-          <div key={`row-${rowIndex}`} className={`column column-${row.width}`}>
+          <div key={`row-${rowIndex}`} className={`ds-column ds-column-${row.width}`}>
             {row.components.map((component, componentIndex) => (
               <div key={`component-${componentIndex}`}>
                 {this.renderComponent(component)}

content-src/components/DiscoveryStreamBase/_DiscoveryStreamBase.scss

@@ -1,4 +1,4 @@
-.discovery-stream.layout {
+.discovery-stream.ds-layout {
   $columns: 12;
   display: grid;
   grid-template-columns: repeat($columns, 1fr);
@@ -6,11 +6,16 @@
   grid-row-gap: 10px;
 
   @while $columns > 0 {
-    .column-#{$columns} {
+    .ds-column-#{$columns} {
       grid-column-start: auto;
       grid-column-end: span $columns;
     }
 
     $columns: $columns - 1;
   }
+
+  .ds-column {
+    display: grid;
+    grid-row-gap: 10px;
+  }
 }

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

@@ -11,7 +11,7 @@ export class SectionTitle extends React.PureComponent {
   render() {
     const {topics} = this.props;
     return (
-      <span className="section-title">
+      <span className="ds-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>

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

@@ -1,4 +1,4 @@
-.section-title {
+.ds-section-title {
   ul {
     margin: 0;
     padding: 0;

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

@@ -1,11 +1,12 @@
 import {connect} from "react-redux";
+import {TopSites as OldTopSites} from "content-src/components/TopSites/TopSites";
 import React from "react";
 
 export class _TopSites extends React.PureComponent {
   render() {
     return (
-      <div className="ds-topsites">
-        Top Sites
+      <div className="ds-top-sites">
+        <OldTopSites />
       </div>
     );
   }

content-src/components/DiscoveryStreamComponents/TopSites/_TopSites.scss

@@ -0,0 +1,14 @@
+// ds topsites wraps the original topsites, with a few css changes.
+.ds-top-sites {
+
+  // This is the override layer.
+  .top-sites {
+    // Slightly different alignment with the other DS components than AS has.
+    padding: 0;
+
+    // We hide this and don't support it in ds.
+    .section-top-bar {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+import {TopSites as OldTopSites} from "content-src/components/TopSites/TopSites";
+import React from "react";
+import {shallow} from "enzyme";
+import {_TopSites as TopSites} from "content-src/components/DiscoveryStreamComponents/TopSites/TopSites";
+
+describe("Discovery Stream <TopSites>", () => {
+  it("should return a wrapper around old TopSites", () => {
+    const wrapper = shallow(<TopSites />);
+
+    const oldTopSites = wrapper.find(OldTopSites);
+    const dsTopSitesWrapper = wrapper.find(".ds-top-sites");
+
+    assert.ok(wrapper.exists());
+    assert.lengthOf(oldTopSites, 1);
+    assert.lengthOf(dsTopSitesWrapper, 1);
+  });
+});