perf: align icons and text vertical (anuraghazra#33)

* improve: improved rating algorithm wip * Fixed typos, punctuation [...] Corrected many instances of "Github" to "GitHub", fixed the punctuation on some sections, fixed the ~lack of~ uppercase chars in others, tweaked the grammar a bit, and added the Vercel guide to a spoiler-ish section so it's only visible if you click to expand. <3 * fix: github rate limiter with multiple PATs * perf: vertically align text left * refactor: refactored retryer logic & handled invalid tokens * chore: remove redundant codes `axios` is Promise based, there is no need to wrap it into a Promise constructor again * fix: query param booleans * design: fixed rank alignment * chore: rebase from master * fix: fixed repo card breaking in absence of primaryLanguage * fix: fixed stars count anuraghazra#39 & fixed progressbar percentage * perf: replace emoji icons with GitHub SVG icons * chore: added funding link * refactor: refacted icons to another file * test: added test for icons Co-authored-by: anuraghazra <[email protected]> Co-authored-by: Micael Jarniac <[email protected]> Co-authored-by: JounQin <[email protected]>
rahulrachh · Jul 16, 2020 · 0ef71ea · 0ef71ea
1 parent ba72879
commit 0ef71ea
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 22 deletions.
diff --git a/src/getStyles.js b/src/getStyles.js
@@ -64,9 +64,6 @@ const getStyles = ({
     }
     
     .bold { font-weight: 700 }
-    .star-icon { 
-      font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
-    }
     .icon {
       fill: ${iconColor};
       display: ${!!show_icons ? "block" : "none"};

diff --git a/src/icons.js b/src/icons.js
diff --git a/src/renderRepoCard.js b/src/renderRepoCard.js
@@ -1,4 +1,5 @@
 const { kFormatter, encodeHTML, fallbackColor } = require("../src/utils");
+const icons = require("./icons");
 
 const renderRepoCard = (repo, options = {}) => {
   const { name, description, primaryLanguage, stargazers, forkCount } = repo;
@@ -32,7 +33,7 @@ const renderRepoCard = (repo, options = {}) => {
       </style>
       <rect data-testid="card-border" x="0.5" y="0.5" width="399" height="99%" rx="4.5" fill="${bgColor}" stroke="#E4E2E2"/>
       <svg class="icon" x="25" y="25" viewBox="0 0 16 16" version="1.1" width="16" height="16">
-        <path fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"></path>
+        ${icons.contribs}
       </svg>
 
       <text x="50" y="38" class="header">${name}</text>
@@ -45,14 +46,14 @@ const renderRepoCard = (repo, options = {}) => {
 
       <g transform="translate(${155 - shiftText}, 100)">
         <svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
-          <path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path>
+          ${icons.star}
         </svg>
         <text data-testid="stargazers" class="gray" x="25">${totalStars}</text>
       </g>
 
       <g transform="translate(${220 - shiftText}, 100)">
         <svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
-          <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>
+          ${icons.fork}
         </svg>
         <text data-testid="forkcount" class="gray" x="25">${totalForks}</text>
       </g>

diff --git a/src/renderStatsCard.js b/src/renderStatsCard.js
@@ -1,21 +1,36 @@
 const { kFormatter, fallbackColor } = require("../src/utils");
 const getStyles = require("./getStyles");
+const icons = require("./icons");
 
-const createTextNode = ({ icon, label, value, id, index, lineHeight }) => {
-  const classname = icon === "★" && "star-icon";
+const createTextNode = ({
+  icon,
+  label,
+  value,
+  id,
+  index,
+  lineHeight,
+  showIcons,
+}) => {
   const kValue = kFormatter(value);
   const staggerDelay = (index + 3) * 150;
   // manually calculating lineHeight based on index instead of using <tspan dy="" />
   // to fix firefox layout bug
   const lheight = lineHeight * (index + 1);
+  const translateY = lheight - lineHeight / 2;
+  const labelOffset = showIcons ? `x="25"` : "";
+  const iconSvg = showIcons
+    ? `
+    <svg data-testid="icon" class="icon" viewBox="0 0 16 16" version="1.1" width="16" height="16">
+      ${icon}
+    </svg>
+  `
+    : "";
   return `
-    <text class="stagger" style="animation-delay: ${staggerDelay}ms" x="25" y="${lheight}">
-      <tspan dx="0" data-testid="icon" class="icon ${classname}">${icon}</tspan>   
-      <tspan dx="0" class="stat bold">
-       ${label}:
-      </tspan>
-      <tspan x="160" data-testid="${id}" class="stat">${kValue}</tspan>
-    </text>
+    <g class="stagger" style="animation-delay: ${staggerDelay}ms" transform="translate(25, ${translateY})">
+      ${iconSvg}
+      <text class="stat bold" ${labelOffset} y="12.5">${label}:</text>
+      <text class="stat" x="135" y="12.5" data-testid="${id}">${kValue}</text>
+    </g>
   `;
 };
 
@@ -50,31 +65,31 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
 
   const STATS = {
     stars: {
-      icon: "★",
+      icon: icons.star,
       label: "Total Stars",
       value: totalStars,
       id: "stars",
     },
     commits: {
-      icon: "🕗",
+      icon: icons.commits,
       label: "Total Commits",
       value: totalCommits,
       id: "commits",
     },
     prs: {
-      icon: "🔀",
+      icon: icons.prs,
       label: "Total PRs",
       value: totalPRs,
       id: "prs",
     },
     issues: {
-      icon: "ⓘ",
+      icon: icons.issues,
       label: "Total Issues",
       value: totalIssues,
       id: "issues",
     },
     contribs: {
-      icon: "📕",
+      icon: icons.contribs,
       label: "Contributed to",
       value: contributedTo,
       id: "contribs",
@@ -85,7 +100,12 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     .filter((key) => !hide.includes(key))
     .map((key, index) =>
       // create the text nodes, and pass index so that we can calculate the line spacing
-      createTextNode({ ...STATS[key], index, lineHeight: lheight })
+      createTextNode({
+        ...STATS[key],
+        index,
+        lineHeight: lheight,
+        showIcons: show_icons,
+      })
     );
 
   // Calculate the card height depending on how many items there are

diff --git a/tests/renderStatsCard.test.js b/tests/renderStatsCard.test.js
@@ -2,7 +2,11 @@ require("@testing-library/jest-dom");
 const cssToObject = require("css-to-object");
 const renderStatsCard = require("../src/renderStatsCard");
 
-const { getByTestId, queryByTestId } = require("@testing-library/dom");
+const {
+  getByTestId,
+  queryByTestId,
+  queryAllByTestId,
+} = require("@testing-library/dom");
 
 describe("Test renderStatsCard", () => {
   const stats = {
@@ -107,4 +111,27 @@ describe("Test renderStatsCard", () => {
       "#252525"
     );
   });
+
+  it("should render icons correctly", () => {
+    document.body.innerHTML = renderStatsCard(stats, {
+      show_icons: "true",
+    });
+
+    expect(queryAllByTestId(document.body, "icon")[0]).toBeDefined();
+    expect(queryByTestId(document.body, "stars")).toBeDefined();
+    expect(
+      queryByTestId(document.body, "stars").previousElementSibling // the label
+    ).toHaveAttribute("x", "25");
+  });
+
+  it("should not have icons if show_icons is false", () => {
+    document.body.innerHTML = renderStatsCard(stats, { show_icons: false });
+
+    console.log(queryAllByTestId(document.body, "icon"));
+    expect(queryAllByTestId(document.body, "icon")[0]).not.toBeDefined();
+    expect(queryByTestId(document.body, "stars")).toBeDefined();
+    expect(
+      queryByTestId(document.body, "stars").previousElementSibling // the label
+    ).not.toHaveAttribute("x");
+  });
 });