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 "@ui5/webcomponents-fiori/dist/ShellBarBranding.js"
 import ShellBarSearch from "../../src/ShellBarSearch.js";
 
 const RESIZE_THROTTLE_RATE = 300; // ms
@@ -520,7 +521,7 @@ describe("Events", () => {
 			.shadow()
 			.find(".ui5-shellbar-search-button")
 			.as("searchButton");
-		
+
 		cy.get("@searchButton")
 			.click();
 
@@ -534,7 +535,7 @@ describe("Events", () => {
 				<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" />
 			</ShellBar>
 		);
-		
+
 		cy.get("[ui5-shellbar]")
 			.as("shellbar");
 
@@ -586,23 +587,23 @@ describe("ButtonBadge in ShellBar", () => {
 		  <ShellBarItem id="test-item" icon="accept" text="Item" count="42" />
 		</ShellBar>
 	  );
-	  
+
 	  cy.get("#shellbarwithitems")
 		.shadow()
 		.find(".ui5-shellbar-custom-item ui5-button-badge[slot='badge']")
 		.should("exist")
 		.should("have.attr", "text", "42");
 	});
-  
+
 	it("Test count updates propagate to ButtonBadge", () => {
 	  cy.mount(
 		<ShellBar id="test-invalidation">
 		  <ShellBarItem id="test-invalidation-item" icon="accept" text="Item" count="1" />
 		</ShellBar>
 	  );
-	  
+
 	  cy.get("#test-invalidation-item").invoke("attr", "count", "3");
-	  
+
 	  cy.get("#test-invalidation")
 		.shadow()
 		.find(".ui5-shellbar-custom-item ui5-button-badge[slot='badge']")
@@ -611,7 +612,7 @@ describe("ButtonBadge in ShellBar", () => {
 
 	it("Test if overflow button shows appropriate badge when items are overflowed", () => {
 		cy.mount(
-		  <ShellBar id="shellbar-with-overflow" 
+		  <ShellBar id="shellbar-with-overflow"
 			primaryTitle="Product Title"
 			secondaryTitle="Secondary Title"
 			showNotifications={true}
@@ -629,23 +630,23 @@ describe("ButtonBadge in ShellBar", () => {
 			<Input placeholder="Search" slot="searchField" />
 		  </ShellBar>
 		);
-		
+
 		cy.viewport(320, 800);
-		
+
 		cy.get("#shellbar-with-overflow")
 		  .shadow()
 		  .find(".ui5-shellbar-overflow-button")
 		  .should("be.visible");
-		
+
 		cy.get("#shellbar-with-overflow")
 		  .shadow()
 		  .find(".ui5-shellbar-overflow-button ui5-button-badge[slot='badge']")
 		  .should("exist")
 		  .should("have.attr", "design", "AttentionDot");
-		
+
 		cy.mount(
 		  <ShellBar id="shellbar-with-single-overflow"
-			primaryTitle="Product Title" 
+			primaryTitle="Product Title"
 			secondaryTitle="Secondary Title"
 			showProductSwitch={true}>
 			<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" />
@@ -658,14 +659,14 @@ describe("ButtonBadge in ShellBar", () => {
 			</Avatar>
 		  </ShellBar>
 		);
-		
+
 		cy.viewport(320, 800);
-		
+
 		cy.get("#shellbar-with-single-overflow")
 		  .shadow()
 		  .find(".ui5-shellbar-overflow-button")
 		  .should("be.visible");
-		
+
 		cy.get("#shellbar-with-single-overflow")
 		  .shadow()
 		  .find(".ui5-shellbar-overflow-button ui5-button-badge[slot='badge']")
@@ -685,3 +686,28 @@ describe("Keyboard Navigation", () => {
 			.should("not.exist");
 	});
 });
+
+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');
+
+	});
+});

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

@@ -45,6 +45,7 @@ import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsSco
 import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import type ShellBarItem from "./ShellBarItem.js";
 import type { ShellBarItemAccessibilityAttributes } from "./ShellBarItem.js";
+import type ShellBarBranding from "./ShellBarBranding.js";
 
 // Templates
 import ShellBarTemplate from "./ShellBarTemplate.js";
@@ -455,6 +456,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<ShellBarBranding>;
+
 	/**
 	 * Defines the `ui5-shellbar` additional items.
 	 *
@@ -862,6 +876,10 @@ class ShellBar extends UI5Element {
 		if (this.breakpointSize !== mappedSize) {
 			this.breakpointSize = mappedSize;
 		}
+
+		this.branding.forEach(brandingEl => {
+			brandingEl.isSBreakPoint = this.isSBreakPoint;
+		});
 	}
 
 	_hideItems(items: IShellBarHidableItem[]) {
@@ -1420,6 +1438,10 @@ class ShellBar extends UI5Element {
 		return !!this.assistant.length;
 	}
 
+	get hasBranding() {
+		return !!this.branding.length;
+	}
+
 	get hasSearchField() {
 		return !!this.searchField.length;
 	}