1 files changed, 60 insertions, 0 deletions
diff --git a/browser/components/newtab/content-src/aboutwelcome/components/Zap.jsx b/browser/components/newtab/content-src/aboutwelcome/components/Zap.jsx
new file mode 100644
index 0000000000..a067c4d7fe
--- /dev/null
+++ b/browser/components/newtab/content-src/aboutwelcome/components/Zap.jsx
@@ -0,0 +1,60 @@
+/* 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, { useEffect } from "react";
+import { Localized } from "./MSLocalized";
+const MS_STRING_PROP = "string_id";
+const ZAP_SIZE_THRESHOLD = 160;
+
+function calculateZapLength() {
+  let span = document.querySelector(".zap");
+  if (!span) {
+    return;
+  }
+  let rect = span.getBoundingClientRect();
+  if (rect && rect.width > ZAP_SIZE_THRESHOLD) {
+    span.classList.add("long");
+  } else {
+    span.classList.add("short");
+  }
+}
+
+export const Zap = props => {
+  useEffect(() => {
+    requestAnimationFrame(() => calculateZapLength());
+  });
+
+  if (!props.text) {
+    return null;
+  }
+
+  if (props.hasZap) {
+    if (typeof props.text === "object" && props.text[MS_STRING_PROP]) {
+      return (
+        <Localized text={props.text}>
+          <h1 className="welcomeZap">
+            <span data-l10n-name="zap" className="zap" />
+          </h1>
+        </Localized>
+      );
+    } else if (typeof props.text === "string") {
+      // Parse string to zap style last word of the props.text
+      let titleArray = props.text.split(" ");
+      let lastWord = `${titleArray.pop()}`;
+      return (
+        <h1 className="welcomeZap">
+          {titleArray.join(" ").concat(" ")}
+          <span className="zap">{lastWord}</span>
+        </h1>
+      );
+    }
+  } else {
+    return (
+      <Localized text={props.text}>
+        <h1 />
+      </Localized>
+    );
+  }
+  return null;
+};