From f6790e013a290ace75b7e0988769a9df168ffe46 Mon Sep 17 00:00:00 2001
From: gavin lazar suntop <gavin@gsuntop.com>
Date: Tue, 5 Feb 2019 13:42:32 -0500
Subject: [PATCH] =?UTF-8?q?Bug=201524322=20=E2=80=93=20Add=20Message=20com?=
 =?UTF-8?q?ponent=20(#4755)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DiscoveryStreamBase.jsx                   | 10 +++++
 .../DSMessage/DSMessage.jsx                   | 26 ++++++++++++
 .../DSMessage/_DSMessage.scss                 | 41 +++++++++++++++++++
 content-src/styles/_activity-stream.scss      |  1 +
 4 files changed, 78 insertions(+)
 create mode 100644 content-src/components/DiscoveryStreamComponents/DSMessage/DSMessage.jsx
 create mode 100644 content-src/components/DiscoveryStreamComponents/DSMessage/_DSMessage.scss

diff --git a/content-src/components/DiscoveryStreamBase/DiscoveryStreamBase.jsx b/content-src/components/DiscoveryStreamBase/DiscoveryStreamBase.jsx
index bf38f5f01..c49514b1e 100644
--- a/content-src/components/DiscoveryStreamBase/DiscoveryStreamBase.jsx
+++ b/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
diff --git a/content-src/components/DiscoveryStreamComponents/DSMessage/DSMessage.jsx b/content-src/components/DiscoveryStreamComponents/DSMessage/DSMessage.jsx
new file mode 100644
index 000000000..1e5af132b
--- /dev/null
+++ b/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>
+    );
+  }
+}
diff --git a/content-src/components/DiscoveryStreamComponents/DSMessage/_DSMessage.scss b/content-src/components/DiscoveryStreamComponents/DSMessage/_DSMessage.scss
new file mode 100644
index 000000000..ff7a25744
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/content-src/styles/_activity-stream.scss b/content-src/styles/_activity-stream.scss
index 667f01f88..7134d317b 100644
--- a/content-src/styles/_activity-stream.scss
+++ b/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';