add new buttons, update docs and stories test

Author: gladwearefriends

modules/primer-marketing-buttons/README.md

@@ -14,38 +14,31 @@ title: 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" type="button">Learn more</button>
+<button class="btn-mktg btn-outline-mktg" type="button">Learn more</button>
+<button class="btn-mktg btn-primary-mktg" 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>
-```
-
-## 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>
+<button class="btn-mktg" type="button">Learn more</button>
+<button class="btn-outline-mktg" type="button">Learn more</button>
+<button class="btn-primary-mktg" type="button">Sign up</button>
+<button class="btn-mktg btn-large-mktg" type="button">Learn more</button>
+<button class="btn-outline-mktg btn-large-mktg" type="button">Learn more</button>
+<button class="btn-primary-mktg btn-large-mktg" type="button">Sign up</button>
 ```
 
 <!-- %enddocs -->

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

@@ -1,24 +1,45 @@
-.btn-orange { @include btn-solid($white, lighten($orange-500, 7.5%), darken($orange-500, 7.5%)); }
+.btn-mktg {
+  display: inline-block;
+  padding: $spacer-3 $spacer-4;
+  font-size: $h5-size;
+  font-weight: $font-weight-semibold;
+  color: $white;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  background-color: $blue-450;
+  border: 0;
+  border-radius: $border-radius;
+  transition: $transition-time / 2;
+  appearance: none; // Corrects inability to style clickable `input` types in iOS.
+  &:hover {
+    text-decoration: none;
+    background-color: $blue-500;
+  }
+}
 
-.btn-outline-purple { @include btn-outline($purple); }
-.btn-outline-orange { @include btn-outline($orange); }
-.btn-outline-green { @include btn-outline($green); }
+.btn-primary-mktg {
+  background-color: $green-450 !important;
 
-@mixin btn-transparent-active {
-  color: $gray-800;
-  background-color: $white;
-  background-image: none;
-  border-color: $white;
+  &:hover {
+    background-color: $green-500 !important;
+  }
 }
 
-.btn-transparent {
-  color: $white;
-  background-color: transparent;
-  background-image: none;
-  border: $border-width $border-style $white-fade-50;
+.btn-large-mktg {
+  padding: 20px $spacer-5;
+  font-size: $h4-size;
+}
+
+.btn-outline-mktg {
+  color: $blue-450 !important;
+  background-color: rgba($white, 0) !important;
+  box-shadow: 0 0 0 1px rgba($blue-450, 0.5) inset;
 
-  &:hover,
-  &:active {
-    @include btn-transparent-active;
+  &:hover {
+    color: $blue-500 !important;
+    text-decoration: none;
+    box-shadow: 0 0 0 1px rgba($blue-450, 1) inset;
   }
 }

modules/primer-marketing-buttons/stories.js

@@ -2,20 +2,20 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 
 storiesOf('Marketing buttons', module)
-  .add('Button colors', () => (
+  .add('Button colors and outlined', () => (
     <div className='p-4'>
-      <button className="btn btn-orange mr-6" type="button">Button button</button>
+      <button class="btn-mktg" type="button">Learn more</button>
+      <button class="btn-mktg btn-outline-mktg" type="button">Learn more</button>
+      <button class="btn-mktg btn-primary-mktg" type="button">Sign up</button>
     </div>
   ))
-  .add('Outline colors', () => (
+  .add('Button sizes', () => (
     <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>
+      <button class="btn-mktg" type="button">Learn more</button>
+      <button class="btn-outline-mktg" type="button">Learn more</button>
+      <button class="btn-primary-mktg" type="button">Sign up</button>
+      <button class="btn-mktg btn-large-mktg" type="button">Learn more</button>
+      <button class="btn-outline-mktg btn-large-mktg" type="button">Learn more</button>
+      <button class="btn-primary-mktg btn-large-mktg" type="button">Sign up</button>
     </div>
   ))