Added the sample app layout back to the Explorer (#167)

bheston · web-flow · commit 4ad29409958d · 2023-12-19T16:36:12.000-08:00
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -22,6 +22,7 @@
         "Appliable",
         "culori",
         "Demi",
+        "listbox",
         "Lrgb",
         "okhsl",
         "tablist",
diff --git a/change/@adaptive-web-adaptive-web-components-5882d7f1-fab6-47ac-afbf-6902a107c524.json b/change/@adaptive-web-adaptive-web-components-5882d7f1-fab6-47ac-afbf-6902a107c524.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Export default component styles",
+  "packageName": "@adaptive-web/adaptive-web-components",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/adaptive-ui-explorer/src/app.ts b/packages/adaptive-ui-explorer/src/app.ts
@@ -30,14 +30,25 @@ import {
     ViewTemplate,
 } from "@microsoft/fast-element";
 import { DesignToken } from "@microsoft/fast-foundation";
+import { AdaptiveDesignSystem, componentBaseStyles } from "@adaptive-web/adaptive-web-components";
+import { AllComponents } from "@adaptive-web/adaptive-web-components/all-components";
 import { ComponentType } from "./component-type.js";
-import "./components/color-block.js";
-import "./components/control-pane/index.js";
-import "./components/layer-background/index.js";
-import "./components/palette-gradient/palette-gradient.js";
+import { ColorBlock } from "./components/color-block.js";
+import { ControlPane } from "./components/control-pane/index.js";
+import { LayerBackground } from "./components/layer-background/index.js";
+import { PaletteGradient } from "./components/palette-gradient/palette-gradient.js";
+import { SampleApp } from "./sample/index.js";
+
+AdaptiveDesignSystem.defineComponents(AllComponents);
 
 DesignToken.registerDefaultStyleTarget();
 
+ColorBlock;
+ControlPane;
+LayerBackground;
+PaletteGradient;
+SampleApp;
+
 const colorBlockTemplate = html<App>`
     ${repeat(
         (x) => x.backgrounds,
@@ -54,6 +65,27 @@ const colorBlockTemplate = html<App>`
     )}
 `;
 
+const sampleTemplate = html<App>`
+    <app-design-system-provider style="display: flex;">
+        <app-layer-background
+            id="light-mode"
+            base-layer-luminance="${LayerBaseLuminance.LightMode}"
+            background-layer-recipe="-3"
+            style="flex-grow: 1; padding: 100px;"
+        >
+            <app-sample-app></app-sample-app>
+        </app-layer-background>
+        <app-layer-background
+            id="dark-mode"
+            base-layer-luminance="${LayerBaseLuminance.DarkMode}"
+            background-layer-recipe="-3"
+            style="flex-grow: 1; padding: 100px;"
+        >
+            <app-sample-app></app-sample-app>
+        </app-layer-background>
+    </app-design-system-provider>
+`;
+
 const template = html<App>`
     <div class="container fill">
         <div class="row fill">
@@ -79,7 +111,6 @@ const template = html<App>`
                     id="control-pane"
                     class="control-pane-container"
                     base-layer-luminance="${LayerBaseLuminance.DarkMode}"
-                    background-layer-recipe="-1"
                 >
                     <app-control-pane
                         :componentType="${(x) => x.componentType}"
@@ -154,6 +185,7 @@ export interface SwatchInfo {
 
 @customElement({
     name: `app-design-system-provider`,
+    styles: componentBaseStyles,
     template: html`
         <slot></slot>
     `,
@@ -249,7 +281,11 @@ export class App extends FASTElement implements AppAttributes {
     public designSystemElement: FASTElement;
 
     public componentTypeTemplate(): ViewTemplate<App, any> {
-        return colorBlockTemplate;
+        if (this.componentType === ComponentType.sample) {
+            return sampleTemplate;
+        } else {
+            return colorBlockTemplate;
+        }
     }
 
     private updateBackgrounds(): void {
diff --git a/packages/adaptive-ui-explorer/src/component-type.ts b/packages/adaptive-ui-explorer/src/component-type.ts
@@ -2,4 +2,5 @@ export enum ComponentType {
     backplate = "backplate",
     text = "text",
     form = "form",
+    sample = "sample",
 }
diff --git a/packages/adaptive-ui-explorer/src/components/color-block.ts b/packages/adaptive-ui-explorer/src/components/color-block.ts
@@ -36,9 +36,13 @@ import {
     when,
 } from "@microsoft/fast-element";
 import { ComponentType } from "../component-type.js";
-import "./adaptive-component.js";
-import "./style-example.js";
-import "./swatch.js";
+import { AdaptiveComponent } from "./adaptive-component.js";
+import { StyleExample } from "./style-example.js";
+import { AppSwatch } from "./swatch.js";
+
+AdaptiveComponent;
+StyleExample;
+AppSwatch;
 
 const backplateComponents = html<ColorBlock>`
     <app-style-example :disabledState=${x => x.disabledState} :styles="${x => accentFillReadableControlStyles}">
diff --git a/packages/adaptive-ui-explorer/src/components/control-pane/control-pane.ts b/packages/adaptive-ui-explorer/src/components/control-pane/control-pane.ts
@@ -1,6 +1,13 @@
 import type { WcagContrastLevel } from "@adaptive-web/adaptive-ui/reference";
-import { FASTElement, observable } from "@microsoft/fast-element";
-
+import { customElement, FASTElement, observable } from "@microsoft/fast-element";
+import { controlPaneStyles as styles } from "./control-pane.styles.js";
+import { controlPaneTemplate as template } from "./control-pane.template.js";
+
+@customElement({
+    name: "app-control-pane",
+    styles,
+    template: template(),
+})
 export class ControlPane extends FASTElement {
     @observable
     public componentType: string;
diff --git a/packages/adaptive-ui-explorer/src/components/control-pane/index.ts b/packages/adaptive-ui-explorer/src/components/control-pane/index.ts
@@ -1,11 +1 @@
-import { ControlPane } from "./control-pane.js";
-import { controlPaneStyles as styles } from "./control-pane.styles.js";
-import { controlPaneTemplate as template } from "./control-pane.template.js";
-
-ControlPane.define({
-    name: "app-control-pane",
-    styles,
-    template: template(),
-});
-
 export { ControlPane } from "./control-pane.js";
diff --git a/packages/adaptive-ui-explorer/src/components/layer-background/index.ts b/packages/adaptive-ui-explorer/src/components/layer-background/index.ts
@@ -1,7 +1,4 @@
 import { Swatch } from '@adaptive-web/adaptive-ui';
-import {
-    neutralForegroundRest,
-} from "@adaptive-web/adaptive-ui/migration";
 import {
     fillColor,
     layerFillBaseLuminance,
@@ -15,13 +12,35 @@ import {
     layerFillFixedPlus3,
     layerFillFixedPlus4,
     layerPalette,
+    neutralStrokeStrongRest,
 } from "@adaptive-web/adaptive-ui/reference";
-import { attr, css, ElementViewTemplate, FASTElement, html, nullableNumberConverter } from "@microsoft/fast-element";
+import { componentBaseStyles } from '@adaptive-web/adaptive-web-components';
+import { attr, css, customElement, ElementViewTemplate, FASTElement, html, nullableNumberConverter } from "@microsoft/fast-element";
 import { DesignToken, DesignTokenChangeRecord, display } from "@microsoft/fast-foundation";
 
+const layerBackgroundStyles = css`
+    ${componentBaseStyles}
+
+    ${display("block")} :host {
+        background: ${fillColor};
+        color: ${neutralStrokeStrongRest};
+    }
+`;
+
+function layerBackgroundTemplate<T extends LayerBackground>(): ElementViewTemplate<T> {
+    return html<T>`
+        <slot></slot>
+    `;
+}
+
+@customElement({
+    name: "app-layer-background",
+    styles: layerBackgroundStyles,
+    template: layerBackgroundTemplate(),
+})
 export class LayerBackground extends FASTElement {
     @attr({ attribute: "base-layer-luminance", converter: nullableNumberConverter })
-    public baseLayerLuminance: number = 1;
+    public baseLayerLuminance: number;
     protected baseLayerLuminanceChanged(prev: number, next: number): void {
         layerFillBaseLuminance.setValueFor(this, this.baseLayerLuminance);
         this.updateBackgroundColor();
@@ -96,22 +115,3 @@ export class LayerBackground extends FASTElement {
         layerPalette.unsubscribe(this);
     }
 }
-
-export function layerBackgroundTemplate<T extends LayerBackground>(): ElementViewTemplate<T> {
-    return html<T>`
-        <slot></slot>
-    `;
-}
-
-export const layerBackgroundStyles = css`
-    ${display("block")} :host {
-        background: ${fillColor};
-        color: ${neutralForegroundRest};
-    }
-`;
-
-LayerBackground.define({
-    name: "app-layer-background",
-    styles: layerBackgroundStyles,
-    template: layerBackgroundTemplate(),
-});
diff --git a/packages/adaptive-ui-explorer/src/components/palette-gradient/index.ts b/packages/adaptive-ui-explorer/src/components/palette-gradient/index.ts
@@ -1,3 +1 @@
 export { PaletteGradient } from "./palette-gradient.js";
-export { paletteGradientStyles as styles } from "./palette-gradient.styles.js";
-export { paletteGradientTemplate as template } from "./palette-gradient.template.js";
diff --git a/packages/adaptive-ui-explorer/src/components/style-example.ts b/packages/adaptive-ui-explorer/src/components/style-example.ts
@@ -1,9 +1,11 @@
 import { InteractiveTokenGroup, StyleProperty, Styles, Swatch, TypedCSSDesignToken } from "@adaptive-web/adaptive-ui";
 import { fillColor } from '@adaptive-web/adaptive-ui/reference';
 import { css, customElement, FASTElement, html, observable, repeat, volatile } from "@microsoft/fast-element";
-import { SwatchType } from "./swatch.js";
-import "./adaptive-component.js";
-import "./swatch.js";
+import { AdaptiveComponent } from "./adaptive-component.js";
+import { AppSwatch, SwatchType } from "./swatch.js";
+
+AdaptiveComponent;
+AppSwatch;
 
 const template = html<StyleExample>`
     <template>
diff --git a/packages/adaptive-ui-explorer/src/components/swatch.ts b/packages/adaptive-ui-explorer/src/components/swatch.ts
@@ -1,6 +1,5 @@
 import { Swatch } from "@adaptive-web/adaptive-ui";
-import { neutralForegroundHint } from "@adaptive-web/adaptive-ui/migration";
-import { fillColor } from "@adaptive-web/adaptive-ui/reference";
+import { fillColor, neutralStrokeReadableRest } from "@adaptive-web/adaptive-ui/reference";
 import {
     attr,
     css,
@@ -40,7 +39,7 @@ const styles = css`
         width: 100%;
         padding: 4px 0;
         box-sizing: border-box;
-        color: ${neutralForegroundHint};
+        color: ${neutralStrokeReadableRest};
         font-size: 12px;
         grid-column-gap: 16px;
         justify-items: start;
diff --git a/packages/adaptive-ui-explorer/src/sample/assets.ts b/packages/adaptive-ui-explorer/src/sample/assets.ts
@@ -0,0 +1,19 @@
+/* eslint-disable max-len */
+
+const svgIcon = (path: string, size: number): string => {
+    return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+    <path d="${path}"/>
+</svg>`;
+}
+
+export const moreIcon = svgIcon("M6.25 10a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Zm5 0a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM15 11.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z", 20);
+
+export const playIcon = svgIcon("M17.22 8.69a1.5 1.5 0 0 1 0 2.62l-10 5.5A1.5 1.5 0 0 1 5 15.5v-11A1.5 1.5 0 0 1 7.22 3.2l10 5.5Zm-.48 1.75a.5.5 0 0 0 0-.88l-10-5.5A.5.5 0 0 0 6 4.5v11c0 .38.4.62.74.44l10-5.5Z", 20);
+
+export const downloadIcon = svgIcon("M15.5 17a.5.5 0 0 1 .09 1H4.5a.5.5 0 0 1-.09-1H15.5ZM10 2a.5.5 0 0 1 .5.41V14.3l3.64-3.65a.5.5 0 0 1 .64-.06l.07.06c.17.17.2.44.06.63l-.06.07-4.5 4.5a.5.5 0 0 1-.25.14L10 16a.5.5 0 0 1-.4-.2l-4.46-4.45a.5.5 0 0 1 .64-.76l.07.06 3.65 3.64V2.5c0-.27.22-.5.5-.5Z", 20);
+
+export const dataAreaIcon = svgIcon("M3 3.75a.75.75 0 0 1 1.5 0v6.26l3.65-1.92c.23-.12.5-.12.73.01l3.82 2.25 5.6-4.2a.75.75 0 0 1 1.2.6V19.5h.75a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75V3.75Zm1.5 7.95v7.8H18V8.25l-4.8 3.6a.75.75 0 0 1-.83.05L8.48 9.6 4.5 11.7Z", 24);
+
+export const dataHistogramIcon = svgIcon("M8.5 5.23c0-1.24 1-2.25 2.25-2.25h2.5c1.24 0 2.25 1 2.25 2.25V7h3.25C19.99 7 21 8 21 9.25v11c0 .41-.34.75-.75.75H3.75a.75.75 0 0 1-.75-.75v-8C3 11.01 4 10 5.25 10H8.5V5.23ZM10 19.5h4V5.23a.75.75 0 0 0-.75-.75h-2.5a.75.75 0 0 0-.75.75V19.5Zm-1.5-8H5.25a.75.75 0 0 0-.75.75v7.25h4v-8Zm7 8h4V9.25a.75.75 0 0 0-.75-.75H15.5v11Z", 24);
+
+export const dataScatterIcon = svgIcon("M3 3.75a.75.75 0 0 1 1.5 0V19.5h15.75a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75V3.75ZM17 4a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm-1.5 3a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM6 9a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3-1.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm6 4.5a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm-1.5 3a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z", 24);
diff --git a/packages/adaptive-ui-explorer/src/sample/index.ts b/packages/adaptive-ui-explorer/src/sample/index.ts
@@ -0,0 +1,2 @@
+export * from "./sample-app/index.js";
+export * from "./sample-page/index.js";
diff --git a/packages/adaptive-ui-explorer/src/sample/sample-app/index.ts b/packages/adaptive-ui-explorer/src/sample/sample-app/index.ts
@@ -0,0 +1 @@
+export { SampleApp } from "./sample-app.js";
diff --git a/packages/adaptive-ui-explorer/src/sample/sample-app/sample-app.styles.ts b/packages/adaptive-ui-explorer/src/sample/sample-app/sample-app.styles.ts
@@ -0,0 +1,96 @@
+import { css } from "@microsoft/fast-element";
+import {
+    bodyFontFamily,
+    cornerRadiusLayer,
+    fillColor,
+    neutralStrokeStrongRest,
+    typeRampPlus3FontSize,
+    typeRampPlus3LineHeight
+} from "@adaptive-web/adaptive-ui/reference";
+import { componentBaseStyles } from "@adaptive-web/adaptive-web-components";
+
+export const sampleAppStyles = css`
+    ${componentBaseStyles}
+
+    :host {
+        display: flex;
+        font-family: ${bodyFontFamily};
+        color: ${neutralStrokeStrongRest};
+        min-height: 650px;
+        min-width: 775px;
+        background: ${fillColor};
+        border-radius: ${cornerRadiusLayer};
+        --gutter: 20;
+    }
+
+    .wrapper {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        border-radius: inherit;
+    }
+
+    p {
+        margin: 0;
+    }
+
+    .toolbar {
+        display: flex;
+        align-items: center;
+        height: 40px;
+        padding: 0 12px;
+    }
+
+    adaptive-tabs {
+        flex-grow: 1;
+    }
+
+    adaptive-tabs::part(tablist) {
+        padding: 0 8px;
+        width: auto;
+        align-self: start;
+    }
+
+    adaptive-tabs::part(tabpanel) {
+        display: flex;
+    }
+
+    adaptive-tab {
+        position: relative;
+    }
+
+    adaptive-tab-panel {
+        display: flex;
+        flex-grow: 1;
+        padding: 0;
+    }
+
+    .content {
+        display: flex;
+        flex-grow: 1;
+        gap: 8px;
+        padding: 8px;
+        border-start-start-radius: ${cornerRadiusLayer};
+        border-end-end-radius: ${cornerRadiusLayer};
+    }
+
+    .pane {
+        width: 240px;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .details {
+        flex-grow: 1;
+        height: unset;
+        width: unset;
+    }
+
+    .content .heading {
+        font-size: ${typeRampPlus3FontSize};
+        line-height: ${typeRampPlus3LineHeight};
+        margin: 0;
+        margin-bottom: 10px;
+        font-weight: bold;
+    }
+`;
diff --git a/packages/adaptive-ui-explorer/src/sample/sample-app/sample-app.template.ts b/packages/adaptive-ui-explorer/src/sample/sample-app/sample-app.template.ts
diff --git a/packages/adaptive-ui-explorer/src/sample/sample-app/sample-app.ts b/packages/adaptive-ui-explorer/src/sample/sample-app/sample-app.ts
diff --git a/packages/adaptive-ui-explorer/src/sample/sample-page/index.ts b/packages/adaptive-ui-explorer/src/sample/sample-page/index.ts
diff --git a/packages/adaptive-ui-explorer/src/sample/sample-page/sample-page.styles.ts b/packages/adaptive-ui-explorer/src/sample/sample-page/sample-page.styles.ts
diff --git a/packages/adaptive-ui-explorer/src/sample/sample-page/sample-page.template.ts b/packages/adaptive-ui-explorer/src/sample/sample-page/sample-page.template.ts
diff --git a/packages/adaptive-ui-explorer/src/sample/sample-page/sample-page.ts b/packages/adaptive-ui-explorer/src/sample/sample-page/sample-page.ts

Original file line number	Diff line number	Diff line change
`@@ -2,4 +2,5 @@ export enum ComponentType {`
`2`	`2`	`backplate = "backplate",`
`3`	`3`	`text = "text",`
`4`	`4`	`form = "form",`
	`5`	`+ sample = "sample",`
`5`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1 @@`
`1`	`1`	`export { PaletteGradient } from "./palette-gradient.js";`
`2`		`-export { paletteGradientStyles as styles } from "./palette-gradient.styles.js";`
`3`		`-export { paletteGradientTemplate as template } from "./palette-gradient.template.js";`