refactor(interface): migrate scorecard to lit

workspaces/cli/public/components/npm-avatar/npm-avatar.js

@@ -1,4 +1,3 @@
-/* eslint-disable @openally/imports */
 // Import Third-party Dependencies
 import { LitElement, html } from "lit";
 import { when } from "lit/directives/when.js";

workspaces/cli/public/components/package/package.css

@@ -1,6 +1,5 @@
 @import url("./header/header.css");
 @import url("./pannels/overview/overview.css");
-@import url("./pannels/scorecard/scorecard.css");
 @import url("./pannels/warnings/warnings.css");
 
 section#package-info {

workspaces/cli/public/components/package/package.html

@@ -193,22 +193,5 @@
     </div>
   </div>
 
-  <div class="package-container hidden" id="pan-scorecard">
-    <div class="package-scorecard">
-      <div class="help-dialog">
-        <i class="icon-info-circled-alt"></i>
-        <p>[[=z.token('package_info.helpers.openSsf')]] <a href="https://github.com/ossf/scorecard" target="_blank"
-            rel="noopener noreferrer">[[=z.token('package_info.helpers.here')]]</a></p>
-      </div>
-      <div class="score-header">
-        <span class="score-text">SCORE</span>
-        <span class="score-value">
-          <span id="head-score"></span>/10
-        </span>
-        <span class="visualizer">
-          <a target="_blank"><img src="ext-link.svg" class="logo"> OpenSSF Scorecard Monitor Visualizer</a>
-        </span>
-      </div>
-    </div>
-  </div>
+  <div class="package-container hidden" id="pan-scorecard"></div>
 </template>

workspaces/cli/public/components/package/package.js

@@ -1,3 +1,6 @@
+// Import Third-party Dependencies
+import { getScoreColor } from "@nodesecure/utils";
+
 // Import Internal Dependencies
 import "../bundlephobia/bundlephobia.js";
 import { PackageHeader } from "./header/header.js";
@@ -211,7 +214,23 @@ export class PackageInfo {
     this.addNavigationSignal(/** @type {HTMLElement} */ (clone.getElementById("vulnerabilities-nav-menu")),
       this.dependency.vulnerabilities.length);
     if (utils.getSettingsConfig().disableExternalRequests === false) {
-      new Pannels.Scorecard(this).generate(clone);
+      const scorecard = new Pannels.Scorecard();
+      scorecard.repository = this.links.github.href ?? "";
+      scorecard.id = "pan-scorecard";
+      scorecard.classList.add("package-container", "hidden");
+      const menu = /** @type {HTMLElement} */ (clone.getElementById("scorecard-menu"));
+      const score = /** @type {HTMLElement} */ (clone.getElementById("ossf-score"));
+
+      scorecard.addEventListener("scorecard-loaded", (event) => {
+        const { detail: data } = /** @type {CustomEvent<import("../../common/scorecard.js").ScorecardData | null>} */ (event);
+        menu.style.display = data ? "flex" : "none";
+        if (data) {
+          menu.classList.add(getScoreColor(data.score));
+          score.textContent = String(data.score);
+        }
+      });
+
+      /** @type {HTMLElement} */ (clone.getElementById("pan-scorecard")).replaceWith(scorecard);
     }
 
     return clone;