Add marketing buttons to primer-marketing-buttons

CHANGELOG.md

@@ -5,10 +5,12 @@
 - Importing `.input-group` into `primer-forms` module.
 - New module `primer-branch-name` "A nice, consistent way to display branch names."
 - New module `primer-dropdown` "A lightweight context menu for navigation and actions."
+- New module `primer-marketing-buttons`. Buttons for marketing websites at GitHub
 
 ### Removed
 - Removing `primer-cards` module.
 - Removing `.form-cards` styles.
+- Removing `.btn-large` from `primer-buttons` module and adding to `primer-marketing-buttons`.
 
 ### Changes
 - Moving `primer-breadcrumb` from `primer-marketing` to `primer-core`

modules/primer-buttons/lib/button.scss

@@ -88,13 +88,6 @@
   line-height: 20px;
 }
 
-// Large button adds more padding around text. Use font-size utils to increase font-size.. e.g, <p class="text-gamma"><button class="btn btn-large btn-primary" type="button">Big green button</button></p>
-.btn-large {
-  padding: 0.75em 1.25em;
-  font-size: inherit;
-  border-radius: 6px;
-}
-
 // Hidden text button
 //
 // Use `.hidden-text-expander` to indicate and expand hidden text.

modules/primer-css/package.json

@@ -41,6 +41,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,105 @@
+# 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
+-->
+
+The buttons on our marketing pages are based on Primer's core with the addition of more color options, color outline buttons, a transparent button, and larger button sizes.
+
+
+## Color
+
+The `btn` has been extended with the marketing color palette:
+
+```html
+
+<button class="btn btn-orange" type="button">Button button</button>
+<a class="btn btn-purple" href="#url" role="button">Link button</a>
+<button class="btn btn-blurple" type="button">Button button</button>
+
+```
+
+## Outline buttons
+
+The `btn-outline` has also been extended with the marketing color palette:
+
+```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>
+<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>
+
+```
+
+## Additional sizing
+There are cases where you might want to increase the size of a button, for example when putting a main CTA inside of a jumbotron or major page callout. The `btn-large` class does the following to make a button more prominent:
+
+1. Adds extra additional padding in `ems` so that the padding scales proportionately with the `font-size`
+2. Increases the border radius to 6px
+
+It can optionally be used in combination with a font-size utility (like `f3`) on the parent to increase the font-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>
+
+```
+
+<!-- %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,32 @@
+.btn-orange { @include btn-solid($white, lighten($orange-500, 7.5%), darken($orange-500, 7.5%)); }
+.btn-blurple { @include btn-solid($white, mix($blue-400, $purple-400, 35%), mix($blue-600, $purple-600, 35%)); }
+
+.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: 1px solid $white-fade-50;
+
+  &:hover,
+  &:active {
+    @include btn-transparent-active;
+  }
+}
+
+// Large button adds more padding around text. Use font-size utils to increase font-size.. e.g, <p class="text-gamma"><button class="btn btn-large btn-primary" type="button">Big green button</button></p>
+.btn-large {
+  padding: 0.75em 1.25em;
+  font-size: inherit;
+  border-radius: 6px;
+}

modules/primer-marketing-buttons/package.json

@@ -0,0 +1,41 @@
+{
+  "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"
+  },
+  "keywords": [
+    "css",
+    "github",
+    "primer",
+    "primercss",
+    "style",
+    "buttons"
+  ]
+}

modules/primer-marketing-buttons/stories.js

@@ -0,0 +1,27 @@
+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>
+      <a className="btn btn-purple mr-6" href="#url" role="button">Link button</a>
+      <button className="btn btn-blurple mr-6" type="button">Button button</button>
+    </div>
+  ))
+  .add('btn-outline', () => (
+    <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 className="bg-gray-dark p-4 mt-4 mr-6">
+      <button className="btn btn-transparent mr-6" type="button">Button button</button>
+      </div>
+    </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-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",