feat: add optional design system to the development site (microsoft#1749

)
albertsadday · May 15, 2019 · 187c404 · 187c404
1 parent 9a86655
commit 187c404
Show file tree

Hide file tree

Showing 4 changed files with 292 additions and 3 deletions.
diff --git a/packages/fast-components-react-msft/app/app.tsx b/packages/fast-components-react-msft/app/app.tsx
@@ -15,6 +15,7 @@ import {
     DesignSystem,
     DesignSystemDefaults,
 } from "@microsoft/fast-components-styles-msft";
+import designSystemSchema from "../../fast-components-styles-msft/src/design-system/design-system.schema.json";
 import { Plugin, PluginProps } from "@microsoft/fast-tooling-react";
 import { HypertextClassNameContract } from "@microsoft/fast-components-class-name-contracts-base";
 import { glyphBuildingblocks } from "@microsoft/fast-glyphs-msft";
@@ -139,6 +140,10 @@ export default class App extends React.Component<{}, AppState> {
                 activeTheme={this.getThemeById(this.state.theme)}
                 showTransparencyToggle={true}
                 styleEditing={true}
+                designSystemEditing={{
+                    data: DesignSystemDefaults,
+                    schema: designSystemSchema,
+                }}
             >
                 <SiteTitle slot={"title"}>
                     <SiteTitleBrand>FAST</SiteTitleBrand> Documentation

diff --git a/packages/fast-components-styles-msft/src/design-system/design-system.schema.json b/packages/fast-components-styles-msft/src/design-system/design-system.schema.json
@@ -0,0 +1,243 @@
+{
+    "$schema": "http://json-schema.org/schema#",
+    "title": "Design System",
+    "description": "A design system's schema definition.",
+    "id": "design-system",
+    "type": "object",
+    "properties": {
+        "backgroundColor": {
+            "title": "Background color",
+            "type": "string",
+            "default": "#FFFFFF"
+        },
+        "contrast": {
+            "title": "Contrast",
+            "type": "number",
+            "default": 0
+        },
+        "density": {
+            "title": "Density",
+            "type": "number",
+            "enum": [
+                -3,
+                -2,
+                -1,
+                0,
+                1,
+                2,
+                3
+            ],
+            "default": 0
+        },
+        "designUnit": {
+            "title": "Design unit",
+            "type": "number",
+            "default": 4
+        },
+        "baseHeightMultiplier": {
+            "title": "Base height multiplier",
+            "type": "number",
+            "default": 8
+        },
+        "baseHorizontalSpacingMultiplier": {
+            "title": "Base horizontal spacing multiplier",
+            "type": "number",
+            "default": 3
+        },
+        "direction": {
+            "title": "Direction",
+            "type": "string",
+            "enum": [
+                "ltr",
+                "rtl"
+            ],
+            "default": "ltr"
+        },
+        "fontWeight": {
+            "title": "Font weight",
+            "type": "object",
+            "properties": {
+                "light": {
+                    "title": "Light",
+                    "type": "number",
+                    "default": 100
+                },
+                "semilight": {
+                    "title": "Semilight",
+                    "type": "number",
+                    "default": 200
+                },
+                "normal": {
+                    "title": "Normal",
+                    "type": "number",
+                    "default": 400
+                },
+                "semibold": {
+                    "title": "Semibold",
+                    "type": "number",
+                    "default": 600
+                },
+                "bold": {
+                    "title": "Bold",
+                    "type": "number",
+                    "default": 700
+                }
+            }
+        },
+        "cornerRadius": {
+            "title": "Corner radius",
+            "type": "number",
+            "default": 2
+        },
+        "outlineWidth": {
+            "title": "Outline width",
+            "type": "number",
+            "default": 1
+        },
+        "focusOutlineWidth": {
+            "title": "Focus outline width",
+            "type": "number",
+            "default": 2
+        },
+        "disabledOpacity": {
+            "title": "Disabled opacity",
+            "type": "number",
+            "default": 0.3
+        },
+        "accentFillRestDelta": {
+            "title": "Accent fill rest delta",
+            "type": "number",
+            "default": 0
+        },
+        "accentFillHoverDelta": {
+            "title": "Accent fill hover delta",
+            "type": "number",
+            "default": 2
+        },
+        "accentFillActiveDelta": {
+            "title": "Accent fill active delta",
+            "type": "number",
+            "default": 4
+        },
+        "accentFillSelectedDelta": {
+            "title": "Accent fill selected delta",
+            "type": "number",
+            "default": 12
+        },
+        "accentForegroundRestDelta": {
+            "title": "Accent foreground rest delta",
+            "type": "number",
+            "default": 0
+        },
+        "accentForegroundHoverDelta": {
+            "title": "Accent foreground hover delta",
+            "type": "number",
+            "default": 4
+        },
+        "accentForegroundActiveDelta": {
+            "title": "Accent foreground active delta",
+            "type": "number",
+            "default": 8
+        },
+        "neutralFillRestDelta": {
+            "title": "Neutral fill rest delta",
+            "type": "number",
+            "default": 4
+        },
+        "neutralFillHoverDelta": {
+            "title": "Neutral fill hover delta",
+            "type": "number",
+            "default": 3
+        },
+        "neutralFillActiveDelta": {
+            "title": "Neutral fill active delta",
+            "type": "number",
+            "default": 2
+        },
+        "neutralFillSelectedDelta": {
+            "title": "Neutral fill selected delta",
+            "type": "number",
+            "default": 8
+        },
+        "neutralFillInputRestDelta": {
+            "title": "Neutral fill input rest delta",
+            "type": "number",
+            "default": 4
+        },
+        "neutralFillInputHoverDelta": {
+            "title": "Neutral fill input hover delta",
+            "type": "number",
+            "default": 4
+        },
+        "neutralFillInputActiveDelta": {
+            "title": "Neutral fill input active delta",
+            "type": "number",
+            "default": 4
+        },
+        "neutralFillInputSelectedDelta": {
+            "title": "Neutral fill input selected delta",
+            "type": "number",
+            "default": 4
+        },
+        "neutralFillStealthRestDelta": {
+            "title": "Neutral fill stealth rest delta",
+            "type": "number",
+            "default": 0
+        },
+        "neutralFillStealthHoverDelta": {
+            "title": "Neutral fill stealth hover delta",
+            "type": "number",
+            "default": 3
+        },
+        "neutralFillStealthActiveDelta": {
+            "title": "Neutral fill stealth active delta",
+            "type": "number",
+            "default": 2
+        },
+        "neutralFillStealthSelectedDelta": {
+            "title": "Neutral fill stealth selected delta",
+            "type": "number",
+            "default": 8
+        },
+        "neutralFillCardDelta": {
+            "title": "Neutral fill card delta",
+            "type": "number",
+            "default": 2
+        },
+        "neutralForegroundDarkIndex": {
+            "title": "Neutral foreground dark index",
+            "type": "number",
+            "default": 58
+        },
+        "neutralForegroundLightIndex": {
+            "title": "Neutral foreground light index",
+            "type": "number",
+            "default": 0
+        },
+        "neutralForegroundHoverDelta": {
+            "title": "Neutral foreground hover delta",
+            "type": "number",
+            "default": 8
+        },
+        "neutralForegroundActiveDelta": {
+            "title": "Neutral foreground active delta",
+            "type": "number",
+            "default": 16
+        },
+        "neutralOutlineRestDelta": {
+            "title": "Neutral outline rest delta",
+            "type": "number",
+            "default": 12
+        },
+        "neutralOutlineHoverDelta": {
+            "title": "Neutral outline hover delta",
+            "type": "number",
+            "default": 24
+        },
+        "neutralOutlineActiveDelta": {
+            "title": "Neutral outline active delta",
+            "type": "number",
+            "default": 18
+        }
+    }
+}
diff --git a/packages/fast-development-site-react/src/components/site/configuration-panel.tsx b/packages/fast-development-site-react/src/components/site/configuration-panel.tsx
@@ -11,14 +11,21 @@ import manageJss, {
     ManagedJSSProps,
 } from "@microsoft/fast-jss-manager-react";
 
+export interface DesignSystemEditingConfig {
+    data: any;
+    schema: any;
+}
+
 export interface ConfigurationPanelProps {
     formChildOptions: any;
     schema: any;
     data: any;
     dataLocation: string;
     onChange: any;
+    designSystemOnChange: (data: any) => void;
     onLocationUpdate: (dataLocation: string) => void;
     styleEditing?: boolean;
+    designSystemEditing?: DesignSystemEditingConfig;
 }
 
 export interface ConfigurationPanelManagedClasses {
@@ -68,6 +75,7 @@ class ConfigurationPanel extends React.Component<
                 {this.renderForm()}
                 {this.renderCSSEditor()}
                 {this.renderCSSPropertyEditor()}
+                {this.renderDesignSystemEditor()}
             </div>
         );
     }
@@ -134,6 +142,22 @@ class ConfigurationPanel extends React.Component<
         }
     }
 
+    private renderDesignSystemEditor(): React.ReactNode {
+        if (!!this.props.designSystemEditing) {
+            return (
+                <React.Fragment>
+                    {this.renderCategoryTitle("Design System")}
+                    <Form
+                        jssStyleSheet={{ form: { height: "unset" } }}
+                        schema={this.props.designSystemEditing.schema}
+                        data={this.props.designSystemEditing.data}
+                        onChange={this.props.designSystemOnChange}
+                    />
+                </React.Fragment>
+            );
+        }
+    }
+
     private renderCategoryTitle(text: string): React.ReactNode {
         return (
             <h2 className={this.props.managedClasses.configurationPanel_categoryTitle}>

diff --git a/packages/fast-development-site-react/src/components/site/index.tsx b/packages/fast-development-site-react/src/components/site/index.tsx
@@ -36,7 +36,7 @@ import SiteCategoryIcon from "./category-icon";
 import SiteCategoryItem from "./category-item";
 import ActionBar from "./action-bar";
 import DevTools, { Framework } from "./dev-tools";
-import ConfigurationPanel from "./configuration-panel";
+import ConfigurationPanel, { DesignSystemEditingConfig } from "./configuration-panel";
 import NotFound from "./not-found";
 import ComponentView, { ComponentViewTypes } from "./component-view";
 import {
@@ -76,6 +76,7 @@ export interface SiteProps {
     onUpdateDirection?: (ltr: Direction) => void;
     onUpdateTheme?: (theme: string) => void;
     styleEditing?: boolean;
+    designSystemEditing?: DesignSystemEditingConfig;
     locales?: string[];
     themes?: Theme[];
     activeTheme?: Theme;
@@ -130,6 +131,7 @@ export interface SiteState {
     locale: string;
     theme: Theme;
     navigationLevel: NavigationLevel;
+    designSystem: any;
 }
 
 export enum SiteSlot {
@@ -411,6 +413,7 @@ class Site extends React.Component<
             locale: "en",
             theme: this.props.activeTheme || this.getInitialTheme(),
             navigationLevel: NavigationLevel.catalog,
+            designSystem: this.props.designSystemEditing.data,
         };
     }
 
@@ -798,6 +801,12 @@ class Site extends React.Component<
         }
     };
 
+    private handleDesignSystemDataChange = (data: any): void => {
+        this.setState({
+            designSystem: data,
+        });
+    };
+
     private handleToggleDevToolsView = (): void => {
         this.setState({
             devToolsView: !this.state.devToolsView,
@@ -939,6 +948,11 @@ class Site extends React.Component<
                     formChildOptions={this.props.formChildOptions}
                     onLocationUpdate={this.handleLocationUpdate}
                     styleEditing={this.props.styleEditing}
+                    designSystemEditing={{
+                        schema: this.props.designSystemEditing.schema,
+                        data: this.state.designSystem,
+                    }}
+                    designSystemOnChange={this.handleDesignSystemDataChange}
                 />
             );
         }
@@ -971,7 +985,10 @@ class Site extends React.Component<
                             transparentBackground={
                                 this.state.componentBackgroundTransparent
                             }
-                            designSystem={componentItem.props.designSystem}
+                            designSystem={
+                                this.state.designSystem ||
+                                componentItem.props.designSystem
+                            }
                             active={index === this.state.activeComponentIndex}
                             view={this.state.componentView}
                         >
@@ -1018,7 +1035,7 @@ class Site extends React.Component<
                     background={this.generateComponentWrapperBackground()}
                     dir={isRTL(this.state.locale) ? Direction.rtl : Direction.ltr}
                     transparentBackground={this.state.componentBackgroundTransparent}
-                    designSystem={component.props.designSystem}
+                    designSystem={this.state.designSystem || component.props.designSystem}
                     active={true}
                     view={this.state.componentView}
                 >