mc-react-header 0.5.3 → 0.5.5

package/.gitignore

@@ -0,0 +1,26 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.vscode
+/dist

package/package.json

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

package/src/MaterialsCloudHeader/Breadcrumbs.css

@@ -50,39 +50,36 @@ ul.mc-breadcrumb li a:not([href]):hover {
 }
 
 .mc-breadcrumb li a::after {
-  content: " ";
-  display: block;
+  content: "";
   width: 0;
   height: 0;
-  border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
+  top: 50%;
+  right: 0;
+  margin-top: -50px;
+  border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
   border-left: 30px solid #fafafa;
   position: absolute;
-  top: 50%;
-  margin-top: -50px;
-  /* left: 100%; */
-  z-index: 2;
-  right: 0;
+  transform: translateX(30px);
   z-index: 2;
-  transform: translate(30px, 0);
+  pointer-events: none;
 }
 
 .mc-breadcrumb li a::before {
-  content: " ";
-  display: block;
+  content: "";
+  position: absolute;
   width: 0;
   height: 0;
+  top: 50%;
+  right: 0;
+  margin-top: -50px;
+  margin-left: 0;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
   border-left: 30px solid #d6d6d6;
-  position: absolute;
-  top: 50%;
-  margin-top: -50px;
-  margin-left: 2px;
-  /* left: 100%; */
-  right: 0;
+  transform: translateX(32px);
   z-index: 1;
-  transform: translate(32px, 0);
+  pointer-events: none;
 }
 
 .mc-breadcrumb li:last-child a {

package/dist/Breadcrumbs.css

@@ -1,108 +0,0 @@
-/* Style the list */
-ul.mc-breadcrumb {
-  padding: 7px 10px 7px 20px;
-  list-style: none;
-  /* background-color: #f5f5f5; */
-  background-color: #fafafa;
-  /* border: 1px solid #d6d6d6; */
-  border: 1px solid #d2d2d2;
-  border-radius: 2px;
-  font-size: 16px;
-  font-family: "Open Sans", sans-serif;
-  text-align: left;
-  margin: 20px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: row;
-  /* flex-wrap: wrap; */
-  /* 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 */
-ul.mc-breadcrumb li {
-  display: inline;
-  line-height: 1;
-  margin-right: 46px;
-  position: relative;
-}
-
-/* Add a color to all links inside the list */
-ul.mc-breadcrumb li a {
-  color: rgb(62, 112, 187);
-  text-decoration: none;
-  /* position: relative; */
-  /* padding: 0px 5px 0px 50px; */
-  /* padding: 10px 0 10px 65px; */
-  /* z-index: 3; */
-}
-
-/* Add a color on mouse-over, if the <a> has href defined */
-ul.mc-breadcrumb li a[href]:hover {
-  text-decoration: underline;
-}
-
-/* prevent _reboot.scss from bootstrap to override this */
-ul.mc-breadcrumb li a:not([href]):hover {
-  color: rgb(62, 112, 187);
-}
-
-.mc-breadcrumb li a::after {
-  content: " ";
-  display: block;
-  width: 0;
-  height: 0;
-  border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
-  border-bottom: 50px solid transparent;
-  border-left: 30px solid #fafafa;
-  position: absolute;
-  top: 50%;
-  margin-top: -50px;
-  /* left: 100%; */
-  z-index: 2;
-  right: 0;
-  z-index: 2;
-  transform: translate(30px, 0);
-}
-
-.mc-breadcrumb li a::before {
-  content: " ";
-  display: block;
-  width: 0;
-  height: 0;
-  border-top: 50px solid transparent;
-  border-bottom: 50px solid transparent;
-  border-left: 30px solid #d6d6d6;
-  position: absolute;
-  top: 50%;
-  margin-top: -50px;
-  margin-left: 2px;
-  /* left: 100%; */
-  right: 0;
-  z-index: 1;
-  transform: translate(32px, 0);
-}
-
-.mc-breadcrumb li:last-child a {
-  background: transparent !important;
-  color: rgb(62, 112, 187);
-  /* pointer-events: none;
-  cursor: default; */
-}
-.mc-breadcrumb li:last-child a::after,
-.mc-breadcrumb li:last-child a::before {
-  border: 0;
-  display: none;
-}
-
-@media screen and (max-width: 680px) {
-  ul.mc-breadcrumb {
-    font-size: clamp(10px, 2.2vw, 16px);
-    margin-top: 4px;
-    margin-bottom: 4px;
-
-    padding: 8px 16px 8px 4px;
-  }
-}

package/dist/Breadcrumbs.js

@@ -1,22 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-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.breadcrumbsPath;
-  return /*#__PURE__*/_react.default.createElement("ul", {
-    className: "mc-breadcrumb"
-  }, breadcrumbsPath.map((el, i) => {
-    return /*#__PURE__*/_react.default.createElement("li", {
-      key: i
-    }, /*#__PURE__*/_react.default.createElement("a", {
-      href: el.link
-    }, el.name));
-  }));
-};
-var _default = exports.default = Breadcrumbs;

package/dist/Navbar.css

@@ -1,159 +0,0 @@
-.mc-navbar {
-  background-color: rgb(255, 255, 255);
-  overflow: hidden;
-  border-bottom: 3px solid #dee6e6;
-  z-index: 10;
-  font-family: "Open Sans", sans-serif;
-}
-
-.mc-navbar .mc-navbrand {
-  float: left;
-  display: block;
-  text-align: center;
-  font-size: 0px;
-  padding: 7px 15px 5px 20px;
-  /* border: 1px solid green; */
-}
-
-.mc-navbar .mc-navlink {
-  float: left;
-  display: block;
-  color: #455860;
-  font-size: 16px;
-  line-height: 32px;
-  font-weight: 700;
-  text-align: center;
-  padding: 14px 15px;
-  text-decoration: none;
-  /* border: 1px solid green; */
-}
-
-/* Change the color of links on hover */
-.mc-navbar a:hover {
-  color: #8fa5af;
-}
-
-/* Add an active class to highlight the current page */
-.mc-navbar a.active {
-  background-color: #fbfcfc;
-  color: #cc1b30;
-}
-
-.more-dropdown {
-  padding: 14px 0px;
-  float: right;
-  /* border: 1px solid rgb(128, 0, 0); */
-  /* overflow: hidden; */
-}
-
-.more-btn {
-  color: #455860;
-  font-size: 16px;
-  line-height: 32px;
-  width: 1em;
-  height: 1em;
-  /* display: block; */
-  text-decoration: none;
-  font-weight: 700;
-  cursor: pointer;
-  text-align: center;
-  padding: 21px 20px;
-  /* border: 1px solid green; */
-  /* margin: 0; Important for vertical align on mobile phones */
-  user-select: none;
-}
-
-.more-btn svg {
-  width: 1em;
-  height: 1em;
-  vertical-align: middle;
-  display: inline-block;
-}
-
-.dropdown-content {
-  display: none;
-  position: absolute;
-  right: 0;
-  background-color: #ffffff;
-  min-width: 220px;
-  border-radius: 6px;
-  border: 2px solid #dee6e6;
-  z-index: 100;
-  padding: 5px 0px;
-}
-
-.dropdown-content a {
-  float: none;
-  color: #455860;
-  padding: 10px 14px;
-  text-decoration: none;
-  display: block;
-  text-align: left;
-  font-size: 16px;
-  line-height: 10px;
-  z-index: 100;
-}
-
-.dropdown-content a:hover {
-  background-color: #fbfcfc;
-}
-
-.dropdown-open {
-  display: block;
-}
-
-/* Show the dropdown menu on hover */
-/* .more-dropdown:hover .dropdown-content {
-  display: block;
-} */
-
-@media screen and (max-width: 680px) {
-  /* .mc-navbar a.menu {
-    float: right;
-    display: block;
-    border: 2px solid #455860;
-  } */
-  /* .mc-navbar {
-    position: relative;
-  } */
-  .mc-navbar .mc-navlink {
-    position: relative;
-    float: none;
-    display: block;
-    text-align: left;
-    padding: 3px 20px 1px;
-    z-index: 10;
-    line-height: 20px;
-    font-size: clamp(12px, 2.5vw, 16px);
-    max-width: 160px;
-  }
-  .mc-navbar .mc-navbrand {
-    float: none;
-    display: block;
-    text-align: left;
-  }
-
-  .mc-navbar .mc-navbrand img {
-    width: 45px;
-    height: auto;
-  }
-  .mc-navbar .more-dropdown {
-    position: absolute;
-    top: 0;
-    right: 0;
-  }
-
-  .more-btn {
-    font-size: clamp(12px, 2.5vw, 16px);
-  }
-
-  .dropdown-content a {
-    font-size: clamp(10px, 2.3vw, 14px);
-    padding: 4px 12px;
-    min-width: 180px;
-  }
-  .more-btn svg {
-    width: 14px;
-    height: 14px;
-  }
-}

package/dist/Navbar.js

@@ -1,143 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-require("./Navbar.css");
-var _mcloud_logo = _interopRequireDefault(require("./assets/mcloud_logo.png"));
-var _react = _interopRequireWildcard(require("react"));
-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); }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-const mainSections = {
-  learn: {
-    name: "LEARN",
-    link: "https://www.materialscloud.org/learn"
-  },
-  work: {
-    name: "WORK",
-    link: "https://www.materialscloud.org/work"
-  },
-  discover: {
-    name: "DISCOVER",
-    link: "https://www.materialscloud.org/discover"
-  },
-  explore: {
-    name: "EXPLORE",
-    link: "https://www.materialscloud.org/explore"
-  },
-  archive: {
-    name: "ARCHIVE",
-    link: "https://www.materialscloud.org/archive"
-  }
-};
-const dropdownSections = {
-  policies: {
-    name: "Policies",
-    link: "https://www.materialscloud.org/policies"
-  },
-  dmp: {
-    name: "Data Management Plan",
-    link: "https://www.materialscloud.org/dmp"
-  },
-  terms: {
-    name: "Terms of Use",
-    link: "https://www.materialscloud.org/termssummary"
-  },
-  infrastructure: {
-    name: "Infrastructure",
-    link: "https://www.materialscloud.org/infrastructure"
-  },
-  team: {
-    name: "Team & Contact",
-    link: "https://www.materialscloud.org/team"
-  },
-  partners: {
-    name: "Partners",
-    link: "https://www.materialscloud.org/home#partners"
-  },
-  restapi: {
-    name: "Connect your REST API",
-    link: "https://www.materialscloud.org/explore/connect"
-  }
-};
-const DropdownMenu = _ref => {
-  let activeSection = _ref.activeSection;
-  const _useState = (0, _react.useState)(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    dropdownOpen = _useState2[0],
-    setDropdownOpen = _useState2[1];
-  const wrapperRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    function handleClickOutside(event) {
-      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
-        setDropdownOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-  const toggleDropdown = () => setDropdownOpen(prev => !prev);
-  const dropdownContentClass = "dropdown-content" + (dropdownOpen ? " dropdown-open" : "");
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: wrapperRef,
-    className: "more-dropdown"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "more-btn",
-    onClick: toggleDropdown
-  }, "More", " ", /*#__PURE__*/_react.default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "18",
-    height: "18",
-    viewBox: "4 2 18 20",
-    fill: "currentColor",
-    style: {
-      verticalAlign: "middle"
-    }
-  }, /*#__PURE__*/_react.default.createElement("path", {
-    d: "M12 15l-7-7h14z"
-  }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: dropdownContentClass
-  }, Object.keys(dropdownSections).map((element, i) => {
-    const _dropdownSections$ele = dropdownSections[element],
-      link = _dropdownSections$ele.link,
-      name = _dropdownSections$ele.name;
-    const cname = element === activeSection ? "active" : "";
-    return /*#__PURE__*/_react.default.createElement("a", {
-      key: i,
-      className: cname,
-      href: link
-    }, name);
-  })));
-};
-const Navbar = _ref2 => {
-  let activeSection = _ref2.activeSection;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "mc-navbar"
-  }, /*#__PURE__*/_react.default.createElement("a", {
-    className: "mc-navbrand",
-    href: "https://www.materialscloud.org/home"
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: _mcloud_logo.default,
-    loading: "lazy",
-    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", {
-      key: i,
-      className: cname,
-      href: mainSections[key].link
-    }, mainSections[key].name);
-  }), /*#__PURE__*/_react.default.createElement(DropdownMenu, {
-    activeSection: activeSection
-  }));
-};
-var _default = exports.default = Navbar;

package/dist/index.css

@@ -1,14 +0,0 @@
-.main-container {
-  background-color: #f0f6f9;
-  min-height: 100vh;
-}
-
-.content-container {
-  background-color: white;
-  margin: 5px;
-  margin-top: 30px;
-  margin-bottom: 10px;
-  padding: 2px;
-  padding-bottom: 20px;
-  border-radius: 2px;
-}