diff --git a/apps/fabric-website/src/components/FluentMessageBar/FluentMessageBar.tsx b/apps/fabric-website/src/components/FluentMessageBar/FluentMessageBar.tsx new file mode 100644 index 0000000000000..5a9e50295d0c1 --- /dev/null +++ b/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 { + constructor(props: IFluentMessageBarProps) { + super(props); + + this.state = { + isVisible: true + }; + + this._onClose = this._onClose.bind(this); + } + + public render() { + const { isVisible } = this.state; + + return ( + isVisible && ( + + Get an early look at the latest Fluent updates coming to Fabric. Learn more + + ) + ); + } + + private _onClose() { + this.setState({ + isVisible: false + }); + } +} diff --git a/apps/fabric-website/src/root.tsx b/apps/fabric-website/src/root.tsx index c63867cef4f26..d09d022807f30 100644 --- a/apps/fabric-website/src/root.tsx +++ b/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( + {_getAppRoutes()} diff --git a/common/changes/@uifabric/fabric-website/miwhea-add-fluent-message-bar_2018-10-05-20-50.json b/common/changes/@uifabric/fabric-website/miwhea-add-fluent-message-bar_2018-10-05-20-50.json new file mode 100644 index 0000000000000..d1e079c83e3f2 --- /dev/null +++ b/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" +} \ No newline at end of file