Add app and org logos

Author: microbit-robert

.github/workflows/build.yml

@@ -39,7 +39,7 @@ jobs:
       - run: npm ci
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - run: npm install --no-save @microbit-foundation/python-editor-v3-microbit@0.2.0-multiple.projects.storage.49 @microbit-foundation/website-deploy-aws@0.6.0 @microbit-foundation/website-deploy-aws-config@0.9.0 @microbit-foundation/circleci-npm-package-versioner@1
+      - run: npm install --no-save @microbit-foundation/python-editor-v3-microbit@0.2.0-multiple.projects.storage.53 @microbit-foundation/website-deploy-aws@0.6.0 @microbit-foundation/website-deploy-aws-config@0.9.0 @microbit-foundation/circleci-npm-package-versioner@1
         if: github.repository_owner == 'microbit-foundation'
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

src/deployment/default/index.tsx

@@ -3,6 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
+import { Box, BoxProps } from "@chakra-ui/react";
 import { ReactNode, createContext } from "react";
 import { CookieConsent, DeploymentConfigFactory } from "..";
 import { ConsoleLogging } from "./logging";
@@ -16,8 +17,15 @@ const stubConsentContext = createContext<CookieConsent | undefined>(
   stubConsentValue
 );
 
+const DefaultAppLogo = (props: BoxProps) => (
+  <Box as="span" fontSize="2xl" fontWeight="normal" whiteSpace="nowrap" {...props}>
+    Python Editor
+  </Box>
+);
+
 const defaultDeploymentFactory: DeploymentConfigFactory = () => ({
   chakraTheme: theme,
+  AppLogo: DefaultAppLogo,
   // This isn't ideal as it's the branded version. You can just remove the field to remove the welcome dialog.
   welcomeVideoYouTubeId: "mREwMW69qKc",
   logging: new ConsoleLogging(),

src/deployment/index.ts

@@ -3,7 +3,8 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { ReactNode, useContext } from "react";
+import { BoxProps } from "@chakra-ui/react";
+import { ComponentType, ReactNode, useContext } from "react";
 import { Logging } from "../logging/logging";
 
 export type DeploymentConfigFactory = (
@@ -24,6 +25,10 @@ export interface DeploymentConfig {
   welcomeVideoYouTubeId?: string;
   squareLogo?: ReactNode;
   horizontalLogo?: ReactNode;
+  /** Product wordmark, e.g. "Python Editor". */
+  AppLogo?: ComponentType<BoxProps>;
+  /** Organisation logo, e.g. the micro:bit logo. */
+  OrgLogo?: ComponentType<BoxProps>;
   compliance: {
     /**
      * A provider that will be used to wrap the app UI.

src/homepage/DefaultPageLayout.tsx

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Box, Flex, Heading, HStack, VStack } from "@chakra-ui/react";
+import { Box, Flex, HStack, VStack } from "@chakra-ui/react";
 import { ReactNode } from "react";
 import { Link as RouterLink } from "react-router-dom";
 import HomeButton from "../common/HomeButton";
@@ -19,49 +19,24 @@ interface DefaultPageLayoutProps {
 }
 
 const Branding = () => {
-  const brand = useDeployment();
+  const { AppLogo, OrgLogo } = useDeployment();
   return (
     <HStack
       as={RouterLink}
       to={createHomePageUrl()}
       spacing="0.875rem"
       alignItems="center"
+      color="white"
       borderRadius="md"
       _focusVisible={{ boxShadow: "outline", outline: "none" }}
     >
-      {brand.squareLogo && (
+      {OrgLogo && (
         <>
-          <HStack spacing="0.5rem">
-            <Box
-              h="30px"
-              w="auto"
-              color="white"
-              role="img"
-              display="flex"
-              alignItems="center"
-              sx={{ "& svg": { height: "100%", width: "auto" } }}
-            >
-              {brand.squareLogo}
-            </Box>
-            <Box
-              h="30px"
-              w="auto"
-              color="white"
-              role="img"
-              display={{ base: "none", sm: "flex" }}
-              alignItems="center"
-              sx={{ "& svg": { height: "100%", width: "auto" } }}
-            >
-              {brand.horizontalLogo}
-            </Box>
-          </HStack>
+          <OrgLogo height="30px" />
           <Box h="28px" borderLeftWidth="1px" borderColor="whiteAlpha.600" />
         </>
       )}
-      {/* Product name; deliberately not translated. */}
-      <Heading as="h1" fontSize="2xl" fontWeight="normal" color="white">
-        Python Editor
-      </Heading>
+      {AppLogo && <AppLogo h="20px" />}
     </HStack>
   );
 };