Merge pull request #337 from primer/add-marketing-buttons

Add marketing buttons to primer-marketing-buttons

modules/primer-buttons/README.md

@@ -121,6 +121,31 @@ Outline buttons downplay an action as they appear like boxy links. Just add `.bt
 <button class="btn btn-sm btn-outline" type="button">Outline button</button>
 ```
 
+#### Large button
+Use `.btn-large` to increase the padding and border radius of a button. This is useful for prominent calls to action in hero sections.
+
+[Type scale utilities](https://styleguide.github.com/primer/utilities/typography/#type-scale-utilities) can be used to alter the font-size if needed. Padding is applied in em's so that it scales proportionally with the font-size.
+
+```html
+
+<p>
+  <a class="btn btn-large btn-purple" href="#url" role="button">Large link button</a>
+  <button class="btn btn-large btn-outline-blue" type="button">Large button button</button>
+</p>
+
+```
+
+Use `.btn-large` with a type scale utility to transform the text to a bigger size.
+
+```html
+
+<p class="f3">
+  <a class="btn btn-large btn-purple" href="#url" role="button">Large link button</a>
+  <button class="btn btn-large btn-outline-blue" type="button">Large button button</button>
+</p>
+
+```
+
 #### Disabled state
 
 Disable `<button>` elements with the boolean `disabled` attribute and `<a>` elements with the `.disabled` class.

modules/primer-buttons/stories.js

@@ -59,3 +59,9 @@ storiesOf('Button', module)
       <button className='btn btn-purple disabled'>disabled</button>
     </div>
   ))
+  .add('btn-large', () => (
+    <div className='f3 p-4'>
+      <a className="btn btn-large btn-purple mr-6" href="#url" role="button">Large link button</a>
+      <button className="btn btn-large btn-outline-blue" type="button">Large button button</button>
+    </div>
+  ))

modules/primer-css/package.json

@@ -40,6 +40,7 @@
     "primer-labels": "1.5.1",
     "primer-layout": "1.4.1",
     "primer-markdown": "3.7.1",
+    "primer-marketing-buttons": "0.0.1",
     "primer-marketing-support": "1.3.1",
     "primer-marketing-type": "1.4.1",
     "primer-marketing-utilities": "1.4.1",

modules/primer-marketing-buttons/.npmignore

@@ -0,0 +1,2 @@
+*.yml
+.github

modules/primer-marketing-buttons/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 GitHub Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

modules/primer-marketing-buttons/README.md

@@ -0,0 +1,89 @@
+# Primer Marketing CSS Buttons
+
+[![npm version](http://img.shields.io/npm/v/primer-marketing-buttons.svg)](https://www.npmjs.org/package/primer-marketing-buttons)
+[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css)
+
+> Buttons are used for actions, like in forms, while textual hyperlinks are used for destinations, or moving from one page to another.
+
+This repository is a module of the full [primer-css][primer] repository.
+
+## Documentation
+
+<!-- %docs
+title: Marketing Buttons
+status: New Release
+-->
+
+Marketing buttons extend primer-core buttons with more color and fill styles.
+
+
+## Colors
+
+Marketing buttons are available in orange.
+
+```html
+<button class="btn btn-orange" type="button">Button button</button>
+```
+
+## Outline button colors
+
+The `btn-outline` has also been extended with orange, purple, and green.
+
+```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>
+```
+
+## 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 -->
+
+## Install
+
+This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-marketing-buttons` with this command.
+
+```
+$ npm install --save primer-marketing-buttons
+```
+
+## Usage
+
+The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
+
+```scss
+@import "primer-marketing-buttons/index.scss";
+```
+
+You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
+
+## Build
+
+For a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css`
+
+```
+$ npm run build
+```
+
+## License
+
+MIT &copy; [GitHub](https://github.com/)
+
+[primer]: https://github.com/primer/primer
+[primer-support]: https://github.com/primer/primer-support
+[support]: https://github.com/primer/primer-support
+[docs]: http://primercss.io/
+[npm]: https://www.npmjs.com/
+[install-npm]: https://docs.npmjs.com/getting-started/installing-node
+[sass]: http://sass-lang.com/

modules/primer-marketing-buttons/index.scss

@@ -0,0 +1,3 @@
+// support files
+@import "primer-support/index.scss";
+@import "./lib/button.scss";

modules/primer-marketing-buttons/lib/button.scss

@@ -0,0 +1,24 @@
+.btn-orange { @include btn-solid($white, lighten($orange-500, 7.5%), darken($orange-500, 7.5%)); }
+
+.btn-outline-purple { @include btn-outline($purple); }
+.btn-outline-orange { @include btn-outline($orange); }
+.btn-outline-green { @include btn-outline($green); }
+
+@mixin btn-transparent-active {
+  color: $gray-800;
+  background-color: $white;
+  background-image: none;
+  border-color: $white;
+}
+
+.btn-transparent {
+  color: $white;
+  background-color: transparent;
+  background-image: none;
+  border: $border-width $border-style $white-fade-50;
+
+  &:hover,
+  &:active {
+    @include btn-transparent-active;
+  }
+}

modules/primer-marketing-buttons/package.json

@@ -0,0 +1,44 @@
+{
+  "version": "0.0.1",
+  "name": "primer-marketing-buttons",
+  "description": "Buttons for marketing websites at GitHub",
+  "homepage": "http://primercss.io/",
+  "author": "GitHub, Inc.",
+  "license": "MIT",
+  "style": "build/build.css",
+  "main": "build/index.js",
+  "primer": {
+    "category": "marketing",
+    "module_type": "components"
+  },
+  "files": [
+    "index.scss",
+    "lib",
+    "build"
+  ],
+  "repository": "https://github.com/primer/primer-css/tree/master/modules/primer-marketing-buttons",
+  "bugs": {
+    "url": "https://github.com/primer/primer-css/issues"
+  },
+  "scripts": {
+    "test-docs": "../../script/test-docs",
+    "build": "../../script/npm-run primer-module-build index.scss",
+    "prepare": "npm run build",
+    "lint": "../../script/lint-scss",
+    "test": "../../script/npm-run-all build lint test-docs"
+  },
+  "dependencies": {
+    "primer-support": "4.4.1"
+  },
+  "peerDependencies": {
+    "primer-buttons": "2.4.1"
+  },
+  "keywords": [
+    "css",
+    "github",
+    "primer",
+    "primercss",
+    "style",
+    "buttons"
+  ]
+}

modules/primer-marketing-buttons/stories.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+storiesOf('Marketing buttons', module)
+  .add('Button colors', () => (
+    <div className='p-4'>
+      <button className="btn btn-orange mr-6" type="button">Button button</button>
+    </div>
+  ))
+  .add('Outline colors', () => (
+    <div className='p-4'>
+      <button className="btn btn-outline-orange mr-6" type="button">Button button</button>
+      <a className="btn btn-outline-purple mr-6" href="#url" role="button">Link button</a>
+      <button className="btn btn-outline-green mr-6" type="button">Button button</button>
+    </div>
+  ))
+  .add('Transparent button', () => (
+    <div className="bg-gray-dark p-4 mt-4 mr-6">
+      <button className="btn btn-transparent mr-6" type="button">Button button</button>
+    </div>
+  ))

modules/primer-marketing/index.scss

@@ -16,6 +16,7 @@
 
 // marketing specific css modules
 @import "primer-marketing-type/index.scss";
+@import "primer-marketing-buttons/index.scss";
 @import "primer-page-headers/index.scss";
 @import "primer-page-sections/index.scss";
 @import "primer-tables/index.scss";

modules/primer-marketing/package.json

@@ -26,6 +26,7 @@
     "lint": "../../script/lint-scss"
   },
   "dependencies": {
+    "primer-marketing-buttons": "0.0.1",
     "primer-marketing-support": "1.3.1",
     "primer-marketing-type": "1.4.1",
     "primer-marketing-utilities": "1.4.1",

tools/generator-primer-module/package.json

@@ -17,8 +17,8 @@
   },
   "dependencies": {
     "chalk": "^2.1.0",
-    "fs-extra": "^4.0.1",
-    "yeoman-generator": "^1.1.1"
+    "yeoman-generator": "^1.1.1",
+    "primer-support": "4.4.1"
   },
   "keywords": [
     "primer",