Merge pull request #275 from element-hq/t3chguy/banner-title

Allow the banner title to differ from `brand`

modules/banner/README.md

@@ -5,11 +5,12 @@ Allows rendering a top bar with slide out left panel menu.
 
 Supports the following configuration options:
 
-| Key           | Type   | Description                                                  |
-| ------------- | ------ | ------------------------------------------------------------ |
-| logo_url      | string | URL to the logo to render in the banner                      |
-| logo_link_url | string | URL to send the user to when clicking the logo in the banner |
-| menu          | `Menu` | Data to render in the banner menu                            |
+| Key           | Type   | Description                                                                                    |
+| ------------- | ------ | ---------------------------------------------------------------------------------------------- |
+| logo_url      | string | URL to the logo to render in the banner                                                        |
+| logo_link_url | string | URL to send the user to when clicking the logo in the banner                                   |
+| title         | string | The title to render next to the logo, falls back to top level `brand` variable if unspecified. |
+| menu          | `Menu` | Data to render in the banner menu                                                              |
 
 The `Menu` type is fulfilled by the following discriminated union:
 

modules/banner/element-web/src/Banner.tsx

@@ -37,9 +37,10 @@ interface Props {
     logoUrl: string;
     href: string;
     menu: ModuleConfig["menu"];
+    title: string;
 }
 
-const Banner: FC<Props> = ({ api, logoUrl, href, menu }) => {
+const Banner: FC<Props> = ({ api, logoUrl, href, menu, title }) => {
     let menuJsx;
     switch (menu.type) {
         case "static": {
@@ -59,7 +60,7 @@ const Banner: FC<Props> = ({ api, logoUrl, href, menu }) => {
                 <Logo api={api} src={logoUrl} href={href} height="100%" />
             </LogoContainer>
             <Heading size="sm" weight="medium" as="h1">
-                {api.config.get("brand")}
+                {title}
             </Heading>
         </Root>
     );

modules/banner/element-web/src/config.ts

@@ -89,6 +89,13 @@ export const ModuleConfig = z.object({
      */
     logo_link_url: z.url(),
 
+    /**
+     * The title to show to the right of the Logo
+     *
+     * Will fall back to `brand` variable if undefined, can be hidden by setting to the empty string.
+     */
+    title: z.optional(z.string()),
+
     /**
      * Configuration for the menu.
      */

modules/banner/element-web/src/index.tsx

@@ -47,6 +47,7 @@ class BannerModule implements Module {
                     logoUrl={this.config.logo_url}
                     href={this.config.logo_link_url}
                     menu={this.config.menu}
+                    title={this.config.title ?? this.api.config.get("brand")}
                 />
             </ThemeProvider>,
         );