fix: iconWidth scale in 10x units

pull/15/head
Amio 2018-08-24 13:26:08 +08:00
rodzic 17da1cbd69
commit db811100d4
3 zmienionych plików z 32 dodań i 1 usunięć

Wyświetl plik

@ -1,10 +1,11 @@
const calcWidth = require('./calc-text-width.js').Verdana110
const colorPresets = require('./color-presets.js')
module.exports = ({ subject, status, color, style, icon, iconWidth = 130 }) => {
module.exports = ({ subject, status, color, style, icon, iconWidth = 13 }) => {
typeAssert(typeof subject === 'string', '<subject> must be string')
typeAssert(typeof status === 'string', '<status> must be string')
color = colorPresets[color] || color || colorPresets['blue']
iconWidth = iconWidth * 10
const iconSpanWidth = icon ? (subject.length ? iconWidth + 40 : iconWidth - 20) : 0
const sbTextWidth = calcWidth(subject)

Wyświetl plik

@ -137,6 +137,30 @@ exports[`test/index.spec.js TAP generate badge with { status, icon } > snapshot
`
exports[`test/index.spec.js TAP generate badge with { status, icon, iconWidth } > snapshot 1`] = `
<svg width="55.4" height="20" viewBox="0 0 554 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<linearGradient id="a" x2="0" y2="100%">
<stop offset="0" stop-opacity=".1" stop-color="#EEE"/>
<stop offset="1" stop-opacity=".1"/>
</linearGradient>
<mask id="m"><rect width="554" height="200" rx="30" fill="#FFF"/></mask>
<g mask="url(#m)">
<rect width="230" height="200" fill="#555"/>
<rect width="324" height="200" fill="#08C" x="230"/>
<rect width="554" height="200" fill="url(#a)"/>
</g>
<g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
<text x="225" y="148" textLength="0" fill="#000" opacity="0.25"></text>
<text x="215" y="138" textLength="0"></text>
<text x="285" y="148" textLength="224" fill="#000" opacity="0.25">icon</text>
<text x="275" y="138" textLength="224">icon</text>
</g>
<image x="39" y="35" width="150" height="130" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTg5IiB3aWR0aD0iMjIxLjY2NyI+PGRlZnM+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBkPSJNMCAxNDEuNzVoMTY2LjI1VjBIMHoiLz48L2NsaXBQYXRoPjxjbGlwUGF0aCBpZD0iYiI+PHBhdGggZD0iTTAgMTQxLjc1aDE2Ni4yNVYwSDB6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PGcgY2xpcC1wYXRoPSJ1cmwoI2EpIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzIDAgMCAtMS4zMzMzMyAwIDE4OSkiPjxwYXRoIGQ9Ik05NC4yNjggNzYuMjA0aDE1Ljc0M3YxNC4zMTJIOTQuMjY4em0tMTguNjA1IDBoMTUuNzQydjE0LjMxMkg3NS42NjN6bS0xOC42MDUgMGgxNS43NDN2MTQuMzEySDU3LjA1OHptLTE4LjYwNSAwaDE1Ljc0M3YxNC4zMTJIMzguNDUzem0tMTguNjA1IDBoMTUuNzQzdjE0LjMxMkgxOS44NDh6bTE4LjYwNSAxNy4xNzNoMTUuNzQzdjE0LjMxMUgzOC40NTN6bTE4LjYwNSAwaDE1Ljc0M3YxNC4zMTFINTcuMDU4em0xOC42MDUgMGgxNS43NDJ2MTQuMzExSDc1LjY2M3ptMCAxNy4xNzRoMTUuNzQydjE0LjMxMkg3NS42NjN6bTgxLjY1OC0yNi4wMDNjLTMuNDM4IDIuMy0xMS4zMzggMy4xNDMtMTcuNDE3IDEuOTk3LS43ODMgNS43MjYtMy45NzQgMTAuNjkxLTkuNzc5IDE1LjE3OWwtMy4zMzcgMi4yMjUtMi4yMjctMy4zNGMtMi44NTEtNC4yOTktNC4yNzUtMTAuMjU2LTMuODA4LTE1Ljk2Ny4yMS0yLjAxLjg3LTUuNjAzIDIuOTM3LTguNzY0LTIuMDY2LTEuMTEtNi4xNS0yLjY0LTExLjUzMy0yLjUzN0g4LjYyMmwtLjIwMy0xLjE5MmMtLjk3My01Ljc0LS45NTItMjMuNjUzIDEwLjY3OC0zNy40MiA4Ljg0LTEwLjQ2NCAyMi4wOTQtMTUuNzcyIDM5LjM5Mi0xNS43NzIgMzcuNSAwIDY1LjI0NCAxNy4yNjMgNzguMjM3IDQ4LjY0MSA1LjEwOS0uMTAyIDE2LjEwOS0uMDMgMjEuNzYgMTAuNzY2LjE0Ny4yNDguNDg2Ljg5NiAxLjQ3MyAyLjk0MmwuNTQxIDEuMTIyeiIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9nPjxnIGNsaXAtcGF0aD0idXJsKCNiKSIgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMyAwIDAgLTEuMzMzMzMgMCAxODkpIj48cGF0aCBkPSJNMTA0LjEzNyAyNC4yNDFoLjIxNmMuMjUyIDAgLjQ1Ni4wODQuNDU2LjI4OCAwIC4xOC0uMTMyLjMtLjQyLjMtLjEyIDAtLjIwNC0uMDEyLS4yNTItLjAyNHptLS4wMTItMS4xMTVoLS40NTZ2MS45NjdjLjE4LjAzNi40MzIuMDYuNzU2LjA2LjM3MiAwIC41MzktLjA2LjY4NC0uMTQ0YS41NDcuNTQ3IDAgMCAwIC4xOS0uNDMyYzAtLjIxNi0uMTY3LS4zODQtLjQwNi0uNDU1di0uMDI1Yy4xOS0uMDcyLjMtLjIxNS4zNTktLjQ3OS4wNi0uMy4wOTYtLjQyLjE0NS0uNDkyaC0uNDkyYy0uMDYuMDcyLS4wOTYuMjUyLS4xNTcuNDgtLjAzNS4yMTYtLjE1NS4zMTItLjQwNy4zMTJoLS4yMTZ6bS0xLjIxMiAxLjAzMmMwLS44NzYuNjQ5LTEuNTcgMS41MzYtMS41Ny44NjQgMCAxLjQ5OS42OTQgMS40OTkgMS41NTcgMCAuODc2LS42MzUgMS41ODMtMS41MTEgMS41ODMtLjg3NSAwLTEuNTI0LS43MDctMS41MjQtMS41N20zLjUzOCAwYzAtMS4xMTYtLjg3NS0xLjk5LTIuMDE0LTEuOTktMS4xMjcgMC0yLjAyNy44NzQtMi4wMjcgMS45OSAwIDEuMDkxLjkgMS45NjcgMi4wMjcgMS45NjcgMS4xMzkgMCAyLjAxNC0uODc2IDIuMDE0LTEuOTY3IiBmaWxsPSIjZmZmZmZmIi8+PC9nPjwvc3ZnPgo="/>
</svg>
`
exports[`test/index.spec.js TAP generate badge with { subject, status, icon, style } > snapshot 1`] = `
<svg width="96.5" height="20" viewBox="0 0 965 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

Wyświetl plik

@ -42,6 +42,12 @@ tap.test('generate badge with { status, icon }', t => {
t.end()
})
tap.test('generate badge with { status, icon, iconWidth }', t => {
const svg = badgen({ subject: '', status: 'icon', icon, iconWidth: 15 })
t.matchSnapshot(svg, 'snapshot')
t.end()
})
tap.test('generate badge with { subject, status, icon, style }', t => {
const svg = badgen({ subject: 'docker', status: 'icon', style: 'flat', icon })
t.matchSnapshot(svg, 'snapshot')