fix: support logoColor to shield icons. (#8263)

* fix: support logoColor to shield icons.

* FIXUP: Use 'travis-ci' to 'travis'

* FIXUP: Update docs.

* docs tweak

Co-authored-by: chris48s <chris.shaw480@gmail.com>
Co-authored-by: repo-ranger[bot] <39074581+repo-ranger[bot]@users.noreply.github.com>

core/base-service/coalesce-badge.js

@@ -16,16 +16,15 @@ import toArray from './to-array.js'
 //
 // Logos are resolved in this manner:
 //
-// 1. When `?logo=` contains the name of one of the Shields logos, or contains
-//    base64-encoded SVG, that logo is used. In the case of a named logo, when
-//    a `&logoColor=` is specified, that color is used. Otherwise the default
-//    color is used. `logoColor` will not be applied to a custom
-//    (base64-encoded) logo; if a custom color is desired the logo should be
-//    recolored prior to making the request. The appearance of the logo can be
-//    customized using `logoWidth`, and in the case of the popout badge,
-//    `logoPosition`. When `?logo=` is specified, any logo-related parameters
-//    specified dynamically by the service, or by default in the service, are
-//    ignored.
+// 1. When `?logo=` contains a named logo or the name of one of the Shields
+//    logos or contains base64-encoded SVG, that logo is used. When a
+//    `&logoColor=` is specified, that color is used (except for the
+//    base64-encoded logos). Otherwise the default color is used. If the color
+//    is specified for a multicolor Shield logo, the named logo will be used and
+//    colored. The appearance of the logo can be customized using `logoWidth`,
+//    and in the case of the popout badge, `logoPosition`. When `?logo=` is
+//    specified, any logo-related parameters specified dynamically by the
+//    service, or by default in the service, are ignored.
 // 2. The second precedence is the dynamic logo returned by a service. This is
 //    used only by the Endpoint badge. The `logoColor` can be overridden by the
 //    query string.

core/base-service/coalesce-badge.spec.js

@@ -153,10 +153,18 @@ describe('coalesceBadge', function () {
       ).and.not.to.be.empty
     })
 
-    it('applies the named logo with color', function () {
+    it('applies the named monochrome logo with color', function () {
+      expect(
+        coalesceBadge({}, { namedLogo: 'dependabot', logoColor: 'blue' }, {})
+          .logo
+      ).to.equal(getShieldsIcon({ name: 'dependabot', color: 'blue' })).and.not
+        .to.be.empty
+    })
+
+    it('applies the named multicolored logo with color', function () {
       expect(
         coalesceBadge({}, { namedLogo: 'npm', logoColor: 'blue' }, {}).logo
-      ).to.equal(getShieldsIcon({ name: 'npm', color: 'blue' })).and.not.to.be
+      ).to.equal(getSimpleIcon({ name: 'npm', color: 'blue' })).and.not.to.be
         .empty
     })
 
@@ -166,15 +174,25 @@ describe('coalesceBadge', function () {
       ).to.equal(getShieldsIcon({ name: 'npm' })).and.not.be.empty
     })
 
-    it('overrides the logo with a color', function () {
+    it('overrides the monochrome logo with a color', function () {
+      expect(
+        coalesceBadge(
+          { logo: 'dependabot', logoColor: 'blue' },
+          { namedLogo: 'appveyor' },
+          {}
+        ).logo
+      ).to.equal(getShieldsIcon({ name: 'dependabot', color: 'blue' })).and.not
+        .be.empty
+    })
+
+    it('overrides multicolored logo with a color', function () {
       expect(
         coalesceBadge(
           { logo: 'npm', logoColor: 'blue' },
           { namedLogo: 'appveyor' },
           {}
         ).logo
-      ).to.equal(getShieldsIcon({ name: 'npm', color: 'blue' })).and.not.be
-        .empty
+      ).to.equal(getSimpleIcon({ name: 'npm', color: 'blue' })).and.not.be.empty
     })
 
     it("when the logo is overridden, it ignores the service's logo color, position, and width", function () {
@@ -192,15 +210,25 @@ describe('coalesceBadge', function () {
       ).to.equal(getShieldsIcon({ name: 'npm' })).and.not.be.empty
     })
 
-    it("overrides the service logo's color", function () {
+    it("overrides the service monochome logo's color", function () {
+      expect(
+        coalesceBadge(
+          { logoColor: 'blue' },
+          { namedLogo: 'dependabot', logoColor: 'red' },
+          {}
+        ).logo
+      ).to.equal(getShieldsIcon({ name: 'dependabot', color: 'blue' })).and.not
+        .be.empty
+    })
+
+    it("overrides the service multicolored logo's color", function () {
       expect(
         coalesceBadge(
           { logoColor: 'blue' },
           { namedLogo: 'npm', logoColor: 'red' },
           {}
         ).logo
-      ).to.equal(getShieldsIcon({ name: 'npm', color: 'blue' })).and.not.be
-        .empty
+      ).to.equal(getSimpleIcon({ name: 'npm', color: 'blue' })).and.not.be.empty
     })
 
     // https://github.com/badges/shields/issues/2998

frontend/components/usage.tsx

@@ -363,8 +363,9 @@ export default function Usage({ baseUrl }: { baseUrl: string }): JSX.Element {
             documentation={
               <span>
                 Set the color of the logo (hex, rgb, rgba, hsl, hsla and css
-                named colors supported). Supported for named logos but not for
-                custom logos.
+                named colors supported). Supported for named logos and Shields
+                logos but not for custom logos. For multicolor Shields logos,
+                the corresponding named logo will be used and colored.
               </span>
             }
             key="logoColor"

frontend/pages/endpoint.tsx

@@ -210,7 +210,9 @@ export default function EndpointPage(): JSX.Element {
         <dt>logoColor</dt>
         <dd>
           Default: none. Same meaning as the query string. Can be overridden by
-          the query string. Only works for named logos.
+          the query string. Only works for named logos and Shields logos. If you
+          override the color of a multicolor Shield logo, the corresponding
+          named logo will be used and colored.
         </dd>
         <dt>logoWidth</dt>
         <dd>

lib/logos.js

@@ -66,8 +66,12 @@ function getShieldsIcon({ name, color }) {
 
   const { svg, base64, isMonochrome } = logos[name]
   const svgColor = toSvgColor(color)
-  if (svgColor && isMonochrome) {
-    return svg2base64(svg.replace(/fill="(.+?)"/g, `fill="${svgColor}"`))
+  if (svgColor) {
+    if (isMonochrome) {
+      return svg2base64(svg.replace(/fill="(.+?)"/g, `fill="${svgColor}"`))
+    } else {
+      return undefined
+    }
   } else {
     return base64
   }
@@ -85,7 +89,7 @@ function getSimpleIconStyle({ icon, style }) {
 }
 
 function getSimpleIcon({ name, color, style }) {
-  const key = name.replace(/ /g, '-')
+  const key = name === 'travis' ? 'travis-ci' : name.replace(/ /g, '-')
 
   if (!(key in simpleIcons)) {
     return undefined