feat: add min width languages card (#1953)

* Add min width to languages card

* Add test for min width languages card

* feat: increase lang card min width

Co-authored-by: Rick Staa <rick.staa@outlook.com>
This commit is contained in:
Qi Mo Lin 2022-08-18 10:32:03 +02:00 committed by GitHub
parent 8d5f2da3f3
commit dd5a41d696
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 7 deletions

View File

@ -13,6 +13,7 @@ const {
} = require("../common/utils"); } = require("../common/utils");
const DEFAULT_CARD_WIDTH = 300; const DEFAULT_CARD_WIDTH = 300;
const MIN_CARD_WIDTH = 230;
const DEFAULT_LANGS_COUNT = 5; const DEFAULT_LANGS_COUNT = 5;
const DEFAULT_LANG_COLOR = "#858585"; const DEFAULT_LANG_COLOR = "#858585";
const CARD_PADDING = 25; const CARD_PADDING = 25;
@ -24,12 +25,12 @@ const CARD_PADDING = 25;
/** /**
* @param {Lang[]} arr * @param {Lang[]} arr
*/ */
const getLongestLang = (arr) => const getLongestLang = (arr) =>
arr.reduce( arr.reduce(
(savedLang, lang) => (savedLang, lang) =>
lang.name.length > savedLang.name.length ? lang : savedLang, lang.name.length > savedLang.name.length ? lang : savedLang,
{ name: "", size: null, color: "" }, { name: "", size: null, color: "" },
); );
/** /**
* @param {{ * @param {{
@ -261,7 +262,11 @@ const renderTopLanguages = (topLangs, options = {}) => {
String(langs_count), String(langs_count),
); );
let width = isNaN(card_width) ? DEFAULT_CARD_WIDTH : card_width; let width = isNaN(card_width)
? DEFAULT_CARD_WIDTH
: card_width < MIN_CARD_WIDTH
? MIN_CARD_WIDTH
: card_width;
let height = calculateNormalLayoutHeight(langs.length); let height = calculateNormalLayoutHeight(langs.length);
let finalLayout = ""; let finalLayout = "";
@ -307,3 +312,4 @@ const renderTopLanguages = (topLangs, options = {}) => {
}; };
module.exports = renderTopLanguages; module.exports = renderTopLanguages;
module.exports.MIN_CARD_WIDTH = MIN_CARD_WIDTH;

View File

@ -103,6 +103,21 @@ describe("Test renderTopLanguages", () => {
expect(document.querySelector("svg")).toHaveAttribute("width", "400"); expect(document.querySelector("svg")).toHaveAttribute("width", "400");
}); });
it("should render with min width", () => {
document.body.innerHTML = renderTopLanguages(langs, { card_width: 190 });
expect(document.querySelector("svg")).toHaveAttribute(
"width",
renderTopLanguages.MIN_CARD_WIDTH.toString(),
);
document.body.innerHTML = renderTopLanguages(langs, { card_width: 100 });
expect(document.querySelector("svg")).toHaveAttribute(
"width",
renderTopLanguages.MIN_CARD_WIDTH.toString(),
);
});
it("should render default colors properly", () => { it("should render default colors properly", () => {
document.body.innerHTML = renderTopLanguages(langs); document.body.innerHTML = renderTopLanguages(langs);