feat(loading-icon): implementa definições do AnimaliaDS

Implementa definições de estilo e acessibilidade definidos pelo AnimaliaDS Fixes DTHFUI-7807
po-ui · Nov 8, 2023 · 57f6f03 · 57f6f03
1 parent 0f635b4
commit 57f6f03
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 17 deletions.
diff --git a/projects/ui/src/lib/components/po-button/po-button.component.html b/projects/ui/src/lib/components/po-button/po-button.component.html
@@ -11,9 +11,11 @@
   (click)="onClick()"
 >
   <div *ngIf="loading" class="po-button-loading-icon">
-    <po-loading-icon p-neutral-color></po-loading-icon>
+    <po-loading-icon p-neutral-color p-size="sm"></po-loading-icon>
   </div>
 
-  <po-icon *ngIf="icon" class="po-button-icon" [p-icon]="icon"></po-icon>
-  <span *ngIf="label" class="po-button-label">{{ label }}</span>
+  <div class="po-button-container">
+    <po-icon *ngIf="icon" class="po-button-icon" [p-icon]="icon"></po-icon>
+    <span *ngIf="label" class="po-button-label">{{ label }}</span>
+  </div>
 </button>
diff --git a/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon-size-enum.ts b/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon-size-enum.ts
@@ -0,0 +1,10 @@
+export enum PoLoadiginIconSize {
+  /** Extra small */
+  xs = 'xs',
+  /** Small */
+  sm = 'sm',
+  /** Medium*/
+  md = 'md',
+  /** Large*/
+  lg = 'lg'
+}
diff --git a/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.html b/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.html
@@ -1,10 +1,59 @@
-<div class="po-loading-icon" [class.po-loading-icon-neutral-color]="neutralColor">
-  <span class="po-loading-icon-bar po-loading-icon-bar-1"></span>
-  <span class="po-loading-icon-bar po-loading-icon-bar-2"></span>
-  <span class="po-loading-icon-bar po-loading-icon-bar-3"></span>
-  <span class="po-loading-icon-bar po-loading-icon-bar-4"></span>
-  <span class="po-loading-icon-bar po-loading-icon-bar-5"></span>
-  <span class="po-loading-icon-bar po-loading-icon-bar-6"></span>
-  <span class="po-loading-icon-bar po-loading-icon-bar-7"></span>
-  <span class="po-loading-icon-bar po-loading-icon-bar-8"></span>
+<div class="po-loading-icon-container po-loading-svg-{{ size }}">
+  <ng-container *ngIf="neutralColor">
+    <svg class="po-loading-icon-neutral" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <linearGradient id="spinner-secondHalf">
+          <stop offset="0" stop-opacity="0" stop-color="currentColor" />
+          <stop offset="1" stop-opacity="0.5" stop-color="currentColor" />
+        </linearGradient>
+        <linearGradient id="spinner-firstHalf">
+          <stop offset="0" stop-opacity="1" stop-color="currentColor" />
+          <stop offset="1" stop-opacity="0.5" stop-color="currentColor" />
+        </linearGradient>
+      </defs>
+      <g stroke-width="24" transform="matrix(0.876218, 0, 0, 0.87855, 12.377892, 12.144993)">
+        <path stroke="url(#spinner-secondHalf)" d="M 4 100 A 96 96 0 0 1 196 100" />
+        <path stroke="url(#spinner-firstHalf)" d="M 196 100 A 96 96 0 0 1 4 100" />
+        <path stroke="currentColor" d="M 4 100 A 96 96 0 0 1 4 98" />
+      </g>
+
+      <animateTransform
+        from="0 0 0"
+        to="360 0 0"
+        attributeName="transform"
+        type="rotate"
+        repeatCount="indefinite"
+        dur="1200ms"
+      />
+    </svg>
+  </ng-container>
+
+  <ng-container *ngIf="!neutralColor">
+    <svg class="po-loading-icon" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <linearGradient id="spinner-secondHalf-default">
+          <stop offset="0" stop-opacity="0" stop-color="currentColor" />
+          <stop offset="1" stop-opacity="0.5" stop-color="currentColor" />
+        </linearGradient>
+        <linearGradient id="spinner-firstHalf-default">
+          <stop offset="0" stop-opacity="1" stop-color="currentColor" />
+          <stop offset="1" stop-opacity="0.5" stop-color="currentColor" />
+        </linearGradient>
+      </defs>
+      <g stroke-width="24" transform="matrix(0.876218, 0, 0, 0.87855, 12.377892, 12.144993)">
+        <path stroke="url(#spinner-secondHalf-default)" d="M 4 100 A 96 96 0 0 1 196 100" />
+        <path stroke="url(#spinner-firstHalf-default)" d="M 196 100 A 96 96 0 0 1 4 100" />
+        <path stroke="currentColor" d="M 4 100 A 96 96 0 0 1 4 98" />
+      </g>
+
+      <animateTransform
+        from="0 0 0"
+        to="360 0 0"
+        attributeName="transform"
+        type="rotate"
+        repeatCount="indefinite"
+        dur="1200ms"
+      />
+    </svg>
+  </ng-container>
 </div>
diff --git a/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.spec.ts b/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.spec.ts
@@ -45,10 +45,34 @@ describe('PoLoadingOverlayComponent', () => {
   });
 
   describe('Templates', () => {
-    it('should count the amount of `po-loading-icon-bar` elements', () => {
-      const iconBars = fixture.debugElement.queryAll(By.css('.po-loading-icon-bar'));
+    it('should contain `po-loading-svg-xs` size is `xs`', () => {
+      component.size = 'xs';
+      fixture.detectChanges();
+      expect(nativeElement.querySelector('.po-loading-svg-xs')).toBeTruthy();
+    });
+
+    it('should contain `po-loading-svg-s` size is `sm`', () => {
+      component.size = 'sm';
+      fixture.detectChanges();
+      expect(nativeElement.querySelector('.po-loading-svg-sm')).toBeTruthy();
+    });
+
+    it('should contain `po-loading-svg-md` size is `md`', () => {
+      component.size = 'md';
+      fixture.detectChanges();
+      expect(nativeElement.querySelector('.po-loading-svg-md')).toBeTruthy();
+    });
+
+    it('should contain `po-loading-svg-lg` size is `lg`', () => {
+      component.size = 'lg';
+      fixture.detectChanges();
+      expect(nativeElement.querySelector('.po-loading-svg-lg')).toBeTruthy();
+    });
 
-      expect(iconBars.length).toBe(8);
+    it('should contain `po-loading-svg-md` size is invalid value', () => {
+      component.size = 'huge';
+      fixture.detectChanges();
+      expect(nativeElement.querySelector('.po-loading-svg-md')).toBeTruthy();
     });
   });
 });
diff --git a/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.ts b/projects/ui/src/lib/components/po-loading/po-loading-icon/po-loading-icon.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input } from '@angular/core';
 
 import { convertToBoolean } from '../../../utils/util';
+import { PoLoadiginIconSize } from './po-loading-icon-size-enum';
 
 /**
  * @docsPrivate
@@ -16,6 +17,7 @@ import { convertToBoolean } from '../../../utils/util';
 })
 export class PoLoadingIconComponent {
   private _neutralColor: boolean;
+  private _size: string = 'md';
 
   /**
    * @optional
@@ -33,4 +35,27 @@ export class PoLoadingIconComponent {
   get neutralColor(): boolean {
     return this._neutralColor;
   }
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Definição do tamanho do ícone.
+   *
+   * Valores válidos:
+   *  - `xs`: tamanho `extra small`
+   *  - `sm`: tamanho `small`
+   *  - `md`: tamanho `medium`
+   *  - `lg`: tamanho `large`
+   *
+   * @default `md`
+   */
+  @Input('p-size') set size(value: string) {
+    this._size = PoLoadiginIconSize[value] ? PoLoadiginIconSize[value] : PoLoadiginIconSize.md;
+  }
+
+  get size(): string {
+    return this._size;
+  }
 }
diff --git a/projects/ui/src/lib/components/po-menu/po-menu-filter/po-menu-filter.component.html b/projects/ui/src/lib/components/po-menu/po-menu-filter/po-menu-filter.component.html
@@ -9,7 +9,7 @@
 
   <div class="po-menu-filter-search-icon-container">
     <span *ngIf="!loading" class="po-icon po-menu-filter-icon po-icon-search"></span>
-    <po-loading-icon *ngIf="loading"></po-loading-icon>
+    <po-loading-icon *ngIf="loading" p-size="sm"></po-loading-icon>
   </div>
   <div class="po-menu-filter-close-icon-container">
     <po-clean [p-element-ref]="inputFilterElement" (p-change-event)="filterItems(inputFilter.value)"></po-clean>

diff --git a/projects/ui/src/lib/components/po-search/po-search.component.html b/projects/ui/src/lib/components/po-search/po-search.component.html
@@ -1,7 +1,7 @@
 <div class="po-search">
   <div class="po-search-icon">
     <po-icon *ngIf="!loading" p-icon="po-icon-search"></po-icon>
-    <po-loading-icon *ngIf="loading"></po-loading-icon>
+    <po-loading-icon *ngIf="loading" p-size="sm"></po-loading-icon>
   </div>
 
   <input