chore: refactor repeat select template by section (#3259)

* implement template select for reusability * fix feature card columns * fix feature counter number placement * fix hover styling in feature section * update framework template * Update design system imports * Consolidate css Co-authored-by: Michael Benson <[email protected]>
microsoft · Jun 10, 2020 · 4e30a98 · 4e30a98
1 parent ebdade6
commit 4e30a98
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 84 deletions.
diff --git a/...site/src/app/components/content-placement-container/content-placement-container.styles.ts b/...site/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`
@@ -21,14 +20,19 @@ 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;
+        counter-reset: feature-counter;
+    }
+
     :host([section="community"]) {
         grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
     }
 
     /* this creates the numbering for feature*/
-    :host([section="feature"]) {
-        counter-reset: feature-counter;
-    }
 
     :host([section="feature"]) site-feature-card {
         counter-increment: feature-counter;
@@ -38,6 +42,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 {
@@ -48,20 +53,27 @@ 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 {
         --elevation: 4;
         cursor: pointer;
-        background: var(--neutral-fill-active);
+        background: var(--neutral-fill-focus);
         border-radius: calc(var(--corner-radius) * 1px);
         color: currentColor;
         ${elevation}
@@ -87,6 +99,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;
@@ -105,8 +130,7 @@ export const ContentPlacementContainerStyles = css`
     }
 `.withBehaviors(
     accentForegroundRestBehavior,
+    neutralFillFocusBehavior,
     neutralForegroundHintBehavior,
-    neutralForegroundHoverBehavior,
-    neutralOutlineRestBehavior,
-    neutralFillActiveBehavior
+    neutralForegroundRestBehavior
 );
diff --git a/...te/src/app/components/content-placement-container/content-placement-container.template.ts b/...te/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/...ast-website/src/app/components/content-placement-container/content-placement-container.ts b/...ast-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/...st-website/src/app/components/content-placement-container/templates/community.template.ts b/...st-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/...fast-website/src/app/components/content-placement-container/templates/feature.template.ts b/...fast-website/src/app/components/content-placement-container/templates/feature.template.ts
@@ -0,0 +1,14 @@
+import { html } from "@microsoft/fast-element";
+
+const featureTemplate = 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> `;
+
+export default featureTemplate;
diff --git a/...st-website/src/app/components/content-placement-container/templates/framework.template.ts b/...st-website/src/app/components/content-placement-container/templates/framework.template.ts
@@ -0,0 +1,11 @@
+import { html } from "@microsoft/fast-element";
+
+const frameworkTemplate = 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>`;
+
+export default frameworkTemplate;
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
@@ -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;
     }