feat: adds density slider to marketing site (#3166)

* feat: adds density slider to marketing site * ran prettier
microsoft · Jun 11, 2020 · 95f2368 · 95f2368
1 parent 3f0a771
commit 95f2368
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 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
@@ -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
@@ -14,19 +14,19 @@ 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)}"
                     >
                         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
@@ -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) {