From dd5a41d696c3f6a6ad84253317d1b70bd0e1a66f Mon Sep 17 00:00:00 2001 From: Qi Mo Lin <60514926+qimolin@users.noreply.github.com> Date: Thu, 18 Aug 2022 10:32:03 +0200 Subject: [PATCH] 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 --- src/cards/top-languages-card.js | 20 +++++++++++++------- tests/renderTopLanguages.test.js | 15 +++++++++++++++ 2 files changed, 28 insertions(+), 7 deletions(-) diff --git a/src/cards/top-languages-card.js b/src/cards/top-languages-card.js index 836af05b..b2f5c362 100644 --- a/src/cards/top-languages-card.js +++ b/src/cards/top-languages-card.js @@ -13,6 +13,7 @@ const { } = require("../common/utils"); const DEFAULT_CARD_WIDTH = 300; +const MIN_CARD_WIDTH = 230; const DEFAULT_LANGS_COUNT = 5; const DEFAULT_LANG_COLOR = "#858585"; const CARD_PADDING = 25; @@ -24,12 +25,12 @@ const CARD_PADDING = 25; /** * @param {Lang[]} arr */ - const getLongestLang = (arr) => - arr.reduce( - (savedLang, lang) => - lang.name.length > savedLang.name.length ? lang : savedLang, - { name: "", size: null, color: "" }, - ); +const getLongestLang = (arr) => + arr.reduce( + (savedLang, lang) => + lang.name.length > savedLang.name.length ? lang : savedLang, + { name: "", size: null, color: "" }, + ); /** * @param {{ @@ -261,7 +262,11 @@ const renderTopLanguages = (topLangs, options = {}) => { 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 finalLayout = ""; @@ -307,3 +312,4 @@ const renderTopLanguages = (topLangs, options = {}) => { }; module.exports = renderTopLanguages; +module.exports.MIN_CARD_WIDTH = MIN_CARD_WIDTH; diff --git a/tests/renderTopLanguages.test.js b/tests/renderTopLanguages.test.js index 36dbf03f..b2ff70f6 100644 --- a/tests/renderTopLanguages.test.js +++ b/tests/renderTopLanguages.test.js @@ -103,6 +103,21 @@ describe("Test renderTopLanguages", () => { 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", () => { document.body.innerHTML = renderTopLanguages(langs);