feat(message-hour): cria novo componente message-hour

Cria novo componente `message-hour`, para exibir saudações.

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

@@ -46,6 +46,7 @@ import { PoTreeViewModule } from './po-tree-view/po-tree-view.module';
 import { PoWidgetModule } from './po-widget/po-widget.module';
 import { PoSearchModule } from './po-search';
 import { PoBadgeModule } from './po-badge/po-badge.module';
+import { PoMessageHourModule } from './po-message-hour';
 
 @NgModule({
   imports: [
@@ -94,7 +95,8 @@ import { PoBadgeModule } from './po-badge/po-badge.module';
     PoPageSlideModule,
     PoSwitchModule,
     PoSearchModule,
-    PoBadgeModule
+    PoBadgeModule,
+    PoMessageHourModule
   ],
   exports: [
     PoAccordionModule,
@@ -142,7 +144,8 @@ import { PoBadgeModule } from './po-badge/po-badge.module';
     PoPageSlideModule,
     PoSwitchModule,
     PoSearchModule,
-    PoBadgeModule
+    PoBadgeModule,
+    PoMessageHourModule
   ],
   providers: [],
   bootstrap: [],

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

@@ -45,3 +45,4 @@ export * from './po-toolbar/index';
 export * from './po-tree-view/index';
 export * from './po-widget/index';
 export * from './po-search/index';
+export * from './po-message-hour/index';

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

@@ -0,0 +1,3 @@
+export * from './po-message-hour.component';
+
+export * from './po-message-hour.module';

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

@@ -0,0 +1,10 @@
+export interface PoMessageHourLiterals {
+  /**
+   * @usedBy PoMessageHour
+   *
+   * @description
+   *
+   * Interface para configuração de mensagem de saudação.
+   */
+  salutation?: string;
+}

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

@@ -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();
+  });
+});

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

@@ -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>();
+}

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

@@ -0,0 +1,4 @@
+<div class="container">
+  <span class="label">{{ label }}</span>
+  <po-link p-label="{{ message }}"></po-link>
+</div>

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

@@ -0,0 +1,112 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PoMessageHourComponent } from './po-message-hour.component';
+
+describe('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}`
+    );
+  });
+});

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

@@ -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);
+  }
+}

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

@@ -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 {}

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

@@ -0,0 +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

@@ -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 {}

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

@@ -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>