Replaced labels with icons in the SR and Action badges

2026-09-27 19:18:24 -03:00
parent de4da0eec6
commit 1a3decbeb6
37 changed files with 1856 additions and 279 deletions
--- a/src/features/opportunities/badge-content.js
+++ b/src/features/opportunities/badge-content.js
@@ -0,0 +1,63 @@
+/*
+ * Lucide icons: package, chart-no-axes-column-increasing, clipboard-list, list-checks.
+ * https://github.com/lucide-icons/lucide (ISC License)
+ * Copyright (c) 2026 Lucide Icons and Contributors
+ * Permission to use, copy, modify, and/or distribute this software for any
+ * purpose with or without fee is hereby granted, provided that the above
+ * copyright notice and this permission notice appear in all copies.
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+ * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+ * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+ * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+ * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+ */
+function createOpportunityBadgeContent({ environment }) {
+  const shapes = {
+    products: [
+      ["path", { d: "M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z" }],
+      ["path", { d: "M12 22V12" }],
+      ["polyline", { points: "3.29 7 12 12 20.71 7" }],
+      ["path", { d: "m7.5 4.27 9 5.15" }]
+    ],
+    ramp: [
+      ["path", { d: "M5 21v-6" }],
+      ["path", { d: "M12 21V9" }],
+      ["path", { d: "M19 21V3" }]
+    ],
+    sr: [
+      ["rect", { width: "8", height: "4", x: "8", y: "2", rx: "1", ry: "1" }],
+      ["path", { d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" }],
+      ["path", { d: "M12 11h4" }],
+      ["path", { d: "M12 16h4" }],
+      ["path", { d: "M8 11h.01" }],
+      ["path", { d: "M8 16h.01" }]
+    ],
+    actions: [
+      ["path", { d: "M13 5h8" }],
+      ["path", { d: "M13 12h8" }],
+      ["path", { d: "M13 19h8" }],
+      ["path", { d: "m3 17 2 2 4-4" }],
+      ["path", { d: "m3 7 2 2 4-4" }]
+    ]
+  };
+  function setContent(badge, kind, value) {
+    badge.textContent = String(value);
+    const namespace = "http://www.w3.org/2000/svg";
+    const icon = environment.document.createElementNS(namespace, "svg");
+    for (const [name, attribute] of Object.entries({
+      class: "opportunities-extension-badge-icon", viewBox: "0 0 24 24",
+      width: "16", height: "16", fill: "none", stroke: "currentColor",
+      "stroke-width": "2.25", "stroke-linecap": "round", "stroke-linejoin": "round",
+      "aria-hidden": "true", focusable: "false", "data-badge-icon": kind
+    })) icon.setAttribute(name, attribute);
+    for (const [tag, attributes] of shapes[kind]) {
+      const shape = environment.document.createElementNS(namespace, tag);
+      for (const [name, attribute] of Object.entries(attributes)) shape.setAttribute(name, attribute);
+      icon.append(shape);
+    }
+    badge.append(icon);
+  }
+  return { setContent };
+}