feat(daffio): add search feature

apps/daffio/src/app/core/header/components/header/header.component.html

@@ -7,15 +7,12 @@
       <ng-content select="[daffioHeaderItem]"></ng-content>
     </div>
   </div>
-  <div class="daffio-header__right">
-    <div class="daffio-header__theme-toggle">
-      <ng-content select="[theme-toggle]"></ng-content>
-    </div>
-    <div class="daffio-header__button">
-      <ng-content select="[quickstart-button]"></ng-content>
-    </div>
-    <div class="daffio-header__bars">
-      <ng-content select="[sidebar-button]"></ng-content>
-    </div>
+  <div class="daffio-header__desktop">
+    <ng-content></ng-content>
+  </div>
+  <div class="daffio-header__mobile">
+    <ng-content select="[search-mobile]"></ng-content>
+    <ng-content select="[theme-toggle-mobile]"></ng-content>
+    <ng-content select="[sidebar-button]"></ng-content>
   </div>
 </nav>

apps/daffio/src/app/core/header/components/header/header.component.scss

@@ -14,7 +14,7 @@
 				color: currentColor;
 				font-size: daff.$font-size-base;
 				font-weight: 500;
-				line-height: 64px;
+				line-height: 4rem;
 				padding: 0 1rem;
 				position: relative;
 				text-decoration: none;
@@ -30,31 +30,34 @@
 	}
 
 	&__left,
-	&__right {
+	&__desktop {
 		display: flex;
 		align-items: center;
 	}
 
 	&__left {
-		gap: 32px;
+		gap: 2rem;
+		width: 100%;
 	}
 
-	&__theme-toggle {
-		margin-right: 0.25rem;
+	&__desktop {
+		display: none;
 
 		@include daff.breakpoint(big-tablet) {
-			margin-right: 0;
+			display: flex;
+			gap: 1rem;
 		}
 	}
 
 	&__menu {
+		display: none;
 		margin: 0;
 		padding: 0;
 
 		@include daff.breakpoint(big-tablet) {
 			display: flex;
 			align-items: center;
-			gap: 16px;
+			gap: 1rem;
 		}
 	}
 
@@ -68,14 +71,14 @@
 	}
 
 	&__logo {
-		width: 128px;
+		width: 8rem;
 
 		@include daff.breakpoint(mobile) {
-			width: 160px;
+			width: 10rem;
 		}
 	}
 
-	&__bars {
+	&__mobile {
 		display: flex;
 		margin-right: -0.8125rem;
 

apps/daffio/src/app/core/nav/docs/docs.component.html

@@ -1,8 +1,8 @@
+@let isBigTablet = isBigTablet$ | async;
 <daffio-header [bordered]="true">
   <a routerLink="/" daffio-logo>
     <daff-branding-logo type="full"></daff-branding-logo>
   </a>
-  <daff-theme-switch-button theme-toggle></daff-theme-switch-button>
   @for (link of links$ | async; track $index) {
     <ng-container daffioHeaderItem>
       @if (link.external) {
@@ -12,7 +12,17 @@
       }
     </ng-container>
   }
-  <button daff-icon-button color="theme-contrast" aria-label="Open Navigation Sidebar"
+	@if (isBigTablet) {
+		<daffio-docs-search-button></daffio-docs-search-button>
+	} @else {
+		<daffio-docs-search-button search-mobile [icon]="true"></daffio-docs-search-button>
+	}
+	@if (isBigTablet) {
+		<daff-theme-switch-button></daff-theme-switch-button>
+	} @else {
+		<daff-theme-switch-button theme-toggle-mobile></daff-theme-switch-button>
+	}
+  <button daff-icon-button color="theme-contrast" aria-label="Open nav sidebar"
     sidebar-button
     (click)="openSidebar()">
     <fa-icon [icon]="faBars"></fa-icon>

apps/daffio/src/app/core/nav/docs/docs.component.ts

@@ -1,3 +1,4 @@
+import { BreakpointObserver } from '@angular/cdk/layout';
 import { AsyncPipe } from '@angular/common';
 import {
   ChangeDetectionStrategy,
@@ -13,13 +14,16 @@ import { faBars } from '@fortawesome/free-solid-svg-icons';
 import {
   Observable,
   map,
+  startWith,
 } from 'rxjs';
 
 import { DaffLogoModule } from '@daffodil/branding';
+import { DaffBreakpoints } from '@daffodil/design';
 import { DaffIconButtonComponent } from '@daffodil/design/button';
 import { DaffRouterDataService } from '@daffodil/router';
 import { DaffThemeSwitchButtonModule } from '@daffodil/theme-switch';
 
+import { DaffioDocsSearchButtonComponent } from '../../../docs//search/components/search-button/search-button.component';
 import { DaffioHeaderComponent } from '../../header/components/header/header.component';
 import { DaffioHeaderItemDirective } from '../../header/components/header-item/header-item.directive';
 import { DaffioRoute } from '../../router/route.type';
@@ -41,22 +45,29 @@ import { DaffioNavLink } from '../link/type';
     DaffIconButtonComponent,
     FaIconComponent,
     AsyncPipe,
+    DaffioDocsSearchButtonComponent,
   ],
 })
 export class DaffioDocsNavContainer implements OnInit {
   faBars = faBars;
 
   links$: Observable<Array<DaffioNavLink>>;
+  isBigTablet$: Observable<boolean>;
 
   constructor(
     private routerData: DaffRouterDataService<DaffioRoute['data']>,
     private sidebarService: DaffioSidebarService,
+    private breakpointObserver: BreakpointObserver,
   ) {}
 
   ngOnInit(): void {
     this.links$ = this.routerData.data$.pipe(
       map((data) => data.daffioNavLinks),
     );
+    this.isBigTablet$ = this.breakpointObserver.observe(DaffBreakpoints.BIG_TABLET).pipe(
+      startWith({ matches: true }),
+      map((result) => result?.matches),
+    );
   }
 
   openSidebar() {

apps/daffio/src/app/core/nav/marketing/marketing.component.html

@@ -2,7 +2,7 @@
   <a routerLink="/" daffio-logo>
     <daff-branding-logo type="full"></daff-branding-logo>
   </a>
-  <daff-theme-switch-button theme-toggle></daff-theme-switch-button>
+  <daff-theme-switch-button></daff-theme-switch-button>
   @for (link of links$ | async; track $index) {
     <ng-container daffioHeaderItem>
       @if (link.external) {
@@ -12,7 +12,9 @@
       }
     </ng-container>
   }
-  <a daff-button color="theme-contrast" size="sm" href="https://github.com/graycoreio/daffodil" rel="noopener noreferrer" target="_blank" quickstart-button>Get Started</a>
+  <a daff-button color="theme-contrast" size="sm" href="https://github.com/graycoreio/daffodil" rel="noopener noreferrer" target="_blank" class="daffio-header__get-started-button">Get Started</a>
+
+  <daff-theme-switch-button theme-toggle-mobile></daff-theme-switch-button>
   <button daff-icon-button color="theme-contrast" aria-label="Open Navigation Sidebar"
     sidebar-button
     (click)="openSidebar()">

apps/daffio/src/app/core/nav/marketing/marketing.component.scss

@@ -0,0 +1,11 @@
+@use 'utilities' as daff;
+
+.daffio-header {
+	&__get-started-button {
+		display: none;
+
+		@include daff.breakpoint(big-tablet) {
+			display: flex;
+		}
+	}
+}

apps/daffio/src/app/core/nav/marketing/marketing.component.ts

@@ -33,6 +33,7 @@ import { DaffioNavLink } from '../link/type';
 @Component({
   selector: 'daffio-nav-marketing-container',
   templateUrl: './marketing.component.html',
+  styleUrl: './marketing.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     DaffioHeaderComponent,

apps/daffio/src/app/docs/search/components/search-button/search-button-theme.scss

@@ -0,0 +1,28 @@
+@use 'theme' as *;
+
+@mixin daffio-docs-search-button-theme($theme) {
+	$neutral: daff-get-palette($theme, neutral);
+	$base: daff-get-base-color($theme, base);
+	$base-contrast: daff-get-base-color($theme, base-contrast);
+	$mode: daff-get-theme-mode($theme);
+
+	.daffio-docs-search-button {
+		@include light($mode) {
+			background: rgba(daff-color($neutral, 20), 0.4);
+			color: daff-color($neutral, 70);
+
+			&__kbd {
+				border: 1px solid daff-color($neutral, 70);
+			}
+		}
+
+		@include dark($mode) {
+			background: daff-color($neutral, 90);
+			color: daff-color($neutral, 40);
+
+			&__kbd {
+				border: 1px solid daff-color($neutral, 40);
+			}
+		}
+	}
+}

apps/daffio/src/app/docs/search/components/search-button/search-button.component.html

@@ -0,0 +1,10 @@
+@if (icon) {
+	<button daff-icon-button color="theme-contrast" type="button" (click)="showModal()">
+		<fa-icon [icon]="faSearch" [fixedWidth]="true"></fa-icon>
+	</button>
+} @else {
+	<button type="button" class="daffio-docs-search-button" (click)="showModal()">
+		<fa-icon [icon]="faSearch" [fixedWidth]="true"></fa-icon>
+		<span>Type <kbd class="daffio-docs-search-button__kbd">/</kbd> to search</span>
+	</button>
+}

apps/daffio/src/app/docs/search/components/search-button/search-button.component.scss

@@ -0,0 +1,26 @@
+@use 'utilities' as daff;
+
+.daffio-docs-search-button {
+	@include daff.clickable();
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	appearance: none;
+	border: none;
+	border-radius: 0.25rem;
+	font-size: daff.$font-size-sm;
+	padding: 0.75rem;
+	width: 16rem;
+
+	&__kbd {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 0.25rem;
+		font-size: 0.75rem;
+		line-height: 1rem;
+		height: 1rem;
+		width: 1rem;
+		box-sizing: border-box;
+	}
+}

apps/daffio/src/app/docs/search/components/search-button/search-button.component.ts

@@ -0,0 +1,62 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  HostListener,
+  Input,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+
+import { DaffIconButtonComponent } from '@daffodil/design/button';
+import {
+  DaffModalComponent,
+  DaffModalService,
+} from '@daffodil/design/modal';
+
+import { DaffioDocsSearchModalComponent } from '../search-modal/search-modal.component';
+
+@Component({
+  selector: 'daffio-docs-search-button',
+  templateUrl: './search-button.component.html',
+  styleUrl: './search-button.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    FaIconComponent,
+    DaffIconButtonComponent,
+  ],
+  providers: [
+    DaffModalService,
+  ],
+})
+
+export class DaffioDocsSearchButtonComponent {
+  faSearch = faSearch;
+
+  modal: DaffModalComponent;
+
+  @Input() icon = false;
+
+  constructor(private modalService: DaffModalService, private destroyRef: DestroyRef) {}
+
+  showModal() {
+    this.modal = this.modalService.open(
+      DaffioDocsSearchModalComponent,
+      { ariaLabelledBy: 'Search docs' },
+    );
+    this.modal.closedAnimationCompleted$.pipe(
+      takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => {
+        this.modal = undefined;
+      });
+  }
+
+  @HostListener('document:keydown', ['$event'])
+  handleKeydown(event: KeyboardEvent) {
+    if (event.key === '/' && !this.modal) {
+      event.preventDefault();
+      this.showModal();
+    }
+  }
+}

apps/daffio/src/app/docs/search/components/search-field/search-field-theme.scss

@@ -0,0 +1,12 @@
+@use 'theme' as *;
+
+@mixin daffio-docs-search-field-theme($theme) {
+	$neutral: daff-get-palette($theme, neutral);
+	$base: daff-get-base-color($theme, base);
+	$base-contrast: daff-get-base-color($theme, base-contrast);
+	$mode: daff-get-theme-mode($theme);
+
+	.daffio-docs-search-field {
+		border-bottom: 1px solid daff-color($neutral, 20);
+	}
+}

apps/daffio/src/app/docs/search/components/search-field/search-field.component.html

@@ -0,0 +1,9 @@
+<input class="daffio-docs-search-field__input" type="search" placeholder="Search documentation" name="search-documentation" id="search-input" [(ngModel)]="searchInput" />
+@if (searchInput) {
+  <button daff-icon-button color="theme-contrast"
+    class="daffio-docs-search-field__clear-button"
+    aria-label="Clear the search field"
+    (click)="clearField()">
+      <fa-icon [icon]="faTimes" aria-hidden="true"></fa-icon>
+  </button>
+}

apps/daffio/src/app/docs/search/components/search-field/search-field.component.scss

@@ -0,0 +1,24 @@
+:host {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.daffio-docs-search-field {
+	&__input {
+		appearance: none;
+		background: none;
+		border: none;
+		font-size: 1rem;
+		line-height: 1.5rem;
+		flex-grow: 1;
+		outline: none;
+		margin: 0;
+		padding: 1.25rem 1rem;
+
+		&::-webkit-search-cancel-button {
+			-webkit-appearance: none;
+ 			appearance: none;
+		}
+	}
+}