fix(dev-site): add design system provider to component example factory (#359)

* add design system provider with optional design system to component factory

* replace null with void 0

Author: chrisdholt

packages/fast-components-react-msft/app/index.tsx

@@ -31,7 +31,7 @@ function render(): void {
                         </SiteCategoryIcon>
                     </SiteCategory>
                     <SiteCategory slot={"category"} name={"Components"}>
-                        {componentFactory(examples)}
+                        {componentFactory(examples, DesignSystemDefaults)}
                     </SiteCategory>
                 </Site>
             </DesignSystemProvider>

packages/fast-development-site-react/src/utilities/componentExampleFactory.tsx

@@ -1,13 +1,16 @@
 import * as React from "react";
 import { SiteCategoryItem } from "../";
+import { DesignSystemProvider } from "@microsoft/fast-jss-manager-react";
 
-export default function componentExampleFactory(examples: any, componentExample: string): JSX.Element[] {
+export default function componentExampleFactory<T>(examples: any, componentExample: string, designSystem?: T): JSX.Element[] {
     const Component: any = examples[componentExample].component;
 
     return examples[componentExample].data.map((componentExampleData: any, index: number) => {
         return (
             <SiteCategoryItem key={index} slot={"canvas"}>
-                <Component {...componentExampleData} />
+                <DesignSystemProvider designSystem={designSystem ? designSystem : void 0}>
+                    <Component {...componentExampleData} />
+                </DesignSystemProvider>
             </SiteCategoryItem>
         );
     });

packages/fast-development-site-react/src/utilities/componentFactory.tsx

@@ -2,11 +2,11 @@ import * as React from "react";
 import componentExampleFactory from "./componentExampleFactory";
 import { SiteCategory } from "../";
 
-export default function componentFactory(examples: any): JSX.Element[] {
+export default function componentFactory<T>(examples: any, designSystem?: T): JSX.Element[] {
     return Object.keys(examples).map((exampleKey: string, index: number) => {
         return (
             <SiteCategory key={index} slot={"category"} name={examples[exampleKey].name}>
-                {componentExampleFactory(examples, exampleKey)}
+                {componentExampleFactory<T>(examples, exampleKey, designSystem)}
             </SiteCategory>
         );
     });