feat(buttons): Adds danger and tertiary buttons

* Add tertiary to buttons

* max button specs

* Add compact danger

* remove paddings for tertiary and update colors

* small changes

* add dividers and rename dangers

* Add color for danger focus

* remove danger color changes for hover and focus

* disabled color

packages/ray/lib/_buttons.scss

@@ -6,9 +6,8 @@ $btn-border-radius: $border-radius;
  font-weight: 400;
  line-height: 1;
  display: inline-block;
- border-width: 1px;
+ border: 1px solid $color-blue50;
  border-radius: $btn-border-radius;
- border-style: solid;
  cursor: pointer;
  padding: 20px 24px;
  min-width: 120px;
@@ -33,22 +32,39 @@ $btn-border-radius: $border-radius;
 
  &:hover {
  background-color: $color-blue60;
+ border-color: $color-blue60;
  }
 
  &:focus {
  background-color: $color-blue70;
+ border-color: $color-blue70;
  }
 
  &[disabled] {
  background-color: $color-blue30;
+ border-color: $color-blue30;
  color: rgba($white, 0.4);
  }
+
+ &Danger {
+ background-color: $color-red;
+ border-color: $color-red;
+
+ &:hover {
+ background-color: $color-red60;
+ border-color: $color-red60;
+ }
+
+ &:focus {
+ background-color: $color-red70;
+ border-color: $color-red70;
+ }
+ }
 }
 
 .#{$prefix}btn--secondary {
  color: $color-blue50;
  background-color: $white;
- border-color: $color-blue50;
 
  &:hover {
  background-color: $color-blue10;
@@ -63,10 +79,53 @@ $btn-border-radius: $border-radius;
  border-color: rgba($color-blue50, 0.4);
  color: rgba($color-blue50, 0.4);
  }
+
+ &Danger {
+ border-color: $color-red;
+ color: $color-red;
+
+ &:hover {
+ background-color: $color-red10;
+ }
+
+ &:focus {
+ background-color: $color-red20;
+ }
+ }
 }
 
 .#{$prefix}btn--compact {
  padding: 0.75rem;
  line-height: 1;
  height: auto;
 }
+
+.#{$prefix}btn--tertiary {
+ color: $color-blue50;
+ background-color: transparent;
+ border-color: transparent;
+
+ &:hover {
+ color: $color-blue60;
+ }
+
+ &:focus {
+ color: $color-blue70;
+ }
+
+ &[disabled] {
+ color: rgba($color-blue50, 0.4);
+ }
+
+ &Danger {
+ color: $color-red;
+
+ &:hover {
+ color: $color-red60;
+ }
+
+ &:focus {
+ color: $color-red70;
+ }
+ }
+}

packages/ray/lib/_variables.scss

@@ -46,6 +46,18 @@ $color-blue20: lighten($color-blue, 30%) !default;
 $color-blue10: lighten($color-blue, 40%) !default;
 $color-blue01: lighten($color-blue, 49%) !default;
 
+$color-red: #ff0000;
+$color-red90: darken($color-red, 40%) !default;
+$color-red80: darken($color-red, 30%) !default;
+$color-red70: darken($color-red, 20%) !default;
+$color-red60: darken($color-red, 10%) !default;
+$color-red50: $color-red !default;
+$color-red40: lighten($color-red, 10%) !default;
+$color-red30: lighten($color-red, 20%) !default;
+$color-red20: lighten($color-red, 30%) !default;
+$color-red10: lighten($color-red, 40%) !default;
+$color-red01: lighten($color-red, 49%) !default;
+
 $color-text-light: #b0b0b0;
 $color-text-medium: #666666;
 $color-text-dark: #000000;

packages/ray/stories/buttons.stories.js

@@ -3,39 +3,65 @@ import { storiesOf } from '@storybook/react';
 
 import withPadding from './util/withPadding';
 
+const Divider = () => <span style={{ width: '30px', display: 'inline-block' }}></span>;
+
 storiesOf('Buttons', module)
  .addWithJSX('primary', () => (
  <>
  <button className="ray--btn ray--btn--primary">Click me</button>
- <a href="javascript:;" className="ray--btn ray--btn--primary">
-  Anchor Tag
- </a>
+ <Divider />
+ <button className="ray--btn ray--btn--primary" disabled>Click me disabled</button>
+ <Divider />
  <button className="ray--btn ray--btn--primary ray--btn--compact">
- Small clicks
+ Compact click me
  </button>
- <a
- href="javascript:;"
- className="ray--btn ray--btn--primary ray--btn--compact"
- >
- Compact Anchor
- </a>
-
+ <Divider />
  <button className="ray--btn ray--btn--primary ray--btn--compact" disabled>
- Disabled
+ Compact Disabled
  </button>
+ <Divider />
+ <button className="ray--btn ray--btn--primary ray--btn--primaryDanger">Click me danger</button>
+ <Divider />
+ <button className="ray--btn ray--btn--primary ray--btn--compact ray--btn--primaryDanger">Compact click me danger</button>
  </>
  ))
  .addWithJSX('secondary', () => (
  <>
- <button className="ray--btn ray--btn--secondary">Secondary</button>
+ <button className="ray--btn ray--btn--secondary">Click me</button>
+ <Divider />
+ <button className="ray--btn ray--btn--secondary" disabled>Click me disabled</button>
+ <Divider />
  <button className="ray--btn ray--btn--secondary ray--btn--compact">
- Compact Secondary
+ Compact click me
+ </button>
+ <Divider />
+ <button className="ray--btn ray--btn--secondary ray--btn--compact" disabled>
+ Compact Disabled
+ </button>
+ <Divider />
+ <button className="ray--btn ray--btn--secondary ray--btn--secondaryDanger">Click me danger</button>
+ <Divider />
+ <button className="ray--btn ray--btn--secondary ray--btn--compact ray--btn--secondaryDanger">Compact click me danger</button>
+ <Divider />
+ </>
+ ))
+ .addWithJSX('tertiary', () => (
+ <>
+ <button className="ray--btn ray--btn--tertiary">Click me</button>
+ <Divider />
+ <button className="ray--btn ray--btn--tertiary ray--btn--compact">Compact click me</button>
+ <Divider />
+ <button className="ray--btn ray--btn--tertiary" disabled>
+ Disabled
  </button>
- <button
- className="ray--btn ray--btn--secondary ray--btn--compact"
- disabled
- >
- Disabled Secondary
+ <Divider />
+ <button className="ray--btn ray--btn--tertiary ray--btn--compact" disabled>
+ Compact disabled
  </button>
+ <Divider />
+ <button className="ray--btn ray--btn--tertiary ray--btn--tertiaryDanger">Click me danger</button>
+ <Divider />
+ <button className="ray--btn ray--btn--tertiary ray--btn--compact ray--btn--tertiaryDanger">Compact click me danger</button>
+ <Divider />
  </>
  ));