1 files changed, 87 insertions, 0 deletions
diff --git a/browser/components/newtab/content-src/components/CustomizeMenu/CustomizeMenu.jsx b/browser/components/newtab/content-src/components/CustomizeMenu/CustomizeMenu.jsx
new file mode 100644
index 0000000000..2b16c7fd39
--- /dev/null
+++ b/browser/components/newtab/content-src/components/CustomizeMenu/CustomizeMenu.jsx
@@ -0,0 +1,87 @@
+/* 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 { BackgroundsSection } from "content-src/components/CustomizeMenu/BackgroundsSection/BackgroundsSection";
+import { ContentSection } from "content-src/components/CustomizeMenu/ContentSection/ContentSection";
+import { connect } from "react-redux";
+import React from "react";
+import { CSSTransition } from "react-transition-group";
+
+export class _CustomizeMenu extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.onEntered = this.onEntered.bind(this);
+    this.onExited = this.onExited.bind(this);
+  }
+
+  onEntered() {
+    if (this.closeButton) {
+      this.closeButton.focus();
+    }
+  }
+
+  onExited() {
+    if (this.openButton) {
+      this.openButton.focus();
+    }
+  }
+
+  render() {
+    return (
+      <span>
+        <CSSTransition
+          timeout={300}
+          classNames="personalize-animate"
+          in={!this.props.showing}
+          appear={true}
+        >
+          <button
+            className="icon icon-settings personalize-button"
+            onClick={() => this.props.onOpen()}
+            data-l10n-id="newtab-personalize-icon-label"
+            ref={c => (this.openButton = c)}
+          />
+        </CSSTransition>
+        <CSSTransition
+          timeout={250}
+          classNames="customize-animate"
+          in={this.props.showing}
+          onEntered={this.onEntered}
+          onExited={this.onExited}
+          appear={true}
+        >
+          <div
+            className="customize-menu"
+            role="dialog"
+            data-l10n-id="newtab-personalize-dialog-label"
+          >
+            <button
+              onClick={() => this.props.onClose()}
+              className="close-button"
+              data-l10n-id="newtab-custom-close-button"
+              ref={c => (this.closeButton = c)}
+            />
+            <BackgroundsSection />
+            <ContentSection
+              openPreferences={this.props.openPreferences}
+              setPref={this.props.setPref}
+              enabledSections={this.props.enabledSections}
+              pocketRegion={this.props.pocketRegion}
+              mayHaveSponsoredTopSites={this.props.mayHaveSponsoredTopSites}
+              mayHaveSponsoredStories={
+                this.props.DiscoveryStream.config.show_spocs
+              }
+              mayHaveRecentSaves={this.props.DiscoveryStream.recentSavesEnabled}
+              dispatch={this.props.dispatch}
+            />
+          </div>
+        </CSSTransition>
+      </span>
+    );
+  }
+}
+
+export const CustomizeMenu = connect(state => ({
+  DiscoveryStream: state.DiscoveryStream,
+}))(_CustomizeMenu);