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

Commit41d9b3f

Browse files
committed
feat(message-hour): cria novo componentemessage-hour
Cria novo componente `message-hour`, para exibir saudações.
1 parent0f635b4 commit41d9b3f

14 files changed

+365
-2
lines changed

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ import { PoToolbarModule } from './po-toolbar/po-toolbar.module';
4444
import{PoTreeViewModule}from'./po-tree-view/po-tree-view.module';
4545
import{PoWidgetModule}from'./po-widget/po-widget.module';
4646
import{PoSearchModule}from'./po-search';
47+
import{PoMessageHourModule}from'./po-message-hour';
4748

4849
@NgModule({
4950
imports:[
@@ -90,7 +91,8 @@ import { PoSearchModule } from './po-search';
9091
PoImageModule,
9192
PoPageSlideModule,
9293
PoSwitchModule,
93-
PoSearchModule
94+
PoSearchModule,
95+
PoMessageHourModule
9496
],
9597
exports:[
9698
PoAccordionModule,
@@ -136,7 +138,8 @@ import { PoSearchModule } from './po-search';
136138
PoImageModule,
137139
PoPageSlideModule,
138140
PoSwitchModule,
139-
PoSearchModule
141+
PoSearchModule,
142+
PoMessageHourModule
140143
],
141144
providers:[],
142145
bootstrap:[],

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,4 @@ export * from './po-toolbar/index';
4343
export*from'./po-tree-view/index';
4444
export*from'./po-widget/index';
4545
export*from'./po-search/index';
46+
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+
fdescribe('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