1 files changed, 52 insertions, 0 deletions
diff --git a/browser/components/newtab/content-src/asrouter/templates/OnboardingMessage/OnboardingMessage.jsx b/browser/components/newtab/content-src/asrouter/templates/OnboardingMessage/OnboardingMessage.jsx
new file mode 100644
index 0000000000..ce1a840247
--- /dev/null
+++ b/browser/components/newtab/content-src/asrouter/templates/OnboardingMessage/OnboardingMessage.jsx
@@ -0,0 +1,52 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import React from "react";
+import { Localized } from "../../../aboutwelcome/components/MSLocalized";
+
+export class OnboardingCard extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.onClick = this.onClick.bind(this);
+  }
+
+  onClick() {
+    const { props } = this;
+    const ping = {
+      event: "CLICK_BUTTON",
+      message_id: props.id,
+      id: props.UISurface,
+    };
+    props.sendUserActionTelemetry(ping);
+    props.onAction(props.content.primary_button.action, props.message);
+  }
+
+  render() {
+    const { content } = this.props;
+    const className = this.props.className || "onboardingMessage";
+    return (
+      <div className={className}>
+        <div className={`onboardingMessageImage ${content.icon}`} />
+        <div className="onboardingContent">
+          <span>
+            <Localized text={content.title}>
+              <h2 className="onboardingTitle" />
+            </Localized>
+            <Localized text={content.text}>
+              <p className="onboardingText" />
+            </Localized>
+          </span>
+          <span className="onboardingButtonContainer">
+            <Localized text={content.primary_button.label}>
+              <button
+                className="button onboardingButton"
+                onClick={this.onClick}
+              />
+            </Localized>
+          </span>
+        </div>
+      </div>
+    );
+  }
+}