feat(plex-options): cambia button por plex-button

Author: palita1991

cypress/integration/template-listado.js

@@ -7,19 +7,13 @@ context('template listado', () => {
     });
 
     it('test accordion', () => {
-        cy.eyesCheckWindow('main');
-
-        // SE SACO PORQUE PISARON TODA UNA COMPONENTE
-        // cy.get('plex-title').plexButtonIcon('chevron-down').click();
-        // cy.eyesCheckWindow('modal');
-
-        // cy.plexButton('CANCELAR').click();
+        cy.eyesCheckWindow('main');;
 
         cy.get('plex-list plex-item').eq(0).plexButtonIcon('eye').click();
 
         cy.eyesCheckWindow('item list selected');
 
-        cy.get('plex-options button').eq(0).click();
+        cy.get('plex-options').eq(0).plexButton('opcion 1').click();
 
         cy.eyesCheckWindow('plex-options');
 

src/lib/css/plex-options.scss

@@ -1,9 +1,18 @@
 plex-options {
-    .options-container {
-        display: flex;        
-    }
-
-    .option-grow {
+    plex-button {
         flex-grow: 1;
+
+        &.active {
+            button {
+                color: #fff;
+                background-color: #0082ad;
+                background-image: none;
+                border-color: #007aa3;
+            }
+        }
+
+        button {
+            width: 100%;
+        }
     }
 }

src/lib/options/options.component.ts

@@ -9,17 +9,14 @@ export interface IPlexOptionsItems {
 @Component({
     selector: 'plex-options',
     template: `
-        <div class="row">
-            <div class="d-flex col flex-wrap">
-                <ng-container *ngFor="let item of items">
-                    <button class="btn btn-primary btn-sm option-grow m-0" (click)="onOptionsClick(item)" [class.active]="active === item.key">
-                        {{ item.label }}
-                    </button>
-                </ng-container>
+            <div class="row">
+                <div class="d-flex col flex-wrap">
+                    <ng-container *ngFor="let item of items">
+                        <plex-button type="info" size="sm" label="{{ item.label }}" (click)="onOptionsClick(item)" [class.active]="active === item.key"></plex-button>
+                    </ng-container>
+                </div>
             </div>
-        </div>
-    `
-})
+    `})
 export class PlexOptionsComponent implements OnInit, OnChanges {
 
     /**