feat(jss-manager-react): add stylesheet overrides as props

packages/fast-components-react-msft/src/button/index.ts

@@ -6,7 +6,7 @@ import {
     IButtonUnhandledProps,
     IFoundationProps
 } from "@microsoft/fast-components-react-base";
-import manageJss from "@microsoft/fast-jss-manager-react";
-import { ButtonStyles } from "@microsoft/fast-components-styles-msft";
+import manageJss, { IJSSManagerProps } from "@microsoft/fast-jss-manager-react";
+import { ButtonStyles, IDesignSystem } from "@microsoft/fast-components-styles-msft";
 
 export default manageJss(ButtonStyles)(Button);

packages/fast-components-react-msft/src/checkbox/index.ts

@@ -6,7 +6,7 @@ import {
     ICheckboxUnhandledProps,
     IFoundationProps
 } from "@microsoft/fast-components-react-base";
-import manageJss from "@microsoft/fast-jss-manager-react";
-import { CheckboxStyles } from "@microsoft/fast-components-styles-msft";
+import manageJss, { IJSSManagerProps } from "@microsoft/fast-jss-manager-react";
+import { CheckboxStyles, IDesignSystem } from "@microsoft/fast-components-styles-msft";
 
 export default manageJss(CheckboxStyles)(Checkbox);

packages/fast-components-react-msft/src/divider/index.ts

@@ -6,7 +6,7 @@ import {
     IDividerUnhandledProps,
     IFoundationProps
 } from "@microsoft/fast-components-react-base";
-import manageJss from "@microsoft/fast-jss-manager-react";
-import { DividerStyles } from "@microsoft/fast-components-styles-msft";
+import manageJss, { IJSSManagerProps } from "@microsoft/fast-jss-manager-react";
+import { DividerStyles, IDesignSystem } from "@microsoft/fast-components-styles-msft";
 
 export default manageJss(DividerStyles)(Divider);

packages/fast-components-react-msft/src/hypertext/index.ts

@@ -6,7 +6,7 @@ import {
     IHypertextHandledProps,
     IHypertextUnhandledProps
 } from "@microsoft/fast-components-react-base";
-import manageJss from "@microsoft/fast-jss-manager-react";
-import { HypertextStyles } from "@microsoft/fast-components-styles-msft";
+import manageJss, { IJSSManagerProps } from "@microsoft/fast-jss-manager-react";
+import { HypertextStyles, IDesignSystem } from "@microsoft/fast-components-styles-msft";
 
 export default manageJss(HypertextStyles)(Hypertext);

packages/fast-components-react-msft/src/image/index.ts

@@ -6,7 +6,7 @@ import {
     IImageUnhandledProps,
     Image
 } from "@microsoft/fast-components-react-base";
-import manageJss from "@microsoft/fast-jss-manager-react";
-import { ImageStyles } from "@microsoft/fast-components-styles-msft";
+import manageJss, { IJSSManagerProps } from "@microsoft/fast-jss-manager-react";
+import { IDesignSystem, ImageStyles } from "@microsoft/fast-components-styles-msft";
 
 export default manageJss(ImageStyles)(Image);

packages/fast-components-react-msft/src/label/index.ts

@@ -6,7 +6,7 @@ import {
     ILabelUnhandledProps,
     Label
 } from "@microsoft/fast-components-react-base";
-import manageJss from "@microsoft/fast-jss-manager-react";
-import { LabelStyles } from "@microsoft/fast-components-styles-msft";
+import manageJss, { IJSSManagerProps } from "@microsoft/fast-jss-manager-react";
+import { IDesignSystem, LabelStyles } from "@microsoft/fast-components-styles-msft";
 
 export default manageJss(LabelStyles)(Label);

packages/fast-components-react-msft/src/toggle/index.ts

@@ -6,7 +6,7 @@ import {
     IToggleUnhandledProps,
     Toggle
 } from "@microsoft/fast-components-react-base";
-import manageJss from "@microsoft/fast-jss-manager-react";
-import { ToggleStyles } from "@microsoft/fast-components-styles-msft";
+import manageJss, { IJSSManagerProps } from "@microsoft/fast-jss-manager-react";
+import { IDesignSystem, ToggleStyles } from "@microsoft/fast-components-styles-msft";
 
 export default manageJss(ToggleStyles)(Toggle);

packages/fast-components-react-msft/src/typography/index.ts

@@ -6,7 +6,7 @@ import {
     ITypographyUnhandledProps,
     Typography
 } from "@microsoft/fast-components-react-base";
-import manageJss from "@microsoft/fast-jss-manager-react";
-import { TypographyStyles } from "@microsoft/fast-components-styles-msft";
+import manageJss, { IJSSManagerProps } from "@microsoft/fast-jss-manager-react";
+import { IDesignSystem, TypographyStyles } from "@microsoft/fast-components-styles-msft";
 
 export default manageJss(TypographyStyles)(Typography);

packages/fast-development-site-react/src/components/breadcrumb/breadcrumb-item.tsx

@@ -1,7 +1,7 @@
 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 manageJss, { ComponentStyles, IJSSManagerProps, IManagedClasses } from "@microsoft/fast-jss-manager-react";
 
 export interface IBreadcrumbItemProps {
     to: string;

packages/fast-development-site-react/src/components/breadcrumb/index.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { IDevSiteDesignSystem } from "../design-system";
-import manageJss, { ComponentStyles, IManagedClasses } from "@microsoft/fast-jss-manager-react";
+import manageJss, { ComponentStyles, IJSSManagerProps, IManagedClasses } from "@microsoft/fast-jss-manager-react";
 import BreadcrumbItem from "./breadcrumb-item";
 
 /* tslint:disable-next-line */

packages/fast-development-site-react/src/components/shell/action-bar.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import manageJss, { ComponentStyles, IManagedClasses } from "@microsoft/fast-jss-manager-react";
+import manageJss, { ComponentStyles, IJSSManagerProps, IManagedClasses } from "@microsoft/fast-jss-manager-react";
 import { IDevSiteDesignSystem } from "../design-system";
 
 /* tslint:disable-next-line */

packages/fast-development-site-react/src/components/shell/canvas.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import manageJss, { ComponentStyles, IManagedClasses } from "@microsoft/fast-jss-manager-react";
+import manageJss, { ComponentStyles, IJSSManagerProps, IManagedClasses } from "@microsoft/fast-jss-manager-react";
 import { IDevSiteDesignSystem } from "../design-system";
 
 /* tslint:disable-next-line */

packages/fast-development-site-react/src/components/shell/header.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import manageJss, { ComponentStyles, IManagedClasses } from "@microsoft/fast-jss-manager-react";
+import manageJss, { ComponentStyles, IJSSManagerProps, IManagedClasses } from "@microsoft/fast-jss-manager-react";
 import { IDevSiteDesignSystem } from "../design-system";
 
 /* tslint:disable-next-line */

packages/fast-development-site-react/src/components/shell/index.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import manageJss, { ComponentStyles, IManagedClasses } from "@microsoft/fast-jss-manager-react";
+import manageJss, { ComponentStyles, IJSSManagerProps, IManagedClasses } from "@microsoft/fast-jss-manager-react";
 import { IDevSiteDesignSystem } from "../design-system";
 import ShellActionBar from "./action-bar";
 import ShellInfoBar from "./info-bar";

packages/fast-development-site-react/src/components/shell/info-bar.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import manageJss, { ComponentStyles, IManagedClasses } from "@microsoft/fast-jss-manager-react";
+import manageJss, { ComponentStyles, IJSSManagerProps, IManagedClasses } from "@microsoft/fast-jss-manager-react";
 import { IDevSiteDesignSystem } from "../design-system";
 
 /* tslint:disable-next-line */

packages/fast-development-site-react/src/components/shell/pane-collapse.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import manageJss, { ComponentStyles, IManagedClasses } from "@microsoft/fast-jss-manager-react";
+import manageJss, { ComponentStyles, IJSSManagerProps, IManagedClasses } from "@microsoft/fast-jss-manager-react";
 import { IDevSiteDesignSystem } from "../design-system";
 
 /* tslint:disable-next-line */

packages/fast-development-site-react/src/components/shell/pane.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import manageJss, { ComponentStyles, IManagedClasses } from "@microsoft/fast-jss-manager-react";
+import manageJss, { ComponentStyles, IJSSManagerProps, IManagedClasses } from "@microsoft/fast-jss-manager-react";
 import { IDevSiteDesignSystem } from "../design-system";
 
 export interface IShellPaneProps {

packages/fast-development-site-react/src/components/shell/row.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import manageJss, { ComponentStyles, IManagedClasses } from "@microsoft/fast-jss-manager-react";
+import manageJss, { ComponentStyles, IJSSManagerProps, IManagedClasses } from "@microsoft/fast-jss-manager-react";
 import { IDevSiteDesignSystem } from "../design-system";
 
 /* tslint:disable-next-line */

packages/fast-development-site-react/src/components/site/category-item.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import manageJss, { ComponentStyles, IManagedClasses } from "@microsoft/fast-jss-manager-react";
+import manageJss, { ComponentStyles, IJSSManagerProps, IManagedClasses } from "@microsoft/fast-jss-manager-react";
 import { IDevSiteDesignSystem } from "../design-system";
 
 export interface ISiteCategoryItemManagedClasses {

packages/fast-development-site-react/src/components/site/index.tsx

@@ -1,11 +1,11 @@
+import Toc, { TocItem } from "../toc";
 import * as React from "react";
-import { BrowserRouter, Route, Switch } from "react-router-dom";
-import manageJss, { ComponentStyles, DesignSystemProvider, IManagedClasses } from "@microsoft/fast-jss-manager-react";
+import manageJss, { ComponentStyles, DesignSystemProvider, IJSSManagerProps, IManagedClasses } from "@microsoft/fast-jss-manager-react";
 import { glyphBuildingblocks, glyphGlobalnavbutton } from "@microsoft/fast-glyphs-msft";
 import { uniqueId } from "lodash-es";
 import devSiteDesignSystemDefaults, { IDevSiteDesignSystem } from "../design-system";
 import Shell, { ShellActionBar, ShellCanvas, ShellHeader, ShellInfoBar, ShellPane, ShellPaneCollapse, ShellRow, ShellSlot } from "../shell";
-import Toc, { TocItem } from "../toc";
+import { BrowserRouter, Route, Switch } from "react-router-dom";
 import CategoryList from "./category-list";
 import SiteMenu from "./menu";
 import SiteMenuItem from "./menu-item";

packages/fast-development-site-react/src/components/site/menu.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import manageJss, { ComponentStyles, IManagedClasses } from "@microsoft/fast-jss-manager-react";
+import manageJss, { ComponentStyles, IJSSManagerProps, IManagedClasses } from "@microsoft/fast-jss-manager-react";
 import { IDevSiteDesignSystem } from "../design-system";
 
 export interface ISiteMenuProps {

packages/fast-development-site-react/src/components/toc/index.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { IDevSiteDesignSystem } from "../design-system";
-import manageJss, { ComponentStyles, IManagedClasses } from "@microsoft/fast-jss-manager-react";
+import manageJss, { ComponentStyles, IJSSManagerProps, IManagedClasses } from "@microsoft/fast-jss-manager-react";
 import TocItem from "./toc-item";
 import TocMenu from "./toc-menu";
 

packages/fast-development-site-react/src/components/toc/toc-item.tsx

@@ -2,7 +2,7 @@ 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";
+import manageJss, { ComponentStyles, IJSSManagerProps, IManagedClasses } from "@microsoft/fast-jss-manager-react";
 
 export interface ITocItemProps {
     to?: string;

packages/fast-development-site-react/src/components/toc/toc-menu.tsx

@@ -1,7 +1,7 @@
 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 manageJss, { ComponentStyles, IJSSManagerProps, IManagedClasses } from "@microsoft/fast-jss-manager-react";
 import Toc from "./";
 
 export interface ITocMenuProps {

packages/fast-jss-manager-react/README.md

@@ -1,2 +1,67 @@
+# React JSS Manager
+`fast-react-jss-manager` is a React higher order component (HOC) library for managing component JSS stylesheets. It facilitates using JSS with your react components by controlling when to add, update, and remove a JSS stylesheets. It also allows top-down variable injection into JSS stylesheet functions using the exported `DesignSystemProvider`.
 
-A React higher order component (HOC) library for managing component JSS stylesheets.
+
+## Usage
+### Create a react component
+`manageJss` is a HOC that passes as props the generated classes from a given stylesheet. The generated classes are made available on the `managedClasses` prop of the rendered component.
+```jsx
+// button.jsx
+import * as React from "react";
+
+class Button extends React.Component {
+    render() {
+        return (
+            <button className={this.props.managedClasses.button}>
+                {this.props.children}
+            </button>
+        );
+    }
+}
+```
+
+### Create a JSS stylesheet
+You should also create a JSS stylesheet - for detailed information please reference [https://github.com/cssinjs/jss]. The JSS instance used by the manager uses (jss-preset-default)[https://github.com/cssinjs/jss-preset-default] so feel free to use any syntaxes supported by those plugins.
+```js
+// buttonSyles.js
+const buttonStyles = {
+    button: {
+        color: "white",
+        background: "blue",
+        border: "none"
+    }
+};
+
+```
+
+### Create a Higher Order Component (HOC)
+Import the `manageJss` function and use it to create a new, styled `Button` component:
+
+```jsx
+import manageJss from "@microsoft/fast-jss-manager-react";
+improt buttonStyles from "./buttonStyles";
+import Button from "./button";
+
+const StyledButton = manageJss(buttonStyles)(Button);
+
+
+// Render
+<StyledButton>Hello world</StyledButton>
+```
+### Instance stylesheet
+There is a good chance you will need to customize some CSS properties for a component instance. To do this, the HOC returned by `manageJSS` supports a `jssStyleSheet` prop. The object give to this prop will be merged into the style sheet that the component was created with, giving you instance overrides for the original style sheet.
+
+```jsx
+const stylesheetOverride = {
+    button: {
+        color: "green",
+        background: "gray"
+    }
+};
+
+<StyledButton
+    jssStyleSheet={ stylesheetOverride }
+>
+    Hello world
+</StyledButton>
+```