Skip to content

Commit 7ef88ce

Browse files
DamianBrzezinskiHoADamianBrzezinskiHoA
authored
Feat/article card (#44)
* KAP-59/feat-crated-component * KAP-41/chore:lint-corrected * KAP-59-created-basic-layout * KAP-59/feat-created-horizontal-layout * KAP-59/chore-deleted-unnecessary-layout * KAP-59/chore-changed-size-avatar * KAP-60/feat-created-ui-article-card-component & changed small * KAP-60/chore-background-card-stories-debugging * KAP-60/chore-deleted-lib-of-utdated-component * KAP-60/chore-deleted-unused-libs * KAP-60/chore-corrected-styles * KAP-60/chore-remarks-code-review * KAP-60/chore-directives-removed * KAP-59/chore-refactored-article-ui-card-deleted-removed-directives * KAP-59/chore-added-articles-to-storybook-changed-selector-and-class-name * KAP-59/chore-modified-styles * KAP-60/chore-remarks-appended * KAP-60-gradient-modified * KAP-60/chore-replace-shadow-with-bg * KAP-60/chore-changed-order-in-preset * KAP-60/chore-update-background-article-card * KAP-81/chore-appended-missing-import * KAP-81/chore-replace-import-in-artcile-details-store * KAP-59/chore-remarks-appended
1 parent 3b65d55 commit 7ef88ce

16 files changed

+11523
-13474
lines changed

‎libs/blog/articles/feature-article/src/lib/article-details/article-details.stories.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { Article } from '@angular-love/contracts/articles';
21
import type { Meta, StoryObj } from '@storybook/angular';
32
import { ArticleDetailsComponent } from './article-details.component';
3+
import { Article } from '@angular-love/contracts/articles';
44

55
const meta: Meta<ArticleDetailsComponent> = {
66
component: ArticleDetailsComponent,

‎libs/blog/articles/feature-list/src/lib/articles-list-container.component.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { ArticlePreview } from '@angular-love/contracts/articles';
2020
RepeatDirective,
2121
AsyncPipe,
2222
JsonPipe,
23+
ArticleCardComponent,
2324
],
2425
changeDetection: ChangeDetectionStrategy.OnPush,
2526
standalone: true,

‎libs/blog/articles/ui/small-article-card/src/lib/small-article-card/small-article-card.component.html

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎libs/blog/articles/ui/ui-article-card/src/lib/ui-article-card/components/background-card/background-article-card.component.html renamed to ‎libs/blog/articles/ui/ui-article-card/src/lib/ui-article-card/components/background-card/article-ui-background-card.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<div
1010
[ngClass]="{
1111
'bg-al-gray-500': layout() === 'compact',
12-
'bg-al-gradient-black hover:bg-al-black-red rounded-lg':
12+
'bg-al-gradient-black hover:bg-al-gradient-black-red rounded-lg':
1313
layout() === 'hero'
1414
}"
1515
[routerLink]="['/', article().slug]"

‎libs/blog/articles/ui/ui-article-card/src/lib/ui-article-card/components/background-card/background-article-card.component.spec.ts renamed to ‎libs/blog/articles/ui/ui-article-card/src/lib/ui-article-card/components/background-card/article-ui-background-card.component.spec.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import { ComponentFixture, TestBed } from '@angular/core/testing';
2-
import { BackgroundArticleCardComponent } from './background-article-card.component';
2+
import { ArticleUiBackgroundCardComponent } from './article-ui-background-card.component';
33

44
// @todo replace with spectator
55
describe('BackgroundArticleCardComponent', () => {
6-
let component: BackgroundArticleCardComponent;
7-
let fixture: ComponentFixture<BackgroundArticleCardComponent>;
6+
let component: ArticleUiBackgroundCardComponent;
7+
let fixture: ComponentFixture<ArticleUiBackgroundCardComponent>;
88

99
beforeEach(async () => {
1010
await TestBed.configureTestingModule({
11-
imports: [BackgroundArticleCardComponent],
11+
imports: [ArticleUiBackgroundCardComponent],
1212
}).compileComponents();
1313

14-
fixture = TestBed.createComponent(BackgroundArticleCardComponent);
14+
fixture = TestBed.createComponent(ArticleUiBackgroundCardComponent);
1515
component = fixture.componentInstance;
1616
fixture.detectChanges();
1717
});

‎libs/blog/articles/ui/ui-article-card/src/lib/ui-article-card/components/background-card/background-article-card.component.ts renamed to ‎libs/blog/articles/ui/ui-article-card/src/lib/ui-article-card/components/background-card/article-ui-background-card.component.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { ArticleCardDataModel } from '@angular-love/article-card-data-model';
99
export type Layout = 'compact' | 'hero';
1010

1111
@Component({
12-
selector: 'al-background-article-card',
12+
selector: 'al-article-ui-background-card',
1313
changeDetection: ChangeDetectionStrategy.OnPush,
1414
standalone: true,
1515
imports: [
@@ -20,15 +20,15 @@ export type Layout = 'compact' | 'hero';
2020
DatePipe,
2121
NgClass,
2222
],
23-
templateUrl: './background-article-card.component.html',
23+
templateUrl: './article-ui-background-card.component.html',
2424
//@todo replace bootstrap clock
2525
providers: [
2626
provideIcons({
2727
bootstrapClock,
2828
}),
2929
],
3030
})
31-
export class BackgroundArticleCardComponent {
31+
export class ArticleUiBackgroundCardComponent {
3232
layout = input.required<Layout>();
3333
article = input.required<ArticleCardDataModel>();
3434
}

‎libs/blog/articles/ui/ui-article-card/src/lib/ui-article-card/components/card/article-ui-card.component.html

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<div
2+
class="rounded-lg shadow-none hover:shadow-[0_0_0_1px_rgba(231,4,100,1)]"
3+
[ngClass]="{
4+
'card flex flex-col': layout() === 'regular',
5+
'flex h-full w-full flex-row': layout() === 'horizontal'
6+
}"
7+
>
8+
<img
9+
[ngClass]="{
10+
'card__image--horizontal rounded-l-lg bg-contain':
11+
layout() === 'horizontal',
12+
'card__image--regular rounded-t-lg': layout() === 'regular'
13+
}"
14+
[src]="article().featuredImageUrl"
15+
/>
16+
<div
17+
class="bg-al-gray-300"
18+
[ngClass]="{
19+
'card__content relative rounded-b-lg': layout() === 'regular',
20+
'w-full rounded-r-lg': layout() === 'horizontal'
21+
}"
22+
>
23+
@if (layout() === 'regular') {
24+
<div class="relative flex items-center justify-between px-4 pt-4">
25+
<div class="flex items-center gap-2">
26+
<al-avatar [imageSrc]="article().author.avatarUrl" size="sm" />
27+
<span class="text-sm/[14px] font-medium text-white">
28+
{{ article().author.name }}
29+
</span>
30+
</div>
31+
<div class="flex items-center gap-2">
32+
<ng-icon name="bootstrapClock" class="text-sm text-white"></ng-icon>
33+
<p class="text-sm/[14px] text-white">
34+
{{ article().readingTime }}min
35+
</p>
36+
</div>
37+
</div>
38+
<div class="flex items-center justify-between self-start px-4 pt-4">
39+
<span class="text-sm/[14px] font-medium text-white">
40+
{{ article().publishDate | date: 'mediumDate' }}
41+
</span>
42+
</div>
43+
} @else {
44+
<div class="flex items-center justify-between px-6 pt-4">
45+
<div class="flex items-center gap-2">
46+
<al-avatar [imageSrc]="article().author.avatarUrl" size="sm" />
47+
<span class="text-sm/[14px] font-medium text-white">
48+
{{ article().author.name }}
49+
</span>
50+
</div>
51+
<div class="flex items-center gap-2">
52+
<span class="text-sm/[14px] text-white">
53+
{{ article().publishDate | date: 'mediumDate' }}
54+
</span>
55+
<ng-icon name="bootstrapClock" class="text-sm text-white"></ng-icon>
56+
<p class="text-sm/[14px] text-white">
57+
{{ article().readingTime }}min
58+
</p>
59+
</div>
60+
</div>
61+
}
62+
<div
63+
[ngClass]="{
64+
'px-4 pb-4 pt-3': layout() === 'regular',
65+
'px-6 pt-8': layout() === 'horizontal'
66+
}"
67+
>
68+
<p class="text-2xl font-bold text-white">
69+
{{ article().title }}
70+
</p>
71+
<p
72+
class="text-base text-white"
73+
[ngClass]="{
74+
'pt-5': layout() === 'horizontal'
75+
}"
76+
>
77+
{{ article().excerpt }}
78+
</p>
79+
</div>
80+
</div>
81+
</div>

‎libs/blog/articles/ui/ui-article-card/src/lib/ui-article-card/components/card/article-ui-card.component.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.card {
2+
background-color: aqua;
3+
height: 100%;
4+
&__content {
5+
height: 50%;
6+
}
7+
&__image {
8+
&--regular {
9+
width: auto;
10+
height: 50%;
11+
}
12+
&--horizontal {
13+
width: 33%;
14+
height: auto;
15+
}
16+
}
17+
}

‎libs/blog/articles/ui/ui-article-card/src/lib/ui-article-card/components/card/article-ui-card.component.spec.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
import { ArticleUiCardComponent } from './article-ui-card.component';
3+
4+
// @todo replace with spectator
5+
describe('ArticleUiClassicCardComponent', () => {
6+
let component: ArticleUiCardComponent;
7+
let fixture: ComponentFixture<ArticleUiCardComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
imports: [ArticleUiCardComponent],
12+
}).compileComponents();
13+
14+
fixture = TestBed.createComponent(ArticleUiCardComponent);
15+
component = fixture.componentInstance;
16+
fixture.detectChanges();
17+
});
18+
19+
it('should create', () => {
20+
expect(component).toBeTruthy();
21+
});
22+
});

‎libs/blog/articles/ui/ui-article-card/src/lib/ui-article-card/components/card/article-ui-card.component.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
2+
import { AvatarComponent } from '@angular-love/blog/shared/ui/avatar';
3+
import { NgIcon, provideIcons } from '@ng-icons/core';
4+
import { DatePipe, NgClass, NgOptimizedImage, NgStyle } from '@angular/common';
5+
import { bootstrapClock } from '@ng-icons/bootstrap-icons';
6+
import { ArticleCardDataModel } from '@angular-love/article-card-data-model';
7+
8+
export type Layout = 'regular' | 'horizontal';
9+
10+
@Component({
11+
selector: 'al-article-ui-card',
12+
changeDetection: ChangeDetectionStrategy.OnPush,
13+
standalone: true,
14+
imports: [
15+
AvatarComponent,
16+
NgIcon,
17+
DatePipe,
18+
NgOptimizedImage,
19+
NgClass,
20+
NgStyle,
21+
],
22+
templateUrl: './article-ui-card.component.html',
23+
styleUrl: './article-ui-card.component.scss',
24+
providers: [
25+
provideIcons({
26+
bootstrapClock,
27+
}),
28+
],
29+
})
30+
export class ArticleUiCardComponent {
31+
layout = input.required<Layout>();
32+
article = input.required<ArticleCardDataModel>();
33+
}

0 commit comments

Comments
 (0)