feat: changing style name

Author: Patricio Albizu

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

@@ -56,10 +56,6 @@
     @include button-style($blue-5, $blue-4, white, white);
   }
 
-  &.primary-reversed {
-    @include button-style($blue-1, $blue-2, $blue-4, $blue-4);
-  }
-
   &.secondary {
     @include button-style($gray-7, $gray-5, white, white);
   }
@@ -68,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);
   }
@@ -82,10 +82,6 @@
     @include button-style(inherit, $blue-1, $gray-7, $gray-7, $blue-5);
   }
 
-  &.primary-reversed {
-    @include button-style(inherit, $blue-2, $gray-7, $gray-7, $blue-1);
-  }
-
   &.secondary {
     @include button-style(inherit, $gray-1, $gray-7, $gray-7, $gray-7);
   }
@@ -94,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,10 +108,6 @@
     @include button-style(inherit, $blue-1, $blue-5, $blue-5);
   }
 
-  &.primary-reversed {
-    @include button-style(inherit, $blue-2, $gray-7, $gray-7);
-  }
-
   &.secondary {
     @include button-style(inherit, $gray-1, $gray-7, $gray-7);
   }
@@ -120,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);
   }
@@ -147,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

@@ -39,12 +39,6 @@ describe('Button Component', () => {
     });
     expect(spectator.query('.button')).toHaveClass('button primary small solid');
 
-    // Primary Reversed
-    spectator.setInput({
-      role: ButtonRole.PrimaryReversed
-    });
-    expect(spectator.query('.button')).toHaveClass('button primary-reversed small solid');
-
     // Secondary
     spectator.setInput({
       role: ButtonRole.Secondary
@@ -57,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

@@ -1,9 +1,9 @@
 export const enum ButtonRole {
   // These values are used as css classes
   Primary = 'primary',
-  PrimaryReversed = 'primary-reversed',
   Secondary = 'secondary',
   Tertiary = 'tertiary',
+  Quaternary = 'quaternary',
   Destructive = 'destructive',
   Additive = 'additive'
 }