Website: Add link to Fluent for Fabric (microsoft#6585)

* Add a MessageBar at the top of the app linking to Fluent for Fabric

* Add change file

* Update link

* Import from lib (hoping to resolve build issue)

* Update root.tsx

apps/fabric-website/src/components/FluentMessageBar/FluentMessageBar.tsx

@@ -0,0 +1,39 @@
+import { Link } from 'office-ui-fabric-react/lib/Link';
+import { MessageBar } from 'office-ui-fabric-react/lib/MessageBar';
+import * as React from 'react';
+
+export interface IFluentMessageBarProps {}
+
+export interface IFluentMessageBarState {
+  isVisible: boolean;
+}
+
+export default class IFluentMessageBar extends React.Component<IFluentMessageBarProps, IFluentMessageBarState> {
+  constructor(props: IFluentMessageBarProps) {
+    super(props);
+
+    this.state = {
+      isVisible: true
+    };
+
+    this._onClose = this._onClose.bind(this);
+  }
+
+  public render() {
+    const { isVisible } = this.state;
+
+    return (
+      isVisible && (
+        <MessageBar onDismiss={this._onClose} dismissButtonAriaLabel="Close">
+          Get an early look at the latest Fluent updates coming to Fabric. <Link href="https://aka.ms/fabric-preview">Learn more</Link>
+        </MessageBar>
+      )
+    );
+  }
+
+  private _onClose() {
+    this.setState({
+      isVisible: false
+    });
+  }
+}

apps/fabric-website/src/root.tsx

@@ -1,20 +1,23 @@
-require('es6-promise').polyfill();
-/* tslint:disable:no-unused-variable */
+import './styles/styles.scss';
+import './version';
+import 'whatwg-fetch';
+
+import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
+import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
+import { setBaseUrl } from 'office-ui-fabric-react/lib/Utilities';
+import { Route, Router } from 'office-ui-fabric-react/lib/utilities/router/index';
 import * as React from 'react';
-/* tslint:enable:no-unused-variable */
 import * as ReactDOM from 'react-dom';
+
 import { App } from './components/App/App';
 import { AppState } from './components/App/AppState';
-import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
-import { Route, Router } from 'office-ui-fabric-react/lib/utilities/router/index';
-import { setBaseUrl } from 'office-ui-fabric-react/lib/Utilities';
+import FluentMessageBar from './components/FluentMessageBar/FluentMessageBar';
 import { HomePage } from './pages/HomePage/HomePage';
 import WindowWidthUtility from './utilities/WindowWidthUtility';
-import './styles/styles.scss';
-import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
-import 'whatwg-fetch';
-import './version';
 
+require('es6-promise').polyfill();
+/* tslint:disable:no-unused-variable */
+/* tslint:enable:no-unused-variable */
 const corePackageData = require('../node_modules/office-ui-fabric-core/package.json');
 const corePackageVersion: string = (corePackageData && corePackageData.version) || '9.2.0';
 
@@ -81,6 +84,7 @@ function _onLoad(): void {
 
   ReactDOM.render(
     <Fabric>
+      <FluentMessageBar />
       <Router onNewRouteLoaded={_routerDidMount}>
         <Route component={App}>{_getAppRoutes()}</Route>
       </Router>

common/changes/@uifabric/fabric-website/miwhea-add-fluent-message-bar_2018-10-05-20-50.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/fabric-website",
+      "comment": "Add temporary MessageBar to link to Fluent for Fabric",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/fabric-website",
+  "email": "mike@wheaton.design"
+}