feat(daffio): render design component guide and API docs with tabs

apps/daffio/src/app/docs/components/table-of-contents/table-of-contents.component.html

@@ -3,6 +3,6 @@
 		On this page
 	</div>
 	<div class="daffio-docs-table-of-contents__links">
-		<a *ngFor="let entry of tableOfContents"class="daffio-docs-table-of-contents__item daffio-docs-table-of-contents__item--level-{{entry.lvl}}" routerLink="./" [fragment]="entry.slug">{{ entry.content }}</a>
+		<a *ngFor="let entry of tableOfContents"class="daffio-docs-table-of-contents__item daffio-docs-table-of-contents__item--level-{{entry.lvl}}" routerLink="./" queryParamsHandling="merge" [fragment]="entry.slug">{{ entry.content }}</a>
 	</div>
 </aside>

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

@@ -0,0 +1,30 @@
+<daffio-doc-article [breadcrumbs]="doc().breadcrumbs" [toc]="toc()">
+	<daff-tabs
+		[initiallySelected]="USAGE_TAB_ID"
+		[linkMode]="true"
+		[url]="doc().id"
+		(tabChange)="setTab($event)"
+	>
+		<daff-tab [id]="USAGE_TAB_ID">
+			<daff-tab-label>
+				Usage
+			</daff-tab-label>
+			<daff-tab-panel>
+				<daff-article
+					[innerHtml]="doc().contents | safe">
+				</daff-article>
+			</daff-tab-panel>
+		</daff-tab>
+
+		<daff-tab [id]="API_TAB_ID">
+			<daff-tab-label>
+				API
+			</daff-tab-label>
+			<daff-tab-panel>
+				@for (apiDoc of doc().api; track $index) {
+					<div [innerHtml]="apiDoc | safe"></div>
+				}
+			</daff-tab-panel>
+		</daff-tab>
+	</daff-tabs>
+</daffio-doc-article>

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

@@ -0,0 +1,39 @@
+import {
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
+import { provideHttpClientTesting } 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 { DaffioDocsDesignComponentPageComponent } from './docs-list.component';
+
+describe('DaffioDocsDesignComponentPageComponent', () => {
+  let component: DaffioDocsDesignComponentPageComponent;
+  let fixture: ComponentFixture<DaffioDocsDesignComponentPageComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [DaffioDocsDesignComponentPageComponent,
+        RouterTestingModule,
+        NoopAnimationsModule],
+      providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DaffioDocsDesignComponentPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,64 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  input,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { ActivatedRoute } from '@angular/router';
+
+import { DAFF_ARTICLE_COMPONENTS } from '@daffodil/design/article';
+import {
+  DAFF_TABS_COMPONENTS,
+  DaffTabsComponent,
+} from '@daffodil/design/tabs';
+import {
+  DaffDocKind,
+  DaffPackageGuideDoc,
+} from '@daffodil/docs-utils';
+
+import { DaffioSafeHtmlPipe } from '../../../../core/html-sanitizer/safe.pipe';
+import { DaffioDocArticleModule } from '../../../components/doc-article/module';
+import { DaffioDocsDynamicContent } from '../../../dynamic-content/dynamic-content.type';
+
+
+@Component({
+  selector: 'daffio-docs-design-component-content',
+  templateUrl: './component-content.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    DAFF_TABS_COMPONENTS,
+    DAFF_ARTICLE_COMPONENTS,
+    DaffioDocArticleModule,
+    DaffioSafeHtmlPipe,
+  ],
+})
+export class DaffioDocsDesignComponentContentComponent implements DaffioDocsDynamicContent<DaffPackageGuideDoc> {
+  static readonly kind = DaffDocKind.COMPONENT;
+
+  private readonly _tab = signal<string>('');
+
+  readonly USAGE_TAB_ID = 'usage';
+  readonly API_TAB_ID = 'api';
+
+  tabs = viewChild.required(DaffTabsComponent);
+  doc = input<DaffPackageGuideDoc>();
+  toc = computed(() => {
+    switch (this._tab()) {
+      case this.API_TAB_ID:
+        return this.doc().apiToc;
+
+      default:
+      case this.USAGE_TAB_ID:
+        return this.doc().tableOfContents;
+    }
+  });
+
+  setTab(tab: string) {
+    this._tab.set(tab);
+  }
+}

apps/daffio/src/app/docs/design/components/component-content/component-content.provider.ts

@@ -0,0 +1,4 @@
+import { DaffioDocsDesignComponentContentComponent } from './component-content.component';
+import { provideDaffioDocsDynamicContentComponents } from '../../../dynamic-content/dynamic-content-components.token';
+
+export const provideDaffioDocsDesignComponentContentComponent = () => provideDaffioDocsDynamicContentComponents(DaffioDocsDesignComponentContentComponent);

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

@@ -1,14 +1,18 @@
 import { NgModule } from '@angular/core';
 
+import { provideDaffioDocsDesignComponentContentComponent } from './components/component-content/component-content.provider';
 import { DaffioDocsDesignRoutingModule } from './design-routing.module';
 import { DaffioDocsDesignIndexService } from './services/index.service';
+import { provideDaffioDocsPackagesContentComponent } from '../packages/components/packages-content/packages-content.provider';
 
 @NgModule({
   imports: [
     DaffioDocsDesignRoutingModule,
   ],
   providers: [
     DaffioDocsDesignIndexService,
+    provideDaffioDocsDesignComponentContentComponent(),
+    provideDaffioDocsPackagesContentComponent(),
   ],
 })
 export class DaffioDocsDesignModule {}

libs/design/tabs/examples/src/link-tabs/link-tabs.component.html

@@ -0,0 +1,55 @@
+<daff-tabs
+	aria-label="List of tabs"
+	[linkMode]="true"
+>
+	<daff-tab>
+		<daff-tab-label>
+			<fa-icon [icon]="faInfoCircle" daffPrefix></fa-icon>
+			Tab 1
+		</daff-tab-label>
+		<daff-tab-panel>
+			Tab 1 Panel
+		</daff-tab-panel>
+	</daff-tab>
+
+	<daff-tab>
+		<daff-tab-label>
+			Tab 2
+			<fa-icon [icon]="faInfoCircle" daffSuffix></fa-icon>
+		</daff-tab-label>
+		<daff-tab-panel>
+			Tab 2 Panel
+		</daff-tab-panel>
+	</daff-tab>
+
+	<daff-tab>
+		<daff-tab-label>
+			<fa-icon [icon]="faInfoCircle" daffPrefix></fa-icon>
+			Tab 3
+			<fa-icon [icon]="faInfoCircle" daffSuffix></fa-icon>
+		</daff-tab-label>
+		<daff-tab-panel>
+			Tab 3 Panel
+		</daff-tab-panel>
+	</daff-tab>
+
+	<daff-tab>
+		<daff-tab-label>
+			Tab 4
+			<fa-icon [icon]="faInfoCircle" daffSuffix></fa-icon>
+		</daff-tab-label>
+		<daff-tab-panel>
+			Tab 4 Panel
+		</daff-tab-panel>
+	</daff-tab>
+
+	<daff-tab>
+		<daff-tab-label>
+			Tab 5
+			<fa-icon [icon]="faInfoCircle" daffSuffix></fa-icon>
+		</daff-tab-label>
+		<daff-tab-panel>
+			Tab 5 Panel
+		</daff-tab-panel>
+	</daff-tab>
+</daff-tabs>

libs/design/tabs/examples/src/link-tabs/link-tabs.component.ts

@@ -0,0 +1,23 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+
+import { DAFF_TABS_COMPONENTS } from '@daffodil/design/tabs';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'link-tabs',
+  templateUrl: './link-tabs.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    DAFF_TABS_COMPONENTS,
+    FaIconComponent,
+  ],
+})
+export class LinkTabsComponent {
+  faInfoCircle = faInfoCircle;
+}

libs/design/tabs/examples/src/public_api.ts

@@ -2,10 +2,12 @@ import { BasicTabsComponent } from './basic-tabs/basic-tabs.component';
 import { CustomSelectTabsComponent } from './custom-select-tabs/custom-select-tabs.component';
 import { DisabledTabsComponent } from './disabled-tabs/disabled-tabs.component';
 import { InitiallySelectTabComponent } from './initially-select-tab/initially-select-tab.component';
+import { LinkTabsComponent } from './link-tabs/link-tabs.component';
 
 export const TABS_EXAMPLES = [
   BasicTabsComponent,
   DisabledTabsComponent,
   InitiallySelectTabComponent,
   CustomSelectTabsComponent,
+  LinkTabsComponent,
 ];

libs/design/tabs/src/tabs/tabs.component.html

@@ -4,16 +4,42 @@
 	(keydown.home)="selectFirst($event)"
 	(keydown.end)="selectLast($event)">
 	@for (tab of _tabs; track tab) {
-		<button daff-tab-activator
-			[selected]="tab.id === selectedTab"
-			(click)="select(tab.id)"
-			[panelId]="tab.panelId"
-			[disabled]="tab.disabled"
-			[tabActivatorId]="tab.id"
-			(keydown.arrowright)="next()"
-			(keydown.arrowleft)="previous()">
-				<ng-container *ngTemplateOutlet="tab.labelRef"></ng-container>
-		</button>
+		@if (linkMode && tab.disabled) {
+			<button daff-tab-activator routerLinkActive
+				[selected]="tab.id === selectedTab"
+				[panelId]="tab.panelId"
+				[disabled]="tab.disabled"
+				[tabActivatorId]="tab.id"
+				(keydown.arrowright)="next()"
+				(keydown.arrowleft)="previous()">
+					<ng-container *ngTemplateOutlet="tab.labelRef"></ng-container>
+			</button>
+		} @else if (linkMode) {
+			<a daff-tab-activator routerLinkActive
+				class="daff-ae daff_tabs__link"
+				[selected]="tab.id === selectedTab"
+				[routerLink]="url || currentPath"
+				queryParamsHandling="merge"
+				[queryParams]="_buildQueryParams(tab.id)"
+				[panelId]="tab.panelId"
+				[tabActivatorId]="tab.id"
+				(keydown.arrowright)="next()"
+				(keydown.arrowleft)="previous()"
+				(isActiveChange)="$event && select(tab.id)">
+					<ng-container *ngTemplateOutlet="tab.labelRef"></ng-container>
+			</a>
+		} @else {
+			<button daff-tab-activator
+				[selected]="tab.id === selectedTab"
+				(click)="select(tab.id)"
+				[panelId]="tab.panelId"
+				[disabled]="tab.disabled"
+				[tabActivatorId]="tab.id"
+				(keydown.arrowright)="next()"
+				(keydown.arrowleft)="previous()">
+					<ng-container *ngTemplateOutlet="tab.labelRef"></ng-container>
+			</button>
+		}
 	}
 </div>
 

libs/design/tabs/src/tabs/tabs.component.scss

@@ -1,6 +1,10 @@
 :host(.daff-tabs) {
 	$root: '.daff-tabs';
 	max-width: 100%;
+
+	a {
+		text-decoration: none;
+	}
 }
 
 .daff-tabs {