Adds basic styleguide

src/app/app.component.html

@@ -1,36 +1,3 @@
-<div
+<div class="mat-typography">
-  class="main mat-typography"
+  <router-outlet></router-outlet>
-  scrollSpy (sectionChange)="onSectionChange($event)"
->
-  <div
-    id="menu"
-    fxLayout="column"
-    fxLayoutGap="20px"
-    fxLayoutAlign="center end"
-    [ngClass]="{'scrolling': isScrolling}"
-    (mouseover)="keepMenuOpen()"
-    (mouseout)="isScrolling = false"
- >
-    <button mat-fab (click)="toggleMenu()" class="toggle-menu" color="primary">
-      <mat-icon *ngIf="!isScrolling">menu</mat-icon>
-      <mat-icon *ngIf="isScrolling">close</mat-icon>
-    </button>
-    <a
-      *ngFor="let link of menuLinks"
-      mat-button
-      pageScroll
-      [pageScrollAdjustHash]="true"
-      href="#{{ link.id }}"
-      (click)="onMenuClick(link.id)"
-      [ngClass]="{'active': currentSection === link.id}"
-      id="{{link.id}}_menu_link"
-    >{{ link.label }}</a>
-    <div id="selected_indicator" [ngStyle]="{'top.px': activeLinkTop, 'opacity': showIndicator ? 1 : 0}"></div>
-  </div>
-
-  <div *ngFor="let link of menuLinks" class="scroll-spy-section" id="{{link.id}}">
-    <ng-container *ngComponentOutlet="link.component"></ng-container>
-  </div>
-
-  <app-footer id="footer"></app-footer>
 </div>

src/app/app.component.scss

@@ -1,46 +0,0 @@
-@import "../config";
-
-#menu {
-  position: fixed;
-  top: 0;
-  right: -300px;
-  z-index: 100;
-  height: 100vh;
-  width: 300px;
-  background-color: rgba(255, 255, 255, 0.8);
-  padding: 80px;
-  transition: all 1s ease-in-out;
-
-  &.scrolling {
-    right: 0px;
-  }
-
-  button.toggle-menu {
-    position: fixed;
-    top: 20px;
-    right: 20px;
-  }
-
-  a {
-    transition: all 1s ease-in-out 0.5s;
-
-    &.active {
-      font-weight: 500;
-      border-right: 2px solid $brand-primary;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-}
-
-
-#selected_indicator {
-  position: absolute;
-  top: 0;
-  right: 80px;
-  width: 2px;
-  height: 36px;
-  background-color: $brand-primary;
-  transition: all 1s ease-in-out;
-  opacity: 0;
-}

src/app/app.component.ts

@@ -1,91 +1,11 @@
-import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, QueryList, ViewChildren} from '@angular/core';
+import {Component} from '@angular/core';
-import {HeaderComponent} from './header/header.component';
-import {WelcomeComponent} from './welcome/welcome.component';
-import {AboutUsComponent} from './about-us/about-us.component';
-import {LogoValuesComponent} from './logo-values/logo-values.component';
-import {TeamComponent} from './team/team.component';
-import {CaseStudiesComponent} from './case-studies/case-studies.component';
-import {ContactUsComponent} from './contact-us/contact-us.component';
-
-interface MenuLink {
-  id: string;
-  label: string;
-  component: any;
-}
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
+  styleUrls: ['./app.component.scss']
-  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent implements AfterViewInit {
+export class AppComponent {
-  menuLinks: MenuLink[] = [
+  constructor() {
-    {id: 'header', label: 'Home', component: HeaderComponent},
-    {id: 'welcome', label: 'Intro', component: WelcomeComponent},
-    {id: 'about_us', label: 'About Us', component: AboutUsComponent},
-    {id: 'logo_values', label: 'Our Values', component: LogoValuesComponent},
-    {id: 'team', label: 'Our Team', component: TeamComponent},
-    {id: 'case_studies', label: 'Projects', component: CaseStudiesComponent},
-    {id: 'contact_us', label: 'Contact', component: ContactUsComponent},
-  ];
-
-  @ViewChildren('scrollSpySection') scrollSpySections: QueryList<any>;
-  title = 'Sartography';
-  currentSection = 'header';
-  activeLinkTop: number;
-  showIndicator = false;
-  isScrolling = false;
-  scrollTimer = -1;
-
-  constructor(private changeDetector: ChangeDetectorRef) {
   }
-
-  ngAfterViewInit() {
-  }
-
-  moveSelectedIndicator(linkId: string) {
-    this.currentSection = linkId;
-    const activeLinkEl = document.getElementById(`${this.currentSection}_menu_link`);
-    this.activeLinkTop = activeLinkEl.offsetTop;
-  }
-
-  onMenuClick(linkId: string) {
-    this.showIndicator = true;
-    this.onSectionChange(linkId);
-  }
-
-  onSectionChange(sectionId: string) {
-    this.currentSection = sectionId;
-    this.moveSelectedIndicator(this.currentSection);
-  }
-
-  scrollTo(section) {
-    document.querySelector('#' + section).scrollIntoView();
-  }
-
-  @HostListener('window:scroll')
-  onScroll() {
-    this.isScrolling = true;
-    if (this.scrollTimer !== -1) {
-      clearTimeout(this.scrollTimer);
-    }
-
-    this.scrollTimer = window.setTimeout(() => {
-      this.showIndicator = true;
-      this.isScrolling = false;
-      this.scrollTimer = -1;
-      this.changeDetector.detectChanges();
-    }, 2000);
-  }
-
-  toggleMenu() {
-    this.isScrolling = !this.isScrolling;
-  }
-
-  keepMenuOpen() {
-    this.isScrolling = true;
-    clearTimeout(this.scrollTimer);
-  }
-
 }

src/app/app.module.ts

@@ -28,12 +28,18 @@ import {easingFn} from './animation';
 import {LogoValuesComponent} from './logo-values/logo-values.component';
 import {ScrollSpyDirective} from './scroll-spy.directive';
 import {RouterModule, Routes} from '@angular/router';
+import {StyleGuideComponent} from './style-guide/style-guide.component';
+import {HomeComponent} from './home/home.component';
 
 const routes: Routes = [
   {
-    path: '',
+    path: 'styleguide',
-    component: AppComponent
+    component: StyleGuideComponent
   },
+  {
+    path: '',
+    component: HomeComponent
+  }
 ];
 
 @NgModule({
@@ -48,6 +54,8 @@ const routes: Routes = [
     ScrollSpyDirective,
     TeamComponent,
     WelcomeComponent,
+    StyleGuideComponent,
+    HomeComponent,
   ],
   imports: [
     BrowserAnimationsModule,

src/app/home/home.component.html

@@ -0,0 +1,36 @@
+<div
+  class="main"
+  scrollSpy (sectionChange)="onSectionChange($event)"
+>
+  <div
+    id="menu"
+    fxLayout="column"
+    fxLayoutGap="20px"
+    fxLayoutAlign="center end"
+    [ngClass]="{'scrolling': isScrolling}"
+    (mouseover)="keepMenuOpen()"
+    (mouseout)="isScrolling = false"
+ >
+    <button mat-fab (click)="toggleMenu()" class="toggle-menu" color="primary">
+      <mat-icon *ngIf="!isScrolling">menu</mat-icon>
+      <mat-icon *ngIf="isScrolling">close</mat-icon>
+    </button>
+    <a
+      *ngFor="let link of menuLinks"
+      mat-button
+      pageScroll
+      [pageScrollAdjustHash]="true"
+      href="#{{ link.id }}"
+      (click)="onMenuClick(link.id)"
+      [ngClass]="{'active': currentSection === link.id}"
+      id="{{link.id}}_menu_link"
+    >{{ link.label }}</a>
+    <div id="selected_indicator" [ngStyle]="{'top.px': activeLinkTop, 'opacity': showIndicator ? 1 : 0}"></div>
+  </div>
+
+  <div *ngFor="let link of menuLinks" class="scroll-spy-section" id="{{link.id}}">
+    <ng-container *ngComponentOutlet="link.component"></ng-container>
+  </div>
+
+  <app-footer id="footer"></app-footer>
+</div>

src/app/home/home.component.scss

@@ -0,0 +1,46 @@
+@import "../../config";
+
+#menu {
+  position: fixed;
+  top: 0;
+  right: -300px;
+  z-index: 100;
+  height: 100vh;
+  width: 300px;
+  background-color: rgba(255, 255, 255, 0.8);
+  padding: 80px;
+  transition: all 1s ease-in-out;
+
+  &.scrolling {
+    right: 0px;
+  }
+
+  button.toggle-menu {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+  }
+
+  a {
+    transition: all 1s ease-in-out 0.5s;
+
+    &.active {
+      font-weight: 500;
+      border-right: 2px solid $brand-primary;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+}
+
+
+#selected_indicator {
+  position: absolute;
+  top: 0;
+  right: 80px;
+  width: 2px;
+  height: 36px;
+  background-color: $brand-primary;
+  transition: all 1s ease-in-out;
+  opacity: 0;
+}

src/app/home/home.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/home.component.ts

@@ -0,0 +1,91 @@
+import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, QueryList, ViewChildren} from '@angular/core';
+import {HeaderComponent} from '../header/header.component';
+import {WelcomeComponent} from '../welcome/welcome.component';
+import {AboutUsComponent} from '../about-us/about-us.component';
+import {LogoValuesComponent} from '../logo-values/logo-values.component';
+import {TeamComponent} from '../team/team.component';
+import {CaseStudiesComponent} from '../case-studies/case-studies.component';
+import {ContactUsComponent} from '../contact-us/contact-us.component';
+
+interface MenuLink {
+  id: string;
+  label: string;
+  component: any;
+}
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class HomeComponent implements AfterViewInit {
+  menuLinks: MenuLink[] = [
+    {id: 'header', label: 'Home', component: HeaderComponent},
+    {id: 'welcome', label: 'Intro', component: WelcomeComponent},
+    {id: 'about_us', label: 'About Us', component: AboutUsComponent},
+    {id: 'logo_values', label: 'Our Values', component: LogoValuesComponent},
+    {id: 'team', label: 'Our Team', component: TeamComponent},
+    {id: 'case_studies', label: 'Projects', component: CaseStudiesComponent},
+    {id: 'contact_us', label: 'Contact', component: ContactUsComponent},
+  ];
+
+  @ViewChildren('scrollSpySection') scrollSpySections: QueryList<any>;
+  title = 'Sartography';
+  currentSection = 'header';
+  activeLinkTop: number;
+  showIndicator = false;
+  isScrolling = false;
+  scrollTimer = -1;
+
+  constructor(private changeDetector: ChangeDetectorRef) {
+  }
+
+  ngAfterViewInit() {
+  }
+
+  moveSelectedIndicator(linkId: string) {
+    this.currentSection = linkId;
+    const activeLinkEl = document.getElementById(`${this.currentSection}_menu_link`);
+    this.activeLinkTop = activeLinkEl.offsetTop;
+  }
+
+  onMenuClick(linkId: string) {
+    this.showIndicator = true;
+    this.onSectionChange(linkId);
+  }
+
+  onSectionChange(sectionId: string) {
+    this.currentSection = sectionId;
+    this.moveSelectedIndicator(this.currentSection);
+  }
+
+  scrollTo(section) {
+    document.querySelector('#' + section).scrollIntoView();
+  }
+
+  @HostListener('window:scroll')
+  onScroll() {
+    this.isScrolling = true;
+    if (this.scrollTimer !== -1) {
+      clearTimeout(this.scrollTimer);
+    }
+
+    this.scrollTimer = window.setTimeout(() => {
+      this.showIndicator = true;
+      this.isScrolling = false;
+      this.scrollTimer = -1;
+      this.changeDetector.detectChanges();
+    }, 2000);
+  }
+
+  toggleMenu() {
+    this.isScrolling = !this.isScrolling;
+  }
+
+  keepMenuOpen() {
+    this.isScrolling = true;
+    clearTimeout(this.scrollTimer);
+  }
+
+}

src/app/style-guide/style-guide.component.html

@@ -0,0 +1,31 @@
+<h1 class="full-width-heading bg-primary">Color Palette</h1>
+<div class="container">
+  <div fxLayout="column" fxLayoutGap="10px">
+    <div *ngFor="let hue of hues" fxLayout="row" fxLayoutGap="0px">
+      <div
+        *ngFor="let variant of variants"
+        class="swatch bg-{{hue}}{{variant.suffix}} text-{{variant.contrast}}"
+        gdAlignRows="center center"
+        gdAlignColumns="center center"
+      >
+        {{hue}}{{variant.suffix}}
+      </div>
+    </div>
+  </div>
+</div>
+
+<h1 class="full-width-heading bg-accent">Typography</h1>
+<div class="container">
+  <h1 class="mat-display-4">Jumbo Heading 1 - mat-display-4</h1>
+  <h1 class="mat-display-3">Jumbo Heading 1 - mat-display-3</h1>
+  <h1 class="mat-display-2">Jumbo Heading 1 - mat-display-2</h1>
+  <h1 class="mat-display-1">Jumbo Heading 1 - mat-display-1</h1>
+  <h1>H1 - Heading 1 - mat-h1</h1>
+  <h2>H2 - Heading 2 - mat-h2</h2>
+  <h3>H3 - Heading 3 - mat-h3</h3>
+  <h4>H4 - Heading 4 - mat-h4</h4>
+  <h5>H5 - Heading 5 - mat-h5</h5>
+  <h6>H6 - Heading 6 - mat-h6</h6>
+  <p>Body 2</p>
+  <p>Body 1</p>
+</div>

src/app/style-guide/style-guide.component.scss

@@ -0,0 +1,30 @@
+@import "../../config";
+
+.swatch {
+  width: 160px;
+  height: 160px;
+  font-size: 12px;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.text-white { color: white; }
+.text-black { color: $brand-gray; }
+.full-width-heading {
+  width: 100%;
+  color: white;
+  position: relative;
+  height: 4em;
+  text-indent: 2em;
+  padding-top: 2em;
+
+  &:after {
+    content: '';
+    position: absolute;
+    left: 2em;
+    bottom: 2em;
+    border-bottom: 8px solid white;
+    width: 4em;
+    height: 4px;
+  }
+}

src/app/style-guide/style-guide.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StyleGuideComponent } from './style-guide.component';
+
+describe('StyleGuideComponent', () => {
+  let component: StyleGuideComponent;
+  let fixture: ComponentFixture<StyleGuideComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StyleGuideComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StyleGuideComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/style-guide/style-guide.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+
+interface ColorVariant {
+  suffix: string;
+  contrast: string;
+}
+
+@Component({
+  selector: 'app-style-guide',
+  templateUrl: './style-guide.component.html',
+  styleUrls: ['./style-guide.component.scss']
+})
+export class StyleGuideComponent implements OnInit {
+  hues = ['gray', 'primary', 'accent', 'warning'];
+  variants = [
+    {suffix: '-light-4', contrast: 'black'},
+    {suffix: '-light-3', contrast: 'black'},
+    {suffix: '-light-2', contrast: 'black'},
+    {suffix: '-light-1', contrast: 'black'},
+    {suffix: '', contrast: 'white'},
+    {suffix: '-dark-1', contrast: 'white'},
+    {suffix: '-dark-2', contrast: 'white'},
+    {suffix: '-dark-3', contrast: 'white'},
+    {suffix: '-dark-4', contrast: 'white'},
+  ];
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}