diff --git a/src/getStyles.js b/src/getStyles.js
index 198344f..07d90fd 100644
--- 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
new file mode 100644
index 0000000..7b7e507
--- /dev/null
+++ b/src/icons.js
@@ -0,0 +1,11 @@
+const icons = {
+ star: ``,
+ commits: ``,
+ prs: ``,
+ issues: ``,
+ icon: ``,
+ contribs: ``,
+ fork: ``,
+};
+
+module.exports = icons;
diff --git a/src/renderRepoCard.js b/src/renderRepoCard.js
index 9b127b3..7fd30f5 100644
--- 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 = {}) => {
@@ -45,14 +46,14 @@ const renderRepoCard = (repo, options = {}) => {
${totalStars}
${totalForks}
diff --git a/src/renderStatsCard.js b/src/renderStatsCard.js
index 75259de..14d063c 100644
--- 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
// to fix firefox layout bug
const lheight = lineHeight * (index + 1);
+ const translateY = lheight - lineHeight / 2;
+ const labelOffset = showIcons ? `x="25"` : "";
+ const iconSvg = showIcons
+ ? `
+
+ `
+ : "";
return `
-
- ${icon}
-
- ${label}:
-
- ${kValue}
-
+
+ ${iconSvg}
+ ${label}:
+ ${kValue}
+
`;
};
@@ -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
index 6375f4b..a82dc28 100644
--- 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");
+ });
});