Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: add the new logo and inline logo for FAST as the favicon and inline logo in Creator, Component Explorer and Tooling examples #3313

Merged
merged 3 commits into from
Jun 17, 2020
Merged

chore: add the new logo and inline logo for FAST as the favicon and inline logo in Creator, Component Explorer and Tooling examples #3313

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
45bc618
chore: add the new logo and inline logo for FAST as the favicon and i…
janechu Jun 15, 2020
224fa94
fix eslint errors
janechu Jun 15, 2020
8558171
namespace the logos
janechu Jun 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 9 additions & 17 deletions sites/fast-component-explorer/app/explorer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,6 @@ import {
ActionToggleAppearance,
ActionToggleProps,
Background,
Heading,
HeadingSize,
Pivot,
Select,
SelectOption,
Expand All @@ -50,6 +48,7 @@ import FASTMessageSystemWorker from "@microsoft/fast-tooling/dist/message-system
import {
DirectionSwitch,
downChevron,
Logo,
ThemeSelector,
TransparencyToggle,
upChevron,
Expand All @@ -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";
Expand Down Expand Up @@ -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}
Expand All @@ -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}
Expand Down
Binary file removed sites/fast-component-explorer/favicon.png
View file
Open in desktop
Binary file not shown.
1 change: 1 addition & 0 deletions sites/fast-component-explorer/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
16 changes: 15 additions & 1 deletion sites/fast-component-explorer/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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"],
Expand Down
34 changes: 11 additions & 23 deletions sites/fast-creator/app/creator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -55,6 +49,7 @@ import {
Dimension,
DirectionSwitch,
fastComponentSchemas,
Logo,
nativeElementSchemas,
textSchema,
ThemeSelector,
Expand All @@ -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 = {
Expand Down Expand Up @@ -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}
Expand Down
Binary file removed sites/fast-creator/favicon.png
View file
Open in desktop
Binary file not shown.
1 change: 1 addition & 0 deletions sites/fast-creator/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
16 changes: 15 additions & 1 deletion sites/fast-creator/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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"],
Expand Down
4 changes: 3 additions & 1 deletion sites/fast-tooling-examples/app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
3 changes: 3 additions & 0 deletions sites/fast-tooling-examples/app/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -23,6 +25,7 @@ FASTDesignSystemProvider;
FASTTabs;
FASTTab;
FASTTabPanel;
FASTInlineLogo;

/**
* The links to examples
Expand Down
12 changes: 11 additions & 1 deletion sites/fast-tooling-examples/app/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -89,7 +99,7 @@ iframe {
.toolbar-links,
.menu,
.content {
padding: 5px 10px;
padding: 2px 10px;
}

.guidance {
Expand Down
Binary file removed sites/fast-tooling-examples/logo.png
View file
Open in desktop
Binary file not shown.
16 changes: 15 additions & 1 deletion sites/fast-tooling-examples/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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"],
Expand Down
1 change: 1 addition & 0 deletions sites/site-utilities/src/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
37 changes: 37 additions & 0 deletions sites/site-utilities/src/components/logo/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
21 changes: 21 additions & 0 deletions sites/site-utilities/src/components/logo/logo.props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Binary file added sites/site-utilities/statics/assets/fast-inline-logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added sites/site-utilities/statics/assets/fast-logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.