fix: gets feature branch back to a working state (#3153)

* intial setup * more work * fremoved import * refactored repeat * updated refrences after rebase, fixed styles * revert fast component chnage
microsoft · May 18, 2020 · 939fac5 · 939fac5
1 parent afedd59
commit 939fac5
Show file tree

Hide file tree

Showing 17 changed files with 72 additions and 68 deletions.
diff --git a/sites/fast-website/package.json b/sites/fast-website/package.json
@@ -7,7 +7,6 @@
   "license": "MIT",
   "devDependencies": {
     "@microsoft/fast-components": "^0.10.1",
-    "@microsoft/fast-element": "^0.8.1",
     "babel-core": "^6.26.3",
     "babel-loader": "^8.1.0",
     "babel-preset-env": "^1.7.0",
@@ -23,6 +22,11 @@
     "webpack-dev-server": "^3.10.3",
     "webpack-merge": "^4.2.2"
   },
+  "dependencies": {
+    "@microsoft/fast-element": "^0.8.1",
+    "@microsoft/fast-foundation": "^0.0.1",
+    "@microsoft/fast-web-utilities": "^4.4.5"
+  },
   "scripts": {
     "start": "webpack-dev-server --config=./webpack.dev.js --history-api-fallback --progress",
     "build": "webpack --config=./webpack.prod.js",

diff --git a/sites/fast-website/src/app/components/card-section/card-section.styles.ts b/sites/fast-website/src/app/components/card-section/card-section.styles.ts
@@ -1,5 +1,5 @@
 import { css } from "@microsoft/fast-element";
-import { display } from "@microsoft/fast-components";
+import { display } from "@microsoft/fast-foundation";
 
 export const CardSectionStyles = css`
     :host {

diff --git a/sites/fast-website/src/app/components/color-swatch/color-swatch.styles.ts b/sites/fast-website/src/app/components/color-swatch/color-swatch.styles.ts
@@ -1,16 +1,18 @@
 import { css } from "@microsoft/fast-element";
 import {
-    display,
-    heightNumber,
     neutralFillInputHoverBehavior,
     neutralFillInputRestBehavior,
     neutralOutlineHoverBehavior,
     neutralOutlineRestBehavior,
+} from "@microsoft/fast-components";
+import { heightNumber } from "@microsoft/fast-components/dist/styles/size";
+import { SystemColors } from "@microsoft/fast-web-utilities";
+import {
+    display,
     forcedColorsStylesheetBehavior,
-    SystemColors,
     focusVisible,
     disabledCursor,
-} from "@microsoft/fast-components";
+} from "@microsoft/fast-foundation";
 import { neutralForegroundRestBehavior } from "@microsoft/fast-components";
 
 export const ColorSwatchStyles = css`

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
@@ -1,5 +1,5 @@
 import { css } from "@microsoft/fast-element";
-import { display } from "@microsoft/fast-components";
+import { display } from "@microsoft/fast-foundation";
 
 export const ContentPlacementContainerStyles = css`
     ${display("block")}:host {

diff --git a/sites/fast-website/src/app/components/content-placement/content-placement.styles.ts b/sites/fast-website/src/app/components/content-placement/content-placement.styles.ts
@@ -1,5 +1,5 @@
 import { css } from "@microsoft/fast-element";
-import { display } from "@microsoft/fast-components";
+import { display } from "@microsoft/fast-foundation";
 
 export const ContentPlacementStyles = css`
     ${display("block")} :host {

diff --git a/sites/fast-website/src/app/components/design-system-provider/index.ts b/sites/fast-website/src/app/components/design-system-provider/index.ts
diff --git a/.../fast-website/src/app/components/design-system-provider/website-design-system-provider.ts b/.../fast-website/src/app/components/design-system-provider/website-design-system-provider.ts
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
@@ -1,5 +1,5 @@
 import { css } from "@microsoft/fast-element";
-import { display } from "@microsoft/fast-components";
+import { display } from "@microsoft/fast-foundation";
 import {
     accentFillRestBehavior,
     accentForegroundCutRestBehavior,
@@ -21,7 +21,7 @@ export const FastFrameStyles = css`
 
     .wrapper {
         display: grid;
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: 500px 1fr;
         height: 500px;
     }
 
@@ -35,11 +35,15 @@ export const FastFrameStyles = css`
     .preview {
         display: grid;
         grid-gap: 40px;
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: 280px 1fr;
         padding: 40px;
         background: var(--background-color);
     }
 
+    fast-card {
+        width: auto;
+    }
+
     .image-container {
         /** Temp background */
         background: #c8c8c8;
@@ -84,8 +88,7 @@ export const FastFrameStyles = css`
     }
 
     .control-container-column {
-        display: flex;
-        flex-flow: row wrap;
+        display: grid;
     }
 
     .control-container-grid {
@@ -141,10 +144,6 @@ export const FastFrameStyles = css`
     fast-slider {
         min-width: unset;
     }
-
-    fast-button {
-        display: contents;
-    }
 `.withBehaviors(
     accentFillRestBehavior,
     accentForegroundCutRestBehavior,

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
@@ -1,6 +1,8 @@
 import { html, repeat } from "@microsoft/fast-element";
 import { FastFrame } from "./fast-frame";
 import { StandardLuminance } from "@microsoft/fast-components-styles-msft";
+import { accentPalette } from "@microsoft/fast-components/dist/fast-design-system";
+import { FASTRadio } from "@microsoft/fast-components";
 
 export const FastFrameTemplate = html<FastFrame>`
     <template>
@@ -80,28 +82,41 @@ export const FastFrameTemplate = html<FastFrame>`
                             Ultrices nibh nunc vestibulum fames. At lacus nunc lacus eget
                             neque.
                         </p>
-                        <fast-radio-group name="background color" @change="${(x, c) =>
-                            x.backgroundChangeHandler(c.event as MouseEvent)}>
+                        <fast-radio-group 
+                            value="${x => x.previewBackgroundPalette[0]}"
+                            name="background color"
+                            @change="${(x, c) =>
+                                x.backgroundChangeHandler(c.event as MouseEvent)}"
+                        >
                             <label slot="label">Background color</label>
                             ${repeat(
-                                x => x.backgroundPalette,
+                                x => x.previewBackgroundPalette,
+
                                 html<string>`
                                     <site-color-swatch
                                         value="${x => x}"
                                         background-color="${x => x}"
+                                        checked="${(x, c) =>
+                                            x === c.parent.previewBackgroundPalette[0]}"
                                     ></site-color-swatch>
                                 `
                             )}
                         </fast-radio-group>
-                        <fast-radio-group name="accent color" @change="${(x, c) =>
-                            x.accentChangeHandler(c.event as MouseEvent)}>
+                        <fast-radio-group
+                            value="${x => x.previewAccentPalette[0]}"
+                            name="accent color"
+                            @change="${(x, c) =>
+                                x.accentChangeHandler(c.event as MouseEvent)}"
+                        >
                             <label slot="label">Accent color</label>
                             ${repeat(
-                                x => x.accentPalette,
+                                (x, c) => x.previewAccentPalette,
                                 html<string>`
                                     <site-color-swatch
                                         value="${x => x}"
                                         background-color="${x => x}"
+                                        checked="${(x, c) =>
+                                            x === c.parent.previewAccentPalette[0]}"
                                     ></site-color-swatch>
                                 `
                             )}
@@ -115,15 +130,15 @@ export const FastFrameTemplate = html<FastFrame>`
                     Tab four content. This is for testing.
                 </fast-tab-panel>
             </fast-tabs>
-            <website-design-system-provider
-                use-defaults
+            <fast-design-system-provider
                 class="preview"
                 base-layer-luminance="${x =>
                     x.darkMode
                         ? StandardLuminance.DarkMode
                         : StandardLuminance.LightMode}"
                 background-color="${x => x.backgroundColor}"
                 accent-base-color="${x => x.accentColor}"
+                :accentPalette=${x => x.accentPalette}
             >
                 <fast-card>
                     <div class="image-container">
@@ -237,7 +252,7 @@ export const FastFrameTemplate = html<FastFrame>`
                         </fast-button>
                     </div>
                 </div>
-            </website-design-system-provider>
+            </fast-design-system-provider>
         </div>
     </template>
 `;
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
@@ -1,6 +1,6 @@
 import { FASTElement, attr, observable } from "@microsoft/fast-element";
-import { FASTRadio } from "@microsoft/fast-components";
-import { SiteColorSwatch } from "../color-swatch";
+import { createColorPalette } from "@microsoft/fast-components";
+import { parseColor, ColorRGBA64 } from "@microsoft/fast-colors";
 
 export class FastFrame extends FASTElement {
     @attr({ attribute: "accent-color" })
@@ -13,7 +13,7 @@ export class FastFrame extends FASTElement {
     public darkMode: boolean = true;
 
     @observable
-    public backgroundPalette: string[] = [
+    public previewBackgroundPalette: string[] = [
         "#1F1F1F",
         "#2B2B2B",
         "#333333",
@@ -22,30 +22,36 @@ export class FastFrame extends FASTElement {
     ];
 
     @observable
-    public accentPalette: string[] = [
+    public previewAccentPalette: string[] = [
         "#F33378",
         "#F34733",
         "#10A7B5",
         "#109B82",
         "#E1A054",
     ];
 
-    private darkPallette: string[] = this.backgroundPalette;
+    private darkPallette: string[] = this.previewBackgroundPalette;
 
-    private lastSelectedIndex: number = 0;
+    @observable
+    public lastSelectedIndex: number = 0;
+
+    @observable
+    public accentPalette: string[];
 
     public accentChangeHandler = (e: any): void => {
         const element: HTMLInputElement = e.target;
         if (element.checked) {
             this.accentColor = e.target.value;
+            const parsedColor = parseColor(this.accentColor);
+            this.accentPalette = createColorPalette(parsedColor as ColorRGBA64);
         }
     };
 
     public backgroundChangeHandler = (e: any): void => {
         const element: HTMLInputElement = e.target;
         if (element.checked) {
             this.backgroundColor = e.target.value;
-            this.lastSelectedIndex = Array.from(this.backgroundPalette).indexOf(
+            this.lastSelectedIndex = Array.from(this.previewBackgroundPalette).indexOf(
                 e.target.value
             );
         }
@@ -54,16 +60,16 @@ export class FastFrame extends FASTElement {
     public themeChange = (e: any): void => {
         this.darkMode = !this.darkMode;
         if (!this.darkMode) {
-            this.backgroundPalette = [
+            this.previewBackgroundPalette = [
                 "#FFFFFF",
                 "#F0F0F0",
                 "#DEDEDE",
                 "#D6D6D6",
                 "#C4C4C4",
             ];
         } else {
-            this.backgroundPalette = this.darkPallette;
+            this.previewBackgroundPalette = this.darkPallette;
         }
-        this.backgroundColor = this.backgroundPalette[this.lastSelectedIndex];
+        this.backgroundColor = this.previewBackgroundPalette[this.lastSelectedIndex];
     };
 }
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
@@ -1,5 +1,6 @@
 import { css } from "@microsoft/fast-element";
-import { display, neutralForegroundRestBehavior } from "@microsoft/fast-components";
+import { neutralForegroundRestBehavior } from "@microsoft/fast-components";
+import { display } from "@microsoft/fast-foundation";
 
 export const FeatureCardStyles = css`
     ${display("grid")} :host {

diff --git a/sites/fast-website/src/app/components/index.ts b/sites/fast-website/src/app/components/index.ts
@@ -1,4 +1,3 @@
-export { WebsiteDesignSystemProvider } from "./design-system-provider";
 export { SiteColorSwatch } from "./color-swatch";
 export { SiteSectionHeader } from "./section-header";
 export { FastFrame } from "./fast-frame";

diff --git a/sites/fast-website/src/app/components/navigation/navigation.styles.ts b/sites/fast-website/src/app/components/navigation/navigation.styles.ts
@@ -1,5 +1,6 @@
 import { css } from "@microsoft/fast-element";
-import { display, neutralForegroundRestBehavior } from "@microsoft/fast-components";
+import { neutralForegroundRestBehavior } from "@microsoft/fast-components";
+import { display } from "@microsoft/fast-foundation";
 
 export const NavigationStyles = css`
     ${display("flex")} :host {

diff --git a/sites/fast-website/src/app/components/navigation/navigation.template.ts b/sites/fast-website/src/app/components/navigation/navigation.template.ts
@@ -1,5 +1,5 @@
 import { html } from "@microsoft/fast-element";
-import { endTemplate, startTemplate } from "@microsoft/fast-components";
+import { endTemplate, startTemplate } from "@microsoft/fast-foundation";
 import { Navigation } from "./navigation";
 
 export const NavigationTemplate = html<Navigation>`

diff --git a/sites/fast-website/src/app/components/navigation/navigation.ts b/sites/fast-website/src/app/components/navigation/navigation.ts
@@ -1,5 +1,5 @@
 import { FASTElement } from "@microsoft/fast-element";
-import { applyMixins, StartEnd } from "@microsoft/fast-components";
+import { applyMixins, StartEnd } from "@microsoft/fast-foundation";
 
 export class Navigation extends FASTElement {}
 

diff --git a/sites/fast-website/src/app/components/section-header/section-header.styles.ts b/sites/fast-website/src/app/components/section-header/section-header.styles.ts
@@ -1,4 +1,5 @@
-import { display, neutralForegroundRestBehavior } from "@microsoft/fast-components";
+import { neutralForegroundRestBehavior } from "@microsoft/fast-components";
+import { display } from "@microsoft/fast-foundation";
 import { css } from "@microsoft/fast-element";
 
 export const SectionHeaderStyles = css`

diff --git a/sites/fast-website/src/public/index.html b/sites/fast-website/src/public/index.html
@@ -6,7 +6,7 @@
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
-    <website-design-system-provider id="body-provider" class="body-provider"
+    <fast-design-system-provider id="body-provider" class="body-provider"
       use-defaults
       background-color="#1F1F1F"
       accent-base-color="#F33378"
@@ -179,6 +179,6 @@ <h4>Other</h4>
           </div>
         <!-- footer:end -->
       </div>
-    </website-design-system-provider>
+    </fast-design-system-provider>
   </body>
 </html>