feat: allow users to pass ring_color param (#2075)

* fix: prevent crash if undefined color is passed to func fallbackColor

* feat: allow users to pass ring_color param

Before this commit, the ring color was always equal to the title color.
This commit allows the user to pass a ring_color property to allow him
to style the ring color the way he pleases to. If no ring_color is
passed we default to the title color.

* docs: improves ring color documentation

* fix: improve code style

Co-authored-by: rickstaa <rick.staa@outlook.com>

tests/__snapshots__/renderWakatimeCard.test.js.snap

@@ -51,13 +51,13 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1
     }
 
     .rank-circle-rim {
-      stroke: #2f80ed;
+      stroke: undefined;
       fill: none;
       stroke-width: 6;
       opacity: 0.2;
     }
     .rank-circle {
-      stroke: #2f80ed;
+      stroke: undefined;
       stroke-dasharray: 250;
       fill: none;
       stroke-width: 6;

tests/api.test.js

@@ -248,4 +248,39 @@ describe("Test /api/", () => {
       ),
     );
   });
+
+  it("should allow changing ring_color", async () => {
+    const { req, res } = faker(
+      {
+        username: "anuraghazra",
+        hide: "issues,prs,contribs",
+        show_icons: true,
+        hide_border: true,
+        line_height: 100,
+        title_color: "fff",
+        ring_color: "0000ff",
+        icon_color: "fff",
+        text_color: "fff",
+        bg_color: "fff",
+      },
+      data,
+    );
+
+    await api(req, res);
+
+    expect(res.setHeader).toBeCalledWith("Content-Type", "image/svg+xml");
+    expect(res.send).toBeCalledWith(
+      renderStatsCard(stats, {
+        hide: ["issues", "prs", "contribs"],
+        show_icons: true,
+        hide_border: true,
+        line_height: 100,
+        title_color: "fff",
+        ring_color: "0000ff",
+        icon_color: "fff",
+        text_color: "fff",
+        bg_color: "fff",
+      }),
+    );
+  });
 });

tests/renderStatsCard.test.js

@@ -239,6 +239,39 @@ describe("Test renderStatsCard", () => {
     );
   });
 
+  it("should render custom ring_color properly", () => {
+    const customColors = {
+      title_color: "5a0",
+      ring_color: "0000ff",
+      icon_color: "1b998b",
+      text_color: "9991",
+      bg_color: "252525",
+    };
+
+    document.body.innerHTML = renderStatsCard(stats, { ...customColors });
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.innerHTML);
+
+    const headerClassStyles = stylesObject[":host"][".header "];
+    const statClassStyles = stylesObject[":host"][".stat "];
+    const iconClassStyles = stylesObject[":host"][".icon "];
+    const rankCircleStyles = stylesObject[":host"][".rank-circle "];
+    const rankCircleRimStyles = stylesObject[":host"][".rank-circle-rim "];
+
+    expect(headerClassStyles.fill.trim()).toBe(`#${customColors.title_color}`);
+    expect(statClassStyles.fill.trim()).toBe(`#${customColors.text_color}`);
+    expect(iconClassStyles.fill.trim()).toBe(`#${customColors.icon_color}`);
+    expect(rankCircleStyles.stroke.trim()).toBe(`#${customColors.ring_color}`);
+    expect(rankCircleRimStyles.stroke.trim()).toBe(
+      `#${customColors.ring_color}`,
+    );
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "fill",
+      "#252525",
+    );
+  });
+
   it("should render icons correctly", () => {
     document.body.innerHTML = renderStatsCard(stats, {
       show_icons: true,

tests/utils.test.js

@@ -48,6 +48,7 @@ describe("Test utils.js", () => {
     let colors = getCardColors({
       title_color: "f00",
       text_color: "0f0",
+      ring_color: "0000ff",
       icon_color: "00f",
       bg_color: "fff",
       border_color: "fff",
@@ -57,6 +58,7 @@ describe("Test utils.js", () => {
       titleColor: "#f00",
       textColor: "#0f0",
       iconColor: "#00f",
+      ringColor: "#0000ff",
       bgColor: "#fff",
       borderColor: "#fff",
     });
@@ -75,6 +77,7 @@ describe("Test utils.js", () => {
       titleColor: "#2f80ed",
       textColor: "#0f0",
       iconColor: "#00f",
+      ringColor: "#2f80ed",
       bgColor: "#fff",
       borderColor: "#e4e2e2",
     });
@@ -87,11 +90,31 @@ describe("Test utils.js", () => {
     expect(colors).toStrictEqual({
       titleColor: "#fff",
       textColor: "#9f9f9f",
+      ringColor: "#fff",
       iconColor: "#79ff97",
       bgColor: "#151515",
       borderColor: "#e4e2e2",
     });
   });
+
+  it("getCardColors: should return ring color equal to title color if not ring color is defined", () => {
+    let colors = getCardColors({
+      title_color: "f00",
+      text_color: "0f0",
+      icon_color: "00f",
+      bg_color: "fff",
+      border_color: "fff",
+      theme: "dark",
+    });
+    expect(colors).toStrictEqual({
+      titleColor: "#f00",
+      textColor: "#0f0",
+      iconColor: "#00f",
+      ringColor: "#f00",
+      bgColor: "#fff",
+      borderColor: "#fff",
+    });
+  });
 });
 
 describe("wrapTextMultiline", () => {