feat(structure): updates the structure for the development site (#217)

* feat(structure): updates the structure for the development site * fix a few tslint issues in react development site * fix code climate issues * refactor out utilities and names per pull request comments * resolve some tslint errors
2018-04-10 16:13:40 -07:00 · 2018-04-10 16:13:40 -07:00 · e153b0b813
--- a/.travis.yml
+++ b/.travis.yml
@ -17,7 +17,6 @@ before_script:
  - chmod +x ./cc-test-reporter
  - ./cc-test-reporter before-build
 script:
-  - npm test
  - lerna run test
 after_script:
  - ./cc-test-reporter format-coverage -t lcov after-build .exit $TRAVIS_TEST_RESULT
--- a/package-lock.json
+++ b/package-lock.json
@ -6724,6 +6724,14 @@
      "requires": {
        "os-tmpdir": "1.0.2",
        "uuid": "2.0.3"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-2.0.3.tgz",
+          "integrity": "sha1-Z+LoY3lyFVMN/zGOW/nc6/1Hsho=",
+          "dev": true
+        }
      }
    },
    "test-exclude": {
@ -7442,12 +7450,6 @@
        "object.getownpropertydescriptors": "2.0.3"
      }
    },
-    "uuid": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-2.0.3.tgz",
-      "integrity": "sha1-Z+LoY3lyFVMN/zGOW/nc6/1Hsho=",
-      "dev": true
-    },
    "validate-npm-package-license": {
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.3.tgz",
--- a/package.json
+++ b/package.json
@ -14,35 +14,12 @@
  "license": "MIT",
  "readme": "README.md",
  "scripts": {
-    "test": "jest",
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
  },
-  "jest": {
-    "testPathIgnorePatterns": [
-      "/node_modules/",
-      "/dist/",
-      "/packages/"
-    ],
-    "transform": {
-      "^.+\\.tsx?$": "ts-jest"
-    },
-    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "jsx",
-      "json"
-    ],
-    "collectCoverage": true
-  },
  "devDependencies": {
-    "@types/jest": "^22.2.0",
    "@types/node": "^9.4.7",
-    "jest": "^22.4.2",
    "lerna": "^2.9.0",
    "rimraf": "^2.6.2",
-    "ts-jest": "^22.4.2",
    "ts-node": "^5.0.1",
    "typescript": "^2.7.2",
    "yargs": "^11.0.0"
--- a/packages/fast-components-react-base/app/index.tsx
+++ b/packages/fast-components-react-base/app/index.tsx
@ -1,17 +1,14 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import Site, { ICategoryProps, ISiteProps } from "@microsoft/fast-development-site-react";
+import Site, {
+    componentFactory,
+    ISiteProps,
+    SiteCategory,
+    SiteCategoryIcon,
+    SiteCategoryItem
+} from "@microsoft/fast-development-site-react";
 import * as examples from "./examples";

-const items: ICategoryProps[] = [
-    {
-        name: "Fast Components",
-        items: [
-            examples.ButtonExamples
-        ]
-    }
-];
-
 /**
 * Create the root node
 */
@ -19,9 +16,14 @@ const root: HTMLElement = document.createElement("div");
 root.setAttribute("id", "root");
 document.body.appendChild(root);

+/* tslint:disable */
 function render(): void {
    ReactDOM.render(
-        <Site title={"FAST components base"} categories={items} />,
+        <Site title={"FAST components base"}>
+            <SiteCategory slot={"category"} name={"Components"}>
+                {componentFactory(examples)}
+            </SiteCategory>
+        </Site>,
        root
    );
 }
--- a/packages/fast-components-react-msft/app/examples.ts
+++ b/packages/fast-components-react-msft/app/examples.ts
@ -1,5 +1,5 @@
-import ButtonExamples from "../src/button/examples.data";
-export {ButtonExamples};
+import ButtonExample from "../src/button/examples.data";
+export {ButtonExample};

-import DividerExamples from "../src/divider/examples.data";
-export {DividerExamples};
+import DividerExample from "../src/divider/examples.data";
+export {DividerExample};
--- a/packages/fast-components-react-msft/app/index.tsx
+++ b/packages/fast-components-react-msft/app/index.tsx
@ -1,20 +1,17 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
+import { glyphBuildingblocks } from "@microsoft/fast-glyphs-msft";
 import { DesignSystemProvider } from "@microsoft/fast-jss-manager-react";
 import { DesignSystemDefaults } from "@microsoft/fast-components-styles-msft";
-import Site, { ICategoryProps, ISiteProps } from "@microsoft/fast-development-site-react";
+import Site, {
+    componentFactory,
+    ISiteProps,
+    SiteCategory,
+    SiteCategoryIcon,
+    SiteCategoryItem
+} from "@microsoft/fast-development-site-react";
 import * as examples from "./examples";

-const items: ICategoryProps[] = [
-    {
-        name: "Fast Components",
-        items: [
-            examples.ButtonExamples,
-            examples.DividerExamples
-        ]
-    }
-];
-
 /**
 * Create the root node
 */
@ -22,11 +19,21 @@ const root: HTMLElement = document.createElement("div");
 root.setAttribute("id", "root");
 document.body.appendChild(root);

+/* tslint:disable */
 function render(): void {
    ReactDOM.render(
        <div>
            <DesignSystemProvider designSystem={DesignSystemDefaults}>
-                <Site title={"FAST Microsoft components"} categories={items} />,
+                <Site title={"FAST Microsoft components"}>
+                    <SiteCategory slot={"category"} name={"Building blocks"}>
+                        <SiteCategoryIcon slot="category-icon">
+                            <div dangerouslySetInnerHTML={{__html: glyphBuildingblocks}} />
+                        </SiteCategoryIcon>
+                    </SiteCategory>
+                    <SiteCategory slot={"category"} name={"Components"}>
+                        {componentFactory(examples)}
+                    </SiteCategory>
+                </Site>
            </DesignSystemProvider>
        </div>,
        root
--- a/packages/fast-components-react-msft/package.json
+++ b/packages/fast-components-react-msft/package.json
@ -24,6 +24,7 @@
  },
  "devDependencies": {
    "@microsoft/fast-development-site-react": "^1.0.0",
+    "@microsoft/fast-glyphs-msft": "^1.0.0",
    "@microsoft/fast-jest-snapshots-react": "^1.0.0",
    "@microsoft/fast-tslint-rules": "^1.0.4",
    "@types/jest": "^22.2.0",
--- a/packages/fast-development-site-react/app/app.tsx
+++ b/packages/fast-development-site-react/app/app.tsx
@ -1,119 +1,84 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import { ICategoryProps } from "../src/components/site/category";
-import Site, { ISiteProps } from "../src";
-
+import { glyphBuildingblocks } from "@microsoft/fast-glyphs-msft";
+import Site, { SiteCategory, SiteCategoryIcon, SiteCategoryItem, SiteMenu, SiteMenuItem } from "../src";
 import Button from "./components/button";
 import Paragraph from "./components/paragraph";
 import PolymerHeading from "./components/polymer-heading";

-const items: ICategoryProps[] = [
-    {
-        name: "components",
-        items: [
-            {
-                name: "button",
-                component: Button,
-                data: [
-                    {
-                        children: "foo"
-                    },
-                    {
-                        children: "bar"
-                    },
-                    {
-                        children: "bat"
-                    },
-                    {
-                        children: "foo"
-                    },
-                    {
-                        children: "bar"
-                    },
-                    {
-                        children: "bat"
-                    },
-                    {
-                        children: "foo"
-                    },
-                    {
-                        children: "bar"
-                    },
-                    {
-                        children: "bat"
-                    },
-                    {
-                        children: "foo"
-                    },
-                    {
-                        children: "bar"
-                    },
-                    {
-                        children: "bat"
-                    },
-                    {
-                        children: "foo"
-                    },
-                    {
-                        children: "bar"
-                    },
-                    {
-                        children: "bat"
-                    },
-                    {
-                        children: "foo"
-                    },
-                    {
-                        children: "bar"
-                    },
-                    {
-                        children: "bat"
-                    },
-                    {
-                        children: "foo"
-                    },
-                    {
-                        children: "bar"
-                    },
-                    {
-                        children: "bat"
-                    }
-                ]
-            },
-            {
-                name: "paragraph",
-                component: Paragraph,
-                categoryItemComponentMinWidth: 400,
-                data: [{}, {}, {}, {}]
-            },
-            {
-                name: "polymer-heading",
-                component: PolymerHeading,
-                type: "polymer",
-                data: [
-                    {
-                        class: "foo",
-                        children: "Heading 1"
-                    },
-                    {
-                        class: "bar",
-                        children: "Heading 2"
-                    },
-                    {
-                        class: "bat",
-                        children: "Heading 3"
-                    }
-                ]
-            }
-        ]
-    }
-];
+function renderSiteMenu(): JSX.Element {
+    return (
+        <SiteMenu slot={"header"}>
+            <SiteMenuItem>Hello</SiteMenuItem>
+            <SiteMenuItem>World</SiteMenuItem>
+        </SiteMenu>
+    );
+}

-const render: any = (): void => {
+function renderBuildingBlocks(): JSX.Element {
+    return (
+        <SiteCategory slot={"category"} name={"Building blocks"}>
+            <SiteCategoryIcon slot="category-icon">
+                <div dangerouslySetInnerHTML={{__html: glyphBuildingblocks}} />
+            </SiteCategoryIcon>
+        </SiteCategory>
+    );
+}
+
+function renderComponentsFactory(componentStrings: string[], Component: any): JSX.Element[] {
+    return componentStrings.map((componentString: string, index: number) => {
+        return (
+            <SiteCategoryItem slot={"canvas"} key={index}>
+                <Component>{componentString}</Component>
+            </SiteCategoryItem>
+        );
+    });
+}
+
+function renderComponents1(): JSX.Element {
+    return (
+        <SiteCategory slot={"category"} name={"Components"}>
+            <SiteCategory slot={"category"} name={"Button 1"}>
+                {renderComponentsFactory(["foo", "bar", "bat"], Button)}
+            </SiteCategory>
+            <SiteCategory slot={"category"} name={"Button 2"}>
+                {renderComponentsFactory(["foo 1", "bar 2", "bat 3"], Button)}
+            </SiteCategory>
+        </SiteCategory>
+    );
+}
+
+function renderComponents2(): JSX.Element {
+    return (
+        <SiteCategory slot={"category"} name={"Components 2"}>
+            <SiteCategory slot={"category"} name={"Paragraph"}>
+                {renderComponentsFactory(["itsy", "bitsy", "spider"], Paragraph)}
+            </SiteCategory>
+            {renderComponents2Nested()}
+        </SiteCategory>
+    );
+}
+
+function renderComponents2Nested(): JSX.Element {
+    return (
+        <SiteCategory slot={"category"} name={"Components 2 nested"}>
+            <SiteCategory slot={"category"} name={"Paragraph 2 nested"}>
+                {renderComponentsFactory(["fee", "fi", "fo", "fum"], Paragraph)}
+            </SiteCategory>
+        </SiteCategory>
+    );
+}
+
+function render(): void {
    ReactDOM.render(
-        <Site title={"FAST Development site test"} categories={items} />,
+        <Site title={"FAST Development site test"}>
+            {renderSiteMenu()}
+            {renderBuildingBlocks()}
+            {renderComponents1()}
+            {renderComponents2()}
+        </Site>,
        document.getElementById("root")
    );
-};
+}

 render();
--- a/packages/fast-development-site-react/app/components/paragraph.tsx
+++ b/packages/fast-development-site-react/app/components/paragraph.tsx
@ -5,7 +5,7 @@ class Paragraph extends React.Component<{}, {}> {
    public render(): JSX.Element {
        return (
            <p>
-                paragraph
+                {this.props.children}
            </p>
        );
    }
--- a/packages/fast-development-site-react/package.json
+++ b/packages/fast-development-site-react/package.json
@ -26,6 +26,7 @@
    "@microsoft/fast-jss-manager-react": "^1.0.0"
  },
  "devDependencies": {
+    "@microsoft/fast-glyphs-msft": "^1.0.0",
    "@microsoft/fast-tslint-rules": "^1.0.4",
    "@polymer/polymer": "^3.0.0-pre.10",
    "@types/react": "^16.0.0",
--- a/packages/fast-development-site-react/src/components/shell/index.tsx
+++ b/packages/fast-development-site-react/src/components/shell/index.tsx
@ -2,9 +2,11 @@ import * as React from "react";
 import manageJss, { ComponentStyles, IManagedClasses } from "@microsoft/fast-jss-manager-react";
 import { IDevSiteDesignSystem } from "../design-system";
 import ShellActionBar from "./action-bar";
+import ShellInfoBar from "./info-bar";
 import ShellCanvas from "./canvas";
 import ShellHeader from "./header";
 import ShellPane from "./pane";
+import ShellPaneCollapse from "./pane-collapse";
 import ShellRow from "./row";

 /* tslint:disable-next-line */
@ -14,6 +16,15 @@ export interface IShellManagedClasses {
    shell: string;
 }

+export enum ShellSlot {
+    header = "header",
+    actionBar = "action-bar",
+    canvas = "canvas",
+    infoBar = "info-bar",
+    pane = "pane",
+    row = "row"
+}
+
 const style: ComponentStyles<IShellManagedClasses, IDevSiteDesignSystem> = {
    shell: {
        fontFamily: "Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif",
@ -32,4 +43,4 @@ class Shell extends React.Component<IShellProps & IManagedClasses<IShellManagedC
 }

 export default manageJss(style)(Shell);
-export { ShellActionBar, ShellCanvas, ShellHeader, ShellPane, ShellRow };
+export { ShellActionBar, ShellInfoBar, ShellCanvas, ShellHeader, ShellPane, ShellPaneCollapse, ShellRow };
--- a/packages/fast-development-site-react/src/components/shell/info-bar.tsx
+++ b/packages/fast-development-site-react/src/components/shell/info-bar.tsx
@ -0,0 +1,37 @@
+import * as React from "react";
+import manageJss, { ComponentStyles, IManagedClasses } from "@microsoft/fast-jss-manager-react";
+import { IDevSiteDesignSystem } from "../design-system";
+
+/* tslint:disable-next-line */
+export interface IShellInfoBarProps {}
+
+export interface IShellInfoBarManagedClasses {
+    shell__info_bar: string;
+}
+
+const style: ComponentStyles<IShellInfoBarManagedClasses, IDevSiteDesignSystem> = {
+    shell__info_bar: {
+        background: (config: IDevSiteDesignSystem): string => {
+            return config.lightGrey;
+        },
+        padding: (config: IDevSiteDesignSystem): string => {
+            return `${config.navigationBarHeight / 4}px`;
+        },
+        minHeight: (config: IDevSiteDesignSystem): string => {
+            return `${config.navigationBarHeight / 2}px`;
+        }
+    }
+};
+
+class ShellInfoBar extends React.Component<IShellInfoBarProps & IManagedClasses<IShellInfoBarManagedClasses>, {}> {
+
+    public render(): JSX.Element {
+        return (
+            <div className={this.props.managedClasses.shell__info_bar}>
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+export default manageJss(style)(ShellInfoBar);
--- a/packages/fast-development-site-react/src/components/shell/pane-collapse.tsx
+++ b/packages/fast-development-site-react/src/components/shell/pane-collapse.tsx
@ -0,0 +1,39 @@
+import * as React from "react";
+import manageJss, { ComponentStyles, IManagedClasses } from "@microsoft/fast-jss-manager-react";
+import { IDevSiteDesignSystem } from "../design-system";
+
+/* tslint:disable-next-line */
+export interface IShellPaneCollapseProps {
+    onUpdate: () => void;
+}
+
+export interface IShellPaneCollapseManagedClasses {
+    shell__pane_collapse: string;
+}
+
+const style: ComponentStyles<IShellPaneCollapseManagedClasses, IDevSiteDesignSystem> = {
+    shell__pane_collapse: {
+        background: "blue",
+        height: "48px",
+        width: "48px"
+    }
+};
+
+class ShellPaneCollapse extends React.Component<IShellPaneCollapseProps & IManagedClasses<IShellPaneCollapseManagedClasses>, {}> {
+
+    public render(): JSX.Element {
+        return (
+            <button className={this.props.managedClasses.shell__pane_collapse} onClick={this.handleUpdateCollapse}>
+                {this.props.children}
+            </button>
+        );
+    }
+
+    private handleUpdateCollapse = (): void => {
+        if (this.props.onUpdate) {
+            this.props.onUpdate();
+        }
+    }
+}
+
+export default manageJss(style)(ShellPaneCollapse);
--- a/packages/fast-development-site-react/src/components/shell/pane.tsx
+++ b/packages/fast-development-site-react/src/components/shell/pane.tsx
@ -2,17 +2,28 @@ import * as React from "react";
 import manageJss, { ComponentStyles, IManagedClasses } from "@microsoft/fast-jss-manager-react";
 import { IDevSiteDesignSystem } from "../design-system";

-/* tslint:disable-next-line */
-export interface IShellPaneProps { }
+export interface IShellPaneProps {
+    collapsed?: boolean;
+}

 export interface IShellPaneManagedClasses {
    shell__pane: string;
+    shell__pane_collapsed: string;
+    shell__pane_expanded: string;
 }

 const style: ComponentStyles<IShellPaneManagedClasses, IDevSiteDesignSystem> = {
    shell__pane: {
        display: "inline-block",
-        flexGrow: "1"
+        backgroundColor: (config: IDevSiteDesignSystem): string => {
+            return config.lightGrey;
+        }
+    },
+    shell__pane_collapsed: {
+        width: "48px",
+    },
+    shell__pane_expanded: {
+        width: "300px"
    }
 };

@ -21,10 +32,16 @@ class ShellPane extends React.Component<IShellPaneProps & IManagedClasses<IShell
    public render(): JSX.Element {
        return (
            <div className={this.props.managedClasses.shell__pane}>
-                {this.props.children}
+                <div className={this.getInnerDivClassNames()}>
+                    {this.props.children}
+                </div>
            </div>
        );
    }
+
+    private getInnerDivClassNames(): string {
+        return this.props.collapsed ? this.props.managedClasses.shell__pane_collapsed : this.props.managedClasses.shell__pane_expanded;
+    }
 }

 export default manageJss(style)(ShellPane);
--- a/packages/fast-development-site-react/src/components/site/category-icon.tsx
+++ b/packages/fast-development-site-react/src/components/site/category-icon.tsx
@ -0,0 +1,14 @@
+import * as React from "react";
+import { Link } from "react-router-dom";
+
+export interface ISiteCategoryIconProps {
+    slot?: string;
+}
+
+class SiteCategoryIcon extends React.Component<ISiteCategoryIconProps, {}> {
+    public render(): JSX.Element {
+        return <React.Fragment>{this.props.children}</React.Fragment>;
+    }
+}
+
+export default SiteCategoryIcon;
--- a/packages/fast-development-site-react/src/components/site/category-item.tsx
+++ b/packages/fast-development-site-react/src/components/site/category-item.tsx
@ -2,12 +2,12 @@ import * as React from "react";
 import manageJss, { ComponentStyles, IManagedClasses } from "@microsoft/fast-jss-manager-react";
 import { IDevSiteDesignSystem } from "../design-system";

-export interface ICategoryItemManagedClasses {
+export interface ISiteCategoryItemManagedClasses {
    category_item: string;
    category_item__component: string;
 }

-const style: ComponentStyles<ICategoryItemManagedClasses, IDevSiteDesignSystem> = {
+const style: ComponentStyles<ISiteCategoryItemManagedClasses, IDevSiteDesignSystem> = {
    category_item: {
        display: "flex",
        flexWrap: "wrap",
@ -27,63 +27,21 @@ const style: ComponentStyles<ICategoryItemManagedClasses, IDevSiteDesignSystem>
    }
 };

-export interface ICategoryItemProps {
-    name: string;
+export interface ISiteCategoryItemProps {
+    slot: string;
    categoryItemComponentMinWidth?: number;
    type?: string;
-    component: any;
-    data: any[];
 }

-class CategoryItem extends React.Component<ICategoryItemProps & IManagedClasses<ICategoryItemManagedClasses>, {}> {
+class SiteCategoryItem extends React.Component<ISiteCategoryItemProps & IManagedClasses<ISiteCategoryItemManagedClasses>, {}> {

    public render(): JSX.Element {
        return (
            <div className={this.props.managedClasses.category_item}>
-                {this.renderComponent()}
+                {this.props.children}
            </div>
        );
    }
-
-    private generateStyle(): any {
-        if (this.props.categoryItemComponentMinWidth) {
-            return {
-                style: {
-                    minWidth: `${this.props.categoryItemComponentMinWidth}px`
-                }
-            };
-        }
-    }
-
-    private renderComponent(): JSX.Element[] {
-        if (this.props.data) {
-            return this.props.data.map((data: any, index: number) => {
-                if (this.props.type === "polymer") {
-                    return (
-                        <div
-                            key={index}
-                            className={this.props.managedClasses.category_item__component}
-                            {...this.generateStyle()}
-                        >
-                            <this.props.component.is {...data}>
-                                {...data.children}
-                            </this.props.component.is>
-                        </div>
-                    );
-                } else {
-                    return (
-                        <div
-                            key={index}
-                            className={this.props.managedClasses.category_item__component}
-                            {...this.generateStyle()}
-                        >
-                            <this.props.component {...data} />
-                        </div>
-                    );
-                }
-            });
-        }
-    }
 }

-export default manageJss(style)(CategoryItem);
+export default manageJss(style)(SiteCategoryItem);
--- a/packages/fast-development-site-react/src/components/site/category-list.tsx
+++ b/packages/fast-development-site-react/src/components/site/category-list.tsx
@ -1,10 +1,10 @@
 import * as React from "react";
 import { Link } from "react-router-dom";
-import { ICategoryItemProps } from "./category-item";
-import { ICategoryProps } from "./category";
+import { ISiteCategoryItemProps } from "./category-item";
+import { ISiteCategoryProps } from "./category";
 import { ISiteProps } from "./";

-class CategoryList extends React.Component<ISiteProps, {}> {
+class SiteCategoryList extends React.Component<ISiteProps, {}> {

    public render(): JSX.Element {
        return (
@ -17,31 +17,8 @@ class CategoryList extends React.Component<ISiteProps, {}> {
    }

    private renderCategoryLinks(): JSX.Element[] {
-        return this.props.categories.map((category: ICategoryProps, index: number): JSX.Element => {
-            return (
-                <li key={category.name + index}>
-                    <Link to={`/${category.name}`}>
-                        {category.name}
-                    </Link>
-                    <ul>
-                        {this.renderCategoryItemLinks(category)}
-                    </ul>
-                </li>
-            );
-        });
-    }
-
-    private renderCategoryItemLinks(category: ICategoryProps): JSX.Element[] {
-        return category.items.map((categoryItem: ICategoryItemProps, index: number): JSX.Element => {
-            return (
-                <li key={category.name + categoryItem.name + index}>
-                    <Link to={`/${category.name}/${categoryItem.name}`}>
-                        {categoryItem.name}
-                    </Link>
-                </li>
-            );
-        });
+        return [];
    }
 }

-export default CategoryList;
+export default SiteCategoryList;
--- a/packages/fast-development-site-react/src/components/site/category.tsx
+++ b/packages/fast-development-site-react/src/components/site/category.tsx
@ -1,36 +1,19 @@
 import * as React from "react";
 import { Link } from "react-router-dom";
-import { ICategoryItemProps } from "./category-item";

-export interface ICategoryProps {
+export interface ISiteCategoryProps {
+    slot: string;
    name: string;
-    items: ICategoryItemProps[];
 }

-class Category extends React.Component<ICategoryProps, {}> {
-
+class SiteCategory extends React.Component<ISiteCategoryProps, {}> {
    public render(): JSX.Element {
        return (
-            <div>
-                <h1>{this.props.name}</h1>
-                <ul>
-                    {this.renderCategoryLinks()}
-                </ul>
-            </div>
+            <React.Fragment>
+                {this.props.children}
+            </React.Fragment>
        );
    }
-
-    private renderCategoryLinks(): JSX.Element[] {
-        return this.props.items.map((item: ICategoryItemProps, index: number) => {
-            return (
-                <li key={index}>
-                    <Link to={`/${this.props.name}/${item.name}`}>
-                        {item.name}
-                    </Link>
-                </li>
-            );
-        });
-    }
 }

-export default Category;
+export default SiteCategory;
--- a/packages/fast-development-site-react/src/components/site/index.tsx
+++ b/packages/fast-development-site-react/src/components/site/index.tsx
@ -1,30 +1,75 @@
 import * as React from "react";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
-import { DesignSystemProvider } from "@microsoft/fast-jss-manager-react";
-import devSiteDesignSystemDefaults from "../design-system";
-
-import Shell, { ShellActionBar, ShellCanvas, ShellHeader, ShellPane, ShellRow } from "../shell";
-import Breadcrumb, { BreadcrumbItem } from "../breadcrumb";
+import manageJss, { ComponentStyles, DesignSystemProvider, IManagedClasses } from "@microsoft/fast-jss-manager-react";
+import { glyphBuildingblocks, glyphGlobalnavbutton } from "@microsoft/fast-glyphs-msft";
+import uuid from "uuid/v1";
+import devSiteDesignSystemDefaults, { IDevSiteDesignSystem } from "../design-system";
+import Shell, { ShellActionBar, ShellCanvas, ShellHeader, ShellInfoBar, ShellPane, ShellPaneCollapse, ShellRow, ShellSlot } from "../shell";
+import Toc, { TocItem } from "../toc";
 import CategoryList from "./category-list";
-import Category, { ICategoryProps } from "./category";
-import CategoryItem, { ICategoryItemProps } from "./category-item";
+import SiteMenu from "./menu";
+import SiteMenuItem from "./menu-item";
+import SiteCategory from "./category";
+import SiteCategoryIcon from "./category-icon";
+import SiteCategoryItem from "./category-item";
 import NotFound from "./not-found";

-interface ISiteProps {
+export interface ISiteProps {
    title: string;
-    categories: ICategoryProps[];
+    collapsed?: boolean;
 }

-class Site extends React.Component<ISiteProps, {}> {
+export interface IComponentRoutes {
+    route: string;
+    component: JSX.Element[];
+}
+
+export interface ISiteState {
+    tableOfContentsCollapsed: boolean;
+    routes: IComponentRoutes[];
+}
+
+export enum SiteSlot {
+    category = "category",
+    categoryIcon = "category-icon"
+}
+
+export interface ISiteManagedClasses {
+    site__paneToggleButton: string;
+    site__paneTogglButtonIcon: string;
+}
+
+const styles: ComponentStyles<ISiteManagedClasses, IDevSiteDesignSystem> = {
+    site__paneToggleButton: {
+        width: "32px",
+        height: "32px",
+        padding: "0"
+    },
+    site__paneTogglButtonIcon: {
+        display: "inline-block",
+        width: "32px",
+        height: "32px"
+    }
+};
+
+class Site extends React.Component<ISiteProps & IManagedClasses<ISiteManagedClasses>, ISiteState> {
+
+    constructor(props: ISiteProps & IManagedClasses<ISiteManagedClasses>) {
+        super(props);
+
+        this.state = {
+            tableOfContentsCollapsed: this.props.collapsed || false,
+            routes: this.getRoutes((this.props.children as JSX.Element), "/", SiteSlot.category)
+        };
+    }

    public render(): JSX.Element {
        return (
            <DesignSystemProvider designSystem={devSiteDesignSystemDefaults}>
                <BrowserRouter>
                    <Switch>
-                        {this.renderShell(0, "/", this.props, CategoryList)}
-                        {this.renderCategoryRoutes()}
-                        {this.renderCategoryItemRoutes()}
+                        {this.renderShell(0, "/", null)}
+                        {this.renderRoutes()}
                        <Route path="*" component={NotFound} />
                    </Switch>
                </BrowserRouter>
@ -32,69 +77,244 @@ class Site extends React.Component<ISiteProps, {}> {
        );
    }

-    private renderShell(key: number, path: string, element: any, CanvasComponent: any): JSX.Element {
+    private renderRoutes(): JSX.Element[] {
+        return this.state.routes.map((route: IComponentRoutes, index: number) => {
+            return this.renderShell(index + 1, route.route, route.component);
+        });
+    }
+
+    private renderShell(key: number, path: string, CanvasComponent: any): JSX.Element {
        return (
            <Route key={key} exact={true} path={path}>
                <Shell>
-                    <ShellHeader>
-                        {this.props.title}
-                    </ShellHeader>
-                    <ShellActionBar>
-                        <Breadcrumb>
-                            {this.generateBreadcrumbItems(path)}
-                        </Breadcrumb>
-                    </ShellActionBar>
-                    <ShellRow>
-                        <ShellCanvas>
-                            <CanvasComponent {...element} />
-                        </ShellCanvas>
-                    </ShellRow>
+                    {this.renderShellHeader()}
+                    {this.renderShellRow(CanvasComponent, path)}
+                    {this.renderShellInfoBar()}
                </Shell>
            </Route>
        );
    }

-    private renderCategoryRoutes(): JSX.Element[] {
-        return this.props.categories.map((category: ICategoryProps, itemIndex: number): JSX.Element => {
-            return this.renderShell(itemIndex, `/${category.name}`, category, Category);
-        });
+    private renderShellHeader(): JSX.Element {
+        return (
+            <ShellHeader>
+                {this.getSlotItems(this, ShellSlot.header)}
+                {this.props.title}
+            </ShellHeader>
+        );
    }

-    private renderCategoryItemRoutes(): JSX.Element[][] {
-        return this.props.categories.map((category: ICategoryProps): JSX.Element[] => {
-            return category.items.map((categoryItem: ICategoryItemProps, itemIndex: number): JSX.Element => {
-                return this.renderShell(itemIndex, `/${category.name}/${categoryItem.name}`, categoryItem, CategoryItem);
+    private renderShellRow(CanvasComponent: any, path: string): JSX.Element {
+        return (
+            <ShellRow>
+                <ShellPane collapsed={this.state.tableOfContentsCollapsed}>
+                    {this.getPaneCollapseToggle()}
+                    {this.getSlotItems(this, ShellSlot.pane)}
+                    {this.getRootToc(this.props.children, SiteSlot.category, path, "/")}
+                </ShellPane>
+                <ShellCanvas>
+                    <ShellActionBar>
+                        {this.getSlotItems(this, ShellSlot.actionBar)}
+                    </ShellActionBar>
+                    {this.getSlotItems(this, ShellSlot.canvas)}
+                    {CanvasComponent}
+                </ShellCanvas>
+            </ShellRow>
+        );
+    }
+
+    private renderShellInfoBar(): JSX.Element {
+        return (
+            <ShellInfoBar>
+                {this.getSlotItems(this, ShellSlot.infoBar)}
+            </ShellInfoBar>
+        );
+    }
+
+    /**
+     * Gets all of the potential routes as strings to be used to build the shell
+     */
+    private getRoutes(items: JSX.Element, baseRoute: string, slot: string, routes?: IComponentRoutes[]): IComponentRoutes[] {
+        let currentRoutes: IComponentRoutes[] = routes;
+        const childItems: JSX.Element[] = Array.isArray(items) ? items : [items];
+
+        childItems.forEach((item: JSX.Element): void => {
+            if (item && item.props && item.props.slot === slot) {
+                currentRoutes = this.getCurrentRoute(item, slot, baseRoute, currentRoutes || []);
+            }
+        });
+
+        return currentRoutes;
+    }
+
+    private getCurrentRoute(item: JSX.Element, slot: string, baseRoute: string, currentRoutes: IComponentRoutes[]): IComponentRoutes[] {
+        const currentRoute: IComponentRoutes[] = currentRoutes;
+        const itemRoute: string = `${baseRoute}${item.props.name}/`;
+        const slotItems: JSX.Element[] = this.getSlotItems(item, ShellSlot.canvas);
+
+        if (slotItems && slotItems.length > 0) {
+            currentRoute.push({
+                route: this.convertToHyphenated(itemRoute),
+                component: slotItems
            });
-        });
-    }
-
-    private generateBreadcrumbItems(path: string): JSX.Element[] {
-        const pathItems: string[] = path.split("/").filter((item: string) => {
-            return item !== "";
-        });
-
-        pathItems.unshift("");
-
-        if (pathItems.length === 0) {
-            return null;
        }

-        let to: string = "";
+        if (item.props.children) {
+            return this.getRoutes(item.props.children, itemRoute, slot, currentRoute);
+        }

-        return pathItems.map((item: string, index: number) => {
-            to += `${to === "/" ? "" : "/"}${item}`;
+        return currentRoute;
+    }

-            return (
-                <BreadcrumbItem
-                    key={index}
-                    to={index === pathItems.length - 1 ? null : to}
-                >
-                    {item !== "" ? item.charAt(0).toUpperCase() + item.slice(1, item.length) : "Index"}
-                </BreadcrumbItem>
-            );
+    private handlePaneCollapse = (): void => {
+        this.setState({
+            tableOfContentsCollapsed: !this.state.tableOfContentsCollapsed
        });
    }
+
+    private getSlotItems(component: any, slot: string): JSX.Element[] {
+        return React.Children.map(component.props.children, (child: JSX.Element, index: number) => {
+            if (child.props && child.props.slot === slot) {
+                return child;
+            }
+        });
+    }
+
+    private getPaneCollapseToggle(): JSX.Element {
+        return (
+            <button
+                onClick={this.handlePaneCollapse}
+                className={this.props.managedClasses.site__paneToggleButton}
+                dangerouslySetInnerHTML={{__html: glyphGlobalnavbutton}}
+            />
+        );
+    }
+
+    private getRootToc(items: any, slot: string, currentPath: string, itemsPath: string): JSX.Element {
+        if (this.props && this.props.children) {
+            return (this.getToc(items, slot, currentPath, itemsPath, this.state.tableOfContentsCollapsed) as JSX.Element);
+        }
+    }
+
+    private getToc(
+        items: any,
+        slot: string,
+        currentPath: string,
+        itemsPath: string,
+        collapsed?: boolean
+    ): JSX.Element | JSX.Element[] {
+        const categoryItems: JSX.Element[] = [];
+        const rootTocItems: JSX.Element[] = [];
+        const tocItems: any[] = Array.isArray(items) ? items : [items];
+
+        tocItems.forEach((item: JSX.Element) => {
+            if (item.props.slot === slot && ((collapsed && this.getTocItemCategoryIcon(item)) || !collapsed)) {
+                categoryItems.push(item);
+            }
+        });
+
+        categoryItems.forEach((categoryItem: JSX.Element, index: number) => {
+            rootTocItems.push(this.getTocItem(index, itemsPath, categoryItem, categoryItem, currentPath, slot));
+        });
+
+        return rootTocItems;
+    }
+
+    private getTocItem(
+        index: number,
+        itemsPath: string,
+        items: JSX.Element,
+        child: JSX.Element,
+        currentPath: string,
+        slot: string
+    ): JSX.Element {
+        const tocItemPath: string = this.convertToHyphenated(`${itemsPath}${items.props.name}/`);
+        const contentId: string = uuid();
+        const active: boolean = currentPath.match(tocItemPath) !== null;
+        const attributes: any = {
+            key: index,
+            active,
+            heading: child && child.props ? !Boolean(child.props.children) : false,
+            to: void(0),
+            controls: contentId
+        };
+
+        if (this.hasCanvasContent(items)) {
+            attributes.to = tocItemPath;
+        }
+
+        if (child && child.props && child.props.name) {
+            return (
+                <TocItem {...attributes}>
+                    {this.getTocItemCategory(child.props.name, this.getTocItemCategoryIcon(child))}
+                    {this.getTocItemMenu(child, slot, currentPath, tocItemPath)}
+                </TocItem>
+            );
+        }
+
+        return null;
+    }
+
+    private getTocItemMenu(item: JSX.Element, slot: string, currentPath: string, tocItemPath: string): JSX.Element {
+        if (
+            item.props.children &&
+            (!item.props.children.props || (item.props.children.props && item.props.children.props.slot !== SiteSlot.categoryIcon))
+        ) {
+            return (this.getToc(item.props.children, slot, currentPath, tocItemPath) as JSX.Element);
+        }
+
+        return null;
+    }
+
+    private getTocItemCategory(name: string | any, icon?: JSX.Element): JSX.Element {
+        if (this.state.tableOfContentsCollapsed) {
+            return icon ? <span className={this.props.managedClasses.site__paneTogglButtonIcon}>{icon}</span> : null;
+        }
+
+        return (
+            <React.Fragment>
+                {icon ? <span className={this.props.managedClasses.site__paneTogglButtonIcon}>{icon}</span> : null} {name}
+            </React.Fragment>
+        );
+    }
+
+    private getTocItemCategoryIcon(item: JSX.Element): JSX.Element {
+        if (Array.isArray(item.props.children)) {
+            item.props.children.forEach((childElement: JSX.Element) => {
+                if (childElement.props.slot === SiteSlot.categoryIcon) {
+                    return childElement;
+                }
+            });
+        } else {
+            if (item.props.children.props.slot === SiteSlot.categoryIcon) {
+                return item;
+            }
+        }
+
+        return null;
+    }
+
+    private hasCanvasContent(item: JSX.Element): boolean {
+        let hasCanvasContent: boolean = false;
+        const slot: string = ShellSlot.canvas;
+
+        if (item.props.children) {
+            if (Array.isArray(item.props.children)) {
+                item.props.children.forEach((child: JSX.Element) => {
+                    hasCanvasContent = child.props.slot === slot;
+                });
+            } else {
+                hasCanvasContent = item.props.children.props && item.props.children.props.slot === slot;
+            }
+        }
+
+        return hasCanvasContent;
+    }
+
+    private convertToHyphenated(name: string): string {
+        return name.toLowerCase().replace(/\s/g, "-");
+    }
 }

-export default Site;
-export { ISiteProps };
+export default manageJss(styles)(Site);
+export { SiteMenu, SiteMenuItem, SiteCategory, SiteCategoryIcon, SiteCategoryItem };
--- a/packages/fast-development-site-react/src/components/site/menu-item.tsx
+++ b/packages/fast-development-site-react/src/components/site/menu-item.tsx
@ -0,0 +1,14 @@
+import * as React from "react";
+
+class SiteMenuItem extends React.Component<{}, {}> {
+
+    public render(): JSX.Element {
+        return (
+            <li>
+                {this.props.children}
+            </li>
+        );
+    }
+}
+
+export default SiteMenuItem;
--- a/packages/fast-development-site-react/src/components/site/menu.tsx
+++ b/packages/fast-development-site-react/src/components/site/menu.tsx
@ -0,0 +1,87 @@
+import * as React from "react";
+import manageJss, { ComponentStyles, IManagedClasses } from "@microsoft/fast-jss-manager-react";
+import { IDevSiteDesignSystem } from "../design-system";
+
+export interface ISiteMenuProps {
+    slot: string;
+}
+
+export interface ISiteMenuState {
+    visibility: boolean;
+}
+
+export interface ISiteNavManagedClasses {
+    site__menu: string;
+    site__menu__nav: string;
+    site__menu__button: string;
+    site__menu__button__svg: string;
+}
+
+const style: ComponentStyles<ISiteNavManagedClasses, IDevSiteDesignSystem> = {
+    site__menu: {
+        position: "relative",
+        display: "inline-block"
+    },
+    site__menu__nav: {
+        position: "absolute",
+        "&[aria-hidden=\"true\"]": {
+            display: "none"
+        }
+    },
+    site__menu__button: {
+        width: "32px",
+        height: "32px",
+        padding: "0"
+    },
+    site__menu__button__svg: {
+        fill: "#FFFFFF"
+    }
+};
+
+class SiteMenu extends React.Component<ISiteMenuProps & IManagedClasses<ISiteNavManagedClasses>, ISiteMenuState> {
+
+    constructor(props: ISiteMenuProps & IManagedClasses<ISiteNavManagedClasses>) {
+        super(props);
+
+        this.state = {
+            visibility: true
+        };
+    }
+
+    // tslint:disable
+    public render(): JSX.Element {
+        return (
+            <div className={this.props.managedClasses.site__menu}>
+                <button onClick={this.handleMenuVisibilityToggle} className={this.props.managedClasses.site__menu__button}>
+                    <svg
+                        id="Layer_1"
+                        data-name="Layer 1"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 32 32"
+                        className={this.props.managedClasses.site__menu__button__svg}
+                    >
+                        <title>waffle</title>
+                        <path d="M6.2,10V6h4v4Zm0,8V14h4v4Zm0,8V22h4v4Zm8-16V6h4v4Zm0,8V14h4v4Zm0,8V22h4v4Zm8-20h4v4h-4Zm0,12V14h4v4Zm0,8V22h4v4Z"/>
+                    </svg>
+                </button>
+                <nav className={this.props.managedClasses.site__menu__nav} {...this.getNavigationAttributes()}>
+                    <ul>
+                        {this.props.children}
+                    </ul>
+                </nav>
+            </div>
+        );
+    }
+
+    private handleMenuVisibilityToggle = (): void => {
+        this.setState({
+            visibility: !this.state.visibility
+        });
+    }
+
+    private getNavigationAttributes(): any {
+        return { "aria-hidden": this.state.visibility };
+    }
+}
+
+export default manageJss(style)(SiteMenu);
--- a/packages/fast-development-site-react/src/components/site/not-found.tsx
+++ b/packages/fast-development-site-react/src/components/site/not-found.tsx
@ -5,7 +5,7 @@ class NotFound extends React.Component<{}, {}> {
    public render(): JSX.Element {
        return (
            <div>
-                404
+                404 - Page not found
            </div>
        );
    }
--- a/packages/fast-development-site-react/src/components/toc/index.tsx
+++ b/packages/fast-development-site-react/src/components/toc/index.tsx
@ -0,0 +1,38 @@
+import * as React from "react";
+import { IDevSiteDesignSystem } from "../design-system";
+import manageJss, { ComponentStyles, IManagedClasses } from "@microsoft/fast-jss-manager-react";
+import TocItem from "./toc-item";
+import TocMenu from "./toc-menu";
+
+export interface ITocProps {
+    id: string;
+    ariaHidden: boolean;
+}
+
+export interface ITocManagedClasses {
+    toc: string;
+}
+
+const style: ComponentStyles<ITocManagedClasses, IDevSiteDesignSystem> = {
+    toc: {
+        margin: "0",
+        padding: "0",
+        "&[aria-hidden='true']": {
+            display: "none"
+        }
+    }
+};
+
+class Toc extends React.Component<ITocProps & IManagedClasses<ITocManagedClasses>, {}> {
+
+    public render(): JSX.Element {
+        return (
+            <ul id={this.props.id} className={this.props.managedClasses.toc} aria-hidden={this.props.ariaHidden}>
+                {this.props.children}
+            </ul>
+        );
+    }
+}
+
+export default manageJss(style)(Toc);
+export { TocItem, TocMenu };
--- a/packages/fast-development-site-react/src/components/toc/toc-item.tsx
+++ b/packages/fast-development-site-react/src/components/toc/toc-item.tsx
@ -0,0 +1,102 @@
+import * as React from "react";
+import { Link } from "react-router-dom";
+import TocMenu from "./toc-menu";
+import { IDevSiteDesignSystem } from "../design-system";
+import manageJss, { ComponentStyles, IManagedClasses } from "@microsoft/fast-jss-manager-react";
+
+export interface ITocItemProps {
+    to?: string;
+    controls?: string;
+    onToggleExpand?: () => void;
+    heading: boolean;
+    active: boolean;
+}
+
+export interface ITocItemManagedClasses {
+    toc__item: string;
+    toc__item_active: string;
+}
+
+export enum itemType {
+    tocMenu = "tocMenu",
+    link = "link"
+}
+
+const style: ComponentStyles<ITocItemManagedClasses, IDevSiteDesignSystem> = {
+    toc__item: {
+        padding: "6px 12px",
+        display: "block"
+    },
+    toc__item_active: {
+        background: "lightgray"
+    }
+};
+
+class TocItem extends React.Component<ITocItemProps & IManagedClasses<ITocItemManagedClasses>, {}> {
+
+    public render(): JSX.Element {
+        const type: itemType = this.getType();
+
+        return (
+            <li className={this.getClassNames()}>
+                {this.renderType(type)}
+            </li>
+        );
+    }
+
+    private renderLink(): JSX.Element {
+        return (
+            <Link to={this.props.to}>
+                {this.props.children}
+            </Link>
+        );
+    }
+
+    private renderTocMenu(): JSX.Element {
+        if (this.props.children[1]) {
+            return (
+                <TocMenu controls={this.props.controls} active={this.props.active}>
+                    {this.props.children[0]}
+                    {this.props.children[1]}
+                </TocMenu>
+            );
+        }
+
+        return <React.Fragment>{this.props.children}</React.Fragment>;
+    }
+
+    private renderType(type: itemType): JSX.Element {
+        switch (type) {
+            case itemType.link:
+                return this.renderLink();
+            case itemType.tocMenu:
+                return this.renderTocMenu();
+        }
+
+        return null;
+    }
+
+    private getType(): itemType {
+        return this.props.to
+            ? itemType.link
+            : itemType.tocMenu;
+    }
+
+    private handleButtonClick = (): void => {
+        if (this.props.onToggleExpand) {
+            this.props.onToggleExpand();
+        }
+    }
+
+    private getClassNames(): string {
+        const classNames: string = this.props.managedClasses.toc__item;
+
+        if (this.props.active && this.props.to) {
+            return `${classNames} ${this.props.managedClasses.toc__item_active}`;
+        }
+
+        return classNames;
+    }
+}
+
+export default manageJss(style)(TocItem);
--- a/packages/fast-development-site-react/src/components/toc/toc-menu.tsx
+++ b/packages/fast-development-site-react/src/components/toc/toc-menu.tsx
@ -0,0 +1,80 @@
+import * as React from "react";
+import { Link } from "react-router-dom";
+import { IDevSiteDesignSystem } from "../design-system";
+import manageJss, { ComponentStyles, IManagedClasses } from "@microsoft/fast-jss-manager-react";
+import Toc from "./";
+
+export interface ITocMenuProps {
+    controls: string;
+    active: boolean;
+}
+
+export interface ITocMenuState {
+    active: boolean;
+}
+
+export interface ITocMenuManagedClasses {
+    toc__menu: string;
+    toc__menu__button: string;
+}
+
+// tslint:disable-next-line
+const dropdownActive: string = "PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHRpdGxlPmNoZXZyb24tZG93bjwvdGl0bGU+PHBhdGggZD0iTTMwLjUsNy4yOSwzMS45LDguNywxNi4yLDI0LjQuNSw4LjcsMS45LDcuMjlsMTQuMywxNC4zWiIvPjwvc3ZnPg==";
+// tslint:disable-next-line
+const dropdownInactive: string = "PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHRpdGxlPmNoZXZyb24tcmlnaHQ8L3RpdGxlPjxwYXRoIGQ9Ik0yMi43OCwxNiw4LjI1LDEuNDUsOS42NSwwbDE2LDE2LTE2LDE2LTEuNC0xLjQxWiIvPjwvc3ZnPg==";
+
+const style: ComponentStyles<ITocMenuManagedClasses, IDevSiteDesignSystem> = {
+    toc__menu: {},
+    toc__menu__button: {
+        "&[aria-expanded='true']": {
+            "&::after": {
+                content: `url('data:image/svg+xml;base64,${dropdownActive}')`
+            }
+        },
+        "&::after": {
+            content: `url('data:image/svg+xml;base64,${dropdownInactive}')`,
+            fill: "white",
+            display: "inline-block",
+            width: "16px",
+            height: "16px",
+            paddingLeft: "10px"
+        }
+    }
+};
+
+class TocMenu extends React.Component<ITocMenuProps & IManagedClasses<ITocMenuManagedClasses>, ITocMenuState> {
+
+    constructor(props: ITocMenuProps & IManagedClasses<ITocMenuManagedClasses>) {
+        super(props);
+
+        this.state = {
+            active: this.props.active
+        };
+    }
+
+    public render(): JSX.Element {
+        return (
+            <React.Fragment>
+                <button
+                    className={this.props.managedClasses.toc__menu__button}
+                    onClick={this.handleButtonClick}
+                    aria-expanded={this.state.active}
+                    aria-controls={this.props.controls}
+                >
+                    {this.props.children[0]}
+                </button>
+                <Toc id={this.props.controls} ariaHidden={!this.state.active}>
+                    {this.props.children[1]}
+                </Toc>
+            </React.Fragment>
+        );
+    }
+
+    private handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>): void => {
+        this.setState({
+            active: !this.state.active
+        });
+    }
+}
+
+export default manageJss(style)(TocMenu);
--- a/packages/fast-development-site-react/src/index.ts
+++ b/packages/fast-development-site-react/src/index.ts
@ -1,4 +1,5 @@
 import Site from "./components";
 export * from "./components";
+export * from "./utilities";

 export default Site;
--- a/packages/fast-development-site-react/src/utilities/componentExampleFactory.tsx
+++ b/packages/fast-development-site-react/src/utilities/componentExampleFactory.tsx
@ -0,0 +1,14 @@
+import * as React from "react";
+import { SiteCategoryItem } from "../";
+
+export default function componentExampleFactory(examples: any, componentExample: string): 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} />
+            </SiteCategoryItem>
+        );
+    });
+}
--- a/packages/fast-development-site-react/src/utilities/componentFactory.tsx
+++ b/packages/fast-development-site-react/src/utilities/componentFactory.tsx
@ -0,0 +1,13 @@
+import * as React from "react";
+import componentExampleFactory from "./componentExampleFactory";
+import { SiteCategory } from "../";
+
+export default function componentFactory(examples: any): JSX.Element[] {
+    return Object.keys(examples).map((exampleKey: string, index: number) => {
+        return (
+            <SiteCategory key={index} slot={"category"} name={examples[exampleKey].name}>
+                {componentExampleFactory(examples, exampleKey)}
+            </SiteCategory>
+        );
+    });
+}
--- a/packages/fast-development-site-react/src/utilities/index.ts
+++ b/packages/fast-development-site-react/src/utilities/index.ts
@ -0,0 +1,5 @@
+import componentFactory from "./componentFactory";
+export { componentFactory };
+
+import componentExampleFactory from "./componentExampleFactory";
+export { componentExampleFactory };
--- a/packages/fast-glyphs-msft/README.md
+++ b/packages/fast-glyphs-msft/README.md
@ -0,0 +1 @@
+# FAST Microsoft SVG Glyphs
--- a/packages/fast-glyphs-msft/glyphs/building-blocks.svg
+++ b/packages/fast-glyphs-msft/glyphs/building-blocks.svg
@ -0,0 +1,4 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+    <title>building-blocks</title>
+    <path d="M25.2,16h3V30H2.2V4h14V7l7-7,9,9Zm-21,0h10V6H4.2Zm10,2H4.2V28h10Zm2-7v5h5Zm0,7V28h10V18Zm.47-9,6.53,6.54L29.73,9,23.2,2.46Z"/>
+</svg>
--- a/packages/fast-glyphs-msft/glyphs/global-nav-button.svg
+++ b/packages/fast-glyphs-msft/glyphs/global-nav-button.svg
@ -0,0 +1,4 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+    <title>global-nav-button</title>
+    <path d="M.2,10V8h32v2Zm0,8V16h32v2Zm0,8V24h32v2Z"/>
+</svg>
--- a/packages/fast-glyphs-msft/package-lock.json
+++ b/packages/fast-glyphs-msft/package-lock.json
@ -0,0 +1,364 @@
+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "@types/node": {
+      "version": "9.6.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-9.6.2.tgz",
+      "integrity": "sha512-UWkRY9X7RQHp5OhhRIIka58/gVVycL1zHZu0OTsT5LI86ABaMOSbUjAl+b0FeDhQcxclrkyft3kW5QWdMRs8wQ=="
+    },
+    "ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+    },
+    "ansi-styles": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+    },
+    "argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "requires": {
+        "sprintf-js": "1.0.3"
+      }
+    },
+    "arrify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+      "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0="
+    },
+    "babel-code-frame": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
+      "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=",
+      "requires": {
+        "chalk": "1.1.3",
+        "esutils": "2.0.2",
+        "js-tokens": "3.0.2"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "requires": {
+            "ansi-styles": "2.2.1",
+            "escape-string-regexp": "1.0.5",
+            "has-ansi": "2.0.0",
+            "strip-ansi": "3.0.1",
+            "supports-color": "2.0.0"
+          }
+        }
+      }
+    },
+    "balanced-match": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "requires": {
+        "balanced-match": "1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "builtin-modules": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
+      "integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8="
+    },
+    "chalk": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.2.tgz",
+      "integrity": "sha512-ZM4j2/ld/YZDc3Ma8PgN7gyAk+kHMMMyzLNryCPGhWrsfAuDVeuid5bpRFTDgMH9JBK2lA4dyyAkkZYF/WcqDQ==",
+      "requires": {
+        "ansi-styles": "3.2.1",
+        "escape-string-regexp": "1.0.5",
+        "supports-color": "5.3.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "requires": {
+            "color-convert": "1.9.1"
+          }
+        },
+        "supports-color": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.3.0.tgz",
+          "integrity": "sha512-0aP01LLIskjKs3lq52EC0aGBAJhLq7B2Rd8HC/DR/PtNNpcLilNmHC12O+hu0usQpo7wtHNRqtrhBwtDb0+dNg==",
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "color-convert": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.1.tgz",
+      "integrity": "sha512-mjGanIiwQJskCC18rPR6OmrZ6fm2Lc7PeGFYwCmy5J34wC6F1PzdGL6xeMfmgicfYcNLGuVFA3WzXtIDCQSZxQ==",
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+    },
+    "commander": {
+      "version": "2.15.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.15.1.tgz",
+      "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag=="
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+    },
+    "diff": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",
+      "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA=="
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+    },
+    "esprima": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.0.tgz",
+      "integrity": "sha512-oftTcaMu/EGrEIu904mWteKIv8vMuOgGYo7EhVJJN00R/EED9DCua/xxHRdYnKtcECzVg7xOWhflvJMnqcFZjw=="
+    },
+    "esutils": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
+      "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs="
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
+    },
+    "glob": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
+      "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
+      "requires": {
+        "fs.realpath": "1.0.0",
+        "inflight": "1.0.6",
+        "inherits": "2.0.3",
+        "minimatch": "3.0.4",
+        "once": "1.4.0",
+        "path-is-absolute": "1.0.1"
+      }
+    },
+    "has-ansi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+      "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
+      "requires": {
+        "ansi-regex": "2.1.1"
+      }
+    },
+    "has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "requires": {
+        "once": "1.4.0",
+        "wrappy": "1.0.2"
+      }
+    },
+    "inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+    },
+    "js-tokens": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
+      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
+    },
+    "js-yaml": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.11.0.tgz",
+      "integrity": "sha512-saJstZWv7oNeOyBh3+Dx1qWzhW0+e6/8eDzo7p5rDFqxntSztloLtuKu+Ejhtq82jsilwOIZYsCz+lIjthg1Hw==",
+      "requires": {
+        "argparse": "1.0.10",
+        "esprima": "4.0.0"
+      }
+    },
+    "make-error": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.4.tgz",
+      "integrity": "sha512-0Dab5btKVPhibSalc9QGXb559ED7G7iLjFXBaj9Wq8O3vorueR5K5jaE3hkG6ZQINyhA/JgG6Qk4qdFQjsYV6g=="
+    },
+    "minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "requires": {
+        "brace-expansion": "1.1.11"
+      }
+    },
+    "minimist": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+      "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
+    },
+    "mkdirp": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+      "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+      "requires": {
+        "minimist": "0.0.8"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "0.0.8",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
+        }
+      }
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "requires": {
+        "wrappy": "1.0.2"
+      }
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
+    },
+    "path-parse": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.5.tgz",
+      "integrity": "sha1-PBrfhx6pzWyUMbbqK9dKD/BVxME="
+    },
+    "resolve": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.6.0.tgz",
+      "integrity": "sha512-mw7JQNu5ExIkcw4LPih0owX/TZXjD/ZUF/ZQ/pDnkw3ZKhDcZZw5klmBlj6gVMwjQ3Pz5Jgu7F3d0jcDVuEWdw==",
+      "requires": {
+        "path-parse": "1.0.5"
+      }
+    },
+    "semver": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz",
+      "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA=="
+    },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+    },
+    "source-map-support": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.4.tgz",
+      "integrity": "sha512-PETSPG6BjY1AHs2t64vS2aqAgu6dMIMXJULWFBGbh2Gr8nVLbCFDo6i/RMMvviIQ2h1Z8+5gQhVKSn2je9nmdg==",
+      "requires": {
+        "source-map": "0.6.1"
+      }
+    },
+    "sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
+    },
+    "strip-ansi": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+      "requires": {
+        "ansi-regex": "2.1.1"
+      }
+    },
+    "supports-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+      "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+    },
+    "ts-node": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-5.0.1.tgz",
+      "integrity": "sha512-XK7QmDcNHVmZkVtkiwNDWiERRHPyU8nBqZB1+iv2UhOG0q3RQ9HsZ2CMqISlFbxjrYFGfG2mX7bW4dAyxBVzUw==",
+      "requires": {
+        "arrify": "1.0.1",
+        "chalk": "2.3.2",
+        "diff": "3.5.0",
+        "make-error": "1.3.4",
+        "minimist": "1.2.0",
+        "mkdirp": "0.5.1",
+        "source-map-support": "0.5.4",
+        "yn": "2.0.0"
+      }
+    },
+    "tslib": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.0.tgz",
+      "integrity": "sha512-f/qGG2tUkrISBlQZEjEqoZ3B2+npJjIf04H1wuAv9iA8i04Icp+61KRXxFdha22670NJopsZCIjhC3SnjPRKrQ=="
+    },
+    "tslint": {
+      "version": "5.9.1",
+      "resolved": "https://registry.npmjs.org/tslint/-/tslint-5.9.1.tgz",
+      "integrity": "sha1-ElX4ej/1frCw4fDmEKi0dIBGya4=",
+      "requires": {
+        "babel-code-frame": "6.26.0",
+        "builtin-modules": "1.1.1",
+        "chalk": "2.3.2",
+        "commander": "2.15.1",
+        "diff": "3.5.0",
+        "glob": "7.1.2",
+        "js-yaml": "3.11.0",
+        "minimatch": "3.0.4",
+        "resolve": "1.6.0",
+        "semver": "5.5.0",
+        "tslib": "1.9.0",
+        "tsutils": "2.26.1"
+      }
+    },
+    "tsutils": {
+      "version": "2.26.1",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.26.1.tgz",
+      "integrity": "sha512-bnm9bcjOqOr1UljleL94wVCDlpa6KjfGaTkefeLch4GRafgDkROxPizbB/FxTEdI++5JqhxczRy/Qub0syNqZA==",
+      "requires": {
+        "tslib": "1.9.0"
+      }
+    },
+    "typescript": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.8.1.tgz",
+      "integrity": "sha512-Ao/f6d/4EPLq0YwzsQz8iXflezpTkQzqAyenTiw4kCUGr1uPiFLC3+fZ+gMZz6eeI/qdRUqvC+HxIJzUAzEFdg=="
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
+    },
+    "yn": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/yn/-/yn-2.0.0.tgz",
+      "integrity": "sha1-5a2ryKz0CPY4X8dklWhMiOavaJo="
+    }
+  }
+}
--- a/packages/fast-glyphs-msft/package.json
+++ b/packages/fast-glyphs-msft/package.json
@ -0,0 +1,34 @@
+{
+  "name": "@microsoft/fast-glyphs-msft",
+  "description": "Microsoft SVG Glyphs",
+  "keywords": [
+    "svg"
+  ],
+  "author": {
+    "name": "Microsoft",
+    "email": "fwq@microsoft.com"
+  },
+  "version": "1.0.0",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "scripts": {
+    "clean:dist": "node ../../build/clean.js dist",
+    "prepare": "npm run clean:dist && ts-node ./src/index.ts",
+    "test": "npm run tslint",
+    "tslint": "tslint -c ./tslint.json '**/*.ts'",
+    "tslint:fix": "tslint -c ./tslint.json --fix '**/*.ts'"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Microsoft/fast-dna.git"
+  },
+  "readme": "README.md",
+  "homepage": "https://github.com/Microsoft/fast-tslint-rules#readme",
+  "devDependencies": {
+    "@microsoft/fast-tslint-rules": "^1.0.4",
+    "@types/node": "^9.6.2",
+    "ts-node": "^5.0.1",
+    "tslint": "^5.9.1",
+    "typescript": "^2.8.1"
+  }
+}
--- a/packages/fast-glyphs-msft/src/index.ts
+++ b/packages/fast-glyphs-msft/src/index.ts
@ -0,0 +1,10 @@
+import ConvertGlyphs, { IConvertGlyphOptions } from "../utilities";
+import * as path from "path";
+import * as fs from "fs";
+
+const glyphFolderPath: string = path.resolve(__dirname, "../glyphs/");
+const indexFileDestination: string = path.resolve(__dirname, "../dist/");
+
+fs.mkdir(indexFileDestination, () => {
+    const glyphConverter: ConvertGlyphs = new ConvertGlyphs(({glyphFolderPath, indexFileDestination} as IConvertGlyphOptions));
+});
--- a/packages/fast-glyphs-msft/tsconfig.json
+++ b/packages/fast-glyphs-msft/tsconfig.json
@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "declaration": true,
+        "experimentalDecorators": true,
+        "moduleResolution": "node",
+        "outDir": "./dist",
+        "sourceMap": true,
+        "target": "es6"
+    },
+    "include": [
+        "utilities/**/*"
+    ]
+  }
--- a/packages/fast-glyphs-msft/tslint.json
+++ b/packages/fast-glyphs-msft/tslint.json
@ -0,0 +1,11 @@
+{
+    "extends": [
+        "@microsoft/fast-tslint-rules"
+    ],
+    "linterOptions": {
+        "exclude": [
+            "node_modules/**",
+            "dist/**"
+        ]
+    }
+}
--- a/packages/fast-glyphs-msft/utilities/README.md
+++ b/packages/fast-glyphs-msft/utilities/README.md
--- a/packages/fast-glyphs-msft/utilities/tests/add.svg
+++ b/packages/fast-glyphs-msft/utilities/tests/add.svg
--- a/packages/fast-glyphs-msft/utilities/tests/close.svg
+++ b/packages/fast-glyphs-msft/utilities/tests/close.svg
--- a/packages/fast-glyphs-msft/utilities/tests/edit.svg
+++ b/packages/fast-glyphs-msft/utilities/tests/edit.svg
--- a/packages/fast-glyphs-msft/utilities/tests/export.svg
+++ b/packages/fast-glyphs-msft/utilities/tests/export.svg
--- a/packages/fast-glyphs-msft/utilities/tests/filter.svg
+++ b/packages/fast-glyphs-msft/utilities/tests/filter.svg
--- a/packages/fast-glyphs-msft/utilities/tests/settings.svg
+++ b/packages/fast-glyphs-msft/utilities/tests/settings.svg
--- a/packages/fast-glyphs-msft/utilities/tests/test-folder/README.md
+++ b/packages/fast-glyphs-msft/utilities/tests/test-folder/README.md
--- a/packages/fast-glyphs-msft/utilities/index.spec.ts
+++ b/packages/fast-glyphs-msft/utilities/index.spec.ts
@ -3,14 +3,14 @@ import * as path from "path";
 import * as fs from "fs";

 describe("Glyph string conversion", () => {
-    const glyphFolderPath: string = path.resolve(__dirname, "./__tests__/");
+    let glyphFolderPath: string = path.resolve(__dirname, "./__tests__/");
    afterAll(() => {
        fs.unlinkSync(`${glyphFolderPath}/index.js`);
        fs.unlinkSync(`${glyphFolderPath}/index.ts`);
        fs.unlinkSync(`${glyphFolderPath}/test-folder/index.js`);
    });
    it("should generate a file in a default location", () => {
-        const glyphFolderPath: string = path.resolve(__dirname, "./__tests__/");
+        glyphFolderPath = path.resolve(__dirname, "./__tests__/");
        const glyphConverter: ConvertGlyphs = new ConvertGlyphs(({glyphFolderPath} as IConvertGlyphOptions));

        // This will throw an error if the file does not exist
@ -21,19 +21,19 @@ describe("Glyph string conversion", () => {
        });
    });
    it("should generate a file in a specified location", () => {
-        const glyphFolderPath: string = path.resolve(__dirname, "./__tests__/");
+        glyphFolderPath = path.resolve(__dirname, "./__tests__/");
        const indexFileDestination: string = path.resolve(__dirname, "./__tests__/test-folder/");
        const glyphConverter: ConvertGlyphs = new ConvertGlyphs(({glyphFolderPath, indexFileDestination} as IConvertGlyphOptions));
    });
    it("should have declared variables and exported strings", () => {
-        const glyphFolderPath: string = path.resolve(__dirname, "./__tests__/");
+        glyphFolderPath = path.resolve(__dirname, "./__tests__/");
        const glyphConverter: ConvertGlyphs = new ConvertGlyphs(({glyphFolderPath} as IConvertGlyphOptions));

        expect(glyphConverter.getIndexFileContents().match(/const/g).length).toEqual(6);
        expect(glyphConverter.getIndexFileContents().match(/export/g).length).toEqual(6);
    });
    it("should generate strings in a specified format", () => {
-        const glyphFolderPath: string = path.resolve(__dirname, "./__tests__/");
+        glyphFolderPath = path.resolve(__dirname, "./__tests__/");
        const glyphConverter: ConvertGlyphs = new ConvertGlyphs(({glyphFolderPath} as IConvertGlyphOptions));

        expect(
@ -41,7 +41,7 @@ describe("Glyph string conversion", () => {
        ).toEqual(6);
    });
    it("should generate a file with a .js or .ts extension", () => {
-        const glyphFolderPath: string = path.resolve(__dirname, "./__tests__/");
+        glyphFolderPath = path.resolve(__dirname, "./__tests__/");
        const glyphConverter: ConvertGlyphs = new ConvertGlyphs(({glyphFolderPath, indexFileType: "ts"} as IConvertGlyphOptions));
    });
 });
--- a/packages/fast-glyphs-msft/utilities/index.ts
+++ b/packages/fast-glyphs-msft/utilities/index.ts