feat(ui5-shellbar): adds logoPress and coPilotPress events (#301)

Author: MapTo0

packages/main/src/ShellBar.hbs

@@ -7,7 +7,7 @@
 		{{/if}}
 
 		{{#unless interactiveLogo}}
-			<img class="{{classes.logo}}" src="{{ctr.logo}}" />
+			<img class="{{classes.logo}}" src="{{ctr.logo}}" @click="{{ctr._logoPress}}" />
 		{{/unless}}
 
 		{{#if showArrowDown}}
@@ -96,8 +96,8 @@
 </div>
 
 {{#*inline "coPilot"}}
-	<svg version="1.1" width="44" height="44" viewBox="-150 -150 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-		style="background-color: transparent;">
+	<svg @click="{{ctr._coPilotPress}}" version="1.1" width="44" height="44" viewBox="-150 -150 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+		style="background-color: transparent; cursor: pointer;" class="ui5-shellbar-coPilot">
 		<defs>
 			<linearGradient id="grad1" x1="0%" x2="100%" y1="100%" y2="0%">
 				<stop offset="0%" style="stop-color:#C0D9F2;stop-opacity:0.87"></stop>

packages/main/src/ShellBar.js

@@ -2,6 +2,7 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap";
 import { getRTL } from "@ui5/webcomponents-base/src/Configuration";
 import URI from "@ui5/webcomponents-base/src/types/URI";
 import WebComponent from "@ui5/webcomponents-base/src/WebComponent";
+import Function from "@ui5/webcomponents-base/src/types/Function";
 import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle";
 import ResizeHandler from "@ui5/webcomponents-base/src/delegate/ResizeHandler";
 import ItemNavigation from "@ui5/webcomponents-base/src/delegate/ItemNavigation";
@@ -136,6 +137,14 @@ const metadata = {
 		_header: {
 			type: Object,
 		},
+
+		_logoPress: {
+			type: Function,
+		},
+
+		_coPilotPress: {
+			type: Function,
+		},
 	},
 
 	slots: /** @lends  sap.ui.webcomponents.main.ShellBar.prototype */ {
@@ -231,6 +240,32 @@ const metadata = {
 				targetRef: { type: HTMLElement },
 			},
 		},
+
+		/**
+		 * Fired, when the logo is pressed.
+		 *
+		 * @event
+		 * @param {HTMLElement} targetRef dom ref of the clicked element
+		 * @public
+		 */
+		logoPress: {
+			detail: {
+				targetRef: { type: HTMLElement },
+			},
+		},
+
+		/**
+		 * Fired, when the co pilot is pressed.
+		 *
+		 * @event
+		 * @param {HTMLElement} targetRef dom ref of the clicked element
+		 * @public
+		 */
+		coPilotPress: {
+			detail: {
+				targetRef: { type: HTMLElement },
+			},
+		},
 	},
 };
 
@@ -374,6 +409,18 @@ class ShellBar extends WebComponent {
 			this.shadowRoot.querySelector("ui5-popover").close();
 			this._overflowActions();
 		};
+
+		this._logoPress = event => {
+			this.fireEvent("logoPress", {
+				targetRef: this.shadowRoot.querySelector(".sapWCShellBarLogo"),
+			});
+		};
+
+		this._coPilotPress = event => {
+			this.fireEvent("coPilotPress", {
+				targetRef: this.shadowRoot.querySelector(".ui5-shellbar-coPilot"),
+			});
+		};
 	}
 
 	onBeforeRendering() {

packages/main/src/themes-next/ShellBar.css

@@ -193,6 +193,7 @@ ui5-shellbar {
 }
 
 .sapWCShellBarLogo {
+	cursor: pointer;
 	height: 1.675rem;
 }
 

packages/main/test/sap/ui/webcomponents/main/pages/ShellBar.html

@@ -175,6 +175,14 @@
 			window["press-input"].value = "Product Switch"
 		});
 
+		shellbar.addEventListener("logoPress", function(event) {
+			window["press-input"].value = "Logo"
+		});
+
+		shellbar.addEventListener("coPilotPress", function(event) {
+			window["press-input"].value = "CoPilot"
+		});
+
 		["disc", "call"].forEach(function(id) {
 			window[id].addEventListener("press", function(event) {
 				window["press-input"].value = event.target.id;

packages/main/test/specs/ShellBar.spec.js

@@ -228,6 +228,22 @@ describe("Component Behaviour", () => {
 				assert.strictEqual(input.getValue(), "Product Switch", "Input value is set by click event of Product Switch icon");
 			});
 
+			it("tests logoPress event", () => {
+				const logo = browser.findElementDeep("#shellbar >>> .sapWCShellBarLogo");
+				const input = browser.findElementDeep("#press-input");
+
+				logo.click();
+				assert.strictEqual(input.getValue(), "Logo", "Input value is set by click event of Logo");
+			});
+
+			it("tests coPilotPress event", () => {
+				const coPilot = browser.findElementDeep("#shellbar >>> .ui5-shellbar-coPilot");
+				const input = browser.findElementDeep("#press-input");
+
+				coPilot.click();
+				assert.strictEqual(input.getValue(), "CoPilot", "Input value is set by click event of CoPilot");
+			});
+
 			it("tests if searchfield appears when clicking on search icon", () => {
 				const searchIcon = browser.findElementDeep("#shellbar >>> .sapWCShellBarSearchIcon");
 				const searchField = browser.findElementDeep("#shellbar ui5-input");