mc-react-header 0.4.5 → 0.5.2

package/.github/workflows/release_and_publish.yml

@@ -8,21 +8,25 @@ on:
 jobs:
   release_and_publish:
     runs-on: ubuntu-latest
+
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
-      - name: Set up Node.js
-        uses: actions/setup-node@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
         with:
           node-version: "22"
           registry-url: "https://registry.npmjs.org/"
 
-      - name: Install project dependencies
-        run: npm ci
+      - name: Enable pnpm
+        run: corepack enable
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
 
-      - name: Build the dist folder
-        run: npm run build
+      - name: Build
+        run: pnpm build
 
       - name: Create GitHub Release
         id: create_release
@@ -30,12 +34,12 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          tag_name: ${{ github.ref }}
-          release_name: ${{ github.ref }}
+          tag_name: ${{ github.ref_name }}
+          release_name: ${{ github.ref_name }}
           draft: false
           prerelease: false
 
       - name: Publish to npm
-        run: npm publish
+        run: pnpm publish --no-git-checks
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/README.md

@@ -9,13 +9,13 @@ Published to npm, install with `npm install mc-react-header`.
 ## Development
 
 ```bash
-npm install
-npm start
+pnpm install
+pnpm start
 ```
 
 To make a new version and publish to npm via GitHub Actions:
 
 ```bash
-npm version <major/minor/patch>
+pnpm version <major/minor/patch>
 git push --follow-tags
 ```

package/dist/Breadcrumbs.css

@@ -96,3 +96,13 @@ ul.mc-breadcrumb li a:not([href]):hover {
   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

@@ -8,9 +8,7 @@ require("./Breadcrumbs.css");
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Breadcrumbs = _ref => {
-  let {
-    breadcrumbsPath
-  } = _ref;
+  let breadcrumbsPath = _ref.breadcrumbsPath;
   return /*#__PURE__*/_react.default.createElement("ul", {
     className: "mc-breadcrumb"
   }, breadcrumbsPath.map((el, i) => {

package/dist/Navbar.css

@@ -112,17 +112,39 @@
     float: none;
     display: block;
     text-align: left;
-    padding: 2px 20px 2px;
+    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

@@ -6,10 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 require("./Navbar.css");
 var _mcloud_logo = _interopRequireDefault(require("./assets/mcloud_logo.png"));
-require("font-awesome/css/font-awesome.min.css");
 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",
@@ -63,10 +68,11 @@ const dropdownSections = {
   }
 };
 const DropdownMenu = _ref => {
-  let {
-    activeSection
-  } = _ref;
-  const [dropdownOpen, setDropdownOpen] = (0, _react.useState)(false);
+  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) {
@@ -85,15 +91,23 @@ const DropdownMenu = _ref => {
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "more-btn",
     onClick: toggleDropdown
-  }, "More ", /*#__PURE__*/_react.default.createElement("i", {
-    className: "fa fa-caret-down"
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  }, "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 {
-      link,
-      name
-    } = dropdownSections[element];
+    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,
@@ -103,9 +117,7 @@ const DropdownMenu = _ref => {
   })));
 };
 const Navbar = _ref2 => {
-  let {
-    activeSection
-  } = _ref2;
+  let activeSection = _ref2.activeSection;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "mc-navbar"
   }, /*#__PURE__*/_react.default.createElement("a", {

package/dist/index.js

@@ -10,10 +10,8 @@ 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
-  } = _ref;
+  let activeSection = _ref.activeSection,
+    breadcrumbsPath = _ref.breadcrumbsPath;
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Navbar.default, {
     activeSection: activeSection
   }), /*#__PURE__*/_react.default.createElement(_Breadcrumbs.default, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mc-react-header",
-  "version": "0.4.5",
+  "version": "0.5.2",
   "author": "Kristjan Eimre <kristjan.eimre@epfl.ch>",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -10,23 +10,6 @@
       "@babel/preset-env"
     ]
   },
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "font-awesome": "^4.7.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "^5.0.1",
-    "web-vitals": "^2.1.4"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "prebuild": "rimraf dist",
-    "build": "cross-env NODE_ENV=production npx babel src/MaterialsCloudHeader --out-dir dist --copy-files",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
   "eslintConfig": {
     "extends": [
       "react-app",
@@ -45,13 +28,31 @@
       "last 1 safari version"
     ]
   },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
     "@babel/core": "^7.20.2",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
     "babel-loader": "^9.1.0",
     "cross-env": "^7.0.3",
-    "rimraf": "^4.3.1"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "rimraf": "^4.3.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "prebuild": "rimraf dist",
+    "build": "cross-env NODE_ENV=production npx babel src/MaterialsCloudHeader --out-dir dist --copy-files",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
   }
-}
+}

package/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+allowBuilds:
+  core-js: true
+  core-js-pure: true

package/src/MaterialsCloudHeader/Breadcrumbs.css

@@ -96,3 +96,13 @@ ul.mc-breadcrumb li a:not([href]):hover {
   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/src/MaterialsCloudHeader/Navbar.css

@@ -112,17 +112,39 @@
     float: none;
     display: block;
     text-align: left;
-    padding: 2px 20px 2px;
+    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/src/MaterialsCloudHeader/Navbar.js

@@ -2,7 +2,6 @@ import "./Navbar.css";
 
 import Logo from "./assets/mcloud_logo.png";
 
-import "font-awesome/css/font-awesome.min.css";
 import React, { useEffect, useRef, useState } from "react";
 
 const mainSections = {
@@ -66,7 +65,17 @@ const DropdownMenu = ({ activeSection }) => {
   return (
     <div ref={wrapperRef} className="more-dropdown">
       <span className="more-btn" onClick={toggleDropdown}>
-        More <i className="fa fa-caret-down" />
+        More{" "}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="18"
+          height="18"
+          viewBox="4 2 18 20"
+          fill="currentColor"
+          style={{ verticalAlign: "middle" }}
+        >
+          <path d="M12 15l-7-7h14z" />
+        </svg>
       </span>
       <div className={dropdownContentClass}>
         {Object.keys(dropdownSections).map((element, i) => {