Use React components for footer and header

imports/plugins/core/accounts/register.js

@@ -57,7 +57,7 @@ Reaction.registerPackage({
     enabled: true,
     structure: {
       template: "accountsDashboard",
-      layoutHeader: "layoutHeader",
+      layoutHeader: "NavBar",
       layoutFooter: "",
       notFound: "notFound",
       dashboardHeader: "dashboardHeader",

imports/plugins/core/checkout/client/index.js

@@ -10,7 +10,6 @@ import "./templates/cartIcon/cartIcon.js";
 import "./templates/checkout/addressBook/addressBook.html";
 import "./templates/checkout/completed/completed.html";
 import "./templates/checkout/completed/completed.js";
-import "./templates/checkout/header/header.html";
 import "./templates/checkout/login/login.html";
 import "./templates/checkout/login/login.js";
 import "./templates/checkout/progressBar/progressBar.html";

imports/plugins/core/checkout/register.js

@@ -28,7 +28,7 @@ Reaction.registerPackage({
     enabled: true,
     structure: {
       template: "cartCheckout",
-      layoutHeader: "checkoutHeader",
+      layoutHeader: "NavBarCheckout",
       layoutFooter: "",
       notFound: "notFound",
       dashboardHeader: "",

imports/plugins/core/dashboard/register.js

@@ -50,7 +50,7 @@ Reaction.registerPackage({
     enabled: true,
     structure: {
       template: "dashboardPackages",
-      layoutHeader: "layoutHeader",
+      layoutHeader: "NavBar",
       layoutFooter: "",
       notFound: "notFound",
       dashboardHeader: "dashboardHeader",

imports/plugins/core/email/register.js

@@ -29,7 +29,7 @@ Reaction.registerPackage({
     enabled: true,
     structure: {
       template: "email",
-      layoutHeader: "layoutHeader",
+      layoutHeader: "NavBar",
       layoutFooter: "",
       notFound: "notFound",
       dashboardHeader: "dashboardHeader",

imports/plugins/core/layout/client/components/coreLayout.js

@@ -1,33 +1,34 @@
 import React from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
-import { Components, registerComponent } from "@reactioncommerce/reaction-components";
+import { getComponent, registerComponent } from "@reactioncommerce/reaction-components";
 import Blaze from "meteor/gadicc:blaze-react-component";
 import { Template } from "meteor/templating";
 
 const CoreLayout = ({ actionViewIsOpen, structure }) => {
-  const { layoutFooter, template } = structure || {};
+  const { layoutHeader, layoutFooter, template } = structure || {};
 
   const pageClassName = classnames({
     "page": true,
     "show-settings": actionViewIsOpen
   });
 
+  const headerComponent = layoutHeader && getComponent(layoutHeader);
+  const footerComponent = layoutFooter && getComponent(layoutFooter);
+
   return (
     <div className={pageClassName} id="reactionAppContainer">
-      <Components.NavBar />
+
+      {headerComponent && React.createElement(headerComponent, {})}
 
       <Blaze template="cartDrawer" className="reaction-cart-drawer" />
 
-      { Template[template] &&
+      {Template[template] &&
         <main>
           <Blaze template={template} />
-        </main>
-      }
+        </main>}
 
-      { Template[layoutFooter] &&
-        <Blaze template={layoutFooter} className="reaction-navigation-footer footer-default" />
-      }
+      {footerComponent && React.createElement(footerComponent, {})}
     </div>
   );
 };

imports/plugins/core/layout/client/components/footer.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { registerComponent } from "/imports/plugins/core/components/lib";
+
+const Footer = () => (
+  <div className="reaction-navigation-footer footer-default">
+    <nav className="navbar-bottom" role="navigation">
+      <div className="row">
+        {/* Footer content */}
+      </div>
+    </nav>
+  </div>
+);
+
+
+registerComponent("Footer", Footer);
+
+export default Footer;

imports/plugins/core/layout/client/index.js

@@ -1,16 +1,11 @@
-import "./templates/layout/admin/admin.html";
-import "./templates/layout/admin/admin.js";
 import "./templates/layout/alerts/alerts.html";
 import "./templates/layout/alerts/alerts.js";
 import "./templates/layout/alerts/inlineAlerts.js";
 import "./templates/layout/alerts/reactionAlerts.js";
 import "./templates/layout/createContentMenu/createContentMenu.html";
 import "./templates/layout/createContentMenu/createContentMenu.js";
-import "./templates/layout/footer/footer.html";
 import "./templates/layout/header/brand.html";
 import "./templates/layout/header/button.html";
-import "./templates/layout/header/header.html";
-import "./templates/layout/header/header.js";
 import "./templates/layout/header/tags.html";
 import "./templates/layout/notFound/notFound.html";
 import "./templates/layout/notFound/notFound.js";
@@ -20,5 +15,7 @@ import "./templates/layout/notice/unauthorized.js";
 import "./templates/theme/theme.html";
 import "./templates/theme/theme.js";
 
+import "./components/footer";
+
 export CoreLayout from "./components/coreLayout";
 export PrintLayout from "./components/printLayout";