Bug 1524322 – Add Message component (#4755)

content-src/components/DiscoveryStreamBase/DiscoveryStreamBase.jsx

@@ -1,5 +1,6 @@
 import {CardGrid} from "content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid";
 import {connect} from "react-redux";
+import {DSMessage} from "content-src/components/DiscoveryStreamComponents/DSMessage/DSMessage";
 import {Hero} from "content-src/components/DiscoveryStreamComponents/Hero/Hero";
 import {HorizontalRule} from "content-src/components/DiscoveryStreamComponents/HorizontalRule/HorizontalRule";
 import {ImpressionStats} from "content-src/components/DiscoveryStreamImpressionStats/ImpressionStats";
@@ -127,6 +128,15 @@ export class _DiscoveryStreamBase extends React.PureComponent {
     switch (component.type) {
       case "TopSites":
         return (<TopSites header={component.header} />);
+      case "Message":
+        return (
+          <DSMessage
+            title={component.header && component.header.title}
+            subtitle={component.header && component.header.subtitle}
+            link_text={component.header && component.header.link_text}
+            link_url={component.header && component.header.link_url}
+            icon={component.header && component.header.icon} />
+        );
       case "SectionTitle":
         return (
           <SectionTitle

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

@@ -0,0 +1,26 @@
+import React from "react";
+
+export class DSMessage extends React.PureComponent {
+  render() {
+    let hasSubtitleAndOrLink = this.props.link_text && this.props.link_url;
+    hasSubtitleAndOrLink = hasSubtitleAndOrLink || this.props.subtitle;
+
+    return (
+      <div className="ds-message">
+        {this.props.title && (
+          <header className="title">
+            {this.props.icon && (<img src={this.props.icon} />)}
+            <span>{this.props.title}</span>
+          </header>
+        )}
+        { hasSubtitleAndOrLink && (
+          <p className="subtitle">
+            {this.props.subtitle && (<span>{this.props.subtitle}</span>)}
+            {this.props.link_text && this.props.link_url && (<a href={this.props.link_url}>{this.props.link_text}</a>)}
+          </p>
+        )}
+        <hr className="ds-hr" />
+      </div>
+    );
+  }
+}

content-src/components/DiscoveryStreamComponents/DSMessage/_DSMessage.scss

@@ -0,0 +1,41 @@
+.ds-message {
+  margin: 8px 0 0;
+
+  .title {
+    display: flex;
+    align-items: center;
+
+    img {
+      width: 16px;
+      height: 16px;
+      margin: 0 6px 0 0;
+    }
+
+    span {
+      line-height: 24px;
+      font-size: 17px;
+      color: $grey-90;
+      font-weight: 600;
+    }
+  }
+
+  .subtitle {
+    line-height: 20px;
+    font-size: 14px;
+    color: $grey-50;
+    margin: 0;
+
+    span::after {
+      content: ' ';
+    }
+
+    a:hover,
+    a:focus {
+      text-decoration: underline;
+    }
+  }
+
+  .ds-hr {
+    margin: 16px 0 8px;
+  }
+}

content-src/styles/_activity-stream.scss

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