Skip to content

Commit f1b7201

Browse files
jnrpalmajnrpalma
committedJul 19, 2024·
feat(message-hour): cria novo componente message-hour
Cria novo componente `message-hour`, para exibir saudações.
1 parent bee771d commit f1b7201

14 files changed

+368
-4
lines changed
 

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

+8-4
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

+1
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';

‎projects/ui/src/lib/components/po-message-hour/index.ts

+3
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';

‎projects/ui/src/lib/components/po-message-hour/literals/po-message-hour-literals.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export interface PoMessageHourLiterals {
2+
/**
3+
* @usedBy PoMessageHour
4+
*
5+
* @description
6+
*
7+
* Interface para configuração de mensagem de saudação.
8+
*/
9+
salutation?: string;
10+
}

‎projects/ui/src/lib/components/po-message-hour/po-message-hour-base.component.spec.ts

+13
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+
let component: PoMessageHourBaseComponent;
5+
6+
beforeEach(() => {
7+
component = new PoMessageHourBaseComponent();
8+
});
9+
10+
it('should be created', () => {
11+
expect(component instanceof PoMessageHourBaseComponent).toBeTruthy();
12+
});
13+
});

‎projects/ui/src/lib/components/po-message-hour/po-message-hour-base.component.ts

+41
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+
export class PoMessageHourBaseComponent {
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 = new EventEmitter<string>();
41+
}

‎projects/ui/src/lib/components/po-message-hour/po-message-hour.component.html

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<div class="container">
2+
<span class="label">{{ label }}</span>
3+
<po-link [p-label]="message"></po-link>
4+
</div>

‎projects/ui/src/lib/components/po-message-hour/po-message-hour.component.spec.ts

+112
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+
let component: PoMessageHourComponent;
7+
let fixture: 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+
});

‎projects/ui/src/lib/components/po-message-hour/po-message-hour.component.ts

+88
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+
export const poMessageHourDefault = {
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+
export class PoMessageHourComponent extends PoMessageHourBaseComponent {
56+
public literals?: any;
57+
58+
message: string;
59+
60+
ngOnInit() {
61+
const browserLanguage = navigator.language.split('-')[0];
62+
this.literals = poMessageHourDefault[browserLanguage];
63+
64+
this.setMessage();
65+
}
66+
67+
getCurrentHour() {
68+
return new Date().getHours();
69+
}
70+
71+
setMessage() {
72+
const hour = this.getCurrentHour();
73+
let timeOfDay = '';
74+
75+
if (hour <= 5) {
76+
timeOfDay = this.literals.dawn;
77+
} else if (hour < 12) {
78+
timeOfDay = this.literals.morning;
79+
} else if (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+
}

‎projects/ui/src/lib/components/po-message-hour/po-message-hour.module.ts

+17
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+
export class PoMessageHourModule {}

‎projects/ui/src/lib/components/po-message-hour/samples/sample-po-message-hour-basic/sample-po-message-hour-basic.component.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<po-message-hour p-label="Arya Stark"></po-message-hour>

‎projects/ui/src/lib/components/po-message-hour/samples/sample-po-message-hour-basic/sample-po-message-hour-basic.component.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'sample-po-message-hour-basic',
5+
templateUrl: './sample-po-message-hour-basic.component.html'
6+
})
7+
export class SamplePoMessageHourBasicComponent {}

‎projects/ui/src/lib/components/po-message-hour/samples/sample-po-message-hour-menu/sample-po-message-hour-menu.component.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div class="po-wrapper">
2+
<po-menu p-filter="true" p-collapsed [p-menus]="menus">
3+
<ng-template p-menu-header-template>
4+
<po-message-hour p-label="Jon Snow"></po-message-hour>
5+
</ng-template>
6+
</po-menu>
7+
</div>

0 commit comments

Comments
 (0)
Please sign in to comment.