feat(buttons): Add v1 button states (#4)

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;
 }

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;

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>
+ </>
  ));