-
Notifications
You must be signed in to change notification settings - Fork 210
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(message-hour): cria novo componente
message-hour
Cria novo componente `message-hour`, para exibir saudações.
- Loading branch information
Showing
14 changed files
with
365 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export * from './po-message-hour.component'; | ||
|
||
export * from './po-message-hour.module'; |
10 changes: 10 additions & 0 deletions
10
projects/ui/src/lib/components/po-message-hour/literals/po-message-hour-literals.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
export interface PoMessageHourLiterals { | ||
/** | ||
* @usedBy PoMessageHour | ||
* | ||
* @description | ||
* | ||
* Interface para configuração de mensagem de saudação. | ||
*/ | ||
salutation?: string; | ||
} |
13 changes: 13 additions & 0 deletions
13
projects/ui/src/lib/components/po-message-hour/po-message-hour-base.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import { PoMessageHourBaseComponent } from './po-message-hour-base.component'; | ||
|
||
describe('PoMessageHourBaseComponent:', () => { | ||
let component: PoMessageHourBaseComponent; | ||
|
||
beforeEach(() => { | ||
component = new PoMessageHourBaseComponent(); | ||
}); | ||
|
||
it('should be created', () => { | ||
expect(component instanceof PoMessageHourBaseComponent).toBeTruthy(); | ||
}); | ||
}); |
41 changes: 41 additions & 0 deletions
41
projects/ui/src/lib/components/po-message-hour/po-message-hour-base.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
import { Directive, EventEmitter, Input, Output } from '@angular/core'; | ||
|
||
/** | ||
* @description | ||
* | ||
* O componente `PoMessageHour` é responsável por exibir mensagens horárias personalizadas com base no período do dia. | ||
* | ||
* #### Boas Práticas | ||
* | ||
* Este componente é projetado seguindo as práticas recomendadas para proporcionar uma experiência de usuário eficiente e acessível, sendo especialmente útil para saudações exibidas após alguma ação do usuário: | ||
* | ||
* ##### Uso | ||
* - Gera mensagens de saudação de acordo com o período do dia: madrugada, manhã, tarde ou noite. | ||
* | ||
* ##### Acessibilidade | ||
* - Utiliza controles HTML padrão para permitir a identificação por tecnologias assistivas. | ||
* - Mantém o underline no link para diferenciar de textos comuns, atendendo às diretrizes de contraste. | ||
* - Preserva o estado de foco do componente e garante que a aparência do foco atenda aos requisitos de acessibilidade. | ||
* | ||
*/ | ||
@Directive() | ||
export class PoMessageHourBaseComponent { | ||
/** | ||
* @optional | ||
* | ||
* @description | ||
* | ||
* Label da mensagem. | ||
*/ | ||
@Input('p-label') label?: string; | ||
|
||
/** | ||
* @optional | ||
* | ||
* @description | ||
* | ||
* Evento emitido quando o período do dia da mensagem é atualizado. | ||
* O período do dia pode ser 'dawn' (madrugada), 'morning' (manhã), 'afternoon' (tarde) ou 'night' (noite). | ||
*/ | ||
@Output('p-message-hour') messageHour = new EventEmitter<string>(); | ||
} |
4 changes: 4 additions & 0 deletions
4
projects/ui/src/lib/components/po-message-hour/po-message-hour.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
<div class="container"> | ||
<span class="label">{{ label }}</span> | ||
<po-link p-label="{{ message }}"></po-link> | ||
</div> |
112 changes: 112 additions & 0 deletions
112
projects/ui/src/lib/components/po-message-hour/po-message-hour.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,112 @@ | ||
import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
||
import { PoMessageHourComponent } from './po-message-hour.component'; | ||
|
||
fdescribe('PoMessageHourComponent', () => { | ||
let component: PoMessageHourComponent; | ||
let fixture: ComponentFixture<PoMessageHourComponent>; | ||
|
||
beforeEach(() => { | ||
TestBed.configureTestingModule({ | ||
declarations: [PoMessageHourComponent] | ||
}); | ||
fixture = TestBed.createComponent(PoMessageHourComponent); | ||
component = fixture.componentInstance; | ||
fixture.detectChanges(); | ||
}); | ||
|
||
it('should create', () => { | ||
expect(component).toBeTruthy(); | ||
}); | ||
|
||
it('should set message for dawn', () => { | ||
spyOn(component.messageHour, 'emit'); | ||
|
||
spyOn(component, 'getCurrentHour').and.returnValue(4); | ||
|
||
component.setMessage(); | ||
|
||
expect(component.message).toEqual(`${component.literals.salutation} ${component.literals.dawn}`); | ||
expect(component.messageHour.emit).toHaveBeenCalledWith( | ||
`${component.literals.salutation} ${component.literals.dawn}` | ||
); | ||
}); | ||
|
||
it('should set message for morning', () => { | ||
spyOn(component.messageHour, 'emit'); | ||
|
||
spyOn(component, 'getCurrentHour').and.returnValue(10); | ||
|
||
component.setMessage(); | ||
|
||
expect(component.message).toEqual(`${component.literals.salutation} ${component.literals.morning}`); | ||
expect(component.messageHour.emit).toHaveBeenCalledWith( | ||
`${component.literals.salutation} ${component.literals.morning}` | ||
); | ||
}); | ||
|
||
it('should set message for night', () => { | ||
spyOn(component.messageHour, 'emit'); | ||
|
||
spyOn(component, 'getCurrentHour').and.returnValue(21); | ||
|
||
component.setMessage(); | ||
|
||
expect(component.message).toEqual(`${component.literals.salutation} ${component.literals.night}`); | ||
expect(component.messageHour.emit).toHaveBeenCalledWith( | ||
`${component.literals.salutation} ${component.literals.night}` | ||
); | ||
}); | ||
|
||
it('should set message for afternoon', () => { | ||
spyOn(component.messageHour, 'emit'); | ||
|
||
spyOn(component, 'getCurrentHour').and.returnValue(15); | ||
|
||
component.setMessage(); | ||
|
||
expect(component.message).toEqual(`${component.literals.salutation} ${component.literals.afternoon}`); | ||
expect(component.messageHour.emit).toHaveBeenCalledWith( | ||
`${component.literals.salutation} ${component.literals.afternoon}` | ||
); | ||
}); | ||
|
||
it('should set message for edge case: 5 AM', () => { | ||
spyOn(component.messageHour, 'emit'); | ||
|
||
spyOn(component, 'getCurrentHour').and.returnValue(5); | ||
|
||
component.setMessage(); | ||
|
||
expect(component.message).toEqual(`${component.literals.salutation} ${component.literals.dawn}`); | ||
expect(component.messageHour.emit).toHaveBeenCalledWith( | ||
`${component.literals.salutation} ${component.literals.dawn}` | ||
); | ||
}); | ||
|
||
it('should set message for edge case: 12 PM', () => { | ||
spyOn(component.messageHour, 'emit'); | ||
|
||
spyOn(component, 'getCurrentHour').and.returnValue(12); | ||
|
||
component.setMessage(); | ||
|
||
expect(component.message).toEqual(`${component.literals.salutation} ${component.literals.afternoon}`); | ||
expect(component.messageHour.emit).toHaveBeenCalledWith( | ||
`${component.literals.salutation} ${component.literals.afternoon}` | ||
); | ||
}); | ||
|
||
it('should set message for edge case: 6 PM', () => { | ||
spyOn(component.messageHour, 'emit'); | ||
|
||
spyOn(component, 'getCurrentHour').and.returnValue(18); | ||
|
||
component.setMessage(); | ||
|
||
expect(component.message).toEqual(`${component.literals.salutation} ${component.literals.night}`); | ||
expect(component.messageHour.emit).toHaveBeenCalledWith( | ||
`${component.literals.salutation} ${component.literals.night}` | ||
); | ||
}); | ||
}); |
88 changes: 88 additions & 0 deletions
88
projects/ui/src/lib/components/po-message-hour/po-message-hour.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,88 @@ | ||
import { Component } from '@angular/core'; | ||
import { PoMessageHourLiterals } from './literals/po-message-hour-literals'; | ||
import { PoMessageHourBaseComponent } from './po-message-hour-base.component'; | ||
|
||
export const poMessageHourDefault = { | ||
en: <PoMessageHourLiterals>{ | ||
salutation: 'Welcome', | ||
dawn: 'Good dawn', | ||
morning: 'Good morning', | ||
afternoon: 'Good afternoon', | ||
night: 'Good night' | ||
}, | ||
es: <PoMessageHourLiterals>{ | ||
salutation: 'Bienvenido', | ||
dawn: 'Buen amanecer', | ||
morning: 'Buenos días', | ||
afternoon: 'Buenas tardes', | ||
night: 'Buenas noches' | ||
}, | ||
pt: <PoMessageHourLiterals>{ | ||
salutation: 'Bem vindo', | ||
dawn: 'Boa madrugada', | ||
morning: 'Bom dia', | ||
afternoon: 'Boa tarde', | ||
night: 'Boa noite' | ||
}, | ||
ru: <PoMessageHourLiterals>{ | ||
salutation: 'добро пожаловать', | ||
dawn: 'Доброй ночи', | ||
morning: 'Доброе утро', | ||
afternoon: 'Добрый день', | ||
night: 'Добрый вечер' | ||
} | ||
}; | ||
|
||
/** | ||
* @docsExtends PoMessageHourBaseComponent | ||
* | ||
* @example | ||
* | ||
* <example name="po-message-hour-basic" title="PO Message Hour Basic"> | ||
* <file name="sample-po-message-hour-basic/sample-po-message-hour-basic.component.html"> </file> | ||
* <file name="sample-po-message-hour-basic/sample-po-message-hour-basic.component.ts"> </file> | ||
* </example> | ||
* | ||
* <example name="po-message-hour-menu" title="PO Message Hour - Human Resources"> | ||
* <file name="sample-po-message-hour-menu/sample-po-message-hour-menu.component.html"> </file> | ||
* <file name="sample-po-message-hour-menu/sample-po-message-hour-menu.component.ts"> </file> | ||
* </example> | ||
*/ | ||
@Component({ | ||
selector: 'po-message-hour', | ||
templateUrl: './po-message-hour.component.html' | ||
}) | ||
export class PoMessageHourComponent extends PoMessageHourBaseComponent { | ||
public literals?: any; | ||
|
||
message: string; | ||
|
||
ngOnInit() { | ||
const browserLanguage = navigator.language.split('-')[0]; | ||
this.literals = poMessageHourDefault[browserLanguage]; | ||
|
||
this.setMessage(); | ||
} | ||
|
||
getCurrentHour() { | ||
return new Date().getHours(); | ||
} | ||
|
||
setMessage() { | ||
const hour = this.getCurrentHour(); | ||
let timeOfDay = ''; | ||
|
||
if (hour <= 5) { | ||
timeOfDay = this.literals.dawn; | ||
} else if (hour < 12) { | ||
timeOfDay = this.literals.morning; | ||
} else if (hour < 18) { | ||
timeOfDay = this.literals.afternoon; | ||
} else { | ||
timeOfDay = this.literals.night; | ||
} | ||
|
||
this.message = `${this.literals.salutation} ${timeOfDay}`; | ||
this.messageHour.emit(this.message); | ||
} | ||
} |
17 changes: 17 additions & 0 deletions
17
projects/ui/src/lib/components/po-message-hour/po-message-hour.module.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { NgModule } from '@angular/core'; | ||
import { CommonModule } from '@angular/common'; | ||
import { RouterModule } from '@angular/router'; | ||
import { PoMessageHourComponent } from './po-message-hour.component'; | ||
import { PoLinkModule } from '../po-link'; | ||
|
||
/** | ||
* @description | ||
* | ||
* Módulo do componente po-message-hour. | ||
*/ | ||
@NgModule({ | ||
declarations: [PoMessageHourComponent], | ||
imports: [CommonModule, RouterModule, PoLinkModule], | ||
exports: [PoMessageHourComponent, PoLinkModule] | ||
}) | ||
export class PoMessageHourModule {} |
1 change: 1 addition & 0 deletions
1
...age-hour/samples/sample-po-message-hour-basic/sample-po-message-hour-basic.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
<po-message-hour p-label="Arya Stark"></po-message-hour> |
7 changes: 7 additions & 0 deletions
7
...ssage-hour/samples/sample-po-message-hour-basic/sample-po-message-hour-basic.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import { Component } from '@angular/core'; | ||
|
||
@Component({ | ||
selector: 'sample-po-message-hour-basic', | ||
templateUrl: './sample-po-message-hour-basic.component.html' | ||
}) | ||
export class SamplePoMessageHourBasicComponent {} |
7 changes: 7 additions & 0 deletions
7
...ssage-hour/samples/sample-po-message-hour-menu/sample-po-message-hour-menu.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
<div class="po-wrapper"> | ||
<po-menu p-filter="true" p-collapsed [p-menus]="menus"> | ||
<ng-template p-menu-header-template> | ||
<po-message-hour p-label="Jon Snow"></po-message-hour> | ||
</ng-template> | ||
</po-menu> | ||
</div> |
Oops, something went wrong.