Add additional configuration options to Banner module (#34384)

* Add additional configuration options to Banner module

* Iterate

* Iterate

modules/banner/src/Menu.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import { type FC, type JSX, useState } from "react";
+import { type ComponentProps, type FC, type JSX, useState } from "react";
 import { AnimatePresence, motion } from "motion/react";
 import * as Dialog from "@radix-ui/react-dialog";
 import styled, { useTheme } from "styled-components";
@@ -179,7 +179,10 @@ const Menu: FC<Props> = ({ api, config, fallbackLogoUrl }) => {
     const [open, setOpen] = useState(false);
 
     let content: JSX.Element;
-    let logoUrl = fallbackLogoUrl;
+    const logoProps: Omit<ComponentProps<typeof Logo>, "api"> = {
+        src: fallbackLogoUrl,
+    };
+
     if (config instanceof Error) {
         content = <CentredContainer>{api.i18n.translate("univention_error")}</CentredContainer>;
     } else if (config) {
@@ -191,8 +194,10 @@ const Menu: FC<Props> = ({ api, config, fallbackLogoUrl }) => {
             </>
         );
         if (config.logo_url) {
-            logoUrl = config.logo_url;
+            logoProps.src = config.logo_url;
         }
+        logoProps.height = config.logo_height !== undefined ? `${config.logo_height}px` : undefined;
+        logoProps.href = config.logo_href;
     } else {
         content = (
             <CentredContainer>
@@ -231,7 +236,7 @@ const Menu: FC<Props> = ({ api, config, fallbackLogoUrl }) => {
                             >
                                 <Dialog.Title>
                                     <SidebarHeading>
-                                        <Logo api={api} src={logoUrl} />
+                                        <Logo {...logoProps} api={api} />
                                         <Dialog.Close asChild>
                                             <CloseButton
                                                 aria-label={api.i18n.translate("close_label")}

modules/banner/src/config.ts

@@ -11,15 +11,28 @@ import { Theme } from "./theme.ts";
 
 z.config(z.locales.en());
 
-const StaticConfig = z.object({
-    type: z.literal("static"),
-
+const MenuConfig = z.object({
     /**
      * Alternative logo URL to display in the popover menu.
      * Will use the main logo url if omitted.
      */
     logo_url: z.optional(z.url()),
 
+    /**
+     * Height in pixels to use when rendering the logo in the menu, defaults to 32px.
+     * The width will be set automatically to maintain the original aspect ratio.
+     */
+    logo_height: z.optional(z.number()),
+
+    /**
+     * Optional link href for the logo in the menu.
+     */
+    logo_href: z.optional(z.url()),
+});
+
+const StaticConfig = z.extend(MenuConfig, {
+    type: z.literal("static"),
+
     /**
      * Categories of links to display in the menu.
      */
@@ -58,15 +71,9 @@ const StaticConfig = z.object({
 
 export type StaticConfig = z.infer<typeof StaticConfig>;
 
-const UniventionConfig = z.object({
+const UniventionConfig = z.extend(MenuConfig, {
     type: z.literal("univention"),
 
-    /**
-     * Alternative logo URL to display in the popover menu.
-     * Will use the main logo url if omitted.
-     */
-    logo_url: z.optional(z.url()),
-
     /**
      * Base URL to an Intercom Service
      * https://docs.software-univention.de/intercom-service/latest/architecture.html#endpoints

modules/banner/src/index.tsx

@@ -6,7 +6,6 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { ThemeProvider } from "styled-components";
-import compound from "@vector-im/compound-web/dist/style.css" with { type: "css" };
 
 import type { Module, Api, ModuleFactory } from "@element-hq/element-web-module-api";
 import Translations from "./translations.json";
@@ -29,7 +28,6 @@ class BannerModule implements Module {
             return;
         }
 
-        document.adoptedStyleSheets.push(compound);
         document.adoptedStyleSheets.push(style);
 
         this.api.i18n.register(Translations);

modules/banner/src/style.css

@@ -5,6 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
+@import "@vector-im/compound-web/dist/style.css" layer(compound-layer);
+
 /* Styles to ensure the banner does not push the app out of the viewport */
 body {
     display: flex;