feat: button new style (#1121)

* feat: Adding new button style

* feat: changing style name

Co-authored-by: Patricio Albizu <[email protected]>

Author: palbizu

projects/components/src/button/button.component.scss

@@ -64,6 +64,10 @@
     @include button-style($gray-1, $gray-2, $gray-7, $gray-7);
   }
 
+  &.quaternary {
+    @include button-style($blue-1, $blue-2, $blue-4, $blue-4);
+  }
+
   &.destructive {
     @include button-style($red-5, $red-7, white, white);
   }
@@ -86,6 +90,10 @@
     @include button-style(inherit, $gray-1, $gray-7, $gray-7, $gray-2);
   }
 
+  &.quaternary {
+    @include button-style(inherit, $blue-2, $gray-7, $gray-7, $blue-1);
+  }
+
   &.destructive {
     @include button-style(inherit, $red-1, $gray-7, $gray-7, $red-5);
   }
@@ -108,6 +116,10 @@
     @include button-style(inherit, $gray-1, $gray-5, $gray-5);
   }
 
+  &.quaternary {
+    @include button-style(inherit, $blue-2, $gray-7, $gray-7);
+  }
+
   &.destructive {
     @include button-style(inherit, $red-1, $red-5, $red-5);
   }
@@ -123,6 +135,10 @@
     @include button-style(inherit, inherit, $blue-5, $blue-4);
   }
 
+  &.primary-reversed {
+    @include button-style(inherit, inherit, $blue-1, $blue-2);
+  }
+
   &.secondary {
     @include button-style(inherit, inherit, $gray-7, $gray-5);
   }
@@ -131,6 +147,10 @@
     @include button-style(inherit, inherit, $gray-5, $gray-6);
   }
 
+  &.quaternary {
+    @include button-style(inherit, $blue-2, $gray-7, $gray-7);
+  }
+
   &.destructive {
     @include button-style(inherit, inherit, $red-5, $red-7);
   }

projects/components/src/button/button.component.test.ts

@@ -51,6 +51,12 @@ describe('Button Component', () => {
     });
     expect(spectator.query('.button')).toHaveClass('button tertiary small solid');
 
+    // Quaternary
+    spectator.setInput({
+      role: ButtonRole.Quaternary
+    });
+    expect(spectator.query('.button')).toHaveClass('button quaternary small solid');
+
     // Destructive
     spectator.setInput({
       role: ButtonRole.Destructive

projects/components/src/button/button.ts

@@ -3,6 +3,7 @@ export const enum ButtonRole {
   Primary = 'primary',
   Secondary = 'secondary',
   Tertiary = 'tertiary',
+  Quaternary = 'quaternary',
   Destructive = 'destructive',
   Additive = 'additive'
 }