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

Implementa definições de estilo e acessibilidade definidos pelo AnimaliaDS Fixes DTHFUI-7810
po-ui · Sep 12, 2024 · 1dec916 · 1dec916
1 parent ea8ced3
commit 1dec916
Show file tree

Hide file tree

Showing 21 changed files with 1,394 additions and 361 deletions.
diff --git a/projects/ui/src/lib/components/po-stepper/po-step/po-step.component.ts b/projects/ui/src/lib/components/po-stepper/po-step/po-step.component.ts
@@ -1,4 +1,4 @@
-import { AfterContentInit, Component, ElementRef, Input } from '@angular/core';
+import { AfterContentInit, Component, ElementRef, Input, TemplateRef } from '@angular/core';
 import { Observable } from 'rxjs';
 
 import { uuid } from '../../../utils/util';
@@ -75,7 +75,7 @@ export class PoStepComponent implements AfterContentInit {
     | ((currentStep) => Observable<boolean>);
 
   /** Título que será exibido descrevendo o passo (*step*). */
-  @Input('p-label') label: string;
+  @Input('p-label') label: string = '';
 
   // ID do step
   id?: string = uuid();
@@ -93,6 +93,42 @@ export class PoStepComponent implements AfterContentInit {
     return this._status;
   }
 
+  /**
+   * @optional
+   *
+   * @description
+   * Define o ícone padrão do step em seu status *default*.
+   * Esta propriedade permite usar ícones da [Biblioteca de ícones](/guides/icons) ou da biblioteca [Phosphor](https://phosphoricons.com/).
+   *
+   * Exemplo usando a biblioteca de ícones padrão:
+   * ```
+   * <po-stepper>
+   *    ...
+   *    <po-step p-icon-default="po-icon po-icon-pin"></po-step>
+   * </po-stepper>
+   * ```
+   * Exemplo usando a biblioteca *Phosphor*:
+   * ```
+   * <po-stepper>
+   *    ...
+   *    <po-step p-icon-default="ph ph-map-pin"></po-step>
+   * </po-stepper>
+   * ```
+   * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo:
+   * ```
+   * <po-stepper>
+   *    ...
+   *    <po-step [p-icon-default]="template"></po-step>
+   * </po-stepper>
+   *
+   * <ng-template #template>
+   *    <i class="ph ph-shopping-cart"></i>
+   * </ng-template
+   * ```
+   * > Deve-se usar `font-size: inherit` para ajustar ícones que não se ajustam automaticamente.
+   */
+  @Input('p-icon-default') iconDefault?: string | TemplateRef<void>;
+
   constructor(private elementRef: ElementRef) {}
 
   ngAfterContentInit() {

diff --git a/projects/ui/src/lib/components/po-stepper/po-stepper-base.component.spec.ts b/projects/ui/src/lib/components/po-stepper/po-stepper-base.component.spec.ts
@@ -34,10 +34,15 @@ describe('PoStepperBaseComponent:', () => {
 
     it('p-step: shouldn`t set property with invalid values', () => {
       const invalidValues = [0, 3, undefined, null, {}, ''];
+      const validStep = 1;
 
       component.steps = [{ label: 'Step 1' }];
+      component.step = validStep;
 
-      expectPropertiesValues(component, 'step', invalidValues, 1);
+      invalidValues.forEach(value => {
+        component.step = value as any;
+        expect(component.step).toBe(validStep);
+      });
     });
 
     it('p-steps: should update property with empty `array` if invalid values', () => {
@@ -46,14 +51,6 @@ describe('PoStepperBaseComponent:', () => {
       expectPropertiesValues(component, 'steps', invalidValues, []);
     });
 
-    it('p-steps: should update property with `array` with status default and initial step 1', () => {
-      component.steps = [{ label: 'Step 1' }, { label: 'Step 2' }];
-
-      expect(component.steps[0].status).toBe(PoStepperStatus.Active);
-      expect(component.steps[1].status).toBe(PoStepperStatus.Default);
-      expect(component.step).toBe(1);
-    });
-
     it('p-steps: should respect status disabled', () => {
       component.steps = [
         { label: 'Step 1', status: PoStepperStatus.Active },

diff --git a/projects/ui/src/lib/components/po-stepper/po-stepper-base.component.ts b/projects/ui/src/lib/components/po-stepper/po-stepper-base.component.ts
@@ -1,4 +1,4 @@
-import { EventEmitter, Input, Output, Directive } from '@angular/core';
+import { EventEmitter, Input, Output, Directive, TemplateRef } from '@angular/core';
 
 import { convertToBoolean } from '../../utils/util';
 
@@ -49,6 +49,34 @@ const poStepperOrientationDefault = PoStepperOrientation.Horizontal;
  *
  * - Evite `labels` extensos que quebram o layout do `po-stepper`, use `labels` diretos, curtos e intuitivos.
  * - Utilize apenas um `po-stepper` por página.
+ *
+ * #### Tokens customizáveis
+ *
+ * É possível alterar o estilo do componente usando os seguintes tokens (CSS):
+ *
+ * > Para maiores informações, acesse o guia [Personalizando o Tema Padrão com Tokens CSS](https://po-ui.io/guides/theme-customization).
+ *
+ * | Propriedade                              | Descrição                                             | Valor Padrão                                      |
+ * |------------------------------------------|-------------------------------------------------------|---------------------------------------------------|
+ * | **Label**                                |                                                       |                                                   |
+ * | `--font-family`                          | Família tipográfica usada                             | `var(--font-family-theme)`                        |
+ * | `--font-size`                            | Tamanho da fonte                                      | `var(--font-size-default)`                        |
+ * | `--font-weight`                          | Peso da fonte                                         | `var(--font-weight-normal)`                       |
+ * | **Step - Done**                          |                                                       |                                                   |
+ * | `--text-color`                           | Cor do texto no step concluído                        | `var(--color-neutral-dark-70)`                    |
+ * | `--color-icon-done`                      | Cor do ícone no step concluído                        | `var(--color-neutral-dark-70)`                    |
+ * | `--background-done`                      | Cor de fundo no step concluído                        | `var(--color-neutral-light-00)`                   |
+ * | **Line - Done**                          |                                                       |                                                   |
+ * | `--color-line-done`                      | Cor da linha no step concluído                        | `var(--color-neutral-mid-40)`                     |
+ * | **Step - Current**                       |                                                       |                                                   |
+ * | `--color-icon-current`                   | Cor do ícone no step atual                            | `var(--color-neutral-light-00)`                   |
+ * | `--background-current`                   | Cor de fundo no step atual                            | `var(--color-action-default)`                     |
+ * | `--font-weight-current`                  | Peso da fonte no step atual                           | `var(--font-weight-bold)`                         |
+ * | **Step - Next**                          |                                                       |                                                   |
+ * | `--font-size-circle`                     | Tamanho da fonte no círculo do próximo step           | `var(--font-size-sm)`                             |
+ * | `--color-next`                           | Cor do ícone no próximo step                          | `var(--color-action-disabled)`                    |
+ * | `--text-color-next`                      | Cor do texto no próximo step                          | `var(--color-neutral-light-30)`                   |
+ *
  */
 @Directive()
 export class PoStepperBaseComponent {
@@ -146,7 +174,7 @@ export class PoStepperBaseComponent {
   @Input('p-steps') set steps(steps: Array<PoStepperItem>) {
     this._steps = Array.isArray(steps) ? steps : [];
     this._steps.forEach(step => (step.status = step.status ?? PoStepperStatus.Default));
-    this.step = 1;
+    this.initializeSteps();
   }
 
   get steps(): Array<PoStepperItem> {
@@ -171,4 +199,74 @@ export class PoStepperBaseComponent {
   get sequential(): boolean {
     return this._sequential;
   }
+
+  /**
+   * @optional
+   *
+   * @description
+   * Permite definir o ícone do step no status concluído.
+   * Esta propriedade permite usar ícones da [Biblioteca de ícones](/guides/icons) ou da biblioteca [Phosphor](https://phosphoricons.com/).
+   *
+   * Exemplo usando a biblioteca de ícones padrão:
+   * ```
+   * <po-stepper p-step-icon-done="po-icon po-icon-eye">
+   *    ...
+   * </po-stepper>
+   * ```
+   * Exemplo usando a biblioteca *Phosphor*:
+   * ```
+   * <po-stepper p-step-icon-done="ph ph-check-circle">
+   *    ...
+   * </po-stepper>
+   * ```
+   * Outra opção seria a customização do ícone através do `TemplateRef`, conforme exemplo abaixo:
+   * ```
+   * <po-stepper [p-step-icon-done]="doneIcon">
+   *    ...
+   * </po-stepper>
+   *
+   * <ng-template #doneIcon>
+   *    <i class="ph ph-check-fat"></i>
+   * </ng-template>
+   * ```
+   * > Deve-se usar `font-size: inherit` para ajustar ícones que não se ajustam automaticamente.
+   *
+   * @default `po-icon-ok`
+   */
+  @Input('p-step-icon-done') iconDone?: string | TemplateRef<void>;
+
+  /**
+   * @optional
+   *
+   * @description
+   * Permite definir o ícone do step no status ativo.
+   * Esta propriedade permite usar ícones da [Biblioteca de ícones](/guides/icons) ou da biblioteca [Phosphor](https://phosphoricons.com/).
+   *
+   * Exemplo usando a biblioteca de ícones padrão:
+   * ```
+   * <po-stepper p-step-icon-active="po-icon po-icon-settings">
+   *    ...
+   * </po-stepper>
+   * ```
+   * Exemplo usando a biblioteca *Phosphor*:
+   * ```
+   * <po-stepper p-step-icon-active="ph ph-pencil-simple-line">
+   *    ...
+   * </po-stepper>
+   * ```
+   * Para customizar o ícone através do `TemplateRef`, veja a documentação da propriedade `p-step-icon-done`.
+   *
+   * > Deve-se usar `font-size: inherit` para ajustar ícones que não se ajustam automaticamente.
+   *
+   * @default `po-icon-edit`
+   */
+  @Input('p-step-icon-active') iconActive?: string | TemplateRef<void>;
+
+  private initializeSteps(): void {
+    const hasStatus = this._steps.some(step => step.status !== PoStepperStatus.Default);
+
+    if (!hasStatus && this.step === 1) {
+      this.step = 1;
+    }
+  }
 }
diff --git a/projects/ui/src/lib/components/po-stepper/po-stepper-circle/po-stepper-circle.component.html b/projects/ui/src/lib/components/po-stepper/po-stepper-circle/po-stepper-circle.component.html
@@ -1,22 +1,30 @@
-<div class="po-stepper-circle" [style.height.px]="size" [style.width.px]="size" [tabindex]="isDisabled ? -1 : 0">
-  <po-icon
-    *ngIf="!isActive"
-    class="po-stepper-circle-content"
-    [class.po-icon]="icons || isDone"
-    [p-icon]="
-      icons && isError
-        ? 'ICON_EXCLAMATION'
-        : icons && (isActive || isDefault || isDisabled)
-          ? 'ICON_INFO'
-          : isDone
-            ? 'ICON_OK'
-            : ''
-    "
-    [class.po-stepper-circle-content-lg]="isLargeStep"
-    [class.po-stepper-circle-content-md]="isMediumStep"
-  >
-    {{ !icons && !isDone ? content : '' }}
-  </po-icon>
-
-  <div *ngIf="isActive || isError" class="po-stepper-circle-active"></div>
+<div
+  class="po-stepper-circle"
+  [ngClass]="{ 'po-stepper-circle-border': !isActive && !isError, 'po-stepper-circle-done': isDone }"
+  [style.height.px]="size"
+  [style.width.px]="size"
+>
+  <ng-container *ngIf="isActive || isError; else defaultContent">
+    <div class="po-stepper-circle-active">
+      <po-icon
+        class="po-stepper-circle-content"
+        [class.po-icon]="true"
+        [p-icon]="iconActive ? iconActive : 'ICON_EDIT'"
+        [class.po-stepper-circle-content-lg]="isLargeStep"
+        [class.po-stepper-circle-content-md]="isMediumStep"
+      ></po-icon>
+    </div>
+  </ng-container>
+  <ng-template #defaultContent>
+    <po-icon
+      *ngIf="!isActive"
+      class="po-stepper-circle-content"
+      [class.po-icon]="icons || isDone"
+      [p-icon]="isDone ? iconDone || 'ICON_OK' : iconDefault ? iconDefault : icons ? 'ICON_INFO' : ''"
+      [class.po-stepper-circle-content-lg]="isLargeStep"
+      [class.po-stepper-circle-content-md]="isMediumStep"
+    >
+      {{ !icons && !isDone && !iconDefault ? content : '' }}
+    </po-icon>
+  </ng-template>
 </div>