feat(ui5-shellbar): branding slot introduced

packages/fiori/cypress/specs/ShellBar.cy.tsx

@@ -11,6 +11,7 @@ import ToggleButton from "@ui5/webcomponents/dist/ToggleButton.js";
 import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
 import Avatar from "@ui5/webcomponents/dist/Avatar.js";
 import Switch from "@ui5/webcomponents/dist/Switch.js";
+import ShellBarBranding from "../../src/ShellBarBranding.js"
 import ShellBarSearch from "../../src/ShellBarSearch.js";
 
 const RESIZE_THROTTLE_RATE = 300; // ms
@@ -392,6 +393,30 @@ describe("Slots", () => {
 		});
 	});
 
+describe("Branding slot", () => {
+	it("Test branding slot priority over logo", () => {
+		cy.mount(
+			<ShellBar id="shellbar" primaryTitle="Primary Title">
+				<img id="mainLogo" slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" />
+
+				<ShellBarBranding brandingTitle="Branding Comp" href="https://www.w3schools.com" target="_blank" slot="branding">
+					<img id="brandingLogo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" slot="logo"/>
+				</ShellBarBranding>
+			</ShellBar>
+		);
+
+		cy.get("#shellbar")
+			.find("#mainLogo")
+			.should('exist')
+			.should('not.be.visible');
+
+		cy.get("#shellbar")
+			.find("#brandingLogo")
+			.should('exist')
+			.should('be.visible');
+	});
+});
+
 	describe("Search field slot", () => {
 		it("Test search button is not visible when the search field slot is empty", () => {
 			cy.mount(
@@ -520,7 +545,7 @@ describe("Events", () => {
 			.shadow()
 			.find(".ui5-shellbar-search-button")
 			.as("searchButton");
-		
+
 		cy.get("@searchButton")
 			.click();
 

packages/fiori/cypress/specs/ShellBarBranding.cy.tsx

@@ -0,0 +1,105 @@
+import ShellBar from "../../src/ShellBar.js";
+import ShellBarBranding from "../../src/ShellBarBranding.js"
+
+describe("ShellBarBranding", () => {
+	const basicTemplate = (brandingProps = {}, shellBarProps = {}) => {
+		const defaultShellBarProps = {
+			id: "shellbar",
+			...shellBarProps
+		};
+
+		const defaultBrandingProps = {
+			id: "shellbarBranding",
+			brandingTitle: "Branding Comp",
+			slot: "branding",
+			...brandingProps
+		};
+
+		cy.mount(
+			<ShellBar {...defaultShellBarProps}>
+				<ShellBarBranding {...defaultBrandingProps}>
+					<img id="brandingLogo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" slot="logo"/>
+				</ShellBarBranding>
+			</ShellBar>
+		);
+
+		cy.get("#shellbar").find("#shellbarBranding").shadow().as("shellbarBranding");
+	};
+
+	describe("Properties", () => {
+		it("Test ui5-shellbar-branding href property", () => {
+			basicTemplate({ href: "https://sap.github.io/ui5-webcomponents/", target: "_blank" });
+
+			cy.get("@shellbarBranding")
+				.find("a")
+				.should("have.prop", "href", "https://sap.github.io/ui5-webcomponents/");
+		});
+
+		it("Test ui5-shellbar-branding target property", () => {
+			basicTemplate({ href: "https://sap.github.io/ui5-webcomponents/", target: "_blank" });
+
+			cy.get("@shellbarBranding")
+				.find("a")
+				.should("have.attr", "target", "_blank");
+		});
+
+		it("Test ui5-shellbar-branding brandingTitle property", () => {
+			basicTemplate();
+
+			cy.get("@shellbarBranding")
+				.find(".ui5-shellbar-title")
+				.should("exist")
+				.and("contain.text", "Branding Comp");
+		});
+	});
+
+	describe("Slots", () => {
+		it("Test ui5-shellbar-branding logo slot", () => {
+			basicTemplate();
+
+			cy.get("#brandingLogo")
+				.should("exist")
+				.should("have.attr", "slot", "logo");
+
+			cy.get("@shellbarBranding")
+				.find("slot[name='logo']")
+				.should("exist");
+		});
+	});
+
+	describe("Accessibility", () => {
+		it("Test ui5-shellbar-branding accessibility - default logo role", () => {
+			basicTemplate();
+
+			cy.get("@shellbarBranding")
+				.find("a")
+				.should("have.attr", "role", "link");
+		});
+
+		it("Test ui5-shellbar-branding accessibility - custom logo role", () => {
+			basicTemplate({
+				accessibilityAttributes: { logo: { role: "button" } }
+			});
+
+			cy.get("@shellbarBranding")
+				.find("a")
+				.should("have.attr", "role", "button");
+		});
+
+		it("Test ui5-shellbar-branding accessibility - aria-label", () => {
+			basicTemplate();
+
+			cy.get("@shellbarBranding")
+				.find("a")
+				.should("have.attr", "aria-label", "Branding Comp");
+		});
+
+		it("Test ui5-shellbar-branding tabIndex", () => {
+			basicTemplate();
+
+			cy.get("@shellbarBranding")
+				.find("a")
+				.should("have.attr", "tabIndex", "0");
+		});
+	});
+});

packages/fiori/src/ShellBar.ts

@@ -453,6 +453,19 @@ class ShellBar extends UI5Element {
 	@slot()
 	assistant!: Array<IButton>;
 
+	/**
+	 * Defines the branding slot.
+	 * The `ui5-shellbar-branding` component is intended to be placed inside this slot.
+	 * Content placed here takes precedence over the `primaryTitle` property and the `logo` content slot.
+	 *
+	 * **Note:** The `branding` slot is in an experimental state and is a subject to change.
+	 *
+	 * @since 2.10.0
+	 * @public
+	 */
+	@slot()
+	branding!: Array<UI5Element>;
+
 	/**
 	 * Defines the `ui5-shellbar` additional items.
 	 *
@@ -1419,6 +1432,10 @@ class ShellBar extends UI5Element {
 		return !!this.assistant.length;
 	}
 
+	get hasBranding() {
+		return !!this.branding.length;
+	}
+
 	get hasSearchField() {
 		return !!this.searchField.length;
 	}

packages/fiori/src/ShellBarBranding.ts

@@ -0,0 +1,131 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+
+import type {
+	AriaRole,
+} from "@ui5/webcomponents-base";
+
+// Template
+import ShellBarBrandingTemplate from "./ShellBarBrandingTemplate.js";
+
+// Styles
+import shellBarBrandingCss from "./generated/themes/ShellBarBranding.css.js";
+
+type ShellBarLogoAccessibilityAttributes = {
+	role?: Extract<AriaRole, "link" | "button">
+}
+
+type ShellBarBrandingAccessibilityAttributes = {
+	logo?: ShellBarLogoAccessibilityAttributes
+};
+
+/**
+ * @class
+ *
+ * ### Overview
+ * The `ui5-shellbar-branding` component is intended to be placed inside the branding slot of the
+ * `ui5-shellbar` component. Its content has higher priority than the `primaryTitle` property
+ * and the `logo` slot of `ui5-shellbar`.
+ *
+ * @constructor
+ * @extends UI5Element
+ * @since 2.10.0
+ * @public
+ * @experimental
+ */
+@customElement({
+	tag: "ui5-shellbar-branding",
+	languageAware: true,
+	renderer: jsxRenderer,
+	template: ShellBarBrandingTemplate,
+	styles: shellBarBrandingCss,
+})
+
+class ShellBarBranding extends UI5Element {
+	/**
+	 * Defines the component href.
+	 *
+	 * **Note:** Standard hyperlink behavior is supported.
+	 * @default undefined
+	 * @public
+	 */
+    @property()
+    href?: string;
+
+	/**
+	 * Defines the component target.
+	 *
+	 * **Notes:**
+	 *
+	 * - `_self`
+	 * - `_top`
+	 * - `_blank`
+	 * - `_parent`
+	 * - `_search`
+	 *
+	 * **This property must only be used when the `href` property is set.**
+	 * @default undefined
+	 * @public
+	 */
+	@property()
+	target?: string;
+
+	/**
+	 * Defines the title for the ui5-shellbar-branding component.
+	 *
+	 * @default undefined
+	 * @public
+	 */
+	@property()
+	brandingTitle?: string;
+
+	/**
+	 * Defines additional accessibility attributes to the component.
+	 *
+	 * The accessibilityAttributes object has the following fields,
+	 * where each field is an object supporting one or more accessibility attributes:
+	 *
+	 * - **logo** - `logo.role`
+	 *
+	 * The accessibility attributes support the following values:
+	 *
+	 * - **role**: Defines the accessible ARIA role of the logo area.
+	 * Accepts the following string values: `link` or `button`.
+	 *
+	 *
+	 * @default {}
+	 * @public
+	 */
+	@property({ type: Object })
+	accessibilityAttributes: ShellBarBrandingAccessibilityAttributes = {};
+
+	/**
+	 * Defines the logo of the `ui5-shellbar`.
+	 * For example, you can use `ui5-avatar` or `img` elements as logo.
+	 * @public
+	 */
+	@slot({ type: HTMLElement })
+	logo!: Array<HTMLElement>;
+
+	get parsedRef() {
+		return (this.href && this.href.length > 0) ? this.href : undefined;
+	}
+
+	get _logoAreaText() {
+		return this.brandingTitle ?? "";
+	}
+
+	get accBrandingRole() {
+		return this.accessibilityAttributes.logo?.role || "link";
+	}
+}
+
+ShellBarBranding.define();
+
+export default ShellBarBranding;
+export type {
+	ShellBarBrandingAccessibilityAttributes,
+};

packages/fiori/src/ShellBarBrandingTemplate.tsx

@@ -0,0 +1,22 @@
+import type ShellBarBranding from "./ShellBarBranding.js";
+
+export default function ShellBarBrandingTemplate(this: ShellBarBranding) {
+	return (
+	  <a
+			class="ui5-shellbar-branding-root"
+			href={this.parsedRef}
+			target={this.target}
+			role={this.accBrandingRole}
+			tabIndex={0}
+			aria-label={this._logoAreaText}
+	  >
+			<slot name="logo"></slot>
+
+			{this.brandingTitle && (
+				<h1 class="ui5-shellbar-title">
+					<bdi>{this.brandingTitle}</bdi>
+				</h1>
+			)}
+	  </a>
+	);
+}

packages/fiori/src/ShellBarTemplate.tsx

@@ -15,7 +15,11 @@ export default function ShellBarTemplate(this: ShellBar) {
 				<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-left">
 					{this.startButton.length > 0 && <slot name="startButton"></slot>}
 
-					{this.hasMenuItems && (
+					{this.hasBranding && (
+						<slot name="branding"></slot>
+					)}
+
+					{this.hasMenuItems && !this.hasBranding && (
 						<>
 							{!this.showLogoInMenuButton && this.hasLogo && singleLogo.call(this)}
 							{this.showTitleInMenuButton && <h1 class="ui5-hidden-text">{this.primaryTitle}</h1>}
@@ -42,23 +46,30 @@ export default function ShellBarTemplate(this: ShellBar) {
 										)}
 										<Icon class="ui5-shellbar-menu-button-arrow" name={slimArrowDown} />
 									</button>
-									{this.secondaryTitle && !this.isSBreakPoint && (
-										<div style={{ display: "block" }} class="ui5-shellbar-secondary-title" data-ui5-stable="secondary-title">
-											{this.secondaryTitle}
-										</div>
-									)}
 								</>
 							)}
 						</>
 					)}
 
+					{this.hasMenuItems && (
+						// The secondary title remains visible when both menu items and the branding slot are present,
+						// as the branding slot has higher priority and takes precedence in visibility.
+						<>
+							{this.secondaryTitle && !this.isSBreakPoint && (
+								<div style={{ display: "block" }} class="ui5-shellbar-secondary-title" data-ui5-stable="secondary-title">
+									{this.secondaryTitle}
+								</div>
+							)}
+						</>
+					)}
+
 					{!this.hasMenuItems && (
 						<>
-							{this.isSBreakPoint && this.hasLogo && singleLogo.call(this)}
+							{this.isSBreakPoint && this.hasLogo && !this.hasBranding && singleLogo.call(this)}
 							{!this.isSBreakPoint && (
 								<>
-									{combinedLogo.call(this)}
-									{this.secondaryTitle && this.primaryTitle && (
+									{!this.hasBranding && combinedLogo.call(this)}
+									{this.secondaryTitle && (this.primaryTitle || this.hasBranding) && (
 										<h2 class="ui5-shellbar-secondary-title" data-ui5-stable="secondary-title">
 											{this.secondaryTitle}
 										</h2>