feat(daffio): create components overview page (#3324)

Co-authored-by: Peter Lauck <griest024@gmail.com>

apps/daffio/src/app/docs/design/design-routing.module.ts

@@ -13,6 +13,7 @@ import {
 } from '@daffodil/docs-utils';
 
 import { DAFFIO_DOCS_DESIGN_LIST_SIDEBAR_REGISTRATION } from './containers/docs-list/sidebar.provider';
+import { DaffioDocsDesignComponentOverviewPageComponent } from './pages/components-overview/component-overview.component';
 import { DaffioDocsDesignOverviewPageComponent } from './pages/overview/overview.component';
 import { DAFF_NAV_SIDEBAR_REGISTRATION } from '../../core/nav/sidebar.provider';
 import { DaffioRoute } from '../../core/router/route.type';
@@ -44,6 +45,10 @@ export const docsDesignRoutes: Routes = [
         pathMatch: 'full',
         component: DaffioDocsDesignOverviewPageComponent,
       },
+      {
+        path: DAFF_DOC_KIND_PATH_SEGMENT_MAP[DaffDocKind.COMPONENT],
+        component: DaffioDocsDesignComponentOverviewPageComponent,
+      },
       <DaffioRoute>{
         path: '**',
         component: DaffioDocsPageComponent,

apps/daffio/src/app/docs/design/pages/components-overview/component-overview.component.html

@@ -0,0 +1,21 @@
+<daff-hero>
+	<daff-container size="md">
+		<h1 daffHeroTitle>Components</h1>
+		<p daffHeroSubtitle>Components are reusable UI elements in a design system that helps to create consistent, intuitive experiences across products.</p>
+	</daff-container>
+</daff-hero>
+
+<daff-container size="md">
+	<div class="daffio-docs-design-component-overview__body">
+		<div class="daffio-docs-design-component-overview__card-grid">
+      @for (component of components$ | async; track component.id) {
+        <a daff-card [routerLink]="component.path">
+          <h3 daffCardTitle>{{component.title}}</h3>
+          <div daffCardContent>
+            <p [innerHTML]="component.description"></p>
+          </div>
+        </a>
+      }
+		</div>
+	</div>
+</daff-container>

apps/daffio/src/app/docs/design/pages/components-overview/component-overview.component.scss

@@ -0,0 +1,26 @@
+@use 'utilities' as daff;
+
+.daffio-docs-design-component-overview {
+	&__body {
+		display: block;
+		padding: 48px 24px;
+
+		@include daff.breakpoint(small-laptop) {
+			padding: 48px 0;
+		}
+	}
+
+	&__card-grid {
+		display: grid;
+		grid-template-columns: 1fr;
+		grid-gap: 16px;
+
+		@include daff.breakpoint(tablet) {
+			grid-template-columns: repeat(2, 1fr);
+		}
+
+		@include daff.breakpoint(small-laptop) {
+			grid-template-columns: repeat(3, 1fr);
+		}
+	}
+}

apps/daffio/src/app/docs/design/pages/components-overview/component-overview.component.spec.ts

@@ -0,0 +1,33 @@
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { DaffioDocsDesignComponentOverviewPageComponent } from './component-overview.component';
+
+describe('DaffioDocsDesignComponentOverviewPageComponent', () => {
+  let component: DaffioDocsDesignComponentOverviewPageComponent;
+  let fixture: ComponentFixture<DaffioDocsDesignComponentOverviewPageComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        DaffioDocsDesignComponentOverviewPageComponent,
+        RouterTestingModule,
+      ],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DaffioDocsDesignComponentOverviewPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/daffio/src/app/docs/design/pages/components-overview/component-overview.component.ts

@@ -0,0 +1,55 @@
+import { AsyncPipe } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnInit,
+} from '@angular/core';
+import { RouterLink } from '@angular/router';
+import {
+  switchMap,
+  map,
+  Observable,
+} from 'rxjs';
+
+import { DAFF_CARD_COMPONENTS } from '@daffodil/design/card';
+import { DAFF_CONTAINER_COMPONENTS } from '@daffodil/design/container';
+import { DAFF_HERO_COMPONENTS } from '@daffodil/design/hero';
+import { DaffDocsDesignGuideNavList } from '@daffodil/docs-utils';
+import { DaffRouterActivatedRoute } from '@daffodil/router';
+
+@Component({
+  selector: 'daffio-docs-design-component-overview',
+  templateUrl: './component-overview.component.html',
+  styleUrls: ['./component-overview.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    RouterLink,
+    AsyncPipe,
+    DAFF_CARD_COMPONENTS,
+    DAFF_HERO_COMPONENTS,
+    DAFF_CONTAINER_COMPONENTS,
+  ],
+})
+export class DaffioDocsDesignComponentOverviewPageComponent implements OnInit {
+  components$: Observable<Array<DaffDocsDesignGuideNavList>>;
+
+  constructor(
+    private route: DaffRouterActivatedRoute,
+  ) {}
+
+  ngOnInit() {
+    this.components$ = this.route.route$.pipe(
+      switchMap((route) => route.data),
+      map((data) => data.index),
+      map((docsList: DaffDocsDesignGuideNavList) =>
+        docsList
+          .children
+          .find(({ id }) => id === 'components')
+          .children
+          .filter(({ id }) => !!id)
+          .flatMap((d) => d.children.length ? d.children : d),
+      ),
+    );
+  }
+}