feat(demo): add faq section, adjust how it works

Author: tomastrajan

projects/elements-demo/src/app/core/layout/navigation/navigation.component.ts

@@ -9,10 +9,6 @@ const NAVIGATION = [
     label: 'DOCS',
     url: 'docs',
     children: [
-      {
-        label: 'Motivation',
-        url: 'docs/motivation'
-      },
       {
         label: 'Getting started',
         url: 'docs/getting-started'
@@ -21,9 +17,17 @@ const NAVIGATION = [
         label: 'How it works',
         url: 'docs/how-it-works'
       },
+      {
+        label: 'Use cases',
+        url: 'docs/use-cases'
+      },
       {
         label: 'API',
         url: 'docs/api'
+      },
+      {
+        label: 'FAQ',
+        url: 'docs/faq'
       }
     ]
   },

projects/elements-demo/src/app/features/contribute/contribute/contribute.component.html

@@ -6,7 +6,7 @@
     aria-label="@angular-extensions/elements"
   ></mat-icon>
   <h1>BECOME A CONTRIBUTOR</h1>
-  <h3>Found bug or typo in docs?</h3>
+  <h3>Missing a feature, found bug or typo in docs?</h3>
 </div>
 <br />
 <br />

projects/elements-demo/src/app/features/docs/docs-routing.module.ts

@@ -6,18 +6,13 @@ import { DocsComponent } from './docs.component';
 const routes: Routes = [
   {
     path: '',
-    redirectTo: 'motivation',
+    redirectTo: 'how-it-works',
     pathMatch: 'full'
   },
   {
     path: '',
     component: DocsComponent,
     children: [
-      {
-        path: 'motivation',
-        loadChildren: () =>
-          import('./motivation/motivation.module').then(m => m.MotivationModule)
-      },
       {
         path: 'getting-started',
         loadChildren: () =>
@@ -32,9 +27,18 @@ const routes: Routes = [
             m => m.HowItWorksModule
           )
       },
+      {
+        path: 'use-cases',
+        loadChildren: () =>
+          import('./use-cases/use-cases.module').then(m => m.UseCasesModule)
+      },
       {
         path: 'api',
         loadChildren: () => import('./api/api.module').then(m => m.ApiModule)
+      },
+      {
+        path: 'faq',
+        loadChildren: () => import('./faq/faq.module').then(m => m.FaqModule)
       }
     ]
   }

projects/elements-demo/src/app/features/docs/motivation/motivation-routing.module.ts renamed to projects/elements-demo/src/app/features/docs/faq/faq-routing.module.ts

@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { MotivationComponent } from './motivation.component';
+import { FaqComponent } from './faq.component';
 
-const routes: Routes = [{ path: '', component: MotivationComponent }];
+const routes: Routes = [{ path: '', component: FaqComponent }];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
 })
-export class MotivationRoutingModule {}
+export class FaqRoutingModule {}

projects/elements-demo/src/app/features/docs/faq/faq.component.html

@@ -0,0 +1,12 @@
+<div class="wrapper">
+  <h1>Frequently asked questions</h1>
+
+  <mat-accordion>
+    <mat-expansion-panel *ngFor="let item of faq">
+      <mat-expansion-panel-header>
+        <mat-panel-title [innerHTML]="item.question"></mat-panel-title>
+      </mat-expansion-panel-header>
+      <p [innerHTML]="item.answer"></p>
+    </mat-expansion-panel>
+  </mat-accordion>
+</div>

projects/elements-demo/src/app/features/docs/faq/faq.component.scss

@@ -0,0 +1,16 @@
+h2 {
+  margin: 40px 0 10px 0;
+  font-weight: bold;
+}
+
+:host-context(.responsive-large) {
+  .wrapper {
+    width: 70%;
+  }
+}
+
+.mat-expanded {
+  p {
+    margin-top: 25px;
+  }
+}

projects/elements-demo/src/app/features/docs/faq/faq.component.scss-theme.scss

@@ -0,0 +1,20 @@
+@import '~@angular/material/theming';
+
+@mixin demo-faq-component-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+
+  demo-faq {
+    .mat-expanded {
+      mat-expansion-panel-header {
+        background-color: mat-color(
+          $background,
+          disabled-list-option
+        ) !important;
+      }
+    }
+  }
+}

projects/elements-demo/src/app/features/docs/faq/faq.component.spec.ts

@@ -0,0 +1,28 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+import { SharedModule } from '../../../shared/shared.module';
+
+import { FaqComponent } from './faq.component';
+
+describe('FaqComponent', () => {
+  let component: FaqComponent;
+  let fixture: ComponentFixture<FaqComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [NoopAnimationsModule, SharedModule],
+      declarations: [FaqComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FaqComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/elements-demo/src/app/features/docs/faq/faq.component.ts

@@ -0,0 +1,49 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'demo-faq',
+  templateUrl: './faq.component.html',
+  styleUrls: ['./faq.component.scss']
+})
+export class FaqComponent implements OnInit {
+  faq = FAQ;
+
+  constructor() {}
+
+  ngOnInit() {}
+}
+
+const FAQ = [
+  {
+    question:
+      'When does the <code>*axLazyElement</code> directive trigger download of the element bundle (or module)',
+    answer:
+      'The element loading will be postponed until it was rendered in the template of some component. This can happen in following cases... <br>' +
+      `
+       <ul>
+        <li>Angular component uses element in its template</li>
+        <li>
+          Angular component uses element in its template conditionally
+          (<code>*ngIf</code>, <code>*ngFor</code>, ...) and the condition was
+          fulfilled
+        </li>
+        <li>
+          User navigated to an Angular component which uses element in its template
+          (can be both eagerly or lazily loaded routes)
+        </li>
+      </ul>
+      `
+  },
+  {
+    question:
+      'What will happen if I use same element multiple times in single template?',
+    answer:
+      'The element bundle will be downloaded only once! The library takes care of this situation by maintaining registry of downloaded / downloading elements and every new occurence will be checked against that  registry...'
+  },
+  {
+    question:
+      'When do we need to use <code>*axLazyElement="module: true"</code> flag?',
+    answer:
+      'Some web components libraries might be distributed using ES modules, for example if we look at <a href="https://unpkg.com/@material/mwc-button@0.6.0/mwc-button.js?module" target="_blank">@material/mwc-button</a> we will see that it imports additional things like <code>@material/mwc-base</code> using import statement in its implementation. This means it will need to download multiple files compared to a single bundle when using Angular elements. To make this work, library has to generate <code>\t&#60;script type="module"></code> instead of just plain <code>\t&#60;script></code> tag.'
+  }
+];

projects/elements-demo/src/app/features/docs/faq/faq.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+
+import { SharedModule } from '../../../shared/shared.module';
+
+import { FaqRoutingModule } from './faq-routing.module';
+import { FaqComponent } from './faq.component';
+
+@NgModule({
+  declarations: [FaqComponent],
+  imports: [SharedModule, FaqRoutingModule]
+})
+export class FaqModule {}