primer-buttons - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

CHANGELOG.md

@@ -0,1 +1,9 @@
+# v0.2.2
+
+ * Mentioning the build file - Jon Rohan [github/github@64ca4a7](https://github.com/github/github/commit/64ca4a7)
+ * Including build/build.css in distributed npm module - Jon Rohan [github/github@e4effbf](https://github.com/github/github/commit/e4effbf)
+ * Updating modules to run on prepublish to include build.css in distribution - Jon Rohan [github/github@5b573a0](https://github.com/github/github/commit/5b573a0)
+ * Re-ordering the docs to the bottom of the readme - Jon Rohan [github/github@9c1f291](https://github.com/github/github/commit/9c1f291)
+ * Updating the link - Jon Rohan [github/github@f67684b](https://github.com/github/github/commit/f67684b)
+
 # v0.2.1
@@ -2,0 +10,0 @@

package.json

 {
-  "version": "0.2.1",
+  "version": "0.2.2",
   "name": "primer-buttons",
@@ -11,3 +11,4 @@ "description": "A collection of buttons used for primary and secondary actions.",
     "index.scss",
-    "lib"
+    "lib",
+    "build"
   ],
@@ -19,7 +20,6 @@ "repository": "https://github.com/primer/buttons.git",
   "scripts": {
-    "build": "npm run setup && npm run preprocess",
-    "lint": "stylelint **/*.scss -c .stylelintrc.json -s scss",
-    "preprocess": "node-sass index.scss --include-path node_modules | postcss -c .postcss.json -o build/build.css",
-    "setup": "npm install",
-    "test": "npm run lint"
+    "setup": "if [ ! -d \"node_modules\" ]; then npm install; fi",
+    "build": "node-sass index.scss --include-path node_modules --output-style compressed | postcss -c .postcss.json -o build/build.css",
+    "prepublish": "npm run setup && npm run build",
+    "test": "stylelint **/*.scss -c .stylelintrc.json -s scss"
   },
@@ -26,0 +26,0 @@ "dependencies": {

README.md

@@ -10,6 +10,2 @@ # Primer CSS Buttons
 
-## Documentation
-
-You can read more about buttons in the [docs][docs].
-
 ## Install
@@ -35,3 +31,3 @@
 
-For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css`
+For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.
 
@@ -42,14 +38,189 @@ ```
 
-## Related
+## Documentation
 
-* [Primer Documentation][docs]
-* [primer-css][primer]
-* [primer-support][primer-support]
+You can read more about other primer modules in the [full primer docs][docs].
 
+<!-- %docs
+title: Buttons
+-->
+
+### Buttons
+
+Buttons are used for **actions**, like in forms, while textual hyperlinks are used for **destinations**, or moving from one page to another.
+
+#### Default buttons
+
+Use the standard—yet classy—`.btn` for form actions and primary page actions. These are used extensively around the site.
+
+When using a `<button>` element, **always specify a `type`**. When using a `<a>` element, **always add `role="button"` for accessibility**.
+
+```html
+<button class="btn" type="button">Button button</button>
+<a class="btn" href="#" role="button">Link button</a>
+```
+
+You can find them in two sizes: the default `.btn` and the smaller `.btn-sm`.
+
+```html
+<button class="btn" type="button">Button</button>
+<button class="btn btn-sm" type="button">Small button</button>
+```
+
+#### Primary
+
+Primary buttons are green and are used to indicate the *primary* action on a page. When you need your buttons to stand out, use `.btn.btn-primary`. You can use it with both button sizes—just add `.btn-primary`.
+
+```html
+<button class="btn btn-primary" type="button">Primary button</button>
+<button class="btn btn-sm btn-primary" type="button">Small primary button</button>
+```
+
+#### Danger
+
+Danger buttons are red. They help reiterate that the intended action is important or potentially dangerous (e.g., deleting a repo or transferring ownership). Similar to the primary buttons, just add `.btn-danger`.
+
+```html
+<button class="btn btn-danger" type="button">Danger button</button>
+<button class="btn btn-sm btn-danger" type="button">Small danger button</button>
+```
+
+#### Outline
+
+Outline buttons downplay an action as they appear like boxy links. Just add `.btn-outline` and go.
+
+```html
+<button class="btn btn-outline" type="button">Outline button</button>
+<button class="btn btn-sm btn-outline" type="button">Outline button</button>
+```
+
+#### Disabled state
+
+Disable `<button>` elements with the boolean `disabled` attribute and `<a>` elements with the `.disabled` class.
+
+```html
+<button class="btn" type="button" disabled>Disabled button</button>
+<a class="btn disabled" href="#" role="button">Disabled button</a>
+```
+
+Similar styles are applied to primary, danger, and outline buttons:
+
+```html
+<button class="btn btn-primary" type="button" disabled>Disabled button</button>
+<a class="btn btn-primary disabled" href="#" role="button">Disabled button</a>
+```
+
+```html
+<button class="btn btn-danger" type="button" disabled>Disabled button</button>
+<a class="btn btn-danger disabled" href="#" role="button">Disabled button</a>
+```
+
+```html
+<button class="btn btn-outline" type="button" disabled>Disabled button</button>
+<a class="btn btn-outline disabled" href="#" role="button">Disabled button</a>
+```
+
+#### Block buttons
+
+Make any button full-width by adding `.btn-block`. It adds `width: 100%;`, changes the `display` from `inline-block` to `block`, and centers the button text.
+
+```html
+<p><button class="btn btn-block" type="button">Block button</button></p>
+<p><button class="btn btn-sm btn-block" type="button">Small block button</button></p>
+```
+
+#### With counts
+
+You can easily append a count to a **small button**. Add the `.with-count` class to the `.btn-sm` and then add the `.social-count` after the button.
+
+**Be sure to clear the float added by the additional class.**
+
+```html
+<div class="clearfix">
+  <a class="btn btn-sm btn-with-count" href="#" role="button">
+    <%= octicon :symbol => "eye" %>
+    Watch
+  </a>
+  <a class="social-count" href="#">6</a>
+</div>
+```
+
+You can also use the [counter](../utilities/#counter) component within buttons:
+
+```html
+<button class="btn" type="button">
+  Button
+  <span class="counter">12</span>
+</button>
+
+<button class="btn btn-primary" type="button">
+  Button
+  <span class="counter">12</span>
+</button>
+
+<button class="btn btn-danger" type="button">
+  Button
+  <span class="counter">12</span>
+</button>
+
+<button class="btn btn-outline" type="button">
+  Button
+  <span class="counter">12</span>
+</button>
+```
+
+#### Button groups
+
+Have a hankering for a series of buttons that are attached to one another? Wrap them in a `.btn-group` and the buttons will be rounded and spaced automatically.
+
+```html
+<div class="btn-group">
+  <button class="btn" type="button">Button</button>
+  <button class="btn" type="button">Button</button>
+  <button class="btn" type="button">Button</button>
+</div>
+
+<div class="btn-group">
+  <button class="btn btn-outline" type="button">Button</button>
+  <button class="btn btn-outline" type="button">Button</button>
+  <button class="btn btn-outline" type="button">Button</button>
+</div>
+
+<div class="btn-group">
+  <button class="btn btn-sm" type="button">Button</button>
+  <button class="btn btn-sm" type="button">Button</button>
+  <button class="btn btn-sm" type="button">Button</button>
+</div>
+```
+
+Add `.btn-group-form` to `<form>`s within `.btn-group`s for proper spacing and rounded corners.
+
+```html
+<div class="btn-group">
+  <form class="btn-group-form">
+    <button class="btn" type="button">Button in a form</button>
+  </form>
+  <button class="btn" type="button">Button</button>
+  <button class="btn" type="button">Button</button>
+</div>
+```
+
+#### Hidden text button
+
+Use `.hidden-text-expander` to indicate and toggle hidden text.
+
+```html
+<span class="hidden-text-expander">
+  <button type="button" class="ellipsis-expander">&hellip;</button>
+</span>
+```
+
+You can also make the expander appear inline by adding `.inline`.
+
+<!-- %enddocs -->
+
 ## License
 
-MIT &copy; [GitHub](https://github.com/)
+[MIT](./LICENSE) &copy; [GitHub](https://github.com/)
 
 [primer]: https://github.com/primer/primer
-[primer-support]: https://github.com/primer/primer-support
 [docs]: http://primercss.io/
@@ -56,0 +227,0 @@ [npm]: https://www.npmjs.com/

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

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26202

increased by93.29%

Number of package files

8

increased by14.29%

Lines of code

26

increased byInfinity%

Number of lines in readme file

227

increased by305.36%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes