From bbef51359d9d035ab1ac892f160521c90e4650d2 Mon Sep 17 00:00:00 2001
From: Michael Benson <v-mbenso@microsoft.com>
Date: Fri, 5 Jun 2020 14:21:53 -0700
Subject: [PATCH 1/7] implement template select for reusability

---
 .../content-placement-container.template.ts   | 74 ++-----------------
 .../content-placement-container.ts            | 29 +++++++-
 .../templates/community.template.ts           | 12 +++
 .../templates/feature.template.ts             | 15 ++++
 .../templates/framework.template.ts           |  8 ++
 5 files changed, 66 insertions(+), 72 deletions(-)
 create mode 100644 sites/fast-website/src/app/components/content-placement-container/templates/community.template.ts
 create mode 100644 sites/fast-website/src/app/components/content-placement-container/templates/feature.template.ts
 create mode 100644 sites/fast-website/src/app/components/content-placement-container/templates/framework.template.ts

diff --git a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.template.ts b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.template.ts
index ac1f0ca662a..d9ce87f4933 100644
--- a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.template.ts
+++ b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.template.ts
@@ -1,73 +1,9 @@
-import { html, repeat, when } from "@microsoft/fast-element";
+import { html, repeat } from "@microsoft/fast-element";
 import { ContentPlacementContainer } from "./content-placement-container";
+import { SiteContentPlacement } from "../content-placement";
+
+const template = html<SiteContentPlacement>` ${(x, c) => c.parent.selectTemplate()} `;
 
 export const ContentPlacementContainerTemplate = html<ContentPlacementContainer>`
-    ${when(
-        x => x.section === "framework",
-        html<ContentPlacementContainer>`
-            ${repeat(
-                x => x.frameworkContentPlacementData,
-                html`
-                    <site-content-placement class="framework_ContentPlacement">
-                        <h3>
-                            ${x => (x.headerSubscript ? x.header + " " : x.header)}
-                            <small class="headerSubscript"
-                                >${x => x.headerSubscript}</small
-                            >
-                        </h3>
-                        <p slot="body">${x => x.body}</p>
-                    </site-content-placement>
-                `
-            )}
-        `
-    )}
-    ${when(
-        x => x.section === "feature",
-        html<ContentPlacementContainer>`
-            <site-card-section>
-                ${repeat(
-                    x => x.featureCardData,
-                    html`
-                        <site-feature-card>
-                            <h4>${x => x.header}</h4>
-                            <p slot="body">${x => x.body}</p>
-                            <fast-anchor
-                                slot="footer"
-                                href=${x => x.githubLink}
-                                appearance="lightweight"
-                                >View Github</fast-anchor
-                            >
-                            <fast-anchor
-                                slot="footer"
-                                href=${x => x.documentationLink}
-                                appearance="lightweight"
-                                >Read Documentation</fast-anchor
-                            >
-                        </site-feature-card>
-                    `
-                )}
-            </site-card-section>
-        `
-    )}
-    ${when(
-        x => x.section === "community",
-        html<ContentPlacementContainer>`
-            ${repeat(
-                x => x.communityContentPlacementData,
-                html`
-                    <site-content-placement icon>
-                        <div slot="icon" :innerHTML=${x => x.icon}></div>
-                        <h3>${x => x.header}</h3>
-                        <p slot="body">${x => x.body}</p>
-                        <fast-anchor
-                            slot="action"
-                            appearance="lightweight"
-                            href=${x => x.actionLink}
-                            >${x => x.actionText}</fast-anchor
-                        >
-                    </site-content-placement>
-                `
-            )}
-        `
-    )}
+    ${repeat(x => x.selectData(), template)}
 `;
diff --git a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.ts b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.ts
index 765cad548e1..f1b4a407782 100644
--- a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.ts
+++ b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.ts
@@ -8,13 +8,36 @@ import {
     frameworkContentPlacementData,
 } from "../../data/framework.data";
 import { FeatureCardData, featureCardData } from "../../data/feature.data";
+import frameworkTemplate from "./templates/framework.template";
+import featureTemplate from "./templates/feature.template";
+import communityTemplate from "./templates/community.template";
 
 export class ContentPlacementContainer extends FASTElement {
     @attr section: string;
 
-    communityContentPlacementData: CommunityContentPlacementData[] = communityContentPlacementData.filter(
+    frameworkData: FrameworkContentPlacementData[] = frameworkContentPlacementData;
+    featureData: FeatureCardData[] = featureCardData;
+    communityData: CommunityContentPlacementData[] = communityContentPlacementData.filter(
         x => x.header !== "Medium"
     );
-    frameworkContentPlacementData: FrameworkContentPlacementData[] = frameworkContentPlacementData;
-    featureCardData: FeatureCardData[] = featureCardData;
+
+    dataByType = {
+        framework: this.frameworkData,
+        feature: this.featureData,
+        community: this.communityData,
+    };
+
+    templateByType = {
+        framework: frameworkTemplate,
+        feature: featureTemplate,
+        community: communityTemplate,
+    };
+
+    selectTemplate() {
+        return this.templateByType[this.section];
+    }
+
+    selectData() {
+        return this.dataByType[this.section];
+    }
 }
diff --git a/sites/fast-website/src/app/components/content-placement-container/templates/community.template.ts b/sites/fast-website/src/app/components/content-placement-container/templates/community.template.ts
new file mode 100644
index 00000000000..fb7ffec7f2b
--- /dev/null
+++ b/sites/fast-website/src/app/components/content-placement-container/templates/community.template.ts
@@ -0,0 +1,12 @@
+import { html } from "@microsoft/fast-element";
+
+const communityTemplate = html`<site-content-placement icon>
+    <div slot="icon" :innerHTML=${x => x.icon}></div>
+    <h3>${x => x.header}</h3>
+    <p slot="body">${x => x.body}</p>
+    <fast-anchor slot="action" appearance="lightweight" href=${x => x.actionLink}
+        >${x => x.actionText}</fast-anchor
+    >
+</site-content-placement> `;
+
+export default communityTemplate;
diff --git a/sites/fast-website/src/app/components/content-placement-container/templates/feature.template.ts b/sites/fast-website/src/app/components/content-placement-container/templates/feature.template.ts
new file mode 100644
index 00000000000..a09f485b468
--- /dev/null
+++ b/sites/fast-website/src/app/components/content-placement-container/templates/feature.template.ts
@@ -0,0 +1,15 @@
+import { html } from "@microsoft/fast-element";
+
+const featureTemplate = html`<site-feature-card>
+    <div>${x => x.item}</div>
+    <h4>${x => x.header}</h4>
+    <p slot="body">${x => x.body}</p>
+    <fast-anchor slot="footer" href=${x => x.githubLink} appearance="lightweight"
+        >View Github</fast-anchor
+    >
+    <fast-anchor slot="footer" href=${x => x.documentationLink} appearance="lightweight"
+        >Read Documentation</fast-anchor
+    >
+</site-feature-card> `;
+
+export default featureTemplate;
diff --git a/sites/fast-website/src/app/components/content-placement-container/templates/framework.template.ts b/sites/fast-website/src/app/components/content-placement-container/templates/framework.template.ts
new file mode 100644
index 00000000000..8a007140c54
--- /dev/null
+++ b/sites/fast-website/src/app/components/content-placement-container/templates/framework.template.ts
@@ -0,0 +1,8 @@
+import { html } from "@microsoft/fast-element";
+
+const frameworkTemplate = html`<site-content-placement class="framework_ContentPlacement">
+    <h3>${x => x.header}</h3>
+    <p slot="body">${x => x.body}</p>
+</site-content-placement>`;
+
+export default frameworkTemplate;

From a6863b53c33bdb4fdf34481fdf129ac8fe7b618d Mon Sep 17 00:00:00 2001
From: Michael Benson <v-mbenso@microsoft.com>
Date: Tue, 9 Jun 2020 09:19:20 -0700
Subject: [PATCH 2/7] fix feature card columns

---
 .../content-placement-container.styles.ts     | 21 +++++++++++++++++++
 .../feature-card/feature-card.styles.ts       |  1 +
 2 files changed, 22 insertions(+)

diff --git a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
index 7d355a7d1e5..ce23b64ac19 100644
--- a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
+++ b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
@@ -21,6 +21,13 @@ export const ContentPlacementContainerStyles = css`
         overflow: hidden;
     }
 
+    :host([section="feature"]) {
+        --flow: column;
+        grid-template-rows: repeat(4, min-content);
+        grid-auto-flow: var(--flow);
+        justify-content: center;
+    }
+
     :host([section="community"]) {
         grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
     }
@@ -56,6 +63,7 @@ export const ContentPlacementContainerStyles = css`
 
     :host([section="feature"]) site-feature-card:hover {
         color: var(--neutral-foreground-rest);
+        background: var(--neutral-fill-focus);
     }
 
     :host([section="community"]) site-content-placement:hover {
@@ -87,6 +95,19 @@ export const ContentPlacementContainerStyles = css`
         font-size: var(--type-ramp-plus-2-font-size);
     }
 
+    site-feature-card:not(:nth-of-type(4n)):hover + site-feature-card::before {
+        opacity: 0;
+    }
+
+    @media screen and (max-width: 1330px) {
+        :host([section="feature"]) {
+            --flow: row;
+        }
+        site-feature-card:hover + site-feature-card::before {
+            opacity: 0;
+        }
+    }
+
     @media screen and (max-width: 750px) {
         :host([section="community"]) {
             grid-template-columns: unset;
diff --git a/sites/fast-website/src/app/components/feature-card/feature-card.styles.ts b/sites/fast-website/src/app/components/feature-card/feature-card.styles.ts
index 42da335cfd0..838a8ce3891 100644
--- a/sites/fast-website/src/app/components/feature-card/feature-card.styles.ts
+++ b/sites/fast-website/src/app/components/feature-card/feature-card.styles.ts
@@ -11,6 +11,7 @@ export const FeatureCardStyles = css`
         color: inherit;
         box-sizing: border-box;
         padding: calc(var(--design-unit) * 5px);
+        border-radius: calc(var(--corner-radius) * 1px);
         box-shadow: unset;
         position: relative;
     }

From 15a8454031cc3411bbeb224851b4e4a5ee9dd5ba Mon Sep 17 00:00:00 2001
From: Michael Benson <v-mbenso@microsoft.com>
Date: Tue, 9 Jun 2020 10:15:42 -0700
Subject: [PATCH 3/7] fix feature counter number placement

---
 .../content-placement-container.styles.ts                     | 4 +++-
 .../content-placement-container/templates/feature.template.ts | 1 -
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
index ce23b64ac19..ffa0df23214 100644
--- a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
+++ b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
@@ -45,6 +45,7 @@ export const ContentPlacementContainerStyles = css`
         display: block;
         content: counter(feature-counter, decimal-leading-zero);
         font-size: var(--type-ramp-base-font-size);
+        margin-bottom: calc(var(--design-unit) * 2px);
     }
 
     :host([section="feature"]) site-feature-card:hover :first-child::before {
@@ -64,12 +65,13 @@ export const ContentPlacementContainerStyles = css`
     :host([section="feature"]) site-feature-card:hover {
         color: var(--neutral-foreground-rest);
         background: var(--neutral-fill-focus);
+        cursor: pointer;
     }
 
     :host([section="community"]) site-content-placement:hover {
         --elevation: 4;
         cursor: pointer;
-        background: var(--neutral-fill-active);
+        background: var(--neutral-fill-focus);
         border-radius: calc(var(--corner-radius) * 1px);
         color: currentColor;
         ${elevation}
diff --git a/sites/fast-website/src/app/components/content-placement-container/templates/feature.template.ts b/sites/fast-website/src/app/components/content-placement-container/templates/feature.template.ts
index a09f485b468..b303c9918f0 100644
--- a/sites/fast-website/src/app/components/content-placement-container/templates/feature.template.ts
+++ b/sites/fast-website/src/app/components/content-placement-container/templates/feature.template.ts
@@ -1,7 +1,6 @@
 import { html } from "@microsoft/fast-element";
 
 const featureTemplate = html`<site-feature-card>
-    <div>${x => x.item}</div>
     <h4>${x => x.header}</h4>
     <p slot="body">${x => x.body}</p>
     <fast-anchor slot="footer" href=${x => x.githubLink} appearance="lightweight"

From 0928816a0f8f3e2f0355470c7aa1e0cd5eb59b94 Mon Sep 17 00:00:00 2001
From: Michael Benson <v-mbenso@microsoft.com>
Date: Tue, 9 Jun 2020 12:16:27 -0700
Subject: [PATCH 4/7] fix hover styling in feature section

---
 .../content-placement-container.styles.ts                  | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
index ffa0df23214..69c6a0cf829 100644
--- a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
+++ b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
@@ -56,16 +56,21 @@ export const ContentPlacementContainerStyles = css`
 
     /* This creates the color, background, and elevation changes on hover */
 
-    :host([section="feature"]:hover) site-card-section,
+    :host([section="feature"]:hover),
     :host([section="community"]:hover) site-content-placement,
     :host([section="community"]:hover) site-content-placement ::part(content) {
         color: var(--neutral-foreground-hint);
     }
 
+    :host([section="feature"]:hover) site-feature-card {
+        filter: saturate(0);
+    }
+
     :host([section="feature"]) site-feature-card:hover {
         color: var(--neutral-foreground-rest);
         background: var(--neutral-fill-focus);
         cursor: pointer;
+        filter: saturate(1);
     }
 
     :host([section="community"]) site-content-placement:hover {

From 69ad8b18a59d9fc6a78e1a7cc3224c58285d4c61 Mon Sep 17 00:00:00 2001
From: Michael Benson <v-mbenso@microsoft.com>
Date: Tue, 9 Jun 2020 12:38:45 -0700
Subject: [PATCH 5/7] update framework template

---
 .../templates/framework.template.ts                          | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/sites/fast-website/src/app/components/content-placement-container/templates/framework.template.ts b/sites/fast-website/src/app/components/content-placement-container/templates/framework.template.ts
index 8a007140c54..c2fc008976b 100644
--- a/sites/fast-website/src/app/components/content-placement-container/templates/framework.template.ts
+++ b/sites/fast-website/src/app/components/content-placement-container/templates/framework.template.ts
@@ -1,7 +1,10 @@
 import { html } from "@microsoft/fast-element";
 
 const frameworkTemplate = html`<site-content-placement class="framework_ContentPlacement">
-    <h3>${x => x.header}</h3>
+    <h3>
+        ${x => (x.headerSubscript ? x.header + " " : x.header)}
+        <small class="headerSubscript">${x => x.headerSubscript}</small>
+    </h3>
     <p slot="body">${x => x.body}</p>
 </site-content-placement>`;
 

From fe5ca905ed8d08c4fb2b163e4b36bc5c791746ac Mon Sep 17 00:00:00 2001
From: Michael Benson <v-mbenso@microsoft.com>
Date: Tue, 9 Jun 2020 16:04:01 -0700
Subject: [PATCH 6/7] Update design system imports

---
 .../content-placement-container.styles.ts            | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
index 69c6a0cf829..903d1825039 100644
--- a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
+++ b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
@@ -2,11 +2,10 @@ import { css } from "@microsoft/fast-element";
 import { display } from "@microsoft/fast-foundation";
 import { elevation } from "@microsoft/fast-components/dist/esm/styles/elevation.js";
 import {
-    neutralForegroundHintBehavior,
-    neutralForegroundHoverBehavior,
-    neutralOutlineRestBehavior,
-    neutralFillActiveBehavior,
     accentForegroundRestBehavior,
+    neutralFillFocusBehavior,
+    neutralForegroundHintBehavior,
+    neutralForegroundRestBehavior,
 } from "@microsoft/fast-components";
 
 export const ContentPlacementContainerStyles = css`
@@ -133,8 +132,7 @@ export const ContentPlacementContainerStyles = css`
     }
 `.withBehaviors(
     accentForegroundRestBehavior,
+    neutralFillFocusBehavior,
     neutralForegroundHintBehavior,
-    neutralForegroundHoverBehavior,
-    neutralOutlineRestBehavior,
-    neutralFillActiveBehavior
+    neutralForegroundRestBehavior
 );

From 1614c00a3cc70b40a5d29a45aa0144e3575aa34f Mon Sep 17 00:00:00 2001
From: Michael Benson <v-mbenso@microsoft.com>
Date: Tue, 9 Jun 2020 16:17:44 -0700
Subject: [PATCH 7/7] Consolidate css

---
 .../content-placement-container.styles.ts                     | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
index 903d1825039..5f140c98ff4 100644
--- a/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
+++ b/sites/fast-website/src/app/components/content-placement-container/content-placement-container.styles.ts
@@ -25,6 +25,7 @@ export const ContentPlacementContainerStyles = css`
         grid-template-rows: repeat(4, min-content);
         grid-auto-flow: var(--flow);
         justify-content: center;
+        counter-reset: feature-counter;
     }
 
     :host([section="community"]) {
@@ -32,9 +33,6 @@ export const ContentPlacementContainerStyles = css`
     }
 
     /* this creates the numbering for feature*/
-    :host([section="feature"]) {
-        counter-reset: feature-counter;
-    }
 
     :host([section="feature"]) site-feature-card {
         counter-increment: feature-counter;