UI/wsdot (#348)

* feat: ✨ Added WSDOT logo to header * build: ➕ Added @wsdot/web-styles dependency * build: :down_arrow: Downgraded lefthook dependency due to issues Reverted to the previous version of lefthook due to it not working. That newer version was also being detected as a virus. (See evilmartians/lefthook#722) My issue could possibly be related to this one: - evilmartians/lefthook#708
WSDOT-GIS · May 21, 2024 · fadcd76 · fadcd76
1 parent ebaa124
commit fadcd76
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 54 deletions.
diff --git a/.cspell/custom-dictionary.txt b/.cspell/custom-dictionary.txt
@@ -11,10 +11,13 @@ fontnik
 Geoportal
 geouri
 GNIS
+Haettenschweiler
+inconsolata
 JURDSG
 JURFIPSDSG
 JURNM
 latlng
+lato
 lcov
 mlat
 mlon

diff --git a/index.html b/index.html
@@ -22,7 +22,7 @@
   <body class="calcite-mode-auto">
     <calcite-loader></calcite-loader>
     <calcite-shell>
-      <h2 slot="header">%VITE_TITLE%</h2>
+      <h2 slot="header" id="header-title">%VITE_TITLE%</h2>
       <calcite-shell-panel slot="panel-start">
         <calcite-panel>
           <calcite-block heading="SRMP" collapsible open>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
     "clean": "git clean -dfx --exclude \"node_modules/**\" --exclude \".mailmap\"",
     "dev": "vite",
     "lint": "eslint . --fix",
-    "prettier": "prettier .",
+    "prettier": "prettier . --write",
     "publish": "npm run build && node tools/publish.mjs",
     "test": "vitest run",
     "test:watch": "vitest",
@@ -38,7 +38,7 @@
     "eslint-plugin-sonarjs": "^1.0.3",
     "gh-pages": "^6.1.1",
     "jsdom": "^24.0.0",
-    "lefthook": "^1.6.12",
+    "lefthook": "1.6.11",
     "optionator": "^0.9.4",
     "prettier": "^3.2.5",
     "tsx": "^4.10.5",
@@ -71,6 +71,7 @@
   "dependencies": {
     "@esri/calcite-components": "^2.8.2",
     "@types/geojson": "^7946.0.14",
+    "@wsdot/web-styles": "github:WSDOT-GIS/wsdot-web-styles",
     "dms-conversion": "^3.1.3"
   }
 }
diff --git a/src/index.css b/src/index.css
@@ -1,4 +1,11 @@
+:root {
+  font-family: "Lato", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
+}
 
+#wsdot-logo {
+  fill: var(--wsdot-logo-green);
+  margin-right: 1rem;
+}
 
 html,
 body,
@@ -29,4 +36,4 @@ calcite-loader {
 
 calcite-rating {
   margin-top: 0.25rem;
-}
+}
diff --git a/src/main.ts b/src/main.ts
@@ -2,6 +2,31 @@ import { createElcErrorAlert } from "./createElcErrorAlert";
 import { emitErrorEvent } from "./errorEvent";
 import type MapView from "@arcgis/core/views/MapView";
 import "@esri/calcite-components";
+import "@fontsource/inconsolata";
+import "@fontsource/lato";
+
+import("@wsdot/web-styles/css/wsdot-colors.css");
+
+async function addWsdotLogo() {
+  const { default: svg } = await import(
+    "@wsdot/web-styles/images/wsdot-logo/wsdot-logo-black.svg?raw"
+  );
+  const dp = new DOMParser();
+  const wsdotLogo = dp.parseFromString(svg, "image/svg+xml").documentElement;
+
+  wsdotLogo.id = "wsdot-logo";
+
+  /* __PURE__ */ console.debug("wsdot logo", wsdotLogo);
+  const headingSelector = "h2";
+  const headingElement = document.body.querySelector(headingSelector);
+  if (!headingElement) {
+    throw new Error("Heading element not found");
+  }
+  headingElement.prepend(wsdotLogo);
+  return wsdotLogo;
+}
+
+void addWsdotLogo();
 
 window.addEventListener("elc-error", (event) => {
   /* __PURE__ */ console.group("elc-error event listener");