From 10c1b7990135a1e8434e2edc4b2d9224dd2a4091 Mon Sep 17 00:00:00 2001 From: Elain T Date: Thu, 25 Jan 2024 02:13:49 +0800 Subject: [PATCH] feat(daffio): add packages overview page (#2721) * feat(daffio): add packages overview page * update styles * fix missing package links * fix test --------- Co-authored-by: Peter Lauck --- .../docs-header/docs-header.component.ts | 1 + .../docs-sidebar-content.component.ts | 1 + .../package-cards.component.html | 4 ++ .../package-cards.component.scss | 21 ++++++++++ .../package-cards.component.spec.ts | 38 +++++++++++++++++ .../package-cards/package-cards.component.ts | 22 ++++++++++ .../package-cards/package-cards.module.ts | 22 ++++++++++ .../package-cards.component.html | 1 + .../package-cards.component.spec.ts | 41 +++++++++++++++++++ .../package-cards/package-cards.component.ts | 39 ++++++++++++++++++ .../package-cards/package-cards.module.ts | 25 +++++++++++ .../src/app/guides/guides-routing.module.ts | 6 +++ apps/daffio/src/app/guides/guides.module.ts | 13 ++++++ .../packages-overview.component.html | 10 +++++ .../packages-overview.component.scss | 16 ++++++++ .../packages-overview.component.spec.ts | 35 ++++++++++++++++ .../packages-overview.component.ts | 12 ++++++ 17 files changed, 307 insertions(+) create mode 100644 apps/daffio/src/app/guides/components/package-cards/package-cards.component.html create mode 100644 apps/daffio/src/app/guides/components/package-cards/package-cards.component.scss create mode 100644 apps/daffio/src/app/guides/components/package-cards/package-cards.component.spec.ts create mode 100644 apps/daffio/src/app/guides/components/package-cards/package-cards.component.ts create mode 100644 apps/daffio/src/app/guides/components/package-cards/package-cards.module.ts create mode 100644 apps/daffio/src/app/guides/containers/package-cards/package-cards.component.html create mode 100644 apps/daffio/src/app/guides/containers/package-cards/package-cards.component.spec.ts create mode 100644 apps/daffio/src/app/guides/containers/package-cards/package-cards.component.ts create mode 100644 apps/daffio/src/app/guides/containers/package-cards/package-cards.module.ts create mode 100644 apps/daffio/src/app/guides/pages/packages-overview/packages-overview.component.html create mode 100644 apps/daffio/src/app/guides/pages/packages-overview/packages-overview.component.scss create mode 100644 apps/daffio/src/app/guides/pages/packages-overview/packages-overview.component.spec.ts create mode 100644 apps/daffio/src/app/guides/pages/packages-overview/packages-overview.component.ts diff --git a/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.ts b/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.ts index 16bf496899..76554b9308 100644 --- a/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.ts +++ b/apps/daffio/src/app/core/header/containers/docs-header/docs-header.component.ts @@ -17,6 +17,7 @@ export class DaffioDocsHeaderContainer { faBars = faBars; links: any[] = [ + { path: '/guides', title: 'Packages' }, { path: '/api', title: 'API Index' }, ]; diff --git a/apps/daffio/src/app/core/sidebar/components/docs-sidebar-content/docs-sidebar-content.component.ts b/apps/daffio/src/app/core/sidebar/components/docs-sidebar-content/docs-sidebar-content.component.ts index 61cb96a9cd..83f3cd3235 100644 --- a/apps/daffio/src/app/core/sidebar/components/docs-sidebar-content/docs-sidebar-content.component.ts +++ b/apps/daffio/src/app/core/sidebar/components/docs-sidebar-content/docs-sidebar-content.component.ts @@ -11,6 +11,7 @@ import { }) export class DaffioDocsSidebarContentComponent { links: any[] = [ + { path: '/guides', title: 'Packages' }, { path: '/api', title: 'API Index' }, ]; } diff --git a/apps/daffio/src/app/guides/components/package-cards/package-cards.component.html b/apps/daffio/src/app/guides/components/package-cards/package-cards.component.html new file mode 100644 index 0000000000..939707484e --- /dev/null +++ b/apps/daffio/src/app/guides/components/package-cards/package-cards.component.html @@ -0,0 +1,4 @@ + +
{{ package.title }}
+
{{ package.description }}
+ \ No newline at end of file diff --git a/apps/daffio/src/app/guides/components/package-cards/package-cards.component.scss b/apps/daffio/src/app/guides/components/package-cards/package-cards.component.scss new file mode 100644 index 0000000000..2f621b236a --- /dev/null +++ b/apps/daffio/src/app/guides/components/package-cards/package-cards.component.scss @@ -0,0 +1,21 @@ +@use 'utilities' as daff; + +:host { + display: grid; + align-items: flex-start; + grid-template-columns: 1fr; + gap: 8px; + + @include daff.breakpoint(tablet) { + grid-template-columns: repeat(2, 1fr); + gap: 16px; + } + + @include daff.breakpoint(big-tablet) { + grid-template-columns: repeat(3, 1fr); + } + + @include daff.breakpoint(small-laptop) { + grid-template-columns: repeat(4, 1fr); + } +} \ No newline at end of file diff --git a/apps/daffio/src/app/guides/components/package-cards/package-cards.component.spec.ts b/apps/daffio/src/app/guides/components/package-cards/package-cards.component.spec.ts new file mode 100644 index 0000000000..ec0d047bd6 --- /dev/null +++ b/apps/daffio/src/app/guides/components/package-cards/package-cards.component.spec.ts @@ -0,0 +1,38 @@ +import { + waitForAsync, + ComponentFixture, + TestBed, +} from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { RouterTestingModule } from '@angular/router/testing'; + +import { DaffioDocsPackageCardsComponent } from './package-cards.component'; + +describe('DaffioDocsPackageCardsComponent', () => { + let component: DaffioDocsPackageCardsComponent; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ + DaffioDocsPackageCardsComponent, + ], + imports: [ + RouterTestingModule, + NoopAnimationsModule, + ], + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DaffioDocsPackageCardsComponent); + component = fixture.componentInstance; + + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/daffio/src/app/guides/components/package-cards/package-cards.component.ts b/apps/daffio/src/app/guides/components/package-cards/package-cards.component.ts new file mode 100644 index 0000000000..7a4f66357d --- /dev/null +++ b/apps/daffio/src/app/guides/components/package-cards/package-cards.component.ts @@ -0,0 +1,22 @@ +import { + ChangeDetectionStrategy, + Component, + Input, +} from '@angular/core'; + +export interface DaffioPackage { + title: string; + path: string; + description: string; +} + +@Component({ + selector: 'daffio-docs-package-cards', + templateUrl: './package-cards.component.html', + styleUrls: ['./package-cards.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class DaffioDocsPackageCardsComponent { + + @Input() packagesList: DaffioPackage[]; +} diff --git a/apps/daffio/src/app/guides/components/package-cards/package-cards.module.ts b/apps/daffio/src/app/guides/components/package-cards/package-cards.module.ts new file mode 100644 index 0000000000..7c36383efe --- /dev/null +++ b/apps/daffio/src/app/guides/components/package-cards/package-cards.module.ts @@ -0,0 +1,22 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { DaffCardModule } from '@daffodil/design/card'; + +import { DaffioDocsPackageCardsComponent } from './package-cards.component'; + +@NgModule({ + declarations: [ + DaffioDocsPackageCardsComponent, + ], + exports: [ + DaffioDocsPackageCardsComponent, + ], + imports: [ + CommonModule, + RouterModule, + DaffCardModule, + ], +}) +export class DaffioDocsPackageCardsComponentModule { } diff --git a/apps/daffio/src/app/guides/containers/package-cards/package-cards.component.html b/apps/daffio/src/app/guides/containers/package-cards/package-cards.component.html new file mode 100644 index 0000000000..83ce6a5f89 --- /dev/null +++ b/apps/daffio/src/app/guides/containers/package-cards/package-cards.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/daffio/src/app/guides/containers/package-cards/package-cards.component.spec.ts b/apps/daffio/src/app/guides/containers/package-cards/package-cards.component.spec.ts new file mode 100644 index 0000000000..be0b070012 --- /dev/null +++ b/apps/daffio/src/app/guides/containers/package-cards/package-cards.component.spec.ts @@ -0,0 +1,41 @@ + +import { HttpClientTestingModule } from '@angular/common/http/testing'; +import { + waitForAsync, + ComponentFixture, + TestBed, +} from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { RouterTestingModule } from '@angular/router/testing'; + +import { DaffioDocsPackageCardsContainer } from './package-cards.component'; + +describe('DaffioDocsPackageCardsContainer', () => { + let component: DaffioDocsPackageCardsContainer; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ + DaffioDocsPackageCardsContainer, + ], + imports: [ + RouterTestingModule, + NoopAnimationsModule, + HttpClientTestingModule, + ], + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DaffioDocsPackageCardsContainer); + component = fixture.componentInstance; + + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/daffio/src/app/guides/containers/package-cards/package-cards.component.ts b/apps/daffio/src/app/guides/containers/package-cards/package-cards.component.ts new file mode 100644 index 0000000000..b8422771ab --- /dev/null +++ b/apps/daffio/src/app/guides/containers/package-cards/package-cards.component.ts @@ -0,0 +1,39 @@ +import { + ChangeDetectionStrategy, + Component, + OnInit, +} from '@angular/core'; +import { + map, + Observable, + tap, +} from 'rxjs'; + +import { DaffioDoc } from '../../../docs/models/doc'; +import { DaffioGuideList } from '../../../docs/models/guide-list'; +import { DaffioDocsService } from '../../../docs/services/docs.service'; +import { DaffioPackage } from '../../components/package-cards/package-cards.component'; + +@Component({ + selector: 'daffio-docs-package-cards-container', + templateUrl: './package-cards.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class DaffioDocsPackageCardsContainer implements OnInit { + + packagesList$: Observable; + + constructor( + private docService: DaffioDocsService, + ) {} + + ngOnInit() { + this.packagesList$ = this.docService.getGuideList().pipe( + map((guidesTree) => guidesTree.children.map((p) => ({ + title: p.title, + path: `/${p.path || p.children?.[0].path}`, + description: '', + }))), + ); + } +} diff --git a/apps/daffio/src/app/guides/containers/package-cards/package-cards.module.ts b/apps/daffio/src/app/guides/containers/package-cards/package-cards.module.ts new file mode 100644 index 0000000000..7d7c503047 --- /dev/null +++ b/apps/daffio/src/app/guides/containers/package-cards/package-cards.module.ts @@ -0,0 +1,25 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { DaffCardModule } from '@daffodil/design/card'; + +import { DaffioDocsPackageCardsContainer } from './package-cards.component'; +import { DaffioDocsPackageCardsComponentModule } from '../../components/package-cards/package-cards.module'; + + +@NgModule({ + declarations: [ + DaffioDocsPackageCardsContainer, + ], + exports: [ + DaffioDocsPackageCardsContainer, + ], + imports: [ + CommonModule, + RouterModule, + DaffCardModule, + DaffioDocsPackageCardsComponentModule, + ], +}) +export class DaffioDocsPackageCardsContainerModule { } diff --git a/apps/daffio/src/app/guides/guides-routing.module.ts b/apps/daffio/src/app/guides/guides-routing.module.ts index 00d96f7fd1..885e110bd6 100644 --- a/apps/daffio/src/app/guides/guides-routing.module.ts +++ b/apps/daffio/src/app/guides/guides-routing.module.ts @@ -5,9 +5,15 @@ import { } from '@angular/router'; import { DaffioGuidesPageComponent } from './pages/guides-page.component'; +import { DaffioPackagesOverviewPageComponent } from './pages/packages-overview/packages-overview.component'; import { DocsResolver } from '../docs/resolvers/docs-resolver.service'; export const docsRoutes: Routes = [ + { + path: '', + pathMatch: 'full', + component: DaffioPackagesOverviewPageComponent, + }, { path: '**', component: DaffioGuidesPageComponent, diff --git a/apps/daffio/src/app/guides/guides.module.ts b/apps/daffio/src/app/guides/guides.module.ts index 903f6277d0..50edb8c607 100644 --- a/apps/daffio/src/app/guides/guides.module.ts +++ b/apps/daffio/src/app/guides/guides.module.ts @@ -1,21 +1,34 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { DaffContainerModule } from '@daffodil/design/container'; +import { DaffHeroModule } from '@daffodil/design/hero'; + +import { DaffioDocsPackageCardsContainerModule } from './containers/package-cards/package-cards.module'; import { DaffioGuidesRoutingModule } from './guides-routing.module'; import { DaffioGuidesPageComponent } from './pages/guides-page.component'; +import { DaffioPackagesOverviewPageComponent } from './pages/packages-overview/packages-overview.component'; import { DaffioDocViewerModule } from '../docs/components/doc-viewer/doc-viewer.module'; @NgModule({ imports: [ CommonModule, + RouterModule, + DaffioDocViewerModule, DaffioGuidesRoutingModule, + DaffContainerModule, + DaffHeroModule, + DaffioDocsPackageCardsContainerModule, ], declarations: [ DaffioGuidesPageComponent, + DaffioPackagesOverviewPageComponent, ], exports: [ DaffioGuidesPageComponent, + DaffioPackagesOverviewPageComponent, ], }) export class DaffioGuidesModule {} diff --git a/apps/daffio/src/app/guides/pages/packages-overview/packages-overview.component.html b/apps/daffio/src/app/guides/pages/packages-overview/packages-overview.component.html new file mode 100644 index 0000000000..8272ffac1b --- /dev/null +++ b/apps/daffio/src/app/guides/pages/packages-overview/packages-overview.component.html @@ -0,0 +1,10 @@ + + +

Packages

+

Learn how to build and optimize an ecommerce store with our packages.

+ + + + + + diff --git a/apps/daffio/src/app/guides/pages/packages-overview/packages-overview.component.scss b/apps/daffio/src/app/guides/pages/packages-overview/packages-overview.component.scss new file mode 100644 index 0000000000..64e601395b --- /dev/null +++ b/apps/daffio/src/app/guides/pages/packages-overview/packages-overview.component.scss @@ -0,0 +1,16 @@ +@use 'utilities' as daff; + +.daffio-packages-overview { + &__card-grid { + display: block; + padding: 0 24px; + + @include daff.breakpoint(tablet) { + padding: 48px; + } + + @include daff.breakpoint(small-laptop) { + padding: 48px 0; + } + } +} \ No newline at end of file diff --git a/apps/daffio/src/app/guides/pages/packages-overview/packages-overview.component.spec.ts b/apps/daffio/src/app/guides/pages/packages-overview/packages-overview.component.spec.ts new file mode 100644 index 0000000000..9975da2944 --- /dev/null +++ b/apps/daffio/src/app/guides/pages/packages-overview/packages-overview.component.spec.ts @@ -0,0 +1,35 @@ +import { + ComponentFixture, + TestBed, + waitForAsync, +} from '@angular/core/testing'; +import { RouterTestingModule } from '@angular/router/testing'; + +import { DaffioPackagesOverviewPageComponent } from './packages-overview.component'; + +describe('DaffioPackagesOverviewPageComponent', () => { + let component: DaffioPackagesOverviewPageComponent; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ + DaffioPackagesOverviewPageComponent, + ], + imports: [ + RouterTestingModule, + ], + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DaffioPackagesOverviewPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/daffio/src/app/guides/pages/packages-overview/packages-overview.component.ts b/apps/daffio/src/app/guides/pages/packages-overview/packages-overview.component.ts new file mode 100644 index 0000000000..2bd837bade --- /dev/null +++ b/apps/daffio/src/app/guides/pages/packages-overview/packages-overview.component.ts @@ -0,0 +1,12 @@ +import { + ChangeDetectionStrategy, + Component, +} from '@angular/core'; + +@Component({ + selector: 'daffio-packages-overview', + templateUrl: './packages-overview.component.html', + styleUrls: ['./packages-overview.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class DaffioPackagesOverviewPageComponent {}