fix: updates documentation site with latest master (#1818)

* update docusaurus

* fixing link syntax

* point typedoc at the correct tsconfig

* fixing ts error in background

* update website files

Author: nicholasrice

build/documentation/generate-typedocs.js

@@ -1,39 +1,40 @@
 /**
  * Utility for generating TypeDoc API documentation and placing it in the docs/en/packages folder so it can be hosted by
- * Github pages and viewed through Docusaurus. 
- * Contains a dry run command to investigate how the script will operate without actually writing to anything. 
+ * Github pages and viewed through Docusaurus.
+ * Contains a dry run command to investigate how the script will operate without actually writing to anything.
  * Contains a verbose option to print detailed build output generated by the typedoc processes that create the
  * api documentation.
- * 
+ *
  * Usage :run node build/documentation/generate-typedocs.js OR
  * Usage (dry-run): run node build/documentation/generate-typedocs.js --dry-run
- * Usage (verbose): run node build/documentation/generate-typedocs.js --verbose 
+ * Usage (verbose): run node build/documentation/generate-typedocs.js --verbose
  */
 
 const path = require("path");
 const fs = require("fs");
 const glob = require("glob");
-const os = require('os');
-const chalk = require('chalk');
-const yargs = require('yargs');
+const os = require("os");
+const chalk = require("chalk");
+const yargs = require("yargs");
 
-const { exec } = require('child_process');
+const { exec } = require("child_process");
 const { spawn } = require("child_process");
 
 const rootDir = path.resolve(process.cwd());
 const srcDir = "packages/*";
 const destDir = path.join("docs", "en", "packages");
 
-var copyReadmeScript = 'copy-package-readme.js';
-var copyReadmeScriptPath = path.join('build', 'documentation', copyReadmeScript);
+var copyReadmeScript = "copy-package-readme.js";
+var copyReadmeScriptPath = path.join("build", "documentation", copyReadmeScript);
 var dryRun = false;
 var verbose = false;
 
 const excludedPackages = [
     "fast-browser-extensions",
+    "fast-color-explorer",
     "fast-development-site-react",
     "fast-permutator",
-    "fast-tslint-rules"
+    "fast-tslint-rules",
 ];
 
 /**
@@ -46,22 +47,24 @@ verbose = argv.verbose;
 
 /**
  * Run the copy readme script, then this one if successful
- * To prevent new links constantly being appended to the readme every 
- * time the script is run, the copy readme script is run to regenerate 
+ * To prevent new links constantly being appended to the readme every
+ * time the script is run, the copy readme script is run to regenerate
  * files to their original form with the needed header
  */
 
-var proc = dryRun ? exec(`node ${copyReadmeScriptPath} --dry-run`) : exec(`node ${copyReadmeScriptPath}`);
+var proc = dryRun
+    ? exec(`node ${copyReadmeScriptPath} --dry-run`)
+    : exec(`node ${copyReadmeScriptPath}`);
 
-proc.stdout.on('data', function(data) {
+proc.stdout.on("data", function(data) {
     process.stdout.write(data);
 });
 
-proc.on('error', (err) => {
+proc.on("error", err => {
     console.log(chalk.red(err));
 });
 
-proc.on('close', function(code) {
+proc.on("close", function(code) {
     console.log(chalk.green(`${copyReadmeScript} ran successfully.`));
     execute();
 });
@@ -70,7 +73,6 @@ proc.on('close', function(code) {
  * Generate TypeDocs for each package
  */
 function execute() {
-
     if (dryRun) {
         console.log(`In ${destDir}, this script would...`);
     } else {
@@ -79,58 +81,70 @@ function execute() {
 
     const packages = path.resolve(rootDir, srcDir);
 
-    glob(packages, {realpath:true}, function(error, srcFiles) {
-       
-        srcFiles.forEach((srcPath) => {    
-            
+    glob(packages, { realpath: true }, function(error, srcFiles) {
+        srcFiles.forEach(srcPath => {
             var valid = true;
 
-            var packageName = srcPath
-                .split(path.sep)
-                .pop();
+            var packageName = srcPath.split(path.sep).pop();
 
-            excludedPackages.forEach((excludedPackageName) => {
+            excludedPackages.forEach(excludedPackageName => {
                 if (packageName === excludedPackageName) {
-                    console.log(chalk.yellow(`...skip generating TypeDoc API files for ${packageName}`));
+                    console.log(
+                        chalk.yellow(
+                            `...skip generating TypeDoc API files for ${packageName}`
+                        )
+                    );
                     valid = false;
                 }
             });
 
-            if(valid) {
-                dryRun ? console.log(`...generate TypeDoc API files for ${packageName}`) : createAPIFiles(packageName, srcPath);
+            if (valid) {
+                dryRun
+                    ? console.log(`...generate TypeDoc API files for ${packageName}`)
+                    : createAPIFiles(packageName, srcPath);
             }
-
         });
-
     });
 }
 
 /**
  * Uses TypeDoc process to generate API docs for a given package
- * Stores them in the docs/en/packages folder 
+ * Stores them in the docs/en/packages folder
  */
 function createAPIFiles(packageName, srcPath) {
-    
-    var config = path.join(srcPath, '/tsconfig.json');
-    var output = path.join(destDir, packageName, 'api');
-    var file = (packageName === "fast-animation") ? path.join(srcPath, '/lib/index.ts') : path.join(srcPath, '/src/index.ts');
-
-    var typedocCmd = os.platform() == 'win32' ? 'typedoc.cmd' : 'typedoc';
-    var typedocPath = path.join('node_modules', '.bin', typedocCmd);
-
-    const typedoc = spawn(typedocPath, // the local TypeDoc installation is needed for the markdown theme to work
+    var config = path.join(srcPath, "/build.tsconfig.json");
+    var output = path.join(destDir, packageName, "api");
+    var file =
+        packageName === "fast-animation"
+            ? path.join(srcPath, "/lib/index.ts")
+            : path.join(srcPath, "/src/index.ts");
+
+    var typedocCmd = os.platform() == "win32" ? "typedoc.cmd" : "typedoc";
+    var typedocPath = path.join("node_modules", ".bin", typedocCmd);
+
+    const typedoc = spawn(
+        typedocPath, // the local TypeDoc installation is needed for the markdown theme to work
         [
-            '--tsconfig', config,
-            '--excludeNotExported',
-            '--out', output, file,
-            '--theme', "markdown"
-        ]);
-
-    typedoc.on('close', code => {
+            "--tsconfig",
+            config,
+            "--excludeNotExported",
+            "--out",
+            output,
+            file,
+            "--theme",
+            "markdown",
+        ]
+    );
+
+    typedoc.on("close", code => {
         if (code) {
-            console.log(chalk.red(`${packageName} - TypeDoc API docs not generated, error code: ${code}`));
+            console.log(
+                chalk.red(
+                    `${packageName} - TypeDoc API docs not generated, error code: ${code}`
+                )
+            );
         } else {
-            console.log(`${packageName} - TypeDoc API docs generated`)
+            console.log(`${packageName} - TypeDoc API docs generated`);
             addHeaderToReadme(packageName);
             addAPILinkToReadme(packageName);
         }
@@ -139,58 +153,47 @@ function createAPIFiles(packageName, srcPath) {
     // if set to true, will print detailed build output for typedoc process
     // useful for debugging
     if (verbose) {
-        typedoc.stdout.on('data', (data) => {
+        typedoc.stdout.on("data", data => {
             console.log(`${data}`);
         });
     }
 
-    typedoc.on('error', (err) => {
+    typedoc.on("error", err => {
         console.log(chalk.red(err));
     });
-
 }
 
 /**
  * If the TypeDoc readme doesn't have this header
  * It won't be accessible in docusaurus
  */
 function addHeaderToReadme(packageName) {
-
-    const readmePath = path.join(destDir, packageName, 'api', 'README.md');
+    const readmePath = path.join(destDir, packageName, "api", "README.md");
     const readmeText = fs.readFileSync(readmePath).toString();
 
-    var docusaurusHeader = 
-    `---\n` + 
-    `id: index\n` +
-    `---\n\n`;
+    var docusaurusHeader = `---\n` + `id: index\n` + `---\n\n`;
 
     try {
         fs.writeFileSync(readmePath, docusaurusHeader);
         fs.appendFileSync(readmePath, readmeText);
     } catch (err) {
         console.log(chalk.red(err));
     }
-
 }
 
 /**
  * Creates link in package readme.md docs used by Docusaurus
  * Said link routes to the TypeDoc API docs generated by this script
  */
 function addAPILinkToReadme(packageName) {
-
-    var readmePath = path.join(destDir, packageName, 'README.md');
+    var readmePath = path.join(destDir, packageName, "README.md");
     var apiLink = "api";
 
-    var usageText = 
-        "\n" + 
-        `[API Reference](${apiLink})`;
+    var usageText = "\n" + `[API Reference](${apiLink})`;
 
-    fs.appendFile(readmePath, usageText, function (err) {
+    fs.appendFile(readmePath, usageText, function(err) {
         if (err) {
             console.log(chalk.red(err));
-        } 
-    })
-
+        }
+    });
 }
-

package.json

@@ -87,7 +87,7 @@
     "babel-jest": "^24.5.0",
     "babel-preset-env": "^1.6.1",
     "chalk": "^2.4.2",
-    "docusaurus-init": "^1.0.2",
+    "docusaurus-init": "^1.11.0",
     "dotenv": "^6.0.0",
     "eyes.selenium": "3.6.2",
     "glob": "^7.1.2",

packages/fast-components-react-msft/src/background/background.tsx

@@ -72,12 +72,16 @@ export default class Background extends Foundation<
 
         return (
             <DesignSystemProvider designSystem={this.getDesignSystemOverrides(color)}>
-                <this.props.tag {...this.unhandledProps()} style={style}>
+                <this.tag {...this.unhandledProps()} style={style}>
                     {this.props.children}
-                </this.props.tag>
+                </this.tag>
             </DesignSystemProvider>
         );
     };
+
+    private get tag(): any {
+        return this.props.tag;
+    }
 }
 
 export * from "./background.props";

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

@@ -29,7 +29,7 @@ class Button extends React.Component {
 
 ### 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.
+You should also create a JSS stylesheet - for detailed information please reference [https://github.com/cssinjs/jss](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