primer-marketing-buttons - npm Package Compare versions

Comparing version 1.1.0-alpha.b6939e4a to 1.1.0-alpha.b78e8ab3

build/index.js

@@ -1,1 +0,1 @@
-module.exports = {"cssstats":{"size":3299,"gzipSize":666,"humanizedSize":"3kB","humanizedGzipSize":"666B","rules":{"total":26,"size":{"graph":[3,1,4,4,5,2,3,1,4,2,2,4,3,1,4,2,2,4,3,1,4,2,2,4,4,4],"max":5,"average":2.8846153846153846}},"selectors":{"total":53,"type":0,"class":53,"id":0,"pseudoClass":24,"pseudoElement":0,"values":[".btn-orange",".btn-orange:focus",".btn-orange.focus",".btn-orange:hover",".btn-orange.hover",".btn-orange:active",".btn-orange.selected","[open]>.btn-orange",".btn-orange:disabled",".btn-orange.disabled",".btn-orange .Counter",".btn-outline-purple",".btn-outline-purple .Counter",".btn-outline-purple:hover",".btn-outline-purple:active",".btn-outline-purple.selected","[open]>.btn-outline-purple",".btn-outline-purple:hover .Counter",".btn-outline-purple:active .Counter",".btn-outline-purple.selected .Counter","[open]>.btn-outline-purple .Counter",".btn-outline-purple:focus",".btn-outline-purple:disabled",".btn-outline-purple.disabled",".btn-outline-orange",".btn-outline-orange .Counter",".btn-outline-orange:hover",".btn-outline-orange:active",".btn-outline-orange.selected","[open]>.btn-outline-orange",".btn-outline-orange:hover .Counter",".btn-outline-orange:active .Counter",".btn-outline-orange.selected .Counter","[open]>.btn-outline-orange .Counter",".btn-outline-orange:focus",".btn-outline-orange:disabled",".btn-outline-orange.disabled",".btn-outline-green",".btn-outline-green .Counter",".btn-outline-green:hover",".btn-outline-green:active",".btn-outline-green.selected","[open]>.btn-outline-green",".btn-outline-green:hover .Counter",".btn-outline-green:active .Counter",".btn-outline-green.selected .Counter","[open]>.btn-outline-green .Counter",".btn-outline-green:focus",".btn-outline-green:disabled",".btn-outline-green.disabled",".btn-transparent",".btn-transparent:hover",".btn-transparent:active"],"specificity":{"max":30,"average":21.32075471698113}},"declarations":{"total":75,"unique":36,"properties":{"color":["#fff","rgba(255,255,255,0.75)","#f46909","#6f42c1","#fff","#6f42c1","rgba(27,31,35,0.3)","#f66a0a","#fff","#f66a0a","rgba(27,31,35,0.3)","#28a745","#fff","#28a745","rgba(27,31,35,0.3)","#fff","#2f363d"],"background-color":["#d25a08","#c85607","#c65e17","#e9ad83","#fff","#fff","rgba(27,31,35,0.07)","#6f42c1","#fff","#fff","#fff","rgba(27,31,35,0.07)","#f66a0a","#fff","#fff","#fff","rgba(27,31,35,0.07)","#28a745","#fff","#fff","transparent","#fff"],"background-image":["linear-gradient(-180deg, #f7802f 0%, #d25a08 90%)","linear-gradient(-180deg, #f77a25 0%, #c85607 90%)","none","none","none","none","none","none","none","none","none","none"],"box-shadow":["0 0 0 0.2em rgba(247,128,47,0.3)","inset 0 0.15em 0.3em rgba(27,31,35,0.15)","none","0 0 0 0.2em rgba(111,66,193,0.3)","none","0 0 0 0.2em rgba(246,106,10,0.3)","none","0 0 0 0.2em rgba(40,167,69,0.3)","none"],"background-position":["0 -0.5em"],"border-color":["rgba(27,31,35,0.5)","rgba(27,31,35,0.5)","rgba(27,31,35,0.2)","#6f42c1","#6f42c1","rgba(27,31,35,0.15)","#f66a0a","#f66a0a","rgba(27,31,35,0.15)","#28a745","#28a745","rgba(27,31,35,0.15)","#fff"],"border":["1px solid rgba(255,255,255,0.5)"]}},"mediaQueries":{"total":0,"unique":0,"values":[],"contents":[]}}}
+module.exports = {"cssstats":{"size":1434,"gzipSize":579,"humanizedSize":"1kB","humanizedGzipSize":"579B","rules":{"total":10,"size":{"graph":[19,3,2,3,2,2,1,2,3,4],"max":19,"average":4.1},"selectorByRuleSizes":[{"selector":".btn-mktg","declarations":19},{"selector":".btn-outline-mktg:hover","declarations":4},{"selector":".btn-outline-mktg","declarations":3},{"selector":".btn-mktg:disabled,.btn-mktg.disabled","declarations":3},{"selector":".btn-mktg:hover","declarations":3},{"selector":".btn-large-mktg","declarations":2},{"selector":".btn-primary-mktg:hover","declarations":2},{"selector":".btn-primary-mktg","declarations":2},{"selector":".btn-mktg:focus","declarations":2},{"selector":".btn-primary-mktg:focus","declarations":1}]},"selectors":{"total":11,"type":0,"class":11,"id":0,"pseudoClass":6,"pseudoElement":0,"values":[".btn-mktg",".btn-mktg:hover",".btn-mktg:focus",".btn-mktg:disabled",".btn-mktg.disabled",".btn-primary-mktg",".btn-primary-mktg:hover",".btn-primary-mktg:focus",".btn-large-mktg",".btn-outline-mktg",".btn-outline-mktg:hover"],"specificity":{"max":20,"average":16.363636363636363}},"declarations":{"total":41,"unique":39,"properties":{"display":["inline-block"],"padding":["16px 24px","20px 32px"],"font-size":["14px","16px"],"font-weight":["500"],"color":["#fff","#1277eb","#0366d6"],"white-space":["nowrap"],"vertical-align":["middle"],"cursor":["pointer","default"],"-webkit-user-select":["none"],"-moz-user-select":["none"],"-ms-user-select":["none"],"user-select":["none"],"background-color":["#1277eb","#0366d6","#2ebc4f","#28a745","#fff","#fff"],"border":["1px solid #1277eb"],"border-radius":["3px"],"transition":[".2s"],"-webkit-appearance":["none"],"-moz-appearance":["none"],"appearance":["none"],"text-decoration":["none","none"],"border-color":["#0366d6","#2ebc4f","#28a745","rgba(18,119,235,0.5)","#1277eb"],"outline":["0"],"box-shadow":["0 0 0 0.2em rgba(3,102,214,0.3)","0 0 0 0.2em rgba(40,167,69,0.3)"],"pointer-events":["none"],"opacity":["0.65"]}},"mediaQueries":{"total":0,"unique":0,"values":[],"contents":[]}}}

package.json

 {
-  "version": "1.1.0-alpha.b6939e4a",
+  "version": "1.1.0-alpha.b78e8ab3",
   "name": "primer-marketing-buttons",
@@ -29,10 +29,10 @@ "description": "Buttons for marketing websites at GitHub",
     "lint": "../../script/lint-scss",
-    "test": "../../script/npm-run-all build lint test-docs"
+    "test": "../../script/npm-run-all build lint test-docs",
+    "prepublishOnly": "../../script/notify pending",
+    "postpublish": "../../script/notify success"
   },
   "dependencies": {
-    "primer-support": "4.6.0-alpha.b6939e4a"
+    "primer-marketing-support": "1.6.0-alpha.b78e8ab3",
+    "primer-support": "4.8.0-alpha.b78e8ab3"
   },
-  "peerDependencies": {
-    "primer-buttons": ">=2.5.0"
-  },
   "keywords": [
@@ -39,0 +39,0 @@ "css",

README.md

@@ -14,39 +14,33 @@ # Primer Marketing CSS Buttons
 title: Marketing Buttons
+path: components/marketing-buttons
 status: New Release
 -->
 
-Marketing buttons extend primer-core buttons with more color and fill styles.
+Marketing buttons come in different colors and sizes, and are also available in a blue outlined version.
 
+## Colors and outlined
 
-## Colors
+Marketing buttons can be solid blue, outlined blue, or solid green.
 
-Marketing buttons are available in orange.
+The solid blue and solid green buttons have more visual emphasis than the blue outlined button, therefore they should be used sparingly and only for call to actions that need emphasis.
 
 ```html
-<button class="btn btn-orange" type="button">Button button</button>
+<button class="btn-mktg mr-2" type="button">Learn more</button>
+<button class="btn-mktg btn-outline-mktg mr-2" type="button">Learn more</button>
+<button class="btn-mktg btn-primary-mktg mr-2" type="button">Sign up</button>
 ```
 
-## Outline button colors
+## Sizes
 
-The `btn-outline` has also been extended with orange, purple, and green.
+Available in two sizes, marketing buttons have a default size and a large size.
 
 ```html
-<button class="btn btn-outline-orange" type="button">Button button</button>
-<a class="btn btn-outline-purple" href="#url" role="button">Link button</a>
-<button class="btn btn-outline-green" type="button">Button button</button>
+<button class="btn-mktg mr-2" type="button">Learn more</button>
+<button class="btn-mktg btn-outline-mktg mr-2" type="button">Learn more</button>
+<button class="btn-mktg btn-primary-mktg mr-2" type="button">Sign up</button>
+<button class="btn-mktg btn-large-mktg mr-2" type="button">Learn more</button>
+<button class="btn-mktg btn-outline-mktg btn-large-mktg mr-2" type="button">Learn more</button>
+<button class="btn-mktg btn-primary-mktg btn-large-mktg mr-2" type="button">Sign up</button>
 ```
 
-## Transparent button
-
-A button can also be transparent and displayed with a white border with `btn-transparent`.
-
-```html
-<div class="bg-gray-dark p-4 mt-4">
-  <button class="btn btn-transparent" type="button">
-    Button button
-    <span class="Counter">12</span>
-  </button>
-</div>
-```
-
 <!-- %enddocs -->
@@ -53,0 +47,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

Trivial Package

Supply chain risk

Packages less than 10 lines of code are easily copied into your own project and may not warrant the additional supply chain risk of an external dependency.

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

12269

increased by2.46%

Number of package files

8

increased by14.29%

Worsened metrics

Lines of code

6

decreased by-53.85%

Number of lines in readme file

84

decreased by-6.67%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedprimer-marketing-support@1.6.0-alpha.b78e8ab3

• + Addedprimer-marketing-support@1.6.0-alpha.b78e8ab3(transitive)

• + Addedprimer-support@4.8.0-alpha.b78e8ab3(transitive)

• - Removedprimer-buttons@3.0.0(transitive)

• - Removedprimer-support@4.6.0-alpha.b6939e4a5.0.0(transitive)

• Updatedprimer-support@4.8.0-alpha.b78e8ab3