From 7bd69b75b9d11d05c1b999e2e38345268eec67be Mon Sep 17 00:00:00 2001
From: Jeff Smith <37851214+eljefe223@users.noreply.github.com>
Date: Wed, 20 May 2020 13:38:54 -0700
Subject: [PATCH] feat: adds density slider to marketing site (#3166)

* feat: adds density slider to marketing site

* ran prettier
---
 .../fast-frame/fast-frame.styles.ts           |  2 +-
 .../fast-frame/fast-frame.template.ts         | 35 +++++++++++++------
 .../app/components/fast-frame/fast-frame.ts   |  7 ++++
 3 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/sites/fast-website/src/app/components/fast-frame/fast-frame.styles.ts b/sites/fast-website/src/app/components/fast-frame/fast-frame.styles.ts
index dbca5f8991d..821c643bf83 100644
--- a/sites/fast-website/src/app/components/fast-frame/fast-frame.styles.ts
+++ b/sites/fast-website/src/app/components/fast-frame/fast-frame.styles.ts
@@ -22,7 +22,7 @@ export const FastFrameStyles = css`
     .wrapper {
         display: grid;
         grid-template-columns: 500px 1fr;
-        height: 500px;
+        min-height: 500px;
     }
 
     .content {
diff --git a/sites/fast-website/src/app/components/fast-frame/fast-frame.template.ts b/sites/fast-website/src/app/components/fast-frame/fast-frame.template.ts
index a16e99a97dc..dfb2a5e0401 100644
--- a/sites/fast-website/src/app/components/fast-frame/fast-frame.template.ts
+++ b/sites/fast-website/src/app/components/fast-frame/fast-frame.template.ts
@@ -14,11 +14,11 @@ export const FastFrameTemplate = html<FastFrame>`
     <template>
         <div class="wrapper">
             <fast-tabs orientation="vertical" id="myTab" activeId="TabTwo">
-                <fast-tab id="TabOne" title="Mode">${ContrastIcon}</fast-tab>
-                <fast-tab id="TabTwo" title="Color">${PaletteIcon}</fast-tab>
-                <fast-tab id="TabThree" title="Styles">${SwatchesIcon}</fast-tab>
-                <fast-tab id="TabFour" title="Density">${ScreenIcon}</fast-tab>
-                <fast-tab-panel id="TabPanelOne">
+                <fast-tab id="contrast-tab" title="Mode">${ContrastIcon}</fast-tab>
+                <fast-tab id="palette-tab" title="Color">${PaletteIcon}</fast-tab>
+                <fast-tab id="swatches-tab" title="Styles">${SwatchesIcon}</fast-tab>
+                <fast-tab id="density-tab" title="Density">${ScreenIcon}</fast-tab>
+                <fast-tab-panel id="contrast-tab-panel">
                     <fast-switch
                         checked="${x => x.darkMode}"
                         @change="${(x, c) => x.themeChange(c.event as MouseEvent)}"
@@ -26,7 +26,7 @@ export const FastFrameTemplate = html<FastFrame>`
                         Dark Mode
                     </fast-switch>
                 </fast-tab-panel>
-                <fast-tab-panel id="TabPanelTwo">
+                <fast-tab-panel id="palette-tab-panel">
                     <div class="content">
                         <h1>FAST FRAME COLORS</h1>
                         <h2>Pre-existing color you can customize.</h2>
@@ -75,11 +75,23 @@ export const FastFrameTemplate = html<FastFrame>`
                         </fast-radio-group>
                     </div>
                 </fast-tab-panel>
-                <fast-tab-panel id="TabPanelThree">
+                <fast-tab-panel id="swatches-tab-panel">
                     Tab three content. This is for testing.
                 </fast-tab-panel>
-                <fast-tab-panel id="TabPanelFour">
-                    Tab four content. This is for testing.
+                <fast-tab-panel id="density-tab-panel">
+                    <div class="content">
+                        <label for="density-slider">Density</label>
+                        <fast-slider
+                            id="density-slider"
+                            min="0"
+                            max="3"
+                            step="1"
+                            value="0"
+                            @change="${(x, c) =>
+                                x.densityChangeHandler(c.event as MouseEvent)}"
+                        >
+                        </fast-slider>
+                    </div>
                 </fast-tab-panel>
             </fast-tabs>
             <fast-design-system-provider
@@ -90,6 +102,7 @@ export const FastFrameTemplate = html<FastFrame>`
                         : StandardLuminance.LightMode}"
                 background-color="${x => x.backgroundColor}"
                 accent-base-color="${x => x.accentColor}"
+                density="${x => x.density}"
                 :accentPalette=${x => x.accentPalette}
             >
                 <fast-card>
@@ -150,11 +163,11 @@ export const FastFrameTemplate = html<FastFrame>`
                     <div class="control-container">
                         <fast-button appearance="accent">
                             Button
-                            <span slot="end">${DownloadIcon}</span>
+                            <span slot="start">${DownloadIcon}</span>
                         </fast-button>
                         <fast-button appearance="neutral">
                             Button
-                            <span slot="end">${PlayIcon}</span>
+                            <span slot="start">${PlayIcon}</span>
                         </fast-button>
                     </div>
                 </div>
diff --git a/sites/fast-website/src/app/components/fast-frame/fast-frame.ts b/sites/fast-website/src/app/components/fast-frame/fast-frame.ts
index fdbc5c3c2c8..f1315dbfd69 100644
--- a/sites/fast-website/src/app/components/fast-frame/fast-frame.ts
+++ b/sites/fast-website/src/app/components/fast-frame/fast-frame.ts
@@ -38,6 +38,9 @@ export class FastFrame extends FASTElement {
     @observable
     public accentPalette: string[];
 
+    @observable
+    public density: number = 0;
+
     public accentChangeHandler = (e: any): void => {
         const element: HTMLInputElement = e.target;
         if (element.checked) {
@@ -57,6 +60,10 @@ export class FastFrame extends FASTElement {
         }
     };
 
+    public densityChangeHandler = (e: any): void => {
+        this.density = e.target.value;
+    };
+
     public themeChange = (e: any): void => {
         this.darkMode = !this.darkMode;
         if (!this.darkMode) {