mc-react-header 0.3.4 → 0.4.0

package/dist/Breadcrumbs.css

@@ -2,15 +2,15 @@
 ul.mc-breadcrumb {
   padding: 7px 10px 7px 20px;
   list-style: none;
-  background-color: #f5f5f5;
+  /* background-color: #f5f5f5; */
+  background-color: #fafafa;
+  /* border: 1px solid #d6d6d6; */
+  border: 1px solid #d2d2d2;
   border-radius: 2px;
-  border: 1px solid #d6d6d6;
   font-size: 16px;
   font-family: "Open Sans", sans-serif;
   text-align: left;
-  margin: 6px;
-  margin-bottom: 20px;
-  /* margin-top: 20px; */
+  margin: 20px;
   overflow: hidden;
   display: flex;
   flex-direction: row;
@@ -18,6 +18,7 @@ ul.mc-breadcrumb {
   /* gap: 40px; */
   justify-content: start;
   align-items: center;
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.04);
 }
 
 /* Display list items side by side */
@@ -30,7 +31,7 @@ ul.mc-breadcrumb li {
 
 /* Add a color to all links inside the list */
 ul.mc-breadcrumb li a {
-  color: #303f9f;
+  color: rgb(62, 112, 187);
   text-decoration: none;
   /* position: relative; */
   /* padding: 0px 5px 0px 50px; */
@@ -45,7 +46,7 @@ ul.mc-breadcrumb li a[href]:hover {
 
 /* prevent _reboot.scss from bootstrap to override this */
 ul.mc-breadcrumb li a:not([href]):hover {
-  color: #303f9f;
+  color: rgb(62, 112, 187);
 }
 
 .mc-breadcrumb li a::after {
@@ -86,7 +87,7 @@ ul.mc-breadcrumb li a:not([href]):hover {
 
 .mc-breadcrumb li:last-child a {
   background: transparent !important;
-  color: #303f9f;
+  color: rgb(62, 112, 187);
   /* pointer-events: none;
   cursor: default; */
 }

package/dist/Breadcrumbs.js

@@ -5,18 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 require("./Breadcrumbs.css");
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Breadcrumbs = _ref => {
   let {
     breadcrumbsPath
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement("ul", {
+  return /*#__PURE__*/React.createElement("ul", {
     className: "mc-breadcrumb"
   }, breadcrumbsPath.map((el, i) => {
-    return /*#__PURE__*/_react.default.createElement("li", {
+    return /*#__PURE__*/React.createElement("li", {
       key: i
-    }, /*#__PURE__*/_react.default.createElement("a", {
+    }, /*#__PURE__*/React.createElement("a", {
       href: el.link
     }, el.name));
   }));

package/dist/Navbar.js

@@ -5,11 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 require("./Navbar.css");
-var _react = _interopRequireWildcard(require("react"));
 var _mcloud_logo = _interopRequireDefault(require("./assets/mcloud_logo.png"));
 require("font-awesome/css/font-awesome.min.css");
+var _react = require("react");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const mainSections = {
   learn: {
     name: "LEARN",
@@ -79,15 +78,15 @@ const DropdownMenu = _ref => {
   }, []);
   const toggleDropdown = () => setDropdownOpen(prev => !prev);
   const dropdownContentClass = "dropdown-content" + (dropdownOpen ? " dropdown-open" : "");
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     ref: wrapperRef,
     className: "more-dropdown"
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, /*#__PURE__*/React.createElement("span", {
     className: "more-btn",
     onClick: toggleDropdown
-  }, "More ", /*#__PURE__*/_react.default.createElement("i", {
+  }, "More ", /*#__PURE__*/React.createElement("i", {
     className: "fa fa-caret-down"
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: dropdownContentClass
   }, Object.keys(dropdownSections).map((element, i) => {
     const {
@@ -95,7 +94,7 @@ const DropdownMenu = _ref => {
       name
     } = dropdownSections[element];
     const cname = element === activeSection ? "active" : "";
-    return /*#__PURE__*/_react.default.createElement("a", {
+    return /*#__PURE__*/React.createElement("a", {
       key: i,
       className: cname,
       href: link
@@ -106,24 +105,24 @@ const Navbar = _ref2 => {
   let {
     activeSection
   } = _ref2;
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "mc-navbar"
-  }, /*#__PURE__*/_react.default.createElement("a", {
+  }, /*#__PURE__*/React.createElement("a", {
     className: "mc-navbrand",
     href: "https://www.materialscloud.org/home"
-  }, /*#__PURE__*/_react.default.createElement("img", {
+  }, /*#__PURE__*/React.createElement("img", {
     src: _mcloud_logo.default,
     height: "50",
     alt: "MC logo"
   })), Object.keys(mainSections).map((key, i) => {
     let cname = "mc-navlink";
     if (key === activeSection) cname += " active";
-    return /*#__PURE__*/_react.default.createElement("a", {
+    return /*#__PURE__*/React.createElement("a", {
       key: i,
       className: cname,
       href: mainSections[key].link
     }, mainSections[key].name);
-  }), /*#__PURE__*/_react.default.createElement(DropdownMenu, {
+  }), /*#__PURE__*/React.createElement(DropdownMenu, {
     activeSection: activeSection
   }));
 };

package/dist/index.js

@@ -5,24 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 require("./index.css");
-var _react = _interopRequireDefault(require("react"));
 var _Navbar = _interopRequireDefault(require("./Navbar"));
 var _Breadcrumbs = _interopRequireDefault(require("./Breadcrumbs"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const MaterialsCloudHeader = _ref => {
   let {
     activeSection,
-    breadcrumbsPath,
-    children
+    breadcrumbsPath
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "main-container"
-  }, /*#__PURE__*/_react.default.createElement(_Navbar.default, {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Navbar.default, {
     activeSection: activeSection
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "content-container"
-  }, /*#__PURE__*/_react.default.createElement(_Breadcrumbs.default, {
+  }), /*#__PURE__*/React.createElement(_Breadcrumbs.default, {
     breadcrumbsPath: breadcrumbsPath
-  }), children));
+  }));
 };
 var _default = exports.default = MaterialsCloudHeader;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mc-react-header",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "author": "Kristjan Eimre <kristjan.eimre@epfl.ch>",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/App.css

@@ -1,38 +1,3 @@
 .App {
   text-align: center;
 }
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

package/src/App.js

@@ -1,7 +1,5 @@
 import "./App.css";
 
-import React from "react";
-
 import MaterialsCloudHeader from "./MaterialsCloudHeader";
 
 function App() {
@@ -17,10 +15,9 @@ function App() {
           },
           { name: "test", link: null },
         ]}
-      >
-        <h3>Test content</h3>
-        <p>Test content</p>
-      </MaterialsCloudHeader>
+      />
+      <h3>Test content</h3>
+      <p>Test content</p>
     </div>
   );
 }

package/src/MaterialsCloudHeader/Breadcrumbs.css

@@ -2,15 +2,15 @@
 ul.mc-breadcrumb {
   padding: 7px 10px 7px 20px;
   list-style: none;
-  background-color: #f5f5f5;
+  /* background-color: #f5f5f5; */
+  background-color: #fafafa;
+  /* border: 1px solid #d6d6d6; */
+  border: 1px solid #d2d2d2;
   border-radius: 2px;
-  border: 1px solid #d6d6d6;
   font-size: 16px;
   font-family: "Open Sans", sans-serif;
   text-align: left;
-  margin: 6px;
-  margin-bottom: 20px;
-  /* margin-top: 20px; */
+  margin: 20px;
   overflow: hidden;
   display: flex;
   flex-direction: row;
@@ -18,6 +18,7 @@ ul.mc-breadcrumb {
   /* gap: 40px; */
   justify-content: start;
   align-items: center;
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.04);
 }
 
 /* Display list items side by side */
@@ -30,7 +31,7 @@ ul.mc-breadcrumb li {
 
 /* Add a color to all links inside the list */
 ul.mc-breadcrumb li a {
-  color: #303f9f;
+  color: rgb(62, 112, 187);
   text-decoration: none;
   /* position: relative; */
   /* padding: 0px 5px 0px 50px; */
@@ -45,7 +46,7 @@ ul.mc-breadcrumb li a[href]:hover {
 
 /* prevent _reboot.scss from bootstrap to override this */
 ul.mc-breadcrumb li a:not([href]):hover {
-  color: #303f9f;
+  color: rgb(62, 112, 187);
 }
 
 .mc-breadcrumb li a::after {
@@ -86,7 +87,7 @@ ul.mc-breadcrumb li a:not([href]):hover {
 
 .mc-breadcrumb li:last-child a {
   background: transparent !important;
-  color: #303f9f;
+  color: rgb(62, 112, 187);
   /* pointer-events: none;
   cursor: default; */
 }

package/src/MaterialsCloudHeader/Breadcrumbs.js

@@ -1,7 +1,5 @@
 import "./Breadcrumbs.css";
 
-import React from "react";
-
 const Breadcrumbs = ({ breadcrumbsPath }) => (
   <ul className="mc-breadcrumb">
     {breadcrumbsPath.map((el, i) => {

package/src/MaterialsCloudHeader/Navbar.js

@@ -1,6 +1,5 @@
 import "./Navbar.css";
 
-import React from "react";
 import Logo from "./assets/mcloud_logo.png";
 
 import "font-awesome/css/font-awesome.min.css";

package/src/MaterialsCloudHeader/index.js

@@ -1,16 +1,12 @@
 import "./index.css";
 
-import React from "react";
 import Navbar from "./Navbar";
 import Breadcrumbs from "./Breadcrumbs";
 
-const MaterialsCloudHeader = ({ activeSection, breadcrumbsPath, children }) => (
-  <div className="main-container">
+const MaterialsCloudHeader = ({ activeSection, breadcrumbsPath }) => (
+  <div>
     <Navbar activeSection={activeSection} />
-    <div className="content-container">
-      <Breadcrumbs breadcrumbsPath={breadcrumbsPath} />
-      {children}
-    </div>
+    <Breadcrumbs breadcrumbsPath={breadcrumbsPath} />
   </div>
 );
 

package/src/index.css

@@ -1,13 +1,14 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: #f0f6f9;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }

package/src/index.js

@@ -5,7 +5,6 @@ import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
-document.body.style = "background: white;";
 root.render(
   <React.StrictMode>
     <App />