feat(progress): implementa definições do AnimaliaDS

Implementa definições de estilo e acessibilidade definidos pelo AnimaliaDS

Fixes DTHFUI-7808

projects/ui/src/lib/components/po-progress/enums/po-progress-size.enum.ts

@@ -0,0 +1,12 @@
+/**
+ * @usedBy PoProgressComponent
+ *
+ * @description
+ *
+ * *Enum* `PoProgressSize` para o tamanho da altura da barra de progresso.
+ */
+export enum PoProgressSize {
+  medium = 'medium',
+
+  large = 'large'
+}

projects/ui/src/lib/components/po-progress/index.ts

@@ -1,4 +1,5 @@
 export * from './enums/po-progress-status.enum';
+export * from './enums/po-progress-size.enum';
 
 export * from './po-progress.component';
 export * from './po-progress.module';

projects/ui/src/lib/components/po-progress/po-progress-bar/po-progress-bar.component.html

@@ -1,4 +1,16 @@
-<div [class.po-progress-bar-indeterminate]="indeterminate">
-  <div class="po-progress-bar-element po-progress-bar-primary" [style.transform]="'scaleX(' + valueScale + ')'"></div>
-  <div class="po-progress-bar-element po-progress-bar-secondary"></div>
+<div
+  *ngIf="!indeterminate"
+  role="progressbar"
+  [attr.aria-valuenow]="value"
+  aria-valuemin="0"
+  aria-valuemax="100"
+  aria-live="polite"
+  class="po-progress-bar-default"
+>
+  <div class="po-progress-bar-element po-progress-bar-primary"></div>
+  <div class="po-progress-bar-element po-progress-bar-secondary" [style.left]="'-' + (100 - value) + '%'"></div>
+</div>
+
+<div *ngIf="indeterminate" class="po-progress-bar-indeterminate-track">
+  <div class="po-progress-bar-indeterminate-track-bar"></div>
 </div>

projects/ui/src/lib/components/po-progress/po-progress-bar/po-progress-bar.component.spec.ts

@@ -51,24 +51,24 @@ describe('PoProgressBarComponent:', () => {
   });
 
   describe('Templates:', () => {
-    it('should contain the value of 0.25 in style transform scale if value is 25', () => {
+    it('should contain the value of -75% in style left if value is 25', () => {
       component.value = 25;
 
       fixture.detectChanges();
 
-      const progressBar = nativeElement.querySelector('.po-progress-bar-primary');
+      const progressBar = nativeElement.querySelector('.po-progress-bar-secondary');
 
-      expect(progressBar.style.transform).toBe('scaleX(0.25)');
+      expect(progressBar.style.left).toBe('-75%');
     });
 
-    it('should contain the value of 0 in style transform scale if value is 0', () => {
+    it('should contain the value of -100% in style left if value is 0', () => {
       component.value = 0;
 
       fixture.detectChanges();
 
-      const progressBar = nativeElement.querySelector('.po-progress-bar-primary');
+      const progressBar = nativeElement.querySelector('.po-progress-bar-secondary');
 
-      expect(progressBar.style.transform).toBe('scaleX(0)');
+      expect(progressBar.style.left).toBe('-100%');
     });
   });
 });

projects/ui/src/lib/components/po-progress/po-progress-base.component.spec.ts

@@ -34,6 +34,18 @@ describe('PoProgressBaseComponent:', () => {
 
       expectPropertiesValues(component, 'value', validValues, 0);
     });
+
+    it('should update property `p-size` with valid values', () => {
+      const validValues = ['large', 'medium'];
+
+      expectPropertiesValues(component, 'size', validValues, validValues);
+    });
+
+    it('should update property `p-size` with large if has not valid values', () => {
+      const invalidValues = ['extrasmall', 'huge', 'extralarge'];
+
+      expectPropertiesValues(component, 'size', invalidValues, 'large');
+    });
   });
 
   describe('Methods:', () => {

projects/ui/src/lib/components/po-progress/po-progress-base.component.ts

@@ -1,8 +1,9 @@
-import { EventEmitter, Input, Output, Directive } from '@angular/core';
+import { EventEmitter, Input, Output, Directive, TemplateRef } from '@angular/core';
 
 import { convertToBoolean, convertToInt } from '../../utils/util';
 
 import { PoProgressStatus } from './enums/po-progress-status.enum';
+import { PoProgressSize } from './enums/po-progress-size.enum';
 
 const poProgressMaxValue = 100;
 const poProgressMinValue = 0;
@@ -34,7 +35,7 @@ export class PoProgressBaseComponent {
    *
    * Exemplo: `po-icon-ok`.
    */
-  @Input('p-info-icon') infoIcon?: string;
+  @Input('p-info-icon') infoIcon?: string | TemplateRef<void>;
 
   /**
    * @optional
@@ -85,6 +86,7 @@ export class PoProgressBaseComponent {
 
   private _indeterminate?: boolean;
   private _value?: number = 0;
+  private _size: string = 'large';
 
   /**
    * @optional
@@ -129,6 +131,38 @@ export class PoProgressBaseComponent {
     return this._value;
   }
 
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Definição do tamanho da altura da barra de progresso.
+   *
+   * Valores válidos:
+   *  - `medium`: tamanho médio
+   *  - `large`: tamanho grande
+   *
+   * @default `large`
+   */
+  @Input('p-size') set size(value: string) {
+    this._size = PoProgressSize[value] ? PoProgressSize[value] : PoProgressSize.large;
+  }
+
+  get size(): string {
+    return this._size;
+  }
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Ativa a exibição da porcentagem atual da barra de progresso.
+   *
+   * @default `false`
+   */
+  @Input({ alias: 'p-show-percentage', transform: convertToBoolean }) showPercentage: boolean = false;
+
   private isProgressRangeValue(value: number): boolean {
     return value >= poProgressMinValue && value <= poProgressMaxValue;
   }

projects/ui/src/lib/components/po-progress/po-progress.component.html

@@ -1,30 +1,40 @@
 <div class="po-progress" [ngClass]="statusClass">
-  <label *ngIf="text" class="po-progress-description-mobile po-progress-description-text">
-    {{ text }}
-  </label>
-
-  <po-progress-bar class="po-progress-bar" [p-indeterminate]="indeterminate" [p-value]="value"> </po-progress-bar>
-
   <div *ngIf="text" class="po-progress-description">
-    <label class="po-progress-description-text">
-      {{ text }}
-    </label>
+    <po-label class="po-progress-description-text" [p-label]="text"></po-label>
   </div>
 
-  <div *ngIf="isAllowProgressInfo" class="po-progress-info">
-    <span *ngIf="infoIcon" class="po-progress-info-icon po-icon {{ infoIcon }}"></span>
-    <span *ngIf="info" class="po-progress-info-text">{{ info }}</span>
+  <po-progress-bar
+    class="po-progress-bar po-progress-bar-{{ size }}"
+    [p-indeterminate]="indeterminate"
+    [p-value]="value"
+  >
+  </po-progress-bar>
 
-    <button
-      *ngIf="isAllowRetry"
-      class="po-progress-info-icon-action po-icon po-icon-refresh po-clickable"
-      (click)="emitRetry()"
-    ></button>
+  <div class="po-progress-info">
+    <div class="po-progress-info-left">
+      <po-icon *ngIf="infoIcon" [p-icon]="infoIcon" [class.po-progress-info-icon-error]="status === 'error'"></po-icon>
+      <po-icon *ngIf="isAllowInfoError" p-icon="po-icon-exclamation" class="po-progress-info-icon-error"></po-icon>
+      <span *ngIf="info" class="po-progress-info-text" [class.po-progress-info-text-error]="status === 'error'">{{
+        info
+      }}</span>
+    </div>
+    <div class="po-progress-info-right">
+      <span *ngIf="showPercentage && !indeterminate">{{ value }}%</span>
+      <po-button
+        *ngIf="isAllowRetry"
+        class="po-progress-description"
+        p-icon="po-icon-refresh"
+        (p-click)="emitRetry()"
+        p-kind="tertiary"
+      ></po-button>
 
-    <button
-      *ngIf="isAllowCancel"
-      class="po-progress-info-icon-action po-icon po-icon-close po-clickable"
-      (click)="emitCancellation()"
-    ></button>
+      <po-button
+        *ngIf="isAllowCancel"
+        p-icon="po-icon-close"
+        (p-click)="emitCancellation()"
+        p-kind="secondary"
+        [p-danger]="true"
+      ></po-button>
+    </div>
   </div>
 </div>

projects/ui/src/lib/components/po-progress/po-progress.component.spec.ts

@@ -149,9 +149,9 @@ describe('PoProgressComponent:', () => {
 
       fixture.detectChanges();
 
-      const infoIcon = nativeElement.querySelector('.po-progress-info-icon');
+      const infoIcon = nativeElement.querySelector('.po-icon-agro-business');
 
-      expect(infoIcon.classList).toContain('po-icon-agro-business');
+      expect(infoIcon).toBeTruthy();
     });
 
     it('shouldn`t find `.po-progress-info-icon` if `infoIcon` is `undefined`', () => {
@@ -216,12 +216,12 @@ describe('PoProgressComponent:', () => {
       expect(nativeElement.querySelector('.po-progress-default')).toBeTruthy();
     });
 
-    it('should contain `po-progress-bar-indeterminate` if `indeterminate` is `true`', () => {
+    it('should contain `po-progress-bar-indeterminate-track` if `indeterminate` is `true`', () => {
       component.indeterminate = true;
 
       fixture.detectChanges();
 
-      expect(nativeElement.querySelector('.po-progress-bar-indeterminate')).toBeTruthy();
+      expect(nativeElement.querySelector('.po-progress-bar-indeterminate-track')).toBeTruthy();
     });
 
     it('shouldn`t contain `po-progress-bar-indeterminate` if `indeterminate` is `false`', () => {
@@ -299,15 +299,15 @@ describe('PoProgressComponent:', () => {
       expect(progressInfo).toBeTruthy();
     });
 
-    it('shouldn`t find `.po-progress-info` if `info`, `infoIcon`, `isAllowRetry` and `isAllowCancel` are falsy', () => {
+    it('shouldn`t find `.po-progress-info-text` if `info`, `infoIcon`, `isAllowRetry` and `isAllowCancel` are falsy', () => {
       component.info = undefined;
       component.infoIcon = undefined;
       component.retry.observers.length = 0;
       component.cancel.observers.length = 0;
 
       fixture.detectChanges();
 
-      const progressInfo = nativeElement.querySelector('.po-progress-info');
+      const progressInfo = nativeElement.querySelector('.po-progress-info-text');
 
       expect(progressInfo).toBe(null);
     });

projects/ui/src/lib/components/po-progress/po-progress.component.ts

@@ -32,8 +32,8 @@ export class PoProgressComponent extends PoProgressBaseComponent {
     return !!this.cancel.observers.length && this.status !== PoProgressStatus.Success;
   }
 
-  get isAllowProgressInfo(): boolean {
-    return !!(this.info || this.infoIcon || this.isAllowCancel || this.isAllowRetry);
+  get isAllowInfoError(): boolean {
+    return !!(!this.infoIcon && this.info && this.status === PoProgressStatus.Error);
   }
 
   get isAllowRetry(): boolean {

projects/ui/src/lib/components/po-progress/po-progress.module.ts

@@ -3,14 +3,17 @@ import { NgModule } from '@angular/core';
 
 import { PoProgressBarComponent } from './po-progress-bar/po-progress-bar.component';
 import { PoProgressComponent } from './po-progress.component';
+import { PoButtonModule } from '../po-button/po-button.module';
+import { PoIconModule } from '../po-icon/po-icon.module';
+import { PoLabelModule } from '../po-label/po-label.module';
 
 /**
  * @description
  *
  * Módulo do componente `po-progress`.
  */
 @NgModule({
-  imports: [CommonModule],
+  imports: [CommonModule, PoButtonModule, PoIconModule, PoLabelModule],
   exports: [PoProgressComponent],
   declarations: [PoProgressBarComponent, PoProgressComponent]
 })

projects/ui/src/lib/components/po-progress/samples/sample-po-progress-labs/sample-po-progress-labs.component.html

@@ -1,10 +1,12 @@
 <po-progress
   [p-indeterminate]="properties.includes('indeterminate')"
+  [p-show-percentage]="properties.includes('showPercentage')"
   [p-info]="info"
   [p-info-icon]="infoIcon"
   [p-status]="status"
   [p-text]="text"
   [p-value]="value"
+  [p-size]="size"
   (p-cancel)="onEvent('p-cancel')"
   (p-retry)="onEvent('p-retry')"
 >
@@ -45,6 +47,9 @@
 
     <po-radio-group class="po-md-6" name="status" [(ngModel)]="status" p-label="Status" [p-options]="statusOptions">
     </po-radio-group>
+
+    <po-radio-group class="po-md-6" name="size" [(ngModel)]="size" p-label="Size" [p-options]="sizeOptions">
+    </po-radio-group>
   </div>
 
   <div class="po-row">

projects/ui/src/lib/components/po-progress/samples/sample-po-progress-labs/sample-po-progress-labs.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 
-import { PoCheckboxGroupOption, PoProgressStatus, PoRadioGroupOption } from '@po-ui/ng-components';
+import { PoCheckboxGroupOption, PoProgressStatus, PoRadioGroupOption, PoProgressSize } from '@po-ui/ng-components';
 
 @Component({
   selector: 'sample-po-progress-labs',
@@ -12,6 +12,7 @@ export class SamplePoProgressLabsComponent implements OnInit {
   infoIcon: string;
   properties: Array<string>;
   status: PoProgressStatus;
+  size: PoProgressSize = PoProgressSize.large;
   text: string;
   value: number;
 
@@ -22,14 +23,22 @@ export class SamplePoProgressLabsComponent implements OnInit {
     { label: 'po-icon-no-signal', value: 'po-icon-no-signal' }
   ];
 
-  propertiesOptions: Array<PoCheckboxGroupOption> = [{ label: 'Indeterminate', value: 'indeterminate' }];
+  propertiesOptions: Array<PoCheckboxGroupOption> = [
+    { label: 'Indeterminate', value: 'indeterminate' },
+    { label: 'Show percentage', value: 'showPercentage' }
+  ];
 
   statusOptions: Array<PoRadioGroupOption> = [
     { label: 'Default', value: PoProgressStatus.Default },
     { label: 'Success', value: PoProgressStatus.Success },
     { label: 'Error', value: PoProgressStatus.Error }
   ];
 
+  sizeOptions: Array<PoRadioGroupOption> = [
+    { label: 'Medium', value: PoProgressSize.medium },
+    { label: 'Large', value: PoProgressSize.large }
+  ];
+
   ngOnInit() {
     this.restore();
   }
@@ -46,5 +55,6 @@ export class SamplePoProgressLabsComponent implements OnInit {
     this.status = undefined;
     this.text = undefined;
     this.value = undefined;
+    this.size = PoProgressSize.large;
   }
 }

projects/ui/src/lib/components/po-progress/samples/sample-po-progress-publication/sample-po-progress-publication.component.html

@@ -4,7 +4,7 @@
 
     <po-divider class="po-md-9"></po-divider>
 
-    <po-progress class="po-md-9" p-text="Loading update" [p-info]="progressBarInfo" [p-value]="progressBarValue">
+    <po-progress class="po-md-9" p-text="Loading update" [p-value]="progressBarValue" [p-show-percentage]="true">
     </po-progress>
   </div>