refactor(marketing-buttons): Merge pull request #613 from primer/marketing-buttons-2018

BREAKING CHANGES: The `btn-orange`, `btn-outline-green`, `btn-outline-orange`, `btn-outline-purple`, and `btn-transparent` classes have been removed.

modules/primer-marketing-buttons/README.md

@@ -15,38 +15,31 @@ 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>
-```
-
-## 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 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>
 ```
 
 <!-- %enddocs -->

modules/primer-marketing-buttons/index.scss

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

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

@@ -1,24 +1,66 @@
-.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 {
+.btn-mktg {
+  display: inline-block;
+  padding: $spacer-3 $spacer-4;
+  font-size: $h5-size;
+  font-weight: $font-weight-semibold;
   color: $white;
-  background-color: transparent;
-  background-image: none;
-  border: $border-width $border-style $white-fade-50;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  background-color: $blue-450;
+  border: 1px solid $blue-450;
+  border-radius: $border-radius;
+  transition: $transition-time / 2;
+  appearance: none; // Corrects inability to style clickable `input` types in iOS.
 
-  &:hover,
-  &:active {
-    @include btn-transparent-active;
+  &:hover {
+    text-decoration: none;
+    background-color: $blue-500;
+    border-color: $blue-500;
+  }
+
+  &:focus {
+    outline: 0;
+    box-shadow: 0 0 0 0.2em rgba($blue-500, 0.3);
+  }
+
+  &:disabled,
+  &.disabled {
+    pointer-events: none; // Disable hover styles
+    cursor: default;
+    opacity: 0.65;
+  }
+}
+
+.btn-primary-mktg {
+  background-color: $green-450;
+  border-color: $green-450;
+
+  &:hover {
+    background-color: $green-500;
+    border-color: $green-500;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 0.2em rgba($green-500, 0.3);
+  }
+}
+
+.btn-large-mktg {
+  padding: 20px $spacer-5;
+  font-size: $h4-size;
+}
+
+.btn-outline-mktg {
+  color: $blue-450;
+  background-color: $white;
+  border-color: rgba($blue-450, 0.5);
+
+  &:hover {
+    color: $blue-500;
+    text-decoration: none;
+    background-color: $white;
+    border-color: rgba($blue-450, 1);
   }
 }

modules/primer-marketing-buttons/package.json

@@ -31,6 +31,7 @@
     "postpublish": "../../script/notify success"
   },
   "dependencies": {
+    "primer-marketing-support": "1.5.6",
     "primer-support": "4.7.2"
   },
   "keywords": [

modules/primer-marketing-buttons/stories.js

@@ -1,21 +1,9 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
+import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown'
 
-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>
-  ))
+const stories = storiesOf('Marketing buttons', module)
+
+for (const {title, story} of storiesFromMarkdown(require.context('.', true, /\.md$/))) {
+  stories.add(title, story)
+}

modules/primer-marketing-support/lib/variables.scss

@@ -21,6 +21,13 @@ $font-mktg: InterUI, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, A
 $h000-size: 64px !default;
 $h000-size-mobile: 48px !default;
 
+// Colors
+$blue-450: mix($blue-500, $blue-400, 50%);
+$green-450: mix($green-500, $green-400, 50%);
+
+// Animations
+$transition-time: 0.4s;
+
 // Increases primer-core scale first by 8px for spacer-7 then by 16px step increments for spacer-8 to spacer-12
 // i.e. After 40px, we have 48, 64, 80, 96, etc.
 $spacer-7:  $spacer * 6;  // 48px

modules/primer-marketing-support/package.json

@@ -36,5 +36,8 @@
     "functions",
     "variables",
     "scss"
-  ]
+  ],
+  "dependencies": {
+    "primer-support": "4.7.2"
+  }
 }