Feat/timeline

projects/design-angular-kit/assets/i18n/en.json

@@ -103,6 +103,11 @@
       "aria-label-toggle": "Show/Hide navigation",
       "hide": "Hide navigation"
     },
+    "timeline": {
+      "read-more": "Read more",
+      "read-more-on": "on {{title}}",
+      "today": "Today"
+    },
     "utils": {
       "selected": "Selected",
       "language-selection": "Language selection: {{lang}}",

projects/design-angular-kit/assets/i18n/it.json

@@ -103,6 +103,11 @@
       "aria-label-toggle": "Mostra/Nascondi la navigazione",
       "hide": "Nascondi la navigazione"
     },
+    "timeline": {
+      "read-more": "Leggi di più",
+      "read-more-on": "su {{title}}",
+      "today": "Oggi"
+    },
     "utils": {
       "selected": "Selezionata",
       "language-selection": "Selezione lingua: {{lang}}",

projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.html

@@ -0,0 +1,21 @@
+<div class="it-timeline-wrapper">
+  <div class="row">
+    @for (element of timelineElements; track $index) {
+      <div class="col-12">
+        <it-timeline-item
+          [title]="element.title"
+          [text]="element.text"
+          [signature]="element.signature"
+          [pinType]="element.pin?.type"
+          [pinIcon]="element.pin?.icon"
+          [pinText]="element.pin?.text"
+          [eventDate]="element.eventDate"
+          [dateFormat]="dateFormat"
+          [categoryTitle]="element.category?.title"
+          [categoryLink]="element.category?.link"
+          [showReadMore]="element.link?.length"
+          [readMoreLink]="element.link"></it-timeline-item>
+      </div>
+    }
+  </div>
+</div>

projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItTimelineContainerComponent } from './timeline-container.component';
+import { tb_base } from '../../../../../test';
+
+describe('ItTimelineContainerComponent', () => {
+  let component: ItTimelineContainerComponent;
+  let fixture: ComponentFixture<ItTimelineContainerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule(tb_base).compileComponents();
+
+    fixture = TestBed.createComponent(ItTimelineContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.ts

@@ -0,0 +1,28 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ItTimelineItemComponent } from '../timeline-item/timeline-item.component';
+import { ItIconComponent } from '../../../utils/icon/icon.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { ItAbstractComponent } from 'projects/design-angular-kit/src/lib/abstracts/abstract.component';
+import { TimelineElement } from 'projects/design-angular-kit/src/lib/interfaces/core';
+
+/**
+ * Timeline
+ * @description Build timeline for chronological representation of events.
+ */
+@Component({
+  standalone: true,
+  selector: 'it-timeline-container',
+  templateUrl: './timeline-container.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ItIconComponent, TranslateModule, ItTimelineItemComponent],
+})
+export class ItTimelineContainerComponent extends ItAbstractComponent {
+  /** Timeline elements array
+   * @default []
+   */
+  @Input() timelineElements: TimelineElement[] = [];
+  /** Default date format for timeline element reference date
+   * @default dd/MM/yyyy
+   */
+  @Input() dateFormat: string = 'dd/MM/yyyy';
+}

projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.html

@@ -0,0 +1,45 @@
+<div class="timeline-element">
+  @if (pinType === 'now') {
+    <span class="it-now-label d-none d-lg-flex">{{ 'it.timeline.today' | translate }}</span>
+  }
+  <div class="it-pin-wrapper" [ngClass]="{ 'it-evidence': pinType === 'evidence', 'it-now': pinType === 'now' }">
+    <div class="pin-icon">
+      @if (pinIcon) {
+        <it-icon [name]="pinIcon"></it-icon>
+      } @else {
+        <it-icon name="code-circle"></it-icon>
+      }
+    </div>
+    <div class="pin-text">
+      <span>{{ pinText }}</span>
+    </div>
+  </div>
+  <div class="card-wrapper">
+    <div class="card">
+      <div class="card-body">
+        @if ((categoryTitle && categoryLink) || eventDate) {
+          <div class="category-top">
+            @if (categoryTitle) {
+              <a class="category" [href]="categoryLink">{{ categoryTitle }}</a>
+            }
+            @if (eventDate) {
+              <span class="data">{{ eventDate | date: dateFormat }}</span>
+            }
+          </div>
+        }
+        <h5 class="card-title">{{ title }}</h5>
+        <p class="card-text">{{ text }}</p>
+        @if (signature) {
+          <span class="card-signature">{{ signature }}</span>
+        }
+        @if (showReadMore) {
+          <a class="read-more" [href]="readMoreLink">
+            <span class="text">{{ 'it.timeline.read-more' | translate }}</span>
+            <span class="visually-hidden">{{ 'it.timeline.read-more-on' | translate: { title: title } }}</span>
+            <it-icon name="arrow-right"></it-icon>
+          </a>
+        }
+      </div>
+    </div>
+  </div>
+</div>

projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ItTimelineItemComponent } from './timeline-item.component';
+import { tb_base } from '../../../../../test';
+
+describe('ItTimelineItemComponent', () => {
+  let component: ItTimelineItemComponent;
+  let fixture: ComponentFixture<ItTimelineItemComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule(tb_base).compileComponents();
+
+    // await TestBed.configureTestingModule({
+    //   imports: [ItTimelineItemComponent],
+    // }).compileComponents();
+
+    fixture = TestBed.createComponent(ItTimelineItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts

@@ -0,0 +1,59 @@
+import { ChangeDetectionStrategy, Component, Input, booleanAttribute } from '@angular/core';
+import { ItAbstractComponent } from '../../../../abstracts/abstract.component';
+import { ItIconComponent } from '../../../utils/icon/icon.component';
+import { DatePipe, NgClass } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { TimelinePINType } from 'projects/design-angular-kit/src/lib/interfaces/core';
+import { IconName } from 'projects/design-angular-kit/src/lib/interfaces/icon';
+
+/**
+ * Timeline Item
+ * @description Represents a single event for Timeline component.
+ */
+@Component({
+  standalone: true,
+  selector: 'it-timeline-item',
+  templateUrl: './timeline-item.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ItIconComponent, DatePipe, TranslateModule, NgClass],
+})
+export class ItTimelineItemComponent extends ItAbstractComponent {
+  /** Timeline element title */
+  @Input({ required: true }) title!: string;
+  /** Timeline element text */
+  @Input({ required: true }) text!: string;
+  /** Timeline element signature */
+  @Input() signature?: string | undefined;
+  /** Timeline element reference date */
+  @Input() eventDate?: Date | undefined;
+  /** Timeline element reference date format
+   * @default dd/MM/yyyy
+   */
+  @Input() dateFormat?: string | undefined = 'dd/MM/yyyy';
+
+  /** Timeline element PIN text */
+  @Input({ required: true }) pinText!: string;
+  /** Timeline element PIN type
+   * @default none
+   */
+  @Input() pinType?: TimelinePINType | undefined = 'default';
+  /** Timeline element PIN icon
+   * @default code-circle
+   */
+  @Input() pinIcon?: IconName | undefined = 'code-circle';
+
+  /** Timeline element category title */
+  @Input() categoryTitle?: string | undefined;
+  /** Timeline element category link */
+  @Input() categoryLink?: string | undefined;
+
+  /** Timeline element show detail link
+   * @default false
+   */
+  @Input({ transform: booleanAttribute })
+  showReadMore: boolean = false;
+  /** Timeline element detail link
+   * @default #
+   */
+  @Input() readMoreLink: string | undefined = '#';
+}

projects/design-angular-kit/src/lib/components/core/timeline/timeline.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { ItTimelineContainerComponent } from './timeline-container/timeline-container.component';
+import { ItTimelineItemComponent } from './timeline-item/timeline-item.component';
+
+const timelineComponents = [ItTimelineContainerComponent, ItTimelineItemComponent];
+
+@NgModule({
+  imports: timelineComponents,
+  exports: timelineComponents,
+})
+export class ItTimelineModule {}

projects/design-angular-kit/src/lib/components/navigation/header/header.component.html

@@ -10,7 +10,9 @@
         <div class="row">
           <div class="col-12">
             <div class="it-header-slim-wrapper-content">
-              <a class="d-none d-lg-block navbar-brand" href="#">{{ slimTitle }}</a>
+              <a class="d-none d-lg-block navbar-brand" [href]="slimTitleLink" [target]="slimTitleLink !== '#' ? '_blank' : '_self'">
+                {{ slimTitle }}
+              </a>
               <div class="nav-mobile">
                 <nav [attr.aria-label]="'it.navigation.secondary-navigation' | translate">
                   <a

projects/design-angular-kit/src/lib/components/navigation/header/header.component.ts

@@ -38,6 +38,7 @@ export class ItHeaderComponent implements AfterViewInit, OnChanges {
   @Input({ transform: inputToBoolean }) showSearch?: boolean = true;
 
   @Input() slimTitle: string | undefined;
+  @Input() slimTitleLink: string | undefined = '#';
 
   @Input() loginStyle: 'none' | 'default' | 'full' = 'none';
 

projects/design-angular-kit/src/lib/design-angular-kit.module.ts

@@ -41,6 +41,9 @@ import { ItLanguageSwitcherComponent } from './components/utils/language-switche
 import { ItDateAgoPipe } from './pipes/date-ago.pipe';
 import { ItDurationPipe } from './pipes/duration.pipe';
 import { ItMarkMatchingTextPipe } from './pipes/mark-matching-text.pipe';
+import { ItTimelineModule } from './components/core/timeline/timeline.module';
+import { ItTimelineContainerComponent } from './components/core/timeline/timeline-container/timeline-container.component';
+import { ItTimelineItemComponent } from './components/core/timeline/timeline-item/timeline-item.component';
 
 /**
  * Core components
@@ -72,6 +75,9 @@ const core = [
   ItTabModule,
   ItTableModule,
   ItTooltipDirective,
+  ItTimelineContainerComponent,
+  ItTimelineItemComponent,
+  ItTimelineModule,
 ];
 
 /**

projects/design-angular-kit/src/lib/interfaces/core.ts

@@ -47,6 +47,25 @@ export type DropdownDirection = 'dropup' | 'dropend' | 'dropstart';
 
 export type CarouselType = 'default' | 'three-cols' | 'three-cols-arrow-visible';
 
+export type TimelinePINType = 'default' | 'evidence' | 'now';
+
+export interface TimelineElement {
+  pin: {
+    type?: TimelinePINType;
+    icon?: IconName;
+    text: string;
+  };
+  category?: {
+    title: string;
+    link: string;
+  };
+  title: string;
+  text: string;
+  signature?: string;
+  eventDate?: Date;
+  link?: string;
+}
+
 export interface Notification {
   /**
    * Notification type

projects/design-angular-kit/src/lib/interfaces/icon.ts

@@ -34,6 +34,7 @@ export const IconNameArray = [
   'close',
   'close-big',
   'close-circle',
+  'code-circle',
   'comment',
   'copy',
   'delete',

src/app/app-routing.module.ts

@@ -67,6 +67,7 @@ const routes: Routes = [
       { path: 'range', loadChildren: () => import('src/app/range/range.module').then(m => m.RangeModule) },
       { path: 'autocomplete', loadChildren: () => import('src/app/autocomplete/autocomplete.module').then(m => m.AutocompleteModule) },
       { path: 'sidebar', loadChildren: () => import('src/app/sidebar/sidebar.module').then(m => m.SidebarModule) },
+      { path: 'timeline', loadChildren: () => import('src/app/timeline/timeline.module').then(m => m.TimelineModule) },
     ],
   },
   { path: 'error/not-found', component: ItErrorPageComponent, data: { errorCode: 404 } },

src/app/header/header-example/header-example.component.html

@@ -2,6 +2,7 @@ <h3>Componente Header</h3>
 <div class="bd-example">
   <it-header
     slimTitle="Ente di appartenenza"
+    slimTitleLink="https://italia.github.io/design-angular-kit"
     [loginStyle]="login"
     [light]="light"
     [showSearch]="search"

src/app/timeline/timeline-default-example/timeline-default-example.component.html

@@ -0,0 +1,7 @@
+<h3>Esempi</h3>
+
+<div class="bd-example">
+  <div class="example-section">
+    <it-timeline-container [timelineElements]="timelineElements" [dateFormat]="defaultDateFormat"></it-timeline-container>
+  </div>
+</div>

src/app/timeline/timeline-default-example/timeline-default-example.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TimelineDefaultExampleComponent } from './timeline-default-example.component';
+
+describe('TimelineDefaultExampleComponent', () => {
+  let component: TimelineDefaultExampleComponent;
+  let fixture: ComponentFixture<TimelineDefaultExampleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TimelineDefaultExampleComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TimelineDefaultExampleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});