@coras-io/embed 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @coras-io/embed
 
+## 0.5.0
+
+### Minor Changes
+
+- 6220f11: Add `logoHref` to the managed navbar so the brand logo can link to the distributor's own website instead of the embed's landing page
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/containers/navbar/navbar.component.d.ts

@@ -32,6 +32,7 @@ export declare class CorasNavBar extends CorasNavBar_base implements SearchMixin
     logo?: string;
     logoDark?: string;
     navbarLogo?: string;
+    logoHref?: string;
     private readonly colorScheme;
     locale: SupportedLocales;
     locales: SupportedLocales[];
@@ -99,6 +100,7 @@ export declare class CorasNavBar extends CorasNavBar_base implements SearchMixin
     private renderMobileMenuDrawer;
     private handleLogoClick;
     private renderBrand;
+    private renderBrandHome;
     private renderSearchOnlyHeader;
     private renderFullHeader;
     willUpdate(): void;

package/dist/containers/navbar/navbar.component.js

@@ -10,6 +10,7 @@ import { ColorSchemeController } from "../../core/color-scheme.js";
 import { when } from "lit/directives/when.js";
 import { localized, msg } from "@lit/localize";
 import { consume, ContextConsumer } from "@lit/context";
+import { safeUrl } from "@coras-io/brand-tokens";
 import "../../components/button/button.js";
 import "../../components/icon/icon.js";
 import "../../components/input-field/input-field.js";
@@ -620,21 +621,40 @@ let CorasNavBar = class CorasNavBar extends SearchMixin(SignalWatcher(LitElement
                 ? this.logoDark
                 : this.logo);
         return html `
-      <slot name="brand">
-        ${logo
-            ? html `<button
-              class="brand-button"
-              part="brand-button"
-              type="button"
-              aria-label=${msg("Go to the home page")}
-              @click=${this.handleLogoClick}
-            >
-              <img class="brand-logo" part="brand-logo" src=${logo} alt="" />
-            </button>`
-            : nothing}
-      </slot>
+      <slot name="brand"> ${logo ? this.renderBrandHome(logo) : nothing} </slot>
     `;
     }
+    // A distributor with its own website links the logo straight there, the way its
+    // main site does, and a real anchor keeps that a link (middle-click, new tab,
+    // status bar). Without one there is no URL to link to, so the logo stays a
+    // button dispatching the `landing` navigation for the host to route.
+    renderBrandHome(logo) {
+        const image = html `<img
+      class="brand-logo"
+      part="brand-logo"
+      src=${logo}
+      alt=""
+    />`;
+        // The URL comes from host config, so it is gated here rather than trusted.
+        const href = safeUrl(this.logoHref);
+        return href
+            ? html `<a
+          class="brand-button"
+          part="brand-button"
+          href=${href}
+          aria-label=${msg("Go to the home page")}
+          >${image}</a
+        >`
+            : html `<button
+          class="brand-button"
+          part="brand-button"
+          type="button"
+          aria-label=${msg("Go to the home page")}
+          @click=${this.handleLogoClick}
+        >
+          ${image}
+        </button>`;
+    }
     renderSearchOnlyHeader() {
         return html `
       <header class="search-only">
@@ -711,6 +731,9 @@ __decorate([
 __decorate([
     property({ type: String, attribute: "navbar-logo" })
 ], CorasNavBar.prototype, "navbarLogo", void 0);
+__decorate([
+    property({ type: String, attribute: "logo-href" })
+], CorasNavBar.prototype, "logoHref", void 0);
 __decorate([
     consume({ context: localeContext, subscribe: true })
 ], CorasNavBar.prototype, "locale", void 0);

package/dist/containers/navbar/navbar.styles.js

@@ -162,6 +162,7 @@ export default css `
       background: none;
       color: inherit;
       font: inherit;
+      text-decoration: none;
       cursor: pointer;
     }
 

package/dist/sdk/types.d.ts

@@ -87,7 +87,7 @@ export type CorasConfig = {
     colorScheme?: CorasColorScheme;
 };
 /**
- * Feature toggles for the SDK-created Coras navbar. Each `show*` key maps 1:1 to
+ * Host-set options for the SDK-created Coras navbar. Each `show*` key maps 1:1 to
  * a navbar control; an omitted key keeps the navbar's default (everything
  * shown). Used with `{ use: "managed", props: { … } }`.
  */
@@ -102,6 +102,13 @@ export type CorasNavbarProps = {
     showCurrencySelector?: boolean;
     showBasket?: boolean;
     showSearch?: boolean;
+    /**
+     * Where the brand logo links, for a distributor whose booking site sits beside
+     * a main website. Set it and the logo becomes a plain link there; leave it
+     * unset and the logo stays a button that emits a `landing` navigation for the
+     * host to route. Only `https:` and same-origin URLs are honoured.
+     */
+    logoHref?: string;
 };
 /**
  * Host content-injection points on the Coras navbar. Names describe the region

package/package.json

@@ -20,7 +20,7 @@
   "engines": {
     "node": ">=22"
   },
-  "version": "0.4.0",
+  "version": "0.5.0",
   "private": false,
   "homepage": "https://embed.coras.io",
   "bugs": {