Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 38 additions & 2 deletions projects/ui/src/lib/components/po-stepper/po-step/po-step.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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();
Expand All @@ -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() {
Expand Down
15 changes: 6 additions & 9 deletions projects/ui/src/lib/components/po-stepper/po-stepper-base.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand All @@ -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 },
Expand Down
103 changes: 101 additions & 2 deletions projects/ui/src/lib/components/po-stepper/po-stepper-base.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -49,6 +49,35 @@ 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)` |
* | **Focused** | | |
* | `--outline-color-focused` | Cor do outline do estado de focus | `var(--color-action-focus)` |
*/
@Directive()
export class PoStepperBaseComponent {
Expand Down Expand Up @@ -146,7 +175,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> {
Expand All @@ -171,4 +200,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;
}
}
}
50 changes: 29 additions & 21 deletions projects/ui/src/lib/components/po-stepper/po-stepper-circle/po-stepper-circle.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Loading
Loading