Adding new style button (#963)

* feat: add new style Plain-text

* feat: add new style Plain-text

* feat: add pending uts

* feat: fixing uts

* feat: roll back flipping

* feat: roll back flipping

* feat: roll back flipping

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

Author: palbizu

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

@@ -117,7 +117,8 @@
   }
 }
 
-.text {
+.text,
+.plain-text {
   &.primary {
     @include button-style(inherit, inherit, $blue-5, $blue-4);
   }
@@ -147,7 +148,7 @@
   height: 40px;
   border-radius: 8px;
 
-  &:not(.icon-only) {
+  &:not(.icon-only, .plain-text) {
     padding: 0 20px;
   }
 
@@ -161,7 +162,7 @@
   height: 36px;
   border-radius: 6px;
 
-  &:not(.icon-only) {
+  &:not(.icon-only, .plain-text) {
     padding: 0 16px;
   }
 
@@ -189,7 +190,7 @@
   height: 24px;
   border-radius: 4px;
 
-  &:not(.icon-only) {
+  &:not(.icon-only, .plain-text) {
     padding: 0 12px;
   }
 
@@ -203,7 +204,7 @@
   height: 18px;
   border-radius: 4px;
 
-  &:not(.icon-only) {
+  &:not(.icon-only, .plain-text) {
     padding: 0 12px;
   }
 

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

@@ -146,6 +146,12 @@ describe('Button Component', () => {
     });
     expect(spectator.query('.button')).toHaveClass('button secondary small text');
 
+    // Text
+    spectator.setInput({
+      display: ButtonStyle.PlainText
+    });
+    expect(spectator.query('.button')).toHaveClass('button secondary small plain-text');
+
     // Solid
     spectator.setInput({
       display: ButtonStyle.Solid

projects/components/src/button/button.ts

@@ -18,9 +18,10 @@ export const enum ButtonSize {
 
 export const enum ButtonStyle {
   // These values are used as css classes
-  //                        Background Color | Background Hover Color | Text Hover Color | Border Color
-  Solid = 'solid', //             Yes                   Yes                   No                No
-  Outlined = 'outlined', //       No                    Yes                   No                No
-  Bordered = 'bordered', //       No                    Yes                   No                Yes
-  Text = 'text' //                No                    No                    Yes               No
+  //                        Background Color | Background Hover Color | Text Hover Color | Border Color | Padding
+  Solid = 'solid', //             Yes                   Yes                   No                No          Yes
+  Outlined = 'outlined', //       No                    Yes                   No                No          Yes
+  Bordered = 'bordered', //       No                    Yes                   No                Yes         Yes
+  Text = 'text', //               No                    No                    Yes               No          Yes
+  PlainText = 'plain-text' //     No                    No                    Yes               No           No
 }