add missing things

Author: gladwearefriends

modules/primer-marketing-buttons/README.md

@@ -23,22 +23,22 @@ Marketing buttons can be solid blue, outlined blue, or solid green.
 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-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>
+<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>
 ```
 
 ## Sizes
 
 Available in two sizes, marketing buttons have a default size and a large size.
 
 ```html
-<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>
+<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/package.json

@@ -31,7 +31,7 @@
     "publish": "../../script/notify success"
   },
   "dependencies": {
-    "primer-marketing-support": "1.5.4",
+    "primer-marketing-support": "^1.5.4",
     "primer-support": "4.7.0"
   },
   "keywords": [

modules/primer-marketing-buttons/stories.js

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

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

@@ -6,6 +6,9 @@ $alt-mono-font: $mono-font;
 $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

@@ -35,5 +35,8 @@
     "functions",
     "variables",
     "scss"
-  ]
+  ],
+  "dependencies": {
+    "primer-support": "^4.7.0"
+  }
 }