1 files changed, 45 insertions, 0 deletions
diff --git a/browser/components/newtab/content-src/aboutwelcome/components/CTAParagraph.jsx b/browser/components/newtab/content-src/aboutwelcome/components/CTAParagraph.jsx
new file mode 100644
index 0000000000..41726626a4
--- /dev/null
+++ b/browser/components/newtab/content-src/aboutwelcome/components/CTAParagraph.jsx
@@ -0,0 +1,45 @@
+/* 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 "./MSLocalized";
+
+export const CTAParagraph = props => {
+  const { content, handleAction } = props;
+
+  if (!content?.text) {
+    return null;
+  }
+
+  return (
+    <h2 className="cta-paragraph">
+      <Localized text={content.text}>
+        {content.text.string_name && typeof handleAction === "function" ? (
+          <span
+            data-l10n-id={content.text.string_id}
+            onClick={handleAction}
+            onKeyUp={event =>
+              ["Enter", " "].includes(event.key) ? handleAction(event) : null
+            }
+            value="cta_paragraph"
+            role="button"
+            tabIndex="0"
+          >
+            {" "}
+            {/* <a> is valid here because of click and keyup handling. */}
+            {/* <button> cannot be used due to fluent integration. <a> content is provided by fluent */}
+            {/* eslint-disable jsx-a11y/anchor-is-valid */}
+            <a
+              role="button"
+              tabIndex="0"
+              data-l10n-name={content.text.string_name}
+            >
+              {" "}
+            </a>
+          </span>
+        ) : null}
+      </Localized>
+    </h2>
+  );
+};