mc-react-header 0.2.1 → 0.3.3

package/src/App.css

@@ -1,38 +1,38 @@
-.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);
-  }
-}
+.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,23 +1,23 @@
-import "./App.css";
-
-import MaterialsCloudHeader from "./MaterialsCloudHeader";
-
-function App() {
-  return (
-    <div className="App">
-      <MaterialsCloudHeader
-        activeSection={"discover"} // see the corresponding key in MaterialsCloudHeader/Navbar.js
-        breadcrumbsPath={[
-          { name: "Discover", link: "https://www.materialscloud.org/discover" },
-          { name: "Materials Cloud three-dimensional crystals database", link: "https://www.materialscloud.org/discover/mc3d" },
-          { name: "test", link: null },
-        ]}
-      >
-        <h3>Test content</h3>
-        <p>Test content</p>
-      </MaterialsCloudHeader>
-    </div>
-  );
-}
-
-export default App;
+import "./App.css";
+
+import MaterialsCloudHeader from "./MaterialsCloudHeader";
+
+function App() {
+  return (
+    <div className="App">
+      <MaterialsCloudHeader
+        activeSection={"discover"} // see the corresponding key in MaterialsCloudHeader/Navbar.js
+        breadcrumbsPath={[
+          { name: "Discover", link: "https://www.materialscloud.org/discover" },
+          { name: "Materials Cloud three-dimensional crystals database", link: "https://www.materialscloud.org/discover/mc3d" },
+          { name: "test", link: null },
+        ]}
+      >
+        <h3>Test content</h3>
+        <p>Test content</p>
+      </MaterialsCloudHeader>
+    </div>
+  );
+}
+
+export default App;

package/src/App.test.js

@@ -1,14 +1,14 @@
-import { render, screen } from "@testing-library/react";
-import App from "./App";
-
-test("renders learn link", () => {
-  render(<App />);
-  const linkElement = screen.getByText(/LEARN/i);
-  expect(linkElement).toBeInTheDocument();
-});
-
-test("renders work link", () => {
-  render(<App />);
-  const linkElement = screen.getByText(/WORK/i);
-  expect(linkElement).toBeInTheDocument();
-});
+import { render, screen } from "@testing-library/react";
+import App from "./App";
+
+test("renders learn link", () => {
+  render(<App />);
+  const linkElement = screen.getByText(/LEARN/i);
+  expect(linkElement).toBeInTheDocument();
+});
+
+test("renders work link", () => {
+  render(<App />);
+  const linkElement = screen.getByText(/WORK/i);
+  expect(linkElement).toBeInTheDocument();
+});

package/src/MaterialsCloudHeader/Breadcrumbs.css

@@ -1,101 +1,97 @@
-/* Style the list */
-ul.mc-breadcrumb {
-  padding: 7px 10px 7px 20px;
-  list-style: none;
-  background-color: #f5f5f5;
-  border-radius: 2px;
-  border: 1px solid #d6d6d6;
-  font-size: 16px;
-  font-weight: 300;
-  font-family: "Open Sans", sans-serif;
-  text-align: left;
-  margin: 6px;
-  margin-bottom: 20px;
-  /* margin-top: 20px; */
-  overflow: hidden;
-  display: flex;
-  flex-direction: row;
-  /* flex-wrap: wrap; */
-  /* gap: 40px; */
-  justify-content: start;
-  align-items: center;
-}
-
-
-/* Display list items side by side */
-ul.mc-breadcrumb li {
-  display: inline;
-  line-height: 1.0;
-  margin-right: 46px;
-  position: relative;
-}
-
-/* Add a color to all links inside the list */
-ul.mc-breadcrumb li a {
-  color: #303f9f;
-  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: #303f9f;
-}
-
-.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 #f5f5f5;
-  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: #303f9f;
-  /* pointer-events: none;
-  cursor: default; */
-}
-.mc-breadcrumb li:last-child a::after,
-.mc-breadcrumb li:last-child a::before {
-  border: 0;
-  display: none;
-}
-
+/* Style the list */
+ul.mc-breadcrumb {
+  padding: 7px 10px 7px 20px;
+  list-style: none;
+  background-color: #f5f5f5;
+  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; */
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  /* flex-wrap: wrap; */
+  /* gap: 40px; */
+  justify-content: start;
+  align-items: center;
+}
+
+/* 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: #303f9f;
+  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: #303f9f;
+}
+
+.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 #f5f5f5;
+  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: #303f9f;
+  /* pointer-events: none;
+  cursor: default; */
+}
+.mc-breadcrumb li:last-child a::after,
+.mc-breadcrumb li:last-child a::before {
+  border: 0;
+  display: none;
+}

package/src/MaterialsCloudHeader/Breadcrumbs.js

@@ -1,19 +1,15 @@
-import React from "react";
-
-import "./Breadcrumbs.css";
-
-function Breadcrumbs(props) {
-  return (
-    <ul className="mc-breadcrumb">
-      {props.breadcrumbsPath.map((el, i) => {
-        return (
-          <li key={i}>
-            <a href={el.link}>{el.name}</a>
-          </li>
-        );
-      })}
-    </ul>
-  );
-}
-
-export default Breadcrumbs;
+import "./Breadcrumbs.css";
+
+const Breadcrumbs = ({ breadcrumbsPath }) => (
+  <ul className="mc-breadcrumb">
+    {breadcrumbsPath.map((el, i) => {
+      return (
+        <li key={i}>
+          <a href={el.link}>{el.name}</a>
+        </li>
+      );
+    })}
+  </ul>
+);
+
+export default Breadcrumbs;

package/src/MaterialsCloudHeader/Navbar.css

@@ -1,129 +1,128 @@
-.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;
-  /* 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;
-}
-
-.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;
-  font-weight: 300;
-  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: 2px 20px 2px;
-    z-index: 10;
-  }
-  .mc-navbar .mc-navbrand {
-    float: none;
-    display: block;
-    text-align: left;
-  }
-  .mc-navbar .more-dropdown {
-    position: absolute;
-    top: 0;
-    right: 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;
+  /* 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;
+}
+
+.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: 2px 20px 2px;
+    z-index: 10;
+  }
+  .mc-navbar .mc-navbrand {
+    float: none;
+    display: block;
+    text-align: left;
+  }
+  .mc-navbar .more-dropdown {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+}