Remove popout styles (#3747)

* Remove popout styles

* Make popout-square fall back to flat-square

gh-badges/lib/make-badge.js

@@ -131,15 +131,10 @@ module.exports = function makeBadge({
   }
 
   if (!(template in templates)) {
-    template = 'flat'
-  }
-  if (template.startsWith('popout')) {
-    if (logo) {
-      logoPosition =
-        logoPosition <= 10 && logoPosition >= -10 ? logoPosition : 0
-      logoWidth = +logoWidth || 32
+    if (template && template.endsWith('-square')) {
+      template = 'flat-square'
     } else {
-      template = template.replace('popout', 'flat')
+      template = 'flat'
     }
   }
   if (template === 'social') {

gh-badges/lib/make-badge.spec.js

@@ -122,6 +122,22 @@ describe('The badge generator', function() {
         .to.equal(jsonBadgeWithDefaultStyle)
         .and.to.satisfy(isSvg)
     })
+
+    it('should replace "popout-square" svg template with "flat-square"', function() {
+      const jsonBadgeWithUnknownStyle = makeBadge({
+        text: ['name', 'Bob'],
+        format: 'svg',
+        template: 'popout-square',
+      })
+      const jsonBadgeWithDefaultStyle = makeBadge({
+        text: ['name', 'Bob'],
+        format: 'svg',
+        template: 'flat-square',
+      })
+      expect(jsonBadgeWithUnknownStyle)
+        .to.equal(jsonBadgeWithDefaultStyle)
+        .and.to.satisfy(isSvg)
+    })
   })
 
   describe('"for-the-badge" template badge generation', function() {

gh-badges/templates/popout-square-template.svg

-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{{=(it.widths[0] -= it.text[0].length ? 0 : (it.logo ? (it.colorA ? 0 : 6) : 11))+it.widths[1]}}" height="40">
-  <g shape-rendering="crispEdges">
-    <rect width="{{=it.widths[0]}}" y="{{=10-it.logoPosition}}" height="20" fill="{{=it.escapeXml(it.text[0].length || it.logo && it.colorA ? (it.colorA||"#555") : (it.colorB||"#4c1"))}}"/>
-    <rect x="{{=it.widths[0]}}" y="{{=10-it.logoPosition}}" width="{{=it.widths[1]}}" height="20" fill="{{=it.escapeXml(it.colorB||"#4c1")}}"/>
-  </g>
-  <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110">
-    {{?it.logo}}
-      <image x="5" y="3" width="{{=it.logoWidth}}" height="32" xlink:href="{{=it.logo}}"/>
-    {{?}}
-    <text x="{{=(((it.widths[0]+it.logoWidth+it.logoPadding)/2)+1)*10}}" y="{{=(24-it.logoPosition)*10}}" transform="scale(0.1)" textLength="{{=(it.widths[0]-(10+it.logoWidth+it.logoPadding))*10}}" lengthAdjust="spacing">{{=it.escapedText[0]}}</text>
-    <text x="{{=(it.widths[0]+it.widths[1]/2-1)*10}}" y="{{=(24-it.logoPosition)*10}}" transform="scale(0.1)" textLength="{{=(it.widths[1]-10)*10}}" lengthAdjust="spacing">{{=it.escapedText[1]}}</text>
-  </g>
-  {{?(it.links[0] && it.links[0].length)}}
-    <a xlink:href="{{=it.links[0]}}">
-      <rect width="{{=it.widths[0]}}" height="40" fill="rgba(0,0,0,0)"/>
-    </a>
-  {{?}}
-  {{?(it.links[0] && it.links[0].length || it.links[1] && it.links[1].length)}}
-    <a xlink:href="{{=it.links[1] || it.links[0]}}">
-      <rect x="{{=it.widths[0]}}" width="{{=it.widths[1]}}" height="40" fill="rgba(0,0,0,0)"/>
-    </a>
-  {{?}}
-</svg>

gh-badges/templates/popout-template.svg

-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{{=(it.widths[0] -= it.text[0].length ? 0 : (it.logo ? (it.colorA ? 0 : 6) : 11))+it.widths[1]}}" height="40">
-  <linearGradient id="smooth" x2="0" y2="100%">
-    <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
-    <stop offset="1" stop-opacity=".1"/>
-  </linearGradient>
-
-  <clipPath id="round">
-    <rect width="{{=it.widths[0]+it.widths[1]}}" y="{{=10-it.logoPosition}}" height="20" rx="3" fill="#fff"/>
-  </clipPath>
-
-  <g clip-path="url(#round)">
-    <rect width="{{=it.widths[0]}}" y="{{=10-it.logoPosition}}" height="20" fill="{{=it.escapeXml(it.text[0].length || it.logo && it.colorA ? (it.colorA||"#555") : (it.colorB||"#4c1"))}}"/>
-    <rect x="{{=it.widths[0]}}" y="{{=10-it.logoPosition}}" width="{{=it.widths[1]}}" height="20" fill="{{=it.escapeXml(it.colorB||"#4c1")}}"/>
-    <rect width="{{=it.widths[0]+it.widths[1]}}" y="{{=10-it.logoPosition}}" height="20" fill="url(#smooth)"/>
-  </g>
-
-  <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110">
-    {{?it.logo}}
-      <image x="5" y="3" width="{{=it.logoWidth}}" height="32" xlink:href="{{=it.logo}}"/>
-    {{?}}
-    <text x="{{=(((it.widths[0]+it.logoWidth+it.logoPadding)/2)+1)*10}}" y="{{=(25-it.logoPosition)*10}}" fill="#010101" fill-opacity=".3" transform="scale(0.1)" textLength="{{=(it.widths[0]-(10+it.logoWidth+it.logoPadding))*10}}" lengthAdjust="spacing">{{=it.escapedText[0]}}</text>
-    <text x="{{=(((it.widths[0]+it.logoWidth+it.logoPadding)/2)+1)*10}}" y="{{=(24-it.logoPosition)*10}}" transform="scale(0.1)" textLength="{{=(it.widths[0]-(10+it.logoWidth+it.logoPadding))*10}}" lengthAdjust="spacing">{{=it.escapedText[0]}}</text>
-    <text x="{{=(it.widths[0]+it.widths[1]/2-1)*10}}" y="{{=(25-it.logoPosition)*10}}" fill="#010101" fill-opacity=".3" transform="scale(0.1)" textLength="{{=(it.widths[1]-10)*10}}" lengthAdjust="spacing">{{=it.escapedText[1]}}</text>
-    <text x="{{=(it.widths[0]+it.widths[1]/2-1)*10}}" y="{{=(24-it.logoPosition)*10}}" transform="scale(0.1)" textLength="{{=(it.widths[1]-10)*10}}" lengthAdjust="spacing">{{=it.escapedText[1]}}</text>
-  </g>
-
-  {{?(it.links[0] && it.links[0].length)}}
-    <a xlink:href="{{=it.links[0]}}">
-      <rect width="{{=it.widths[0]}}" height="40" fill="rgba(0,0,0,0)"/>
-    </a>
-  {{?}}
-  {{?(it.links[0] && it.links[0].length || it.links[1] && it.links[1].length)}}
-    <a xlink:href="{{=it.links[1] || it.links[0]}}">
-      <rect x="{{=it.widths[0]}}" width="{{=it.widths[1]}}" height="40" fill="rgba(0,0,0,0)"/>
-    </a>
-  {{?}}
-</svg>

scripts/export-supported-features-cli.js

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