chore: add the new logo and inline logo for FAST as the favicon and i…

…nline logo in Creator, Component Explorer and Tooling examples (#3313)

sites/fast-component-explorer/app/explorer.tsx

@@ -31,8 +31,6 @@ import {
     ActionToggleAppearance,
     ActionToggleProps,
     Background,
-    Heading,
-    HeadingSize,
     Pivot,
     Select,
     SelectOption,
@@ -50,6 +48,7 @@ import FASTMessageSystemWorker from "@microsoft/fast-tooling/dist/message-system
 import {
     DirectionSwitch,
     downChevron,
+    Logo,
     ThemeSelector,
     TransparencyToggle,
     upChevron,
@@ -65,7 +64,8 @@ import {
     ExplorerUnhandledProps,
 } from "./explorer.props";
 import { previewReady } from "./preview";
-
+/* eslint-disable-next-line @typescript-eslint/no-var-requires */
+const FASTInlineLogo = require("@microsoft/site-utilities/statics/assets/fast-inline-logo.png");
 export const previewBackgroundTransparency: string = "PREVIEW::TRANSPARENCY";
 export const previewDirection: string = "PREVIEW::DIRECTION";
 export const previewTheme: string = "PREVIEW::THEME";
@@ -173,19 +173,11 @@ class Explorer extends Foundation<
                 <Container>
                     <Row style={{ flex: "1" }}>
                         <Pane resizable={true} resizeFrom={PaneResizeDirection.east}>
-                            <Background
-                                value={"#1B1B1B"}
-                                drawBackground={true}
-                                style={{
-                                    display: "flex",
-                                    height: "32px",
-                                    alignItems: "center",
-                                    justifyContent: "space-between",
-                                    padding: "0 8px",
-                                }}
-                            >
-                                <Heading size={HeadingSize._6}>FAST Explorer</Heading>
-                            </Background>
+                            <Logo
+                                backgroundColor={"#1B1B1B"}
+                                logo={FASTInlineLogo}
+                                title={"Component Explorer"}
+                            />
                             <NavigationMenu
                                 menu={menu}
                                 expanded={true}
@@ -200,7 +192,7 @@ class Explorer extends Foundation<
                                 flexDirection: "column",
                             }}
                         >
-                            <Row style={{ overflow: "visible", zIndex: 1 }}>
+                            <Row style={{ overflow: "visible", zIndex: 1 }} height={46}>
                                 <Background
                                     value={neutralLayerL2}
                                     drawBackground={true}

sites/fast-component-explorer/package.json

@@ -52,6 +52,7 @@
     "eslint-config-prettier": "6.10.1",
     "exenv-es6": "^1.0.0",
     "favicons-webpack-plugin": "0.0.9",
+    "file-loader": "^6.0.0",
     "focus-visible": "^4.1.5",
     "html-webpack-plugin": "^3.2.0",
     "jss": "^9.8.7",

sites/fast-component-explorer/webpack.config.js

@@ -64,6 +64,15 @@ module.exports = (env, args) => {
                         loader: "babel-loader",
                     },
                 },
+                {
+                    test: /\.(png|jpe?g|gif)$/i,
+                    use: {
+                        loader: "file-loader",
+                        options: {
+                            esModule: false,
+                        },
+                    },
+                },
                 {
                     test: /message\-system\.min\.js/,
                     use: {
@@ -89,7 +98,12 @@ module.exports = (env, args) => {
             // new WorkboxPlugin.GenerateSW({
             //     exclude: [/\.map$/, /^manifest.*\.js(?:on)?$/, /\.html$/],
             // }),
-            new FaviconsWebpackPlugin(path.resolve(__dirname, "favicon.png")),
+            new FaviconsWebpackPlugin(
+                path.resolve(
+                    rootNodeModules,
+                    "@microsoft/site-utilities/statics/assets/fast-logo.png"
+                )
+            ),
         ],
         resolve: {
             extensions: [".js", ".tsx", ".ts", ".json"],

sites/fast-creator/app/creator.tsx

@@ -1,11 +1,5 @@
 import { memoize, uniqueId } from "lodash-es";
-import {
-    Background,
-    Badge,
-    cardSchema2,
-    Heading,
-    HeadingSize,
-} from "@microsoft/fast-components-react-msft";
+import { Background } from "@microsoft/fast-components-react-msft";
 import {
     neutralLayerL1,
     neutralLayerL2,
@@ -55,6 +49,7 @@ import {
     Dimension,
     DirectionSwitch,
     fastComponentSchemas,
+    Logo,
     nativeElementSchemas,
     textSchema,
     ThemeSelector,
@@ -72,7 +67,8 @@ import { divTag, linkedDataExamples } from "./configs";
 import { ProjectFileTransfer } from "./components";
 import { selectDeviceOverrideStyles } from "./utilities/style-overrides";
 import { previewReady } from "./preview";
-
+/* eslint-disable-next-line @typescript-eslint/no-var-requires */
+const FASTInlineLogo = require("@microsoft/site-utilities/statics/assets/fast-inline-logo.png");
 const fastMessageSystemWorker = new FASTMessageSystemWorker();
 let fastMessageSystem: MessageSystem;
 const schemaDictionary: SchemaDictionary = {
@@ -162,28 +158,20 @@ class Creator extends Foundation<CreatorHandledProps, {}, CreatorState> {
                 <Container>
                     <Row style={{ flex: "1" }}>
                         <Pane resizable={true} resizeFrom={PaneResizeDirection.east}>
-                            <Background
-                                value={neutralLayerL3}
-                                drawBackground={true}
-                                style={{
-                                    display: "flex",
-                                    height: "32px",
-                                    alignItems: "center",
-                                    justifyContent: "space-between",
-                                    padding: "0 8px",
-                                }}
-                            >
-                                <Heading size={HeadingSize._6}>FAST Creator</Heading>
-                                <Badge>ALPHA</Badge>
-                            </Background>
+                            <Logo
+                                backgroundColor={neutralLayerL3}
+                                logo={FASTInlineLogo}
+                                title={"Creator"}
+                                version={"ALPHA"}
+                            />
                             <ModularNavigation messageSystem={fastMessageSystem} />
                             <ProjectFileTransfer
                                 projectFile={this.state}
                                 onUpdateProjectFile={this.handleUpdateProjectFile}
                             />
                         </Pane>
                         <Canvas>
-                            <Row fill={true}>
+                            <Row fill={true} height={46}>
                                 <Background
                                     value={neutralLayerL2}
                                     drawBackground={true}

sites/fast-creator/package.json

@@ -43,6 +43,7 @@
     "eslint-config-prettier": "6.10.1",
     "exenv-es6": "^1.0.0",
     "favicons-webpack-plugin": "0.0.9",
+    "file-loader": "^6.0.0",
     "focus-visible": "^4.1.5",
     "html-webpack-plugin": "^3.2.0",
     "jest": "^25.4.0",

sites/fast-creator/webpack.config.js

@@ -63,6 +63,15 @@ module.exports = (env, args) => {
                         loader: "babel-loader",
                     },
                 },
+                {
+                    test: /\.(png|jpe?g|gif)$/i,
+                    use: {
+                        loader: "file-loader",
+                        options: {
+                            esModule: false,
+                        },
+                    },
+                },
                 {
                     test: /message\-system\.min\.js/,
                     use: {
@@ -85,7 +94,12 @@ module.exports = (env, args) => {
             // new WorkboxPlugin.GenerateSW({
             //     exclude: [/\.map$/, /^manifest.*\.js(?:on)?$/, /\.html$/],
             // }),
-            new FaviconsWebpackPlugin(path.resolve(__dirname, "favicon.png")),
+            new FaviconsWebpackPlugin(
+                path.resolve(
+                    rootNodeModules,
+                    "@microsoft/site-utilities/statics/assets/fast-logo.png"
+                )
+            ),
         ],
         resolve: {
             extensions: [".js", ".tsx", ".ts", ".json"],

sites/fast-tooling-examples/app/index.html

@@ -17,7 +17,9 @@
                         href="/"
                         appearance="lightweight"
                     >
-                        FAST Tooling Examples
+
+                        <img src="<%= require('@microsoft/site-utilities/statics/assets/fast-inline-logo.png') %>" />
+                        <span>Tooling Examples</span>
                     </fast-anchor>
                 </div>
                 <div class="toolbar-links">

sites/fast-tooling-examples/app/index.ts

@@ -14,6 +14,8 @@ import "./style.css";
 import examples from "./registry";
 import toolingGuidance from "./.tmp/tooling-guidance";
 import toolingReactGuidance from "./.tmp/tooling-react-guidance";
+/* eslint-disable-next-line @typescript-eslint/no-var-requires */
+const FASTInlineLogo = require("@microsoft/site-utilities/statics/assets/fast-inline-logo.png");
 
 // prevent tree shaking
 FASTAnchor;
@@ -23,6 +25,7 @@ FASTDesignSystemProvider;
 FASTTabs;
 FASTTab;
 FASTTabPanel;
+FASTInlineLogo;
 
 /**
  * The links to examples

sites/fast-tooling-examples/app/style.css

@@ -39,6 +39,16 @@ iframe {
     grid-column-end: 1;
 }
 
+.toolbar-logo img,
+.toolbar-logo span {
+    vertical-align: middle;
+}
+
+.toolbar-logo span {
+    display: inline-block;
+    margin: 0 10px;
+}
+
 .toolbar-links {
     grid-column-start: 2;
     grid-column-end: 2;
@@ -89,7 +99,7 @@ iframe {
 .toolbar-links,
 .menu,
 .content {
-    padding: 5px 10px;
+    padding: 2px 10px;
 }
 
 .guidance {

sites/fast-tooling-examples/webpack.config.js

@@ -72,6 +72,15 @@ module.exports = (env, args) => {
                     test: /\.css$/i,
                     use: [MiniCssExtractPlugin.loader, "css-loader"],
                 },
+                {
+                    test: /\.(png|jpe?g|gif)$/i,
+                    use: {
+                        loader: "file-loader",
+                        options: {
+                            esModule: false,
+                        },
+                    },
+                },
                 {
                     test: /message\-system\.min\.js/,
                     use: {
@@ -114,7 +123,12 @@ module.exports = (env, args) => {
                 // Remove this to inspect bundle sizes.
                 analyzerMode: "disabled",
             }),
-            new FaviconsWebpackPlugin(),
+            new FaviconsWebpackPlugin(
+                path.resolve(
+                    rootNodeModules,
+                    "@microsoft/site-utilities/statics/assets/fast-logo.png"
+                )
+            ),
         ],
         resolve: {
             extensions: [".js", ".tsx", ".ts"],

sites/site-utilities/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from "./accent-color-picker";
 export * from "./dimension";
 export * from "./direction-switch";
+export * from "./logo";
 export * from "./theme-selector";
 export * from "./transparency-toggle";

sites/site-utilities/src/components/logo/index.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import {
+    Background,
+    Badge,
+    Heading,
+    HeadingSize,
+} from "@microsoft/fast-components-react-msft";
+import { LogoProps } from "./logo.props";
+
+const backgroundStyle = {
+    display: "flex",
+    height: "32px",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "8px",
+};
+const imageStyle = { verticalAlign: "middle" };
+const spanStyle = { verticalAlign: "middle", margin: "0 10px" };
+
+export const Logo: React.FC<LogoProps> = ({
+    backgroundColor,
+    logo,
+    title,
+    version,
+}: React.PropsWithChildren<LogoProps>): React.ReactElement => {
+    return (
+        <Background value={backgroundColor} drawBackground={true} style={backgroundStyle}>
+            <Heading size={HeadingSize._6}>
+                <img src={logo} style={imageStyle} />
+                <span style={spanStyle}>{title}</span>
+            </Heading>
+            {version ? <Badge>{version}</Badge> : null}
+        </Background>
+    );
+};
+
+export * from "./logo.props";

sites/site-utilities/src/components/logo/logo.props.ts

@@ -0,0 +1,21 @@
+export interface LogoProps {
+    /**
+     * The background color
+     */
+    backgroundColor: string;
+
+    /**
+     * The version
+     */
+    version?: string;
+
+    /**
+     * The logo location
+     */
+    logo: string;
+
+    /**
+     * The title
+     */
+    title: string;
+}