From 5eb9621ba089393e2d33f92b4698106031281e91 Mon Sep 17 00:00:00 2001
From: adamraider <adamjraider@gmail.com>
Date: Tue, 29 Jan 2019 15:39:34 -0500
Subject: [PATCH] feat(buttons): Add v1 button states (#4)

---
 packages/ray/lib/_buttons.scss          | 73 ++++++++++++++++++-------
 packages/ray/lib/_variables.scss        |  5 ++
 packages/ray/stories/buttons.stories.js | 33 ++++++++++-
 3 files changed, 88 insertions(+), 23 deletions(-)

diff --git a/packages/ray/lib/_buttons.scss b/packages/ray/lib/_buttons.scss
index e3e050a6..c9fdf13a 100644
--- a/packages/ray/lib/_buttons.scss
+++ b/packages/ray/lib/_buttons.scss
@@ -1,41 +1,72 @@
-$font-size: 1rem !default;
+$btn-border-radius: $border-radius;
 
-@mixin btn($bgColor, $focusedColor) {
+.#{$prefix}btn {
   font-family: inherit;
-  font-size: $font-size;
-  font-weight: 800;
-  line-height: 1.5;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1;
   display: inline-block;
-  background-color: $bgColor;
-  border-color: $bgColor;
-  border-width: 0.125rem;
-  border-radius: $border-radius;
+  border-width: 1px;
+  border-radius: $btn-border-radius;
   border-style: solid;
   cursor: pointer;
-  padding: 0.5625rem 1.5625rem;
+  padding: 20px 24px;
   min-width: 120px;
-  color: $color-white;
-  height: $field-height;
+  white-space: nowrap;
+  text-align: center;
+  vertical-align: bottom;
 
   &:hover,
   &:focus {
     text-decoration: none;
-    background-color: $focusedColor;
-    border-color: $focusedColor;
+    outline: 0;
   }
 
   &:disabled {
     cursor: not-allowed;
-    background-color: $color-gray50;
-    border-color: $color-gray50;
-    color: $color-white;
   }
 }
 
-.btn--primary {
-  @include btn($color-blue50, $color-blue60);
+.#{$prefix}btn--primary {
+  background-color: $color-blue50;
+  color: $color-white;
+
+  &:hover {
+    background-color: $color-blue60;
+  }
+
+  &:focus {
+    background-color: $color-blue70;
+  }
+
+  &[disabled] {
+    background-color: $color-blue30;
+    color: rgba($white, 0.4);
+  }
+}
+
+.#{$prefix}btn--secondary {
+  color: $color-blue50;
+  background-color: $white;
+  border-color: $color-blue50;
+
+  &:hover {
+    background-color: $color-blue10;
+  }
+
+  &:focus {
+    background-color: $color-blue20;
+  }
+
+  &[disabled] {
+    background-color: $white;
+    border-color: rgba($color-blue50, 0.4);
+    color: rgba($color-blue50, 0.4);
+  }
 }
 
-.btn--secondary {
-  @include btn($color-yellow50, $color-yellow60);
+.#{$prefix}btn--compact {
+  padding: 0.75rem;
+  line-height: 1;
+  height: auto;
 }
diff --git a/packages/ray/lib/_variables.scss b/packages/ray/lib/_variables.scss
index a0f28e2d..a5d2515b 100644
--- a/packages/ray/lib/_variables.scss
+++ b/packages/ray/lib/_variables.scss
@@ -1,3 +1,4 @@
+$prefix: 'ray--';
 $font-stack-sans-serif: 'Apercu', Avenir, -apple-system, BlinkMacSystemFont,
   'Helvetica Neue', Helvetica, 'Calibri', 'Roboto', Arial, sans-serif !default;
 $font-stack-mono: 'Apercu Mono', monospace !default;
@@ -34,8 +35,12 @@ $color-yellow30: lighten($color-yellow, 20%) !default;
 $color-yellow20: lighten($color-yellow, 30%) !default;
 
 $color-blue: #0000ff !default;
+$color-blue90: darken($color-blue, 40%) !default;
+$color-blue80: darken($color-blue, 30%) !default;
+$color-blue70: darken($color-blue, 20%) !default;
 $color-blue60: darken($color-blue, 10%) !default;
 $color-blue50: $color-blue !default;
+$color-blue40: lighten($color-blue, 10%) !default;
 $color-blue30: lighten($color-blue, 20%) !default;
 $color-blue20: lighten($color-blue, 30%) !default;
 $color-blue10: lighten($color-blue, 40%) !default;
diff --git a/packages/ray/stories/buttons.stories.js b/packages/ray/stories/buttons.stories.js
index 5224b524..1a26e229 100644
--- a/packages/ray/stories/buttons.stories.js
+++ b/packages/ray/stories/buttons.stories.js
@@ -5,8 +5,37 @@ import withPadding from './util/withPadding';
 
 storiesOf('Buttons', module)
   .addWithJSX('primary', () => (
-    <button className="btn--primary">Hello World</button>
+    <>
+      <button className="ray--btn ray--btn--primary">Click me</button>
+      <a href="javascript:;" className="ray--btn ray--btn--primary">
+        Anchor Tag
+      </a>
+      <button className="ray--btn ray--btn--primary ray--btn--compact">
+        Small clicks
+      </button>
+      <a
+        href="javascript:;"
+        className="ray--btn ray--btn--primary ray--btn--compact"
+      >
+        Compact Anchor
+      </a>
+
+      <button className="ray--btn ray--btn--primary ray--btn--compact" disabled>
+        Disabled
+      </button>
+    </>
   ))
   .addWithJSX('secondary', () => (
-    <button className="btn--secondary">Hello World</button>
+    <>
+      <button className="ray--btn ray--btn--secondary">Secondary</button>
+      <button className="ray--btn ray--btn--secondary ray--btn--compact">
+        Compact Secondary
+      </button>
+      <button
+        className="ray--btn ray--btn--secondary ray--btn--compact"
+        disabled
+      >
+        Disabled Secondary
+      </button>
+    </>
   ));