feat(RankIcon): add rank_icon option (#2628)

* feat(theme): add github_dark_dimmed theme

* feat(theme): change github_dark_dimmed icon color

* contrast ratio adjustment

contrast ratio adjustment on github_dark_dimmed theme

* feat(theme): readme preview

* feat(theme): github themes next to each other

* github themes next to each other

* feat(RankIcon): add rank icon option

* feat(RankIcon): extract rankIcon to icons file

* feat(RankIcon): update readme

* feat(RankIcon): test coverage

* Update readme.md

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

---------

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

src/cards/stats-card.js

@@ -1,7 +1,7 @@
 // @ts-check
 import { Card } from "../common/Card.js";
 import { I18n } from "../common/I18n.js";
-import { icons } from "../common/icons.js";
+import { icons, rankIcon } from "../common/icons.js";
 import {
   clampValue,
   flexLayout,
@@ -108,6 +108,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     number_format = "short",
     locale,
     disable_animations = false,
+    rank_icon = "default",
   } = options;
 
   const lheight = parseInt(String(line_height), 10);
@@ -294,15 +295,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
         <circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
         <circle class="rank-circle" cx="-10" cy="8" r="40" />
         <g class="rank-text">
-          <text
-            x="-5"
-            y="3"
-            alignment-baseline="central"
-            dominant-baseline="central"
-            text-anchor="middle"
-          >
-            ${rank.level}
-          </text>
+          ${rankIcon(rank_icon, rank?.level)}
         </g>
       </g>`;
 

src/cards/types.d.ts

@@ -1,4 +1,5 @@
 type ThemeNames = keyof typeof import("../../themes/index.js");
+type RankIcon = "default" | "github";
 
 export type CommonOptions = {
   title_color: string;
@@ -23,6 +24,9 @@ export type StatCardOptions = CommonOptions & {
   custom_title: string;
   disable_animations: boolean;
   number_format: string;
+  ring_color: string;
+  text_bold: boolean;
+  rank_icon: RankIcon;
 };
 
 export type RepoCardOptions = CommonOptions & {

src/common/icons.js

@@ -8,5 +8,28 @@ const icons = {
   fork: `<path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path>`,
 };
 
-export { icons };
+/**
+ * Get rank icon
+ *
+ * @returns {string} - The SVG code of the rank icon
+ */
+const rankIcon = (rankIcon, rankLevel) => {
+  switch (rankIcon) {
+    case "github":
+      return `
+        <svg x="-38" y="-30" height="66" width="66" aria-hidden="true" viewBox="0 0 16 16" version="1.1" data-view-component="true" data-testid="github-rank-icon">
+          <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
+        </svg>
+      `;
+    case "default":
+    default:
+      return `
+        <text x="-5" y="3" alignment-baseline="central" dominant-baseline="central" text-anchor="middle" data-testid="level-rank-icon">
+          ${rankLevel}
+        </text>
+      `;
+  }
+};
+
+export { icons, rankIcon };
 export default icons;