feat(ui5-shellbar): add "logo" slot (#1842)

Replace the existing property "logo" with a slot with the same name to enable users set an element of their choice and freedom to customize it.

FIXES: #1841

BREAKING_CHANGE: property "logo" has been removed, use the "logo" slot instead as follows:
```html
<ui5-shellbar>
	<img slot="logo" src="../../../assets/images/sap-logo-svg.svg"/>
</ui5-shellbar>
```

Author: ilhan007

packages/fiori/src/ShellBar.hbs

@@ -11,16 +11,17 @@
 		{{/if}}
 
 		{{#if hasFocusableLogo}}
-			<img class="ui5-shellbar-logo"
-				src="{{logo}}"
-				@click="{{_logoPress}}"
+			<span class="ui5-shellbar-logo"
 				role="button"
 				aria-label="{{_logoText}}"
 				title="{{_logoText}}"
+				@click="{{_logoPress}}"
 				@keydown="{{_logoKeydown}}"
 				@keyup="{{_logoKeyup}}"
 				tabindex="0"
-			/>
+			>
+				<slot name="logo"></slot>
+			</span>
 		{{/if}}
 
 		{{#if showArrowDown}}
@@ -31,7 +32,13 @@
 				aria-expanded="{{menuPopoverExpanded}}"
 			>
 				{{#if hasNonFocusableLogo}}
-					<img class="ui5-shellbar-logo" src="{{logo}}" aria-label="{{_logoText}}" title="{{_logoText}}"/>
+					<span
+						class="ui5-shellbar-logo"
+						aria-label="{{_logoText}}"
+						title="{{_logoText}}"
+					>
+						<slot name="logo"></slot>
+					</span>
 				{{/if}}
 
 				{{#if primaryTitle}}

packages/fiori/src/ShellBar.js

@@ -41,16 +41,6 @@ const metadata = {
 	languageAware: true,
 	properties: /** @lends sap.ui.webcomponents.fiori.ShellBar.prototype */ {
 
-		/**
-		 * Defines the <code>logo</code> source URI.
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		logo: {
-			type: String,
-		},
-
 		/**
 		 * Defines the <code>primaryTitle</code>.
 		 * <br><br>
@@ -132,10 +122,20 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * @private
+		 */
 		coPilotActive: {
 			type: Boolean,
 		},
 
+		/**
+		 * @private
+		 */
+		withLogo: {
+			type: Boolean,
+		},
+
 		_itemsInfo: {
 			type: Object,
 		},
@@ -194,6 +194,18 @@ const metadata = {
 			type: HTMLElement,
 		},
 
+		/**
+		 * Defines the logo of the <code>ui5-shellbar</code>.
+		 * For example, you can use <code>ui5-avatar</code> or <code>img</code> elements as logo.
+		 * @type {HTMLElement}
+		 * @slot
+		 * @since 1.0.0-rc.8
+		 * @public
+		 */
+		logo: {
+			type: HTMLElement,
+		},
+
 		/**
 		 * Defines the items displayed in menu after a click on the primary title.
 		 * <br><br>
@@ -509,6 +521,7 @@ class ShellBar extends UI5Element {
 		const animationsOn = getAnimationMode() === AnimationMode.Full;
 		const coPilotAnimation = getFeature("CoPilotAnimation");
 		this.coPilot = coPilotAnimation && animationsOn ? coPilotAnimation : { animated: false };
+		this.withLogo = this.hasLogo;
 
 		this._hiddenIcons = this._itemsInfo.filter(info => {
 			const isHidden = (info.classes.indexOf("ui5-shellbar-hidden-button") !== -1);
@@ -909,11 +922,15 @@ class ShellBar extends UI5Element {
 	}
 
 	get hasFocusableLogo() {
-		return this.logo && !this.nonFocusableLogo;
+		return this.hasLogo && !this.nonFocusableLogo;
 	}
 
 	get hasNonFocusableLogo() {
-		return this.logo && this.nonFocusableLogo;
+		return this.hasLogo && this.nonFocusableLogo;
+	}
+
+	get hasLogo() {
+		return !!this.logo.length;
 	}
 
 	get showArrowDown() {

packages/fiori/src/themes/ShellBar.css

@@ -255,7 +255,7 @@ slot[name="profile"] {
 	cursor: pointer;
 }
 
-:host(:not([logo])) .ui5-shellbar-menu-button {
+:host(:not([with-logo])) .ui5-shellbar-menu-button {
 	margin-left: 0;
 }
 
@@ -377,6 +377,12 @@ ui5-icon[data-count]::before {
 	outline: 1px dotted var(--sapContent_ContrastFocusColor);
 }
 
+::slotted([slot="logo"]) {
+	height: 1.675rem;
+	max-width: 3rem;
+	pointer-events: none;
+}
+
 /**
 * IE styles
 */
@@ -391,7 +397,7 @@ ui5-input:not([value-state]):not([readonly]):hover {
 	border: 1px solid var(--sapShell_InteractiveBorderColor);
 }
 
-ui5-input[value-state]:not([value-stat="None"])[focused] {
+ui5-input[value-state]:not([value-state="None"])[focused] {
 	outline: 1px dotted var(--sapContent_ContrastFocusColor);
 }
 /* IE styles end */