feat(stats): add 'not_bold' option to stats card (#1468)

api/index.js

@@ -26,6 +26,7 @@ module.exports = async (req, res) => {
     title_color,
     icon_color,
     text_color,
+    text_bold,
     bg_color,
     theme,
     cache_seconds,
@@ -75,6 +76,7 @@ module.exports = async (req, res) => {
         title_color,
         icon_color,
         text_color,
+        text_bold: parseBoolean(text_bold),
         bg_color,
         theme,
         custom_title,

readme.md

@@ -195,6 +195,7 @@ You can provide multiple comma-separated values in the bg_color option to render
 - `line_height` - Sets the line-height between text _(number)_
 - `exclude_repo` - Exclude stars from specified repositories _(Comma-separated values)_
 - `custom_title` - Sets a custom title for the card
+- `text_bold` - Use bold text _(boolean)_
 - `disable_animations` - Disables all animations in the card _(boolean)_
 
 #### Repo Card Exclusive Options:
@@ -453,3 +454,4 @@ Thanks! :heart:
 Contributions are welcome! <3
 
 Made with :heart: and JavaScript.
+

src/cards/stats-card.js

@@ -20,6 +20,7 @@ const createTextNode = ({
   index,
   showIcons,
   shiftValuePos,
+  bold,
 }) => {
   const kValue = kFormatter(value);
   const staggerDelay = (index + 3) * 150;
@@ -35,9 +36,11 @@ const createTextNode = ({
   return `
     <g class="stagger" style="animation-delay: ${staggerDelay}ms" transform="translate(25, 0)">
       ${iconSvg}
-      <text class="stat bold" ${labelOffset} y="12.5">${label}:</text>
+      <text class="stat ${
+        bold ? " bold" : "not_bold"
+      }" ${labelOffset} y="12.5">${label}:</text>
       <text
-        class="stat"
+        class="stat ${bold ? " bold" : "not_bold"}"
         x="${(showIcons ? 140 : 120) + shiftValuePos}"
         y="12.5"
         data-testid="${id}"
@@ -73,6 +76,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     title_color,
     icon_color,
     text_color,
+    text_bold = true,
     bg_color,
     theme = "default",
     custom_title,
@@ -165,6 +169,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
         showIcons: show_icons,
         shiftValuePos:
           (!include_all_commits ? 50 : 35) + (isLongLocale ? 50 : 0),
+        bold: text_bold,
       }),
     );
 

src/getStyles.js

@@ -85,6 +85,7 @@ const getStyles = ({
       animation: scaleInAnimation 0.3s ease-in-out forwards;
     }
     
+    .not_bold { font-weight: 400 }
     .bold { font-weight: 700 }
     .icon {
       fill: ${iconColor};

tests/__snapshots__/renderWakatimeCard.test.js.snap

@@ -41,6 +41,7 @@ exports[`Test Render Wakatime Card should render correctly 1`] = `
       animation: scaleInAnimation 0.3s ease-in-out forwards;
     }
     
+    .not_bold { font-weight: 400 }
     .bold { font-weight: 700 }
     .icon {
       fill: #4c71f2;
@@ -202,6 +203,7 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1
       animation: scaleInAnimation 0.3s ease-in-out forwards;
     }
     
+    .not_bold { font-weight: 400 }
     .bold { font-weight: 700 }
     .icon {
       fill: #4c71f2;