feat(demo-app): create introduction page for demos (#41)

* feat(demo-app): create standalone root component

* chore(config): add run config for tests and serve

* feat(demo-app): create pages/home component

* fix(demo-app): update favicon

* feat(demo-app): create chill-viking-header.component

* feat(demo-app): update pages/home

* feat(demo-app): create chill-viking-call-to-action

Component to be used as a call to action

* feat(demo-app): create window-router.service

As a service to wrap Router and expose `window.open`

* chore(deps): install @angular/material and @angular/cdk

* feat(demo-app): update wording for home

.run/Watch Affected Tests.run.xml

@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Watch Affected Tests" type="JavaScriptTestRunnerJest">
+    <node-interpreter value="project" />
+    <node-options value="" />
+    <jest-package value="$PROJECT_DIR$/node_modules/jest" />
+    <working-dir value="$PROJECT_DIR$" />
+    <jest-options value="--watch" />
+    <envs />
+    <scope-kind value="ALL" />
+    <method v="2" />
+  </configuration>
+</component>

.run/serve demo.run.xml

@@ -0,0 +1,11 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="serve demo" type="js.build_tools.nx">
+    <node-interpreter value="project" />
+    <nxfile value="$PROJECT_DIR$/nx.json" />
+    <tasks>
+      <task value="chill-viking-ng-libs:serve" />
+    </tasks>
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>

apps/chill-viking-ng-libs/src/app/features/chill-viking-call-to-action/chill-viking-call-to-action.component.scss

@@ -0,0 +1,61 @@
+.cta-btn {
+  padding: 10px 20px;
+  font-size: 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+
+  mat-icon {
+    margin-right: 10px;
+  }
+
+  &.primary {
+    color: #fff;
+    background-color: #337ab7;
+    border-color: #2e6da4;
+
+    &:hover {
+      color: #fff;
+      background-color: #286090;
+      border-color: #204d74;
+    }
+    &:active {
+      color: #fff;
+      background-color: #204d74;
+      border-color: #122b40;
+    }
+    &:disabled {
+      color: #fff;
+      background-color: #337ab7;
+      border-color: #2e6da4;
+      cursor: not-allowed;
+      opacity: 0.65;
+    }
+  }
+
+  &.secondary {
+    color: #333;
+    background-color: #fff;
+    border-color: #ccc;
+
+    &:hover {
+      color: #333;
+      background-color: #e6e6e6;
+      border-color: #adadad;
+    }
+    &:active {
+      color: #333;
+      background-color: #d4d4d4;
+      border-color: #8c8c8c;
+    }
+    &:disabled {
+      color: #333;
+      background-color: #fff;
+      border-color: #ccc;
+      cursor: not-allowed;
+      opacity: 0.65;
+    }
+  }
+}

apps/chill-viking-ng-libs/src/app/features/chill-viking-call-to-action/chill-viking-call-to-action.component.spec.ts

@@ -0,0 +1,67 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { first } from 'rxjs';
+
+import { ChillVikingCallToActionComponent } from './chill-viking-call-to-action.component';
+
+describe('ChillVikingCallToActionComponent', () => {
+  let component: ChillVikingCallToActionComponent;
+  let fixture: ComponentFixture<ChillVikingCallToActionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ChillVikingCallToActionComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ChillVikingCallToActionComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    fixture.detectChanges();
+    expect(component).toBeTruthy();
+  });
+
+  it('should emit to clicked when button clicked', (done) => {
+    let usedClick = false;
+    component.clicked.pipe(first()).subscribe(() => {
+      expect(usedClick).toBeTruthy();
+      done();
+    });
+
+    usedClick = true;
+    const button = fixture.nativeElement.querySelector('button');
+    expect(button).toBeInstanceOf(HTMLButtonElement);
+    button.click();
+  });
+
+  it('should default to primary', () => {
+    expect(component.type).toEqual('primary');
+  });
+
+  describe('when type is primary', () => {
+    beforeEach(() => {
+      fixture.detectChanges();
+    });
+
+    it('should use primary class for button', () => {
+      const button = fixture.nativeElement.querySelector(
+        'button.cta-btn.primary:not(secondary)',
+      );
+      expect(button).toBeInstanceOf(HTMLButtonElement);
+    });
+  });
+
+  describe('when type is secondary', () => {
+    beforeEach(() => {
+      component.type = 'secondary';
+      fixture.detectChanges();
+    });
+
+    it('should use secondary class for button', () => {
+      const button = fixture.nativeElement.querySelector(
+        'button.cta-btn.secondary:not(primary)',
+      );
+      expect(button).toBeInstanceOf(HTMLButtonElement);
+    });
+  });
+});

apps/chill-viking-ng-libs/src/app/features/chill-viking-call-to-action/chill-viking-call-to-action.component.ts

@@ -0,0 +1,34 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ViewEncapsulation,
+} from '@angular/core';
+
+@Component({
+  selector: 'ng-libs-cta',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <button class="cta-btn {{ type }}" (click)="buttonClick()">
+      <ng-content></ng-content>
+    </button>
+  `,
+  styleUrls: ['./chill-viking-call-to-action.component.scss'],
+  encapsulation: ViewEncapsulation.Emulated,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ChillVikingCallToActionComponent {
+  @Input()
+  type: 'primary' | 'secondary' = 'primary';
+
+  @Output()
+  clicked = new EventEmitter<unknown>();
+
+  buttonClick(): void {
+    this.clicked.next({});
+  }
+}

apps/chill-viking-ng-libs/src/app/features/chill-viking-header/chill-viking-header.component.html

@@ -0,0 +1,11 @@
+<div class="header-container">
+  <div class="header-image">
+    <img src="/assets/viking.svg" alt="Chill Viking" />
+  </div>
+  <div class="header-title">
+    <h1>{{ title$ | async }}</h1>
+    <ng-container *ngIf="subTitle$ | async; let subTitle">
+      <h2>{{ subTitle }}</h2>
+    </ng-container>
+  </div>
+</div>

apps/chill-viking-ng-libs/src/app/features/chill-viking-header/chill-viking-header.component.scss

@@ -0,0 +1,29 @@
+.header-container {
+  display: flex;
+  flex-direction: row;
+  padding: 15px 5px;
+}
+
+.header-image {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  & img {
+    max-width: 90%;
+  }
+}
+
+.header-title {
+  flex: 4;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+@media (max-width: 600px) {
+  .header-container {
+    flex-direction: column;
+  }
+}

apps/chill-viking-ng-libs/src/app/features/chill-viking-header/chill-viking-header.component.spec.ts

@@ -0,0 +1,80 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BehaviorSubject, of } from 'rxjs';
+
+import { ChillVikingHeaderComponent } from './chill-viking-header.component';
+
+describe('ChillVikingHeaderComponent', () => {
+  let component: ChillVikingHeaderComponent;
+  let fixture: ComponentFixture<ChillVikingHeaderComponent>;
+  let subTitleSubject: BehaviorSubject<string>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ChillVikingHeaderComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ChillVikingHeaderComponent);
+    component = fixture.componentInstance;
+    component.context = {
+      title$: of('Hello'),
+    };
+    subTitleSubject = new BehaviorSubject<string>('World');
+    component.subTitle$ = subTitleSubject.asObservable();
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('OnInit', () => {
+    it('should throw error when context not set', () => {
+      component.context = undefined;
+      expect(() => component.ngOnInit()).toThrowError();
+    });
+  });
+
+  describe('elements', () => {
+    describe('header-image', () => {
+      it('should have expected image', () => {
+        const element =
+          fixture.nativeElement.querySelector('.header-image img');
+        expect(element).toBeInstanceOf(HTMLImageElement);
+        const img: HTMLImageElement = element;
+        expect(img.src).toContain('/assets/viking.svg');
+        expect(img.alt).toEqual('Chill Viking');
+      });
+    });
+
+    describe('header-title', () => {
+      let div: HTMLDivElement;
+
+      beforeEach(() => {
+        const element = fixture.nativeElement.querySelector('.header-title');
+        expect(element).toBeInstanceOf(HTMLDivElement);
+        div = element;
+      });
+
+      it('should display title in h1 element', () => {
+        const h1 = div.querySelector('h1');
+        expect(h1).toBeInstanceOf(HTMLHeadingElement);
+        expect(h1?.textContent).toEqual('Hello');
+      });
+
+      it('should display subTitle in h2 element', () => {
+        const h2 = div.querySelector('h2');
+        expect(h2).toBeInstanceOf(HTMLHeadingElement);
+        expect(h2?.textContent).toEqual('World');
+      });
+
+      describe('when subtitle$ not set', () => {
+        it('should not render h2', () => {
+          subTitleSubject.next('');
+          fixture.detectChanges();
+          const h2 = fixture.nativeElement.querySelector('.header-title h2');
+          expect(h2).toBeFalsy();
+        });
+      });
+    });
+  });
+});