Merge pull request #148 from GSA-IAE-APPS/site-ui-improvements

Site UI improvements
GSA · Mar 28, 2018 · 24aceb1 · 24aceb1
2 parents 38c2090 + b4360fd
commit 24aceb1
Show file tree

Hide file tree

Showing 105 changed files with 58,315 additions and 151,236 deletions.
diff --git a/src/_docs/doc.template.html b/src/_docs/doc.template.html
@@ -1,23 +1,4 @@
-<header class="site-header">
-  <nav class="site-nav">
-    <div class="container">
-      <a class="home" [routerLink]="['/']">
-        SAM Web Design System
-      </a>
-      <div class="mask-container">
-        <ul>
-          <li>
-            <a [routerLink]="['/patterns/v1/home']">Patterns</a>
-          </li>
-          <li>
-            <a [routerLink]="['/overview/getting-started']">Documentation</a>
-          </li>
-        </ul>
-      </div>
-      <div class="separator"></div>
-    </div>
-  </nav>
-</header>
+<site-header></site-header>
 
 <div class="usa-grid">
 
@@ -64,29 +45,4 @@
 </div>
 
 
-<footer class="site-footer">
-  <nav class="container">
-    <ul>
-      <li>
-        <a [routerLink]="['overview/getting-started']">
-          Documentation
-        </a>
-      </li>
-      <li>
-        <a [routerLink]="['/patterns/v1/home']">
-          Patterns
-        </a>
-      </li>
-      <li>
-        <a href="https://github.helix.gsa.gov/GSA-IAE-APPS/sam-ui-elements">
-          SAM-UI Elements
-        </a>
-      </li>
-      <li>
-        <a href="https://github.helix.gsa.gov/GSA-IAE-APPS/web-standards-site">
-          SAM Web Design System
-        </a>
-      </li>
-    </ul>
-  </nav>
-</footer>
+<site-footer></site-footer>
diff --git a/src/_docs/experimental/heading/component-example.ts b/src/_docs/experimental/heading/component-example.ts
@@ -16,27 +16,27 @@ import { MarkdownService } from '../../../app/services/markdown/markdown.service
 import { DocumentationService } from '../../../app/services/documentation.service';
 
 var code_example_1 = `
-<sam-heading importance="highest" text="Lorem Ipsum Dolor"></sam-heading>
+<sam-title importance="highest" text="Lorem Ipsum Dolor"></sam-title>
 `;
 
 var code_example_2 = `
-<sam-heading importance="high" text="Lorem Ipsum Dolor"></sam-heading>
+<sam-title importance="high" text="Lorem Ipsum Dolor"></sam-title>
 `;
 
 var code_example_3 = `
-<sam-heading importance="normal" text="Lorem Ipsum Dolor"></sam-heading>
+<sam-title importance="normal" text="Lorem Ipsum Dolor"></sam-title>
 `;
 
 var code_example_4 = `
-<sam-heading importance="low" text="Lorem Ipsum Dolor"></sam-heading>
+<sam-title importance="low" text="Lorem Ipsum Dolor"></sam-title>
 `;
 
 var code_example_5 = `
-<sam-heading importance="highest" sup="Sit amet" text="Lorem Ipsum Dolor"></sam-heading>
+<sam-title importance="highest" sup="Sit amet" text="Lorem Ipsum Dolor"></sam-title>
 `;
 
 var code_example_6 = `
-<sam-heading importance="low" icon="user" text="Lorem Ipsum Dolor"></sam-heading>
+<sam-title importance="low" icon="user" text="Lorem Ipsum Dolor"></sam-title>
 `;
 
 @Component({

diff --git a/src/_docs/experimental/list/component-example.ts b/src/_docs/experimental/list/component-example.ts
@@ -15,17 +15,11 @@ import { Http } from '@angular/http';
 import { MarkdownService } from '../../../app/services/markdown/markdown.service';
 import { DocumentationService } from '../../../app/services/documentation.service';
 
-var code_example_1 = `
-<sam-list [items]="listData"></sam-list>
-`;
+var code_example_1 = ``;
 
-var code_example_2 = `
-<sam-list [items]="listLinkData"></sam-list>
-`;
+var code_example_2 = ``;
 
-var code_example_3 = `
-<sam-list [items]="listIconData"></sam-list>
-`;
+var code_example_3 = ``;
 
 @Component({
 	selector: 'doc-sam-list',

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
@@ -9,5 +9,9 @@ export const ROUTES: Routes = [
   { 
     path: 'patterns', 
     loadChildren: "../patterns/patterns.module#ExamplesModule"
+  },
+  { 
+    path: 'prototypes', 
+    loadChildren: "../prototypes/prototypes.module#PrototypesModule"
   }
 ];
diff --git a/src/app/home.template.html b/src/app/home.template.html
@@ -1,23 +1,4 @@
-<header class="site-header">
-  <nav class="site-nav">
-    <div class="container">
-      <a class="home" [routerLink]="['/']">
-        SAM Web Design System
-      </a>
-      <div class="mask-container">
-        <ul>
-          <li>
-            <a [routerLink]="['/patterns/v1/home']">Patterns</a>
-          </li>
-          <li>
-            <a [routerLink]="['overview/getting-started']">Documentation</a>
-          </li>
-        </ul>
-      </div>
-      <div class="separator"></div>
-    </div>
-  </nav>
-</header>
+<site-header></site-header>
 
 <main>
   <header>
@@ -67,21 +48,21 @@
         </svg>
       </span>
     </div>
-    <section id="intro" class="container">
-      <h1 class="sam-ui header">SAM UI Elements</h1>
+    <section id="intro" class="site-container">
+      <h1 class="sam title">SAM UI Elements</h1>
       <p>
         This site showcases a set of design standards and angular-based frontend 
         development components for building the upcoming <strong><em>SAM.gov</em>
         </strong> website.
       </p>
-      <a [routerLink]="['elements/button']" 
-        class="sam-ui primary button">
-        GET STARTED
-      </a>
+      <button [routerLink]="['elements/button']" 
+        class="sam primary button">
+        Get Started
+      </button>
     </section>
   </header>
-  <footer class="container">
-    <h2 class="sam-ui header" style="margin-top: 18.5px;">
+  <footer class="site-container">
+    <h2 class="sam title">
       Installation
     </h2>
     <code-example 
@@ -91,44 +72,19 @@ <h2 class="sam-ui header" style="margin-top: 18.5px;">
     <a [routerLink]="['overview/getting-started']">
       Read installation docs
     </a>
-    <h2 class="sam-ui header">
-      Pattern Examples
+    <h2 class="sam title">
+      Patterns
     </h2>
     <p>
-      Components and layout examples to help you quickly get started with 
+      Page and component patterns to help you quickly get started with 
       <strong><em>SAM-UI Elements</em></strong> and demonstrate best practices 
       for implementing it in <strong><em>SAM.gov</em></strong>.
     </p>
-    <a [routerLink]="['/patterns/v1/home']">
+    <a [routerLink]="['/patterns/latest/home']">
       View patterns
     </a>
   </footer>
 </main>
 
 
-<footer class="site-footer">
-  <nav class="container">
-    <ul>
-      <li>
-        <a [routerLink]="['overview/getting-started']">
-          Documentation
-        </a>
-      </li>
-      <li>
-        <a [routerLink]="['/patterns/v1/home']">
-          Patterns
-        </a>
-      </li>
-      <li>
-        <a href="https://github.helix.gsa.gov/GSA-IAE-APPS/sam-ui-elements">
-          SAM-UI Elements
-        </a>
-      </li>
-      <li>
-        <a href="https://github.helix.gsa.gov/GSA-IAE-APPS/web-standards-site">
-          SAM Web Design Standards
-        </a>
-      </li>
-    </ul>
-  </nav>
-</footer>
+<site-footer></site-footer>
diff --git a/src/app/site-components/footer/footer.component.ts b/src/app/site-components/footer/footer.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'site-footer',
+  templateUrl: 'footer.template.html',
+})
+export class SiteFooterComponent{}
diff --git a/src/app/site-components/footer/footer.template.html b/src/app/site-components/footer/footer.template.html
@@ -0,0 +1,21 @@
+<footer class="site-footer">
+  <nav class="site-container">
+    <ul>
+      <li>
+        <a [routerLink]="['/']">Home</a>
+      </li>
+      <li>
+        <a [routerLink]="['/patterns/latest/home']" routerLinkActive="active">Patterns</a>
+      </li>
+      <li>
+          <a [routerLink]="['/prototypes']" routerLinkActive="active">Prototypes</a>
+      </li>
+      <li>
+        <a [routerLink]="['/overview/getting-started']" routerLinkActive="active">Documentation</a>
+      </li>
+      <li>
+        <a [routerLink]="['/overview/contribute']" routerLinkActive="active">Contribute</a>
+      </li>
+    </ul>
+  </nav>
+</footer>
diff --git a/src/app/site-components/header/header.component.ts b/src/app/site-components/header/header.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'site-header',
+  templateUrl: 'header.template.html',
+})
+export class SiteHeaderComponent{}
diff --git a/src/app/site-components/header/header.template.html b/src/app/site-components/header/header.template.html
diff --git a/src/app/site-components/sitecomponents.module.ts b/src/app/site-components/sitecomponents.module.ts
@@ -1,18 +1,25 @@
 import { NgModule } from '@angular/core';
-
+import { RouterModule } from '@angular/router';
 import { ExampleComponent } from "./example/example.component";
 import { CodeExampleComponent } from "./example/code.component";
+import { SiteHeaderComponent } from "./header/header.component";
+import { SiteFooterComponent } from "./footer/footer.component";
 
 @NgModule({
   declarations: [
       ExampleComponent,
-      CodeExampleComponent
+      CodeExampleComponent,
+      SiteHeaderComponent,
+      SiteFooterComponent
   ],
   imports: [
+    RouterModule
   ],
   exports: [
     ExampleComponent,
-    CodeExampleComponent
+    CodeExampleComponent,
+    SiteHeaderComponent,
+    SiteFooterComponent
   ],
 })
 export class SiteComponentsModule { }