1 files changed, 112 insertions, 0 deletions
diff --git a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Navigation/Navigation.jsx b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Navigation/Navigation.jsx
new file mode 100644
index 0000000000..1062c3cade
--- /dev/null
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Navigation/Navigation.jsx
@@ -0,0 +1,112 @@
+/* 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 { actionCreators as ac } from "common/Actions.sys.mjs";
+import React from "react";
+import { SafeAnchor } from "../SafeAnchor/SafeAnchor";
+import { FluentOrText } from "content-src/components/FluentOrText/FluentOrText";
+
+export class Topic extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.onLinkClick = this.onLinkClick.bind(this);
+  }
+
+  onLinkClick(event) {
+    if (this.props.dispatch) {
+      this.props.dispatch(
+        ac.DiscoveryStreamUserEvent({
+          event: "CLICK",
+          source: "POPULAR_TOPICS",
+          action_position: 0,
+          value: {
+            topic: event.target.text.toLowerCase().replace(` `, `-`),
+          },
+        })
+      );
+    }
+  }
+
+  render() {
+    const { url, name } = this.props;
+    return (
+      <SafeAnchor
+        onLinkClick={this.onLinkClick}
+        className={this.props.className}
+        url={url}
+      >
+        {name}
+      </SafeAnchor>
+    );
+  }
+}
+
+export class Navigation extends React.PureComponent {
+  render() {
+    let links = this.props.links || [];
+    const alignment = this.props.alignment || "centered";
+    const header = this.props.header || {};
+    const english = this.props.locale.startsWith("en-");
+    const privacyNotice = this.props.privacyNoticeURL || {};
+    const { newFooterSection } = this.props;
+    const className = `ds-navigation ds-navigation-${alignment} ${
+      newFooterSection ? `ds-navigation-new-topics` : ``
+    }`;
+    let { title } = header;
+    if (newFooterSection) {
+      title = { id: "newtab-pocket-new-topics-title" };
+      if (this.props.extraLinks) {
+        links = [
+          ...links.slice(0, links.length - 1),
+          ...this.props.extraLinks,
+          links[links.length - 1],
+        ];
+      }
+    }
+
+    return (
+      <div className={className}>
+        {title && english ? (
+          <FluentOrText message={title}>
+            <span className="ds-navigation-header" />
+          </FluentOrText>
+        ) : null}
+
+        {english ? (
+          <ul>
+            {links &&
+              links.map(t => (
+                <li key={t.name}>
+                  <Topic
+                    url={t.url}
+                    name={t.name}
+                    dispatch={this.props.dispatch}
+                  />
+                </li>
+              ))}
+          </ul>
+        ) : null}
+
+        {!newFooterSection ? (
+          <SafeAnchor className="ds-navigation-privacy" url={privacyNotice.url}>
+            <FluentOrText message={privacyNotice.title} />
+          </SafeAnchor>
+        ) : null}
+
+        {newFooterSection ? (
+          <div className="ds-navigation-family">
+            <span className="icon firefox-logo" />
+            <span>|</span>
+            <span className="icon pocket-logo" />
+            <span
+              className="ds-navigation-family-message"
+              data-l10n-id="newtab-pocket-pocket-firefox-family"
+            />
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+}