Merge branch 'master' into users/janechu/update-logos-in-creator-and-…

…component-explorer
microsoft · Jun 17, 2020 · 4654265 · 4654265
2 parents 3fbef24 + 7317b41
commit 4654265
Show file tree

Hide file tree

Showing 20 changed files with 2,102 additions and 388 deletions.
diff --git a/.github/workflows/cd-www-stage.yml b/.github/workflows/cd-www-stage.yml
@@ -12,7 +12,7 @@ jobs:
       AZURE_WEBAPP_ACTIVE_STAGE_NAME: www-west-app
       AZURE_WEBAPP_PASSIVE_STAGE_NAME: www-east-app
       AZURE_WEBAPP_BUILD_PATH: sites/website
-      AZURE_WEBAPP_DIST_PATH: sites/website/www
+      AZURE_WEBAPP_DIST_PATH: sites/website/static
       AZURE_WEBAPP_SLOT_NAME: stage
 
     steps:
@@ -30,7 +30,7 @@ jobs:
         cd ${{ env.AZURE_WEBAPP_BUILD_PATH }}
         npm i
         yarn build
-        cp ../site-utilities/statics/server/package.json ../site-utilities/statics/server/server.js www 
+        cp ../site-utilities/statics/server/package.json ../site-utilities/statics/server/server.js static 
         cd static
         npm i
         ls -lta

diff --git a/sites/fast-website/package.json b/sites/fast-website/package.json
@@ -6,10 +6,10 @@
   "private": true,
   "license": "MIT",
   "devDependencies": {
-    "@microsoft/fast-element": "^0.10.2",
-    "@microsoft/fast-foundation": "^1.1.2",
+    "@microsoft/fast-element": "^0.11.0",
+    "@microsoft/fast-foundation": "^1.2.0",
     "@microsoft/fast-web-utilities": "^4.5.1",
-    "@microsoft/fast-components": "^1.1.2",
+    "@microsoft/fast-components": "^1.2.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^8.1.0",
     "babel-preset-env": "^1.7.0",

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
@@ -27,7 +27,7 @@ export const CardSectionStyles = css`
     :host ::slotted(site-feature-card:focus-within) {
         cursor: pointer;
         color: currentColor;
-        background-color: var(--neutral-fill-hover);
+        background-color: ${neutralFillHoverBehavior.var};
         filter: saturate(1);
     }
 `.withBehaviors(neutralFillHoverBehavior);
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
@@ -2,6 +2,7 @@ import { css } from "@microsoft/fast-element";
 import {
     neutralFillInputHoverBehavior,
     neutralFillInputRestBehavior,
+    neutralFocusBehavior,
     neutralOutlineHoverBehavior,
     neutralOutlineRestBehavior,
 } from "@microsoft/fast-components";
@@ -38,18 +39,18 @@ ${display("inline-flex")} :host {
     height: calc(var(--input-size) * 1px);
     box-sizing: border-box;
     border-radius: calc(var(--corner-radius) * 1px);
-    border: calc(var(--outline-width) * 1px) solid var(--neutral-outline-rest);
+    border: calc(var(--outline-width) * 1px) solid ${neutralOutlineRestBehavior.var};
     outline: none;
     cursor: pointer;
 }
 
-.label__hidden {
+.label-hidden {
     display: none;
 }
 
 .label {
     font-family: var(--body-font);
-    color: var(--neutral-foreground-rest);
+    color: ${neutralForegroundRestBehavior.var};
     ${
         /* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast-dna/issues/2766 */ ""
     } padding-inline-start: calc(var(--design-unit) * 2px + 2px);
@@ -69,18 +70,18 @@ ${display("inline-flex")} :host {
     border-radius: calc(var(--corner-radius) * 1px);
     display: inline-block;
     flex-shrink: 0;
-    border: 1px solid var(--neutral-foreground-rest);
+    border: 1px solid ${neutralForegroundRestBehavior.var};
     opacity: 0;
     pointer-events: none;
 }
 
 .control:hover {
-    border-color: var(--neutral-outline-hover);
+    border-color: ${neutralOutlineHoverBehavior.var};
 }
 
 :host(:${focusVisible}) .control {
-    box-shadow: 0 0 0 1px var(--neutral-focus) inset;
-    border-color: var(--neutral-focus);
+    box-shadow: 0 0 0 1px ${neutralFocusBehavior.var} inset;
+    border-color: ${neutralFocusBehavior.var};
 }
 
 :host(.disabled) .label,

diff --git a/sites/fast-website/src/app/components/color-swatch/color-swatch.template.ts b/sites/fast-website/src/app/components/color-swatch/color-swatch.template.ts
@@ -23,7 +23,7 @@ export const ColorSwatchTemplate = html<ColorSwatch>`
             class="${x =>
                 x.defaultSlottedNodes && x.defaultSlottedNodes.length
                     ? "label"
-                    : "label label__hidden"}"
+                    : "label label-hidden"}"
         >
             <slot ${slotted("defaultSlottedNodes")}></slot>
         </label>

diff --git a/sites/fast-website/src/app/components/color-swatch/color-swatch.ts b/sites/fast-website/src/app/components/color-swatch/color-swatch.ts
@@ -1,4 +1,4 @@
-import { attr, observable } from "@microsoft/fast-element";
+import { attr, observable, FASTElement } from "@microsoft/fast-element";
 import { FASTRadio } from "@microsoft/fast-components";
 
 export class ColorSwatch extends FASTRadio {

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
@@ -47,7 +47,7 @@ export const ContentPlacementContainerStyles = css`
 
     :host([section="feature"]) site-feature-card:hover :first-child::before,
     :host([section="feature"]) site-feature-card:focus-within :first-child::before {
-        color: var(--accent-foreground-rest);
+        color: ${accentForegroundRestBehavior.var};
     }
 
     /* end */
@@ -60,7 +60,7 @@ export const ContentPlacementContainerStyles = css`
     :host([section="community"]:focus-within) site-content-placement,
     :host([section="community"]:hover) site-content-placement ::part(content),
     :host([section="community"]:focus-within) site-content-placement ::part(content) {
-        color: var(--neutral-foreground-hint);
+        color: ${neutralForegroundHintBehavior.var};
     }
 
     :host([section="feature"]:hover) site-feature-card,
@@ -70,8 +70,8 @@ export const ContentPlacementContainerStyles = css`
 
     :host([section="feature"]) site-feature-card:hover,
     :host([section="feature"]) site-feature-card:focus-within {
-        color: var(--neutral-foreground-rest);
-        background: var(--neutral-fill-focus);
+        color: ${neutralForegroundRestBehavior.var};
+        background: ${neutralFillFocusBehavior.var};
         cursor: pointer;
         filter: saturate(1);
     }
@@ -80,21 +80,21 @@ export const ContentPlacementContainerStyles = css`
     :host([section="community"]) site-content-placement:focus-within {
         --elevation: 4;
         cursor: pointer;
-        background: var(--neutral-fill-focus);
+        background: ${neutralFillFocusBehavior.var};
         border-radius: calc(var(--corner-radius) * 1px);
         color: currentColor;
         ${elevation}
     }
 
     :host([section="community"]) site-content-placement:hover ::part(content),
     :host([section="community"]) site-content-placement:focus-within ::part(content) {
-        color: var(--accent-foreground-rest);
+        color: ${accentForegroundRestBehavior.var};
     }
 
     /* end */
 
     .headerSubscript {
-        color: var(--neutral-foreground-hint);
+        color: ${neutralForegroundHintBehavior.var};
         font-size: var(--type-ramp-minus-1-font-size);
     }
 
@@ -133,7 +133,7 @@ export const ContentPlacementContainerStyles = css`
             justify-content: space-between;
         }
         :host([section="feature"]) site-feature-card :first-child::before {
-            color: var(--accent-foreground-rest);
+            color: ${accentForegroundRestBehavior.var};
         }
     }
 `.withBehaviors(

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
@@ -48,6 +48,7 @@ export const ContentPlacementStyles = css`
 
     fast-card ::slotted([slot="action"]) {
         margin-top: calc(var(--design-unit) * 2px);
+        align-self: start;
     }
 
     fast-card:hover .contentPlacement_icon,

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
@@ -14,7 +14,7 @@ export const FastFrameStyles = css`
     ${display("block")} :host {
         flex-direction: column;
         font-family: var(--body-font);
-        color: var(--neutral-foreground-rest);
+        color: ${neutralForegroundRestBehavior.var};
         box-sizing: border-box;
         text-align: center;
         width: 100%;
@@ -44,7 +44,7 @@ export const FastFrameStyles = css`
         flex-direction: column;
         width: 100%;
         text-align: start;
-        background: var(--neutral-fill-card-rest);
+        background: ${neutralFillCardRestBehavior.var};
         padding: calc(var(--gutter) * 2px);
     }
 
@@ -70,15 +70,15 @@ export const FastFrameStyles = css`
     .content h1 {
         font-size: var(--type-ramp-minus-1-font-size);
         line-height: var(--type-ramp-base-line-height);
-        color: var(--neutral-foreground-hint);
+        color: ${neutralForegroundHintBehavior.var};
         margin: 0;
         margin-bottom: 15px;
         font-weight: bold;
         text-transform: uppercase;
     }
 
     .content-heading-highlight {
-        color: var(--accent-foreground-rest);
+        color: ${accentForegroundRestBehavior.var};
     }
 
     .content h2 {
@@ -94,7 +94,7 @@ export const FastFrameStyles = css`
         grid-gap: calc(var(--gutter) * 2px);
         grid-template-columns: auto 300px;
         padding: calc(var(--gutter) * 2px);
-        background: var(--neutral-fill-card-rest);
+        background: ${neutralFillCardRestBehavior.var};
         position: relative;
         border-radius: 0 calc(var(--corner-radius) * 1px) calc(var(--corner-radius) * 1px) 0;
     }
@@ -112,7 +112,7 @@ export const FastFrameStyles = css`
         flex-direction: column;
         padding: calc(var(--gutter) * 1px);
         text-align: start;
-        color: var(--neutral-foreground-rest);
+        color: ${neutralForegroundRestBehavior.var};
     }
 
     .badge {
@@ -150,7 +150,7 @@ export const FastFrameStyles = css`
         display: grid;
         grid-template-columns: auto 1fr;
         text-align: start;
-        color: var(--neutral-foreground-rest);
+        color: ${neutralForegroundRestBehavior.var};
     }
 
     .checkbox {
@@ -183,7 +183,7 @@ export const FastFrameStyles = css`
     .sample-control-icon {
         width: 21px;
         height: 21px;
-        background-color: var(--accent-fill-rest);
+        background-color: ${accentFillRestBehavior.var};
         border-radius: calc(var(--corner-radius) * 1px);
     }
 
@@ -235,16 +235,16 @@ export const FastFrameStyles = css`
     }
 
     fast-badge {
-        --badge-fill-primary: var(--accent-fill-rest);
-        --badge-color-primary: var(--neutral-foreground-rest);
+        --badge-fill-primary: ${accentFillRestBehavior.var};
+        --badge-color-primary: ${neutralForegroundRestBehavior.var};
     }
 
     fast-slider {
         min-width: unset;
     }
 
     fast-tab-panel {
-        background: var(--neutral-fill-card-rest);
+        background: ${neutralFillCardRestBehavior.var};
         height: 100%;
     }
 
@@ -264,7 +264,7 @@ export const FastFrameStyles = css`
 
     fast-slider-label {
         font-size: var(--type-ramp-minus-2-font-size);
-        color: var(--neutral-foreground-hint);
+        color: ${neutralForegroundHintBehavior.var};
     }
     
     @media screen and (max-width: 1330px) {
@@ -301,7 +301,7 @@ export const FastFrameStyles = css`
             border-radius: calc(var(--corner-radius) * 1px);
         }
 
-        .preview__expanded {
+        .preview-expanded {
             transition: right .5s ease-in-out;
             right: -10%;
         }    
@@ -317,7 +317,7 @@ export const FastFrameStyles = css`
             visibility: visible;
         }
         
-        .tab-panel__expanded {
+        .tab-panel-expanded {
             opacity: 0;
             transition: opacity .5s ease-in-out;
         }
@@ -335,7 +335,7 @@ export const FastFrameStyles = css`
             border-radius: calc(var(--corner-radius) * 1px);
         }
 
-        .preview__expanded {
+        .preview-expanded {
             right: -5%;
         }    
 

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
@@ -20,7 +20,7 @@ export const FastFrameTemplate = html<FastFrame>`
                 <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" class="${x =>
-                    x.expanded ? "tab-panel__expanded" : ""}">
+                    x.expanded ? "tab-panel-expanded" : ""}">
                     <div class="content">
                         <h1><span class="content-heading-highlight">Fast Frame</span> Dark Mode</h4>
                         <h2>Pre-built for both light and dark modes</h2>
@@ -42,7 +42,7 @@ export const FastFrameTemplate = html<FastFrame>`
                     </div>
                 </fast-tab-panel>
                 <fast-tab-panel id="palette-tab-panel" class="${x =>
-                    x.expanded ? "tab-panel__expanded" : ""}">
+                    x.expanded ? "tab-panel-expanded" : ""}">
                     <div class="content">
                         <h1><span class="content-heading-highlight">Fast Frame</span> Colors</h4>
                         <h2>Pre-existing color you can customize</h2>
@@ -124,7 +124,7 @@ export const FastFrameTemplate = html<FastFrame>`
                     </div>
                 </fast-tab-panel>
                 <fast-tab-panel id="swatches-tab-panel" class="${x =>
-                    x.expanded ? "tab-panel__expanded" : ""}">
+                    x.expanded ? "tab-panel-expanded" : ""}">
                     <div class="content">
                         <h1><span class="content-heading-highlight">Fast Frame</span> Styles</h4>
                         <h2>Adjust style settings on the fly</h2>
@@ -182,7 +182,7 @@ export const FastFrameTemplate = html<FastFrame>`
                     </div>
                 </fast-tab-panel>
                 <fast-tab-panel id="density-tab-panel" class="${x =>
-                    x.expanded ? "tab-panel__expanded" : ""}">
+                    x.expanded ? "tab-panel-expanded" : ""}">
                     <div class="content">
                         <h1><span class="content-heading-highlight">Fast Frame</span> Density</h4>
                         <h2>Quickly change and modify your layout</h2>
@@ -268,7 +268,7 @@ export const FastFrameTemplate = html<FastFrame>`
                 </fast-tab-panel>
             </fast-tabs>
             <fast-design-system-provider
-                class="${x => (x.expanded ? "preview preview__expanded" : "preview")}"
+                class="${x => (x.expanded ? "preview preview-expanded" : "preview")}"
                 base-layer-luminance="${x =>
                     x.darkMode
                         ? StandardLuminance.DarkMode
@@ -318,10 +318,10 @@ export const FastFrameTemplate = html<FastFrame>`
                             <span class="sample-control-icon"></span>
                             <span class="sample-control-text">Label</span>
                             <div class="sample-control-actions">
-                                <fast-button appearance="stealth"
+                                <fast-button appearance="stealth" aria-label="Example 'share' button"
                                     >${ShareIcon}</fast-button
                                 >
-                                <fast-button appearance="stealth"
+                                <fast-button appearance="stealth" aria-label="Example 'more' button"
                                     >${ContextIcon}</fast-button
                                 >
                             </div>

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,4 @@
 import { css } from "@microsoft/fast-element";
-import { neutralForegroundRestBehavior } from "@microsoft/fast-components";
 import { display } from "@microsoft/fast-foundation";
 
 export const FeatureCardStyles = css`
@@ -69,4 +68,4 @@ export const FeatureCardStyles = css`
             max-width: 600px;
         }
     }
-`.withBehaviors(neutralForegroundRestBehavior);
+`;
diff --git a/sites/fast-website/src/app/components/feature-card/feature-card.ts b/sites/fast-website/src/app/components/feature-card/feature-card.ts
@@ -1,3 +1,3 @@
-import { FASTCard as Card } from "@microsoft/fast-components";
+import { FASTElement } from "@microsoft/fast-element";
 
-export class FeatureCard extends Card {}
+export class FeatureCard extends FASTElement {}
diff --git a/sites/fast-website/src/app/components/navigation/navigation.styles.ts b/sites/fast-website/src/app/components/navigation/navigation.styles.ts
@@ -6,7 +6,7 @@ export const NavigationStyles = css`
     ${display("grid")} :host {
         grid-template-columns: auto 1fr auto;
         font-family: var(--body-font);
-        color: var(--neutral-foreground-rest);
+        color: ${neutralForegroundRestBehavior.var};
         box-sizing: border-box;
         width: 100%;
     }