Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitb7398a3

Browse files
jnrpalmaJorge Nicholas Ribeiro
authored and
Jorge Nicholas Ribeiro
committed
feat(message-hour): cria novo componentemessage-hour
Cria novo componente `message-hour`, para exibir saudações.
1 parentbee771d commitb7398a3

14 files changed

+368
-4
lines changed

‎projects/ui/src/lib/components/components.module.ts‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
22

33
import{PoAccordionModule}from'./po-accordion/po-accordion.module';
44
import{PoAvatarModule}from'./po-avatar/po-avatar.module';
5-
import{PoBadgeModule}from'./po-badge/po-badge.module';
65
import{PoBreadcrumbModule}from'./po-breadcrumb/po-breadcrumb.module';
76
import{PoButtonGroupModule}from'./po-button-group/po-button-group.module';
87
import{PoButtonModule}from'./po-button/po-button.module';
@@ -37,7 +36,6 @@ import { PoPageModule } from './po-page/po-page.module';
3736
import{PoPopoverModule}from'./po-popover/po-popover.module';
3837
import{PoPopupModule}from'./po-popup/po-popup.module';
3938
import{PoProgressModule}from'./po-progress/po-progress.module';
40-
import{PoSearchModule}from'./po-search';
4139
import{PoSlideModule}from'./po-slide/po-slide.module';
4240
import{PoStepperModule}from'./po-stepper/po-stepper.module';
4341
import{PoTableModule}from'./po-table/po-table.module';
@@ -47,6 +45,10 @@ import { PoToolbarModule } from './po-toolbar/po-toolbar.module';
4745
import{PoTreeViewModule}from'./po-tree-view/po-tree-view.module';
4846
import{PoWidgetModule}from'./po-widget/po-widget.module';
4947
import{PoToasterModule}from'./po-toaster';
48+
import{PoSearchModule}from'./po-search';
49+
import{PoBadgeModule}from'./po-badge/po-badge.module';
50+
import{PoMessageHourModule}from'./po-message-hour';
51+
5052
@NgModule({
5153
imports:[
5254
PoAccordionModule,
@@ -95,7 +97,8 @@ import { PoToasterModule } from './po-toaster';
9597
PoSwitchModule,
9698
PoSearchModule,
9799
PoBadgeModule,
98-
PoToasterModule
100+
PoToasterModule,
101+
PoMessageHourModule
99102
],
100103
exports:[
101104
PoAccordionModule,
@@ -144,7 +147,8 @@ import { PoToasterModule } from './po-toaster';
144147
PoSwitchModule,
145148
PoSearchModule,
146149
PoBadgeModule,
147-
PoToasterModule
150+
PoToasterModule,
151+
PoMessageHourModule
148152
],
149153
providers:[],
150154
bootstrap:[],

‎projects/ui/src/lib/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,3 +46,4 @@ export * from './po-tree-view/index';
4646
export*from'./po-widget/index';
4747
export*from'./po-search/index';
4848
export*from'./po-toaster/index';
49+
export*from'./po-message-hour/index';
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export*from'./po-message-hour.component';
2+
3+
export*from'./po-message-hour.module';
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
exportinterfacePoMessageHourLiterals{
2+
/**
3+
*@usedBy PoMessageHour
4+
*
5+
*@description
6+
*
7+
* Interface para configuração de mensagem de saudação.
8+
*/
9+
salutation?:string;
10+
}
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import{PoMessageHourBaseComponent}from'./po-message-hour-base.component';
2+
3+
describe('PoMessageHourBaseComponent:',()=>{
4+
letcomponent:PoMessageHourBaseComponent;
5+
6+
beforeEach(()=>{
7+
component=newPoMessageHourBaseComponent();
8+
});
9+
10+
it('should be created',()=>{
11+
expect(componentinstanceofPoMessageHourBaseComponent).toBeTruthy();
12+
});
13+
});
Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import{Directive,EventEmitter,Input,Output}from'@angular/core';
2+
3+
/**
4+
*@description
5+
*
6+
* O componente `PoMessageHour` é responsável por exibir mensagens horárias personalizadas com base no período do dia.
7+
*
8+
* #### Boas Práticas
9+
*
10+
* 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:
11+
*
12+
* ##### Uso
13+
* - Gera mensagens de saudação de acordo com o período do dia: madrugada, manhã, tarde ou noite.
14+
*
15+
* ##### Acessibilidade
16+
* - Utiliza controles HTML padrão para permitir a identificação por tecnologias assistivas.
17+
* - Mantém o underline no link para diferenciar de textos comuns, atendendo às diretrizes de contraste.
18+
* - Preserva o estado de foco do componente e garante que a aparência do foco atenda aos requisitos de acessibilidade.
19+
*
20+
*/
21+
@Directive()
22+
exportclassPoMessageHourBaseComponent{
23+
/**
24+
*@optional
25+
*
26+
*@description
27+
*
28+
* Label da mensagem.
29+
*/
30+
@Input('p-label')label?:string;
31+
32+
/**
33+
*@optional
34+
*
35+
*@description
36+
*
37+
* Evento emitido quando o período do dia da mensagem é atualizado.
38+
* O período do dia pode ser 'dawn' (madrugada), 'morning' (manhã), 'afternoon' (tarde) ou 'night' (noite).
39+
*/
40+
@Output('p-message-hour')messageHour=newEventEmitter<string>();
41+
}
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<divclass="container">
2+
<spanclass="label">{{ label }}</span>
3+
<po-linkp-label="{{ message }}"></po-link>
4+
</div>
Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import{ComponentFixture,TestBed}from'@angular/core/testing';
2+
3+
import{PoMessageHourComponent}from'./po-message-hour.component';
4+
5+
describe('PoMessageHourComponent',()=>{
6+
letcomponent:PoMessageHourComponent;
7+
letfixture:ComponentFixture<PoMessageHourComponent>;
8+
9+
beforeEach(()=>{
10+
TestBed.configureTestingModule({
11+
declarations:[PoMessageHourComponent]
12+
});
13+
fixture=TestBed.createComponent(PoMessageHourComponent);
14+
component=fixture.componentInstance;
15+
fixture.detectChanges();
16+
});
17+
18+
it('should create',()=>{
19+
expect(component).toBeTruthy();
20+
});
21+
22+
it('should set message for dawn',()=>{
23+
spyOn(component.messageHour,'emit');
24+
25+
spyOn(component,'getCurrentHour').and.returnValue(4);
26+
27+
component.setMessage();
28+
29+
expect(component.message).toEqual(`${component.literals.salutation}${component.literals.dawn}`);
30+
expect(component.messageHour.emit).toHaveBeenCalledWith(
31+
`${component.literals.salutation}${component.literals.dawn}`
32+
);
33+
});
34+
35+
it('should set message for morning',()=>{
36+
spyOn(component.messageHour,'emit');
37+
38+
spyOn(component,'getCurrentHour').and.returnValue(10);
39+
40+
component.setMessage();
41+
42+
expect(component.message).toEqual(`${component.literals.salutation}${component.literals.morning}`);
43+
expect(component.messageHour.emit).toHaveBeenCalledWith(
44+
`${component.literals.salutation}${component.literals.morning}`
45+
);
46+
});
47+
48+
it('should set message for night',()=>{
49+
spyOn(component.messageHour,'emit');
50+
51+
spyOn(component,'getCurrentHour').and.returnValue(21);
52+
53+
component.setMessage();
54+
55+
expect(component.message).toEqual(`${component.literals.salutation}${component.literals.night}`);
56+
expect(component.messageHour.emit).toHaveBeenCalledWith(
57+
`${component.literals.salutation}${component.literals.night}`
58+
);
59+
});
60+
61+
it('should set message for afternoon',()=>{
62+
spyOn(component.messageHour,'emit');
63+
64+
spyOn(component,'getCurrentHour').and.returnValue(15);
65+
66+
component.setMessage();
67+
68+
expect(component.message).toEqual(`${component.literals.salutation}${component.literals.afternoon}`);
69+
expect(component.messageHour.emit).toHaveBeenCalledWith(
70+
`${component.literals.salutation}${component.literals.afternoon}`
71+
);
72+
});
73+
74+
it('should set message for edge case: 5 AM',()=>{
75+
spyOn(component.messageHour,'emit');
76+
77+
spyOn(component,'getCurrentHour').and.returnValue(5);
78+
79+
component.setMessage();
80+
81+
expect(component.message).toEqual(`${component.literals.salutation}${component.literals.dawn}`);
82+
expect(component.messageHour.emit).toHaveBeenCalledWith(
83+
`${component.literals.salutation}${component.literals.dawn}`
84+
);
85+
});
86+
87+
it('should set message for edge case: 12 PM',()=>{
88+
spyOn(component.messageHour,'emit');
89+
90+
spyOn(component,'getCurrentHour').and.returnValue(12);
91+
92+
component.setMessage();
93+
94+
expect(component.message).toEqual(`${component.literals.salutation}${component.literals.afternoon}`);
95+
expect(component.messageHour.emit).toHaveBeenCalledWith(
96+
`${component.literals.salutation}${component.literals.afternoon}`
97+
);
98+
});
99+
100+
it('should set message for edge case: 6 PM',()=>{
101+
spyOn(component.messageHour,'emit');
102+
103+
spyOn(component,'getCurrentHour').and.returnValue(18);
104+
105+
component.setMessage();
106+
107+
expect(component.message).toEqual(`${component.literals.salutation}${component.literals.night}`);
108+
expect(component.messageHour.emit).toHaveBeenCalledWith(
109+
`${component.literals.salutation}${component.literals.night}`
110+
);
111+
});
112+
});
Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import{Component}from'@angular/core';
2+
import{PoMessageHourLiterals}from'./literals/po-message-hour-literals';
3+
import{PoMessageHourBaseComponent}from'./po-message-hour-base.component';
4+
5+
exportconstpoMessageHourDefault={
6+
en:<PoMessageHourLiterals>{
7+
salutation:'Welcome',
8+
dawn:'Good dawn',
9+
morning:'Good morning',
10+
afternoon:'Good afternoon',
11+
night:'Good night'
12+
},
13+
es:<PoMessageHourLiterals>{
14+
salutation:'Bienvenido',
15+
dawn:'Buen amanecer',
16+
morning:'Buenos días',
17+
afternoon:'Buenas tardes',
18+
night:'Buenas noches'
19+
},
20+
pt:<PoMessageHourLiterals>{
21+
salutation:'Bem vindo',
22+
dawn:'Boa madrugada',
23+
morning:'Bom dia',
24+
afternoon:'Boa tarde',
25+
night:'Boa noite'
26+
},
27+
ru:<PoMessageHourLiterals>{
28+
salutation:'добро пожаловать',
29+
dawn:'Доброй ночи',
30+
morning:'Доброе утро',
31+
afternoon:'Добрый день',
32+
night:'Добрый вечер'
33+
}
34+
};
35+
36+
/**
37+
*@docsExtends PoMessageHourBaseComponent
38+
*
39+
*@example
40+
*
41+
* <example name="po-message-hour-basic" title="PO Message Hour Basic">
42+
* <file name="sample-po-message-hour-basic/sample-po-message-hour-basic.component.html"> </file>
43+
* <file name="sample-po-message-hour-basic/sample-po-message-hour-basic.component.ts"> </file>
44+
* </example>
45+
*
46+
* <example name="po-message-hour-menu" title="PO Message Hour - Human Resources">
47+
* <file name="sample-po-message-hour-menu/sample-po-message-hour-menu.component.html"> </file>
48+
* <file name="sample-po-message-hour-menu/sample-po-message-hour-menu.component.ts"> </file>
49+
* </example>
50+
*/
51+
@Component({
52+
selector:'po-message-hour',
53+
templateUrl:'./po-message-hour.component.html'
54+
})
55+
exportclassPoMessageHourComponentextendsPoMessageHourBaseComponent{
56+
publicliterals?:any;
57+
58+
message:string;
59+
60+
ngOnInit(){
61+
constbrowserLanguage=navigator.language.split('-')[0];
62+
this.literals=poMessageHourDefault[browserLanguage];
63+
64+
this.setMessage();
65+
}
66+
67+
getCurrentHour(){
68+
returnnewDate().getHours();
69+
}
70+
71+
setMessage(){
72+
consthour=this.getCurrentHour();
73+
lettimeOfDay='';
74+
75+
if(hour<=5){
76+
timeOfDay=this.literals.dawn;
77+
}elseif(hour<12){
78+
timeOfDay=this.literals.morning;
79+
}elseif(hour<18){
80+
timeOfDay=this.literals.afternoon;
81+
}else{
82+
timeOfDay=this.literals.night;
83+
}
84+
85+
this.message=`${this.literals.salutation}${timeOfDay}`;
86+
this.messageHour.emit(this.message);
87+
}
88+
}
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import{NgModule}from'@angular/core';
2+
import{CommonModule}from'@angular/common';
3+
import{RouterModule}from'@angular/router';
4+
import{PoMessageHourComponent}from'./po-message-hour.component';
5+
import{PoLinkModule}from'../po-link';
6+
7+
/**
8+
*@description
9+
*
10+
* Módulo do componente po-message-hour.
11+
*/
12+
@NgModule({
13+
declarations:[PoMessageHourComponent],
14+
imports:[CommonModule,RouterModule,PoLinkModule],
15+
exports:[PoMessageHourComponent,PoLinkModule]
16+
})
17+
exportclassPoMessageHourModule{}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp