From 09aa0d4646b697e92a3e04f6bce95213d8f349d9 Mon Sep 17 00:00:00 2001
From: khamudom <khamu@microsoft.com>
Date: Mon, 11 May 2020 13:23:01 -0700
Subject: [PATCH] add slotted for nav items

---
 .../app/components/site-navigation/index.ts   |  2 +-
 .../site-navigation.template.ts               | 10 +---
 .../site-navigation/site-navigation.ts        | 16 +++++--
 sites/fast-website/src/public/index.html      | 48 +++++++++----------
 sites/fast-website/src/public/style.css       | 38 ++++++++-------
 5 files changed, 59 insertions(+), 55 deletions(-)

diff --git a/sites/fast-website/src/app/components/site-navigation/index.ts b/sites/fast-website/src/app/components/site-navigation/index.ts
index a9390904202..6228fcb8211 100644
--- a/sites/fast-website/src/app/components/site-navigation/index.ts
+++ b/sites/fast-website/src/app/components/site-navigation/index.ts
@@ -8,7 +8,7 @@ import { SiteNavigationStyles as styles } from "./site-navigation.styles";
     template,
     styles,
 })
-export class FASTSectionHeader extends SiteNavigation {}
+export class FASTSiteNavigation extends SiteNavigation {}
 export * from "./site-navigation.template";
 export * from "./site-navigation.styles";
 export * from "./site-navigation";
diff --git a/sites/fast-website/src/app/components/site-navigation/site-navigation.template.ts b/sites/fast-website/src/app/components/site-navigation/site-navigation.template.ts
index 6756932f4a5..2cf3a8aafe4 100644
--- a/sites/fast-website/src/app/components/site-navigation/site-navigation.template.ts
+++ b/sites/fast-website/src/app/components/site-navigation/site-navigation.template.ts
@@ -1,16 +1,10 @@
-import { html, repeat } from "@microsoft/fast-element";
+import { html, slotted } from "@microsoft/fast-element";
 import { SiteNavigation } from "./site-navigation";
 
 export const SiteNavigationTemplate = html<SiteNavigation>`
     <template>
         <nav>
-            <ul>
-                ${repeat(
-                    x => x.items,
-                    html` <li><fast-anchor>Component</fast-anchor></li> `
-                )}
-            </ul>
-            <slot></slot>
+            <slot ${slotted("items")}></slot>
         </nav>
     </template>
 `;
diff --git a/sites/fast-website/src/app/components/site-navigation/site-navigation.ts b/sites/fast-website/src/app/components/site-navigation/site-navigation.ts
index c63063fe0a6..5bd88a34cd8 100644
--- a/sites/fast-website/src/app/components/site-navigation/site-navigation.ts
+++ b/sites/fast-website/src/app/components/site-navigation/site-navigation.ts
@@ -1,9 +1,15 @@
-import { FASTElement, attr, observable } from "@microsoft/fast-element";
+import { FASTElement, observable } from "@microsoft/fast-element";
 
 export class SiteNavigation extends FASTElement {
-    @attr
-    public item: string;
-
     @observable
-    public items: string[] = [];
+    items: HTMLElement[];
+
+    public connectedCallback(): void {
+        super.connectedCallback();
+        this.items.forEach((item: any) => {
+            if (item instanceof HTMLElement) {
+                item.setAttribute("role", "listitem");
+            }
+        });
+    }
 }
diff --git a/sites/fast-website/src/public/index.html b/sites/fast-website/src/public/index.html
index bd723e1e46b..3f5cb30058d 100644
--- a/sites/fast-website/src/public/index.html
+++ b/sites/fast-website/src/public/index.html
@@ -11,15 +11,19 @@
       <div class="wrapper">
         <!-- header:start -->
         <header class="header">
-          <fast-anchor href="#" appearance="lightweight">Logo</fast-anchor>
-          <div class="header-link-group">
-            <fast-site-navigation>Component</fast-site-navigation>
-            <fast-anchor href="#" appearance="lightweight">Component</fast-anchor>
-            <fast-anchor href="#" appearance="lightweight">Integration</fast-anchor>
-            <fast-anchor href="#" appearance="lightweight">Documentation</fast-anchor>
-            <fast-anchor href="#" appearance="lightweight">Community</fast-anchor>
-          </div>
-          <fast-anchor href="#" appearance="lightweight">Github</fast-anchor>
+          <fast-anchor href="#" appearance="lightweight">FAST</fast-anchor>
+          <fast-site-navigation>
+            <fast-anchor class="header-navigation-item" appearance="lightweight" href="#">Components</fast-anchor>
+            <fast-anchor class="header-navigation-item" appearance="lightweight" href="#">Integration</fast-anchor>
+            <fast-anchor class="header-navigation-item" appearance="lightweight" href="#">Documentation</fast-anchor>
+            <fast-anchor class="header-navigation-item" appearance="lightweight" href="#">Community</fast-anchor>
+          </fast-site-navigation>
+          <fast-anchor href="#" appearance="lightweight">
+            Github
+            <svg width="19" height="20" viewBox="0 0 19 20" xmlns="http://www.w3.org/2000/svg">
+              <path d="M6.71154 17.0776C2.09615 18.4906 2.09615 14.7226 0.25 14.2517L6.71154 17.0776ZM13.1731 19.9036V16.2581C13.2077 15.8089 13.1482 15.3574 12.9986 14.9335C12.849 14.5096 12.6127 14.123 12.3054 13.7995C15.2038 13.4698 18.25 12.3489 18.25 7.20563C18.2498 5.89046 17.754 4.62572 16.8654 3.67319C17.2862 2.52257 17.2564 1.25074 16.7823 0.121918C16.7823 0.121918 15.6931 -0.207776 13.1731 1.51605C11.0574 0.930913 8.82722 0.930913 6.71154 1.51605C4.19154 -0.207776 3.10231 0.121918 3.10231 0.121918C2.62819 1.25074 2.59844 2.52257 3.01923 3.67319C2.12396 4.63279 1.62771 5.90895 1.63462 7.23389C1.63462 12.3394 4.68077 13.4604 7.57923 13.8278C7.27554 14.148 7.04132 14.5299 6.89182 14.9486C6.74233 15.3674 6.6809 15.8135 6.71154 16.2581V19.9036" />
+            </svg>
+          </fast-anchor>
         </header>
         <!-- header:end -->
 
@@ -107,22 +111,16 @@
         <!-- community:end -->
 
         <!-- footer:start -->
-          <footer class="footer">
-            <fast-divider></fast-divider>
-            <fast-anchor href="#" appearance="lightweight">Logo</fast-anchor>
-            <div class="footer-links">
-                <div class="footer-link-group">
-                    <span>License</span>
-                    <span>Privacy</span>
-                    <span>Terms of use</span>
-                    <span>&copy; 2020 Microsoft</span>
-                </div>
-                <div class="footer-link-group">
-                  <fast-anchor href="#" appearance="lightweight">Medium</fast-anchor>
-                  <fast-anchor href="#" appearance="lightweight">Github</fast-anchor>
-                </div>
-            </div>
-        </footer>
+          <fast-divider class="divider"></fast-divider>
+          <div class="footer">
+            <fast-site-navigation>
+              <fast-anchor class="footer-navigation-item" appearance="lightweight" href="#">License</fast-anchor>
+              <fast-anchor class="footer-navigation-item" appearance="lightweight" href="#">Privacy & Cookies</fast-anchor>
+              <fast-anchor class="footer-navigation-item" appearance="lightweight" href="#">Terms of Use</fast-anchor>
+              <fast-anchor class="footer-navigation-item" appearance="lightweight" href="#">&copy; 2020 Microsoft</fast-anchor>
+            </fast-site-navigation>
+            <fast-anchor href="#" appearance="lightweight">FAST</fast-anchor>
+          </div>
         <!-- footer:end -->
       </div>
     </fast-design-system-provider>
diff --git a/sites/fast-website/src/public/style.css b/sites/fast-website/src/public/style.css
index 272878184fa..a89e36aa260 100644
--- a/sites/fast-website/src/public/style.css
+++ b/sites/fast-website/src/public/style.css
@@ -16,6 +16,10 @@ body {
   height: 80px;
 }
 
+.header-navigation-item {
+  margin: 0 30px;
+}
+
 .section {
   grid-column: 2;
 }
@@ -36,21 +40,6 @@ body {
   background-color: #3A3A3A;
 }
 
-.footer {
-  grid-column: 2;
-  height: 240px;
-  margin-top: 100px
-}
-
-.footer-links {
-  display: flex;
-  justify-content: space-between;
-}
-
-.footer-copyright-group {
-  display: flex;
-}
-
 .section-badge {
   font-weight: bold;
 }
@@ -65,4 +54,21 @@ body {
   font-size: 46px;
   line-height: 56px;
   margin: 0;
-}
\ No newline at end of file
+}
+
+.divider {
+  grid-column: 2;
+  margin-top: 100px;
+  margin-bottom: 60px;
+}
+
+.footer {
+  grid-column: 2;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 84px;
+}
+
+.footer-navigation-item {
+  margin-right: 50px;
+}