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

Author: palita1991

.github/workflows/build.yml

@@ -4,9 +4,9 @@ jobs:
   unit-test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v3
       - name: Use Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
             node-version: '10.x'
       - name: Cache node modules
@@ -34,13 +34,13 @@ jobs:
   cypress:
     runs-on: ubuntu-latest 
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v3
       - name: Use Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
             node-version: '10.x'
       - name: Cache node modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         env:
             cache-name: cache-node-modules
         with: 

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').plexButton('opcion 1').eq(0).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,15 +9,13 @@ 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 {