fix: Fixes alt-attribute issues for some shell bar components (#139, #…

…154)

docs/src/api/_baseline.json

@@ -976,14 +976,16 @@
       "componentName": "FdShellBarGroup"
     },
     "FdShellBarLogo": {
-      "slots": {},
+      "slots": {
+        "default": "Allows you to provide a custom shell bar logo. If used, this will replace the img-element which is rendered per default."
+      },
       "events": {},
       "mixins": [],
       "props": {
         "src": {
           "name": "src",
           "description": "image source",
-          "required": true,
+          "required": false,
           "types": ["String"]
         },
         "srcset": {
@@ -1156,7 +1158,9 @@
       "componentName": "FdShellBarProductSwitcherItem"
     },
     "FdShellBarProductSwitcherItemImg": {
-      "slots": {},
+      "slots": {
+        "default": "Allows you to provide a custom product logo. If used, this will replace the img-element which is rendered per default."
+      },
       "events": {},
       "mixins": [],
       "props": {
@@ -1165,7 +1169,7 @@
           "description": "image source",
           "required": false,
           "types": ["String"],
-          "defaultValue": ""
+          "defaultValue": null
         }
       },
       "componentName": "FdShellBarProductSwitcherItemImg"

docs/src/layouts/DefaultLayout.vue

@@ -7,7 +7,9 @@
             src="/images/logo.png"
             srcset="/images/logo.png 1x, /images/[email protected] 2x"
           />
-          <FdShellBarProduct>Fundamental Vue</FdShellBarProduct>
+          <FdShellBarProduct>
+            <FdShellBarProductTitle>Fundamental Vue</FdShellBarProductTitle>
+          </FdShellBarProduct>
         </FdShellBarGroup>
         <FdShellBarGroup position="end">
           <FdShellBarActions>

ui/src/components/Layout/ShellBar/ShellBarLogo.vue

@@ -1,6 +1,8 @@
 <template>
-  <a class="fd-shellbar__logo" href="#" @click.prevent="pushLocationIfPossible">
-    <img :src="src" :srcset="srcset" />
+  <a class="fd-shellbar__logo" href="#" @click.prevent="pushLocationIfPossible" v-on="$listeners">
+    <slot>
+      <img :src="src" :srcset="srcset" v-bind="$attrs" />
+    </slot>
   </a>
 </template>
 
@@ -9,15 +11,10 @@ import { withTargetLocation, mixins } from "@/mixins";
 
 export default mixins(withTargetLocation("/")).extend({
   name: "FdShellBarLogo",
+  inheritAttrs: false,
   props: {
-    src: {
-      type: String,
-      required: true
-    },
-    srcset: {
-      type: String,
-      default: null
-    }
+    src: String,
+    srcset: String
   }
 });
 </script>

ui/src/components/Layout/ShellBar/ShellBarProductSwitcherItemImg.vue

@@ -1,15 +1,18 @@
 <template>
-  <span class="fd-product-switcher__product-icon">
-    <img :src="src" />
+  <span class="fd-product-switcher__product-icon" v-on="$listeners">
+    <slot>
+      <img :src="src" v-bind="$attrs" />
+    </slot>
   </span>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
 export default Vue.extend({
   name: "FdShellBarProductSwitcherItemImg",
+  inheritAttrs: false,
   props: {
-    src: { type: String, default: "" }
+    src: String
   }
 });
 </script>

ui/src/components/Layout/ShellBar/__tests__/ShellBarLogo.test.ts

@@ -0,0 +1,17 @@
+import FdShellBarLogo from "./../ShellBarLogo.vue";
+import { mount, createLocalVue } from "@vue/test-utils";
+
+describe("ShellBarLogo", () => {
+  // Test for https://github.com/SAP/fundamental-vue/issues/154
+  it("puts alt on logo", async () => {
+    const localVue = createLocalVue();
+    const wrapper = mount({
+      components: { FdShellBarLogo },
+      template: `<FdShellBarLogo src="image.png" alt="helloWorld" />`
+    }, { localVue });
+    await localVue.nextTick();
+    const img = wrapper.find("img");
+    expect(img.exists()).toBe(true);
+    expect(img.attributes("alt")).toBe("helloWorld");
+  })
+});

ui/src/components/Layout/ShellBar/__tests__/ShellBarProductSwitcherItemImg.test.ts

@@ -0,0 +1,17 @@
+import FdShellBarProductSwitcherItemImg from "./../ShellBarProductSwitcherItemImg.vue";
+import { mount, createLocalVue } from "@vue/test-utils";
+
+describe("ShellBarProductSwitcherItemImg", () => {
+  // Test for https://github.com/SAP/fundamental-vue/issues/139
+  it("puts alt on logo", async () => {
+    const localVue = createLocalVue();
+    const wrapper = mount({
+      components: { FdShellBarProductSwitcherItemImg },
+      template: `<FdShellBarProductSwitcherItemImg src="image.png" alt="helloWorld" />`
+    }, { localVue });
+    await localVue.nextTick();
+    const img = wrapper.find("img");
+    expect(img.exists()).toBe(true);
+    expect(img.attributes("alt")).toBe("helloWorld");
+  })
+});

ui/src/mixins/withTargetLocation.ts

@@ -11,13 +11,13 @@ export default (defaultTo: string | object | null = null) =>
       >
     },
     methods: {
-      pushLocationIfPossible(event?: Event, onComplete?: typeof noop) {
+      pushLocationIfPossible(event?: Event, onComplete = noop) {
         if (this.to == null || this.$router == null) {
           return;
         }
         this.pushLocation(event, onComplete);
       },
-      pushLocation(event?: Event, onComplete?: typeof noop) {
+      pushLocation(event?: Event, onComplete = noop) {
         if (event) {
           event.preventDefault();
           event.stopPropagation();
@@ -33,7 +33,7 @@ export default (defaultTo: string | object | null = null) =>
           warn(`Tried to navigate to ${to} but $router not found.`);
           return;
         }
-        $router.push(to, onComplete || noop);
+        $router.push(to, onComplete);
         this.$emit("click", event);
       }
     }