Add logo style badges - popout, popout-square (#1478)

* add logo style badges

add new styles:
- flat-logo
- flat-square-logo

* rename flat-logo -> popout

flat-logo -> popout
flat-square-logo -> popout-square

* default centered, add logoAlign param

* fix test

* logoAlign -> logoPosition

* reverse logoPosition direction

* fixup

lib/badge-data.js

@@ -105,6 +105,7 @@ function makeBadgeData(defaultLabel, overrides) {
     colorscheme: 'lightgrey',
     template: overrides.style,
     logo: makeLogo(undefined, overrides),
+    logoPosition: +overrides.logoPosition,
     logoWidth: +overrides.logoWidth,
     links: toArray(overrides.link),
     colorA: makeColor(overrides.colorA),

lib/badge-data.spec.js

@@ -67,6 +67,7 @@ describe('Badge data helpers', function() {
       label: 'no, my badge',
       style: 'flat-square',
       logo: 'image/svg+xml;base64,PHN2ZyB4bWxu',
+      logoPosition: 10,
       logoWidth: '25',
       link: 'https://example.com/',
       colorA: 'blue',
@@ -76,6 +77,7 @@ describe('Badge data helpers', function() {
       colorscheme: 'lightgrey',
       template: 'flat-square',
       logo: 'data:image/svg+xml;base64,PHN2ZyB4bWxu',
+      logoPosition: 10,
       logoWidth: 25,
       links: ['https://example.com/'],
       colorA: 'blue',

lib/export-supported-features-cli.js

@@ -12,6 +12,8 @@ const supportedFeatures = {
     'flat',
     'flat-square',
     'for-the-badge',
+    'popout',
+    'popout-square',
     'social',
   ],
 };

lib/make-badge.js

@@ -109,6 +109,7 @@ function makeBadge (measurer, {
   colorA,
   colorB,
   logo,
+  logoPosition,
   logoWidth,
   links = ['', ''],
 }) {
@@ -122,6 +123,14 @@ function makeBadge (measurer, {
   if (!(`${template}-${format}` in templates)) {
     template = format === 'svg' ? 'flat' : 'default';
   }
+  if (template.startsWith('popout')) {
+    if (logo){
+      logoPosition = (logoPosition <= 10 && logoPosition >= -10) ? logoPosition : 0;
+      logoWidth = +logoWidth || 32;
+    } else {
+      template = template.replace('popout', 'flat');
+    }
+  }
   if (template === 'social') {
     text[0] = capitalize(text[0]);
   } else if (template === 'for-the-badge') {
@@ -164,6 +173,7 @@ function makeBadge (measurer, {
     ],
     links: links.map(escapeXml),
     logo,
+    logoPosition,
     logoWidth,
     logoPadding,
     colorA,

lib/request-handler.js

@@ -40,6 +40,7 @@ const globalQueryParams = new Set([
   'style',
   'link',
   'logo',
+  'logoPosition',
   'logoWidth',
   'link',
   'colorA',