badge-maker - npm Package Compare versions

Comparing version 4.0.0 to 4.1.0

CHANGELOG.md

 # Changelog
 
+## 4.1.0
+
+### Features
+
+- Add `idSuffix` param. This can be used to ensure every element id within the SVG is unique
+
 ## 4.0.0
@@ -4,0 +10,0 @@

index.d.ts

@@ -9,2 +9,3 @@ interface Format {
   links?: Array<string>
+  idSuffix?: string
 }
@@ -11,0 +12,0 @@

lib/badge-renderers.js

@@ -131,2 +131,3 @@ 'use strict'
     labelColor,
+    idSuffix = '',
   }) {
@@ -182,2 +183,3 @@ const horizPadding = 5
     this.accessibleText = accessibleText
+    this.idSuffix = idSuffix
 
@@ -291,3 +293,3 @@ this.logoElement = getLogoElement({
       ],
-      attrs: { id: 'r' },
+      attrs: { id: `r${this.idSuffix}` },
     })
@@ -319,3 +321,3 @@ }
         height: this.constructor.height,
-        fill: 'url(#s)',
+        fill: `url(#s${this.idSuffix})`,
       },
@@ -386,3 +388,3 @@ })
       ],
-      attrs: { id: 's', x2: 0, y2: '100%' },
+      attrs: { id: `s${this.idSuffix}`, x2: 0, y2: '100%' },
     })
@@ -394,3 +396,3 @@
       withGradient: true,
-      attrs: { 'clip-path': 'url(#r)' },
+      attrs: { 'clip-path': `url(#r${this.idSuffix})` },
     })
@@ -437,3 +439,3 @@
       ],
-      attrs: { id: 's', x2: 0, y2: '100%' },
+      attrs: { id: `s${this.idSuffix}`, x2: 0, y2: '100%' },
     })
@@ -445,3 +447,3 @@
       withGradient: true,
-      attrs: { 'clip-path': 'url(#r)' },
+      attrs: { 'clip-path': `url(#r${this.idSuffix})` },
     })
@@ -503,2 +505,3 @@
   labelColor = '#555',
+  idSuffix = '',
 }) {
@@ -577,5 +580,5 @@ // Social label is styled with a leading capital. Convert to caps here so
       attrs: {
-        id: 'llink',
+        id: `llink${idSuffix}`,
         stroke: '#d5d5d5',
-        fill: 'url(#a)',
+        fill: `url(#a${idSuffix})`,
         x: '.5',
@@ -653,3 +656,3 @@ y: '.5',
       attrs: {
-        id: 'rlink',
+        id: `rlink${idSuffix}`,
         x: messageTextX,
@@ -674,3 +677,3 @@ y: 140,
     content: [
-      'a:hover #llink{fill:url(#b);stroke:#ccc}a:hover #rlink{fill:#4183c4}',
+      `a:hover #llink${idSuffix}{fill:url(#b${idSuffix});stroke:#ccc}a:hover #rlink${idSuffix}{fill:#4183c4}`,
     ],
@@ -696,3 +699,3 @@ })
         ],
-        attrs: { id: 'a', x2: 0, y2: '100%' },
+        attrs: { id: `a${idSuffix}`, x2: 0, y2: '100%' },
       }),
@@ -711,3 +714,3 @@ new XmlElement({
         ],
-        attrs: { id: 'b', x2: 0, y2: '100%' },
+        attrs: { id: `b${idSuffix}`, x2: 0, y2: '100%' },
       }),
@@ -714,0 +717,0 @@ ],

lib/index.js

@@ -55,2 +55,7 @@ 'use strict'
   }
+  if ('idSuffix' in format && !/^[a-zA-Z0-9\-_]*$/.test(format.idSuffix)) {
+    throw new ValidationError(
+      'Field `idSuffix` must contain only numbers, letters, -, and _',
+    )
+  }
 }
@@ -67,2 +72,3 @@
     'links',
+    'idSuffix',
   ]
@@ -100,2 +106,3 @@
  * @param {Array} format.links (Optional) Links array (e.g: ['https://example.com', 'https://example.com'])
+ * @param {string} format.idSuffix (Optional) Suffix for IDs, e.g. 1, 2, and 3 for three invocations that will be used on the same page.
  * @returns {string} Badge in SVG format
@@ -102,0 +109,0 @@ * @see https://github.com/badges/shields/tree/master/badge-maker/README.md

lib/make-badge.js

@@ -23,2 +23,3 @@ 'use strict'
   links = ['', ''],
+  idSuffix,
 }) {
@@ -42,2 +43,3 @@ // String coercion and whitespace removal.
       value: message,
+      idSuffix,
     })
@@ -64,4 +66,5 @@ }
       labelColor: toSvgColor(labelColor),
+      idSuffix,
     }),
   )
 }

package.json

 {
   "name": "badge-maker",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Shields.io badge library",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -76,2 +76,7 @@ # badge-maker
   style: 'flat',
+
+  // (Optional) A string with only letters, numbers, -, and _. This can be used
+  // to ensure every element id within the SVG is unique and prevent CSS
+  // cross-contamination when the SVG badge is rendered inline in HTML pages.
+  idSuffix: 'dd'
 }
@@ -78,0 +83,0 @@ ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

56446

increased by1.84%

Lines of code

1309

increased by1.08%

Number of lines in readme file

150

increased by3.45%

No dependency changes