-
Notifications
You must be signed in to change notification settings - Fork 31
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feat/timeline #347
Feat/timeline #347
Changes from 2 commits
6aabe81
e590025
6cab646
86ec8e1
479fc3d
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
Check failure on line 8 in projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.html GitHub Actions / run-build-and-tests
|
||
[pinType]="element.pin?.type" | ||
Check failure on line 9 in projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.html GitHub Actions / run-build-and-tests
|
||
[pinIcon]="element.pin?.icon" | ||
Check failure on line 10 in projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.html GitHub Actions / run-build-and-tests
Check failure on line 10 in projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.html GitHub Actions / run-build-and-tests
|
||
[pinText]="element.pin?.text" | ||
Check failure on line 11 in projects/design-angular-kit/src/lib/components/core/timeline/timeline-container/timeline-container.component.html GitHub Actions / run-build-and-tests
|
||
[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> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); | ||
}); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
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'; | ||
|
||
@Component({ | ||
standalone: true, | ||
selector: 'it-timeline-container', | ||
templateUrl: './timeline-container.component.html', | ||
changeDetection: ChangeDetectionStrategy.OnPush, | ||
imports: [ItIconComponent, TranslateModule, ItTimelineItemComponent], | ||
}) | ||
export class ItTimelineContainerComponent extends ItAbstractComponent { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Lo chiamerei semplicemente There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Mhh forse si |
||
/** 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'; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
<div class="timeline-element"> | ||
@if (pinType === 'now') { | ||
<span class="it-now-label d-none d-lg-flex">{{ 'it.core.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> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
||
import { ItTimelineItemComponent } from './timeline-item.component'; | ||
|
||
describe('ItTimelineItemComponent', () => { | ||
let component: ItTimelineItemComponent; | ||
let fixture: ComponentFixture<ItTimelineItemComponent>; | ||
|
||
beforeEach(async () => { | ||
await TestBed.configureTestingModule({ | ||
imports: [ItTimelineItemComponent], | ||
}).compileComponents(); | ||
|
||
fixture = TestBed.createComponent(ItTimelineItemComponent); | ||
component = fixture.componentInstance; | ||
fixture.detectChanges(); | ||
}); | ||
|
||
it('should create', () => { | ||
expect(component).toBeTruthy(); | ||
}); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
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'; | ||
|
||
@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; | ||
Check failure on line 18 in projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts GitHub Actions / run-build-and-tests
|
||
/** Timeline element text */ | ||
@Input({ required: true }) text: string; | ||
Check failure on line 20 in projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts GitHub Actions / run-build-and-tests
|
||
/** Timeline element signature */ | ||
@Input() signature: string; | ||
Check failure on line 22 in projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts GitHub Actions / run-build-and-tests
|
||
/** Timeline element reference date */ | ||
@Input() eventDate?: Date; | ||
/** Timeline element reference date format | ||
* @default dd/MM/yyyy | ||
*/ | ||
@Input() dateFormat: string = 'dd/MM/yyyy'; | ||
|
||
/** Timeline element PIN text */ | ||
@Input({ required: true }) pinText: string; | ||
Check failure on line 31 in projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts GitHub Actions / run-build-and-tests
|
||
/** Timeline element PIN type | ||
* @default none | ||
*/ | ||
@Input() pinType: TimelinePINType = 'default'; | ||
/** Timeline element PIN icon | ||
* @default code-circle | ||
*/ | ||
@Input() pinIcon: IconName = 'code-circle'; | ||
|
||
/** Timeline element category title */ | ||
@Input() categoryTitle: string; | ||
Check failure on line 42 in projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts GitHub Actions / run-build-and-tests
|
||
/** Timeline element category link */ | ||
@Input() categoryLink: string; | ||
Check failure on line 44 in projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts GitHub Actions / run-build-and-tests
|
||
|
||
/** Timeline element show detail link | ||
* @default false | ||
*/ | ||
@Input({ transform: booleanAttribute }) | ||
showReadMore: boolean = false; | ||
/** Timeline element detail link | ||
* @default # | ||
*/ | ||
@Input() readMoreLink: string = '#'; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 {} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); | ||
}); | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@stefanozanelliunitn metterei la label "today" all'interno di "timeline" come scope