feat: Improves Shellbar

docs/src/api/_baseline.json

@@ -1045,7 +1045,15 @@
       },
       "events": {},
       "mixins": [],
-      "props": {},
+      "props": {
+        "productTitle": {
+          "name": "productTitle",
+          "description": "Product Title",
+          "types": ["String"],
+          "required": false,
+          "defaultValue": null
+        }
+      },
       "componentName": "FdShellBarProduct"
     },
     "FdShellBarProductTitle": {

docs/src/pages/Shell Bar/0-minimal.vue

@@ -0,0 +1,29 @@
+<title>Minimal Shell Bar</title>
+<tip>This example shows the minimum Shellbar for a single application product with only user settings. If no user thumbnail is available then display initials.</tip>
+
+<template>
+  <div>
+    <FdShellBar>
+      <FdShellBarGroup position="start">
+        <FdShellBarLogo
+          alt="SAP"
+          src="/images/sap-logo.png"
+          srcset="/images/sap-logo@2x.png 1x, /images/sap-logo@3x.png 2x, /images/sap-logo@4x.png 3x"
+          width="48"
+          height="24"
+        />
+        <FdShellBarProduct productTitle="Product Name" />
+      </FdShellBarGroup>
+      <FdShellBarGroup position="end">
+        <FdShellBarActions>
+          <FdShellBarAction>
+            <FdShellBarUserMenu>
+              <FdMenuItem>Settings</FdMenuItem>
+              <FdMenuItem>Sign out</FdMenuItem>
+            </FdShellBarUserMenu>
+          </FdShellBarAction>
+        </FdShellBarActions>
+      </FdShellBarGroup>
+    </FdShellBar>
+  </div>
+</template>

docs/src/pages/Shell Bar/1-actions.vue

@@ -0,0 +1,35 @@
+<title>Shell Bar with additional Actions</title>
+<tip>Use `FdShellBarActionButton` to add additional action buttons to the shell bar.</tip>
+
+<template>
+  <div>
+    <FdShellBar>
+      <FdShellBarGroup position="start">
+        <FdShellBarLogo
+          alt="SAP"
+          src="/images/sap-logo.png"
+          srcset="/images/sap-logo@2x.png 1x, /images/sap-logo@3x.png 2x, /images/sap-logo@4x.png 3x"
+          width="48"
+          height="24"
+        />
+        <FdShellBarProduct productTitle="Product Name" />
+      </FdShellBarGroup>
+      <FdShellBarGroup position="end">
+        <FdShellBarActions>
+          <FdShellBarAction>
+            <FdShellBarActionButton icon="sys-help" />
+          </FdShellBarAction>
+          <FdShellBarAction>
+            <FdShellBarActionButton icon="settings" />
+          </FdShellBarAction>
+          <FdShellBarAction>
+            <FdShellBarUserMenu>
+              <FdMenuItem>Settings</FdMenuItem>
+              <FdMenuItem>Sign out</FdMenuItem>
+            </FdShellBarUserMenu>
+          </FdShellBarAction>
+        </FdShellBarActions>
+      </FdShellBarGroup>
+    </FdShellBar>
+  </div>
+</template>

docs/src/pages/Shell Bar/3-products.vue

@@ -0,0 +1,110 @@
+<title>Shell Bar with Product Switcher</title>
+<tip>You have to embed a `FdShellBar` in a `FdShell` for things to work properly.</tip>
+
+<template>
+  <div>
+    <FdShellBar>
+      <FdShellBarGroup position="start">
+        <FdShellBarLogo
+          alt="SAP"
+          src="/images/sap-logo.png"
+          srcset="/images/sap-logo@2x.png 1x, /images/sap-logo@3x.png 2x, /images/sap-logo@4x.png 3x"
+          width="48"
+          height="24"
+        />
+        <FdShellBarProduct>
+          <FdShellBarProductMenu>
+            <template #title
+              >Product Name</template
+            >
+            <template #menu>
+              <FdMenuItem>Application A</FdMenuItem>
+              <FdMenuItem>Application B</FdMenuItem>
+            </template>
+          </FdShellBarProductMenu>
+        </FdShellBarProduct>
+        <FdShellBarSubtitle>Subtitle</FdShellBarSubtitle>
+      </FdShellBarGroup>
+      <FdShellBarGroup position="end">
+        <FdShellBarActions>
+          <FdShellBarAction>
+            <FdShellBarProductSwitcher>
+              <FdShellBarProductSwitcherItem
+                href="#"
+                src="/images/products/01.png"
+                title="Fiori Home"
+              />
+              <FdShellBarProductSwitcherItem
+                href="#"
+                src="/images/products/02.png"
+                title="S/4 HANA Cloud"
+              />
+              <FdShellBarProductSwitcherItem
+                href="#"
+                src="/images/products/03.png"
+                title="Analytics Cloud"
+              />
+              <FdShellBarProductSwitcherItem
+                :to="{ path: '/test' }"
+                src="/images/products/04.png"
+                title="Ariba"
+              />
+              <FdShellBarProductSwitcherItem
+                :to="{ path: '/' }"
+                src="/images/products/05.png"
+                title="SuccessFactors"
+              />
+              <FdShellBarProductSwitcherItem
+                :to="{ path: '/' }"
+                src="/images/products/06.png"
+                title="Commerce Cloud"
+              />
+              <FdShellBarProductSwitcherItem
+                src="/images/products/07.png"
+                title="Gigya"
+              />
+              <FdShellBarProductSwitcherItem
+                src="/images/products/08.png"
+                title="Callidus Cloud"
+              />
+              <FdShellBarProductSwitcherItem
+                src="/images/products/09.png"
+                title="Fieldglass"
+              />
+              <FdShellBarProductSwitcherItem>
+                <router-link :to="{ path: '/' }">
+                  <FdShellBarProductSwitcherItemImg
+                    src="/images/products/10.png"
+                  />
+                  <FdShellBarProductSwitcherItemTitle
+                    >Concur</FdShellBarProductSwitcherItemTitle
+                  >
+                </router-link>
+              </FdShellBarProductSwitcherItem>
+              <FdShellBarProductSwitcherItem src="/images/products/11.png">
+                <router-link :to="{ path: '/' }">
+                  <FdShellBarProductSwitcherItemImg
+                    src="/images/products/11.png"
+                  />
+                  <FdShellBarProductSwitcherItemTitle
+                    >Cloud for Customer</FdShellBarProductSwitcherItemTitle
+                  >
+                </router-link>
+              </FdShellBarProductSwitcherItem>
+              <FdShellBarProductSwitcherItem>
+                <router-link :to="{ path: '/' }">
+                  <FdShellBarProductSwitcherItemImg
+                    src="/images/products/12.png"
+                  />
+                  <FdShellBarProductSwitcherItemTitle
+                    >Cloud Portal</FdShellBarProductSwitcherItemTitle
+                  >
+                </router-link>
+              </FdShellBarProductSwitcherItem>
+            </FdShellBarProductSwitcher>
+          </FdShellBarAction>
+        </FdShellBarActions>
+      </FdShellBarGroup>
+    </FdShellBar>
+  </div>
+</template>

docs/src/pages/Shell Bar/index.ts

@@ -18,7 +18,8 @@ export const plugin: ExampleCollectionFunction = () => {
       "FdShellBarProductSwitcher",
       "FdShellBarProductSwitcherItem",
       "FdShellBarProductSwitcherItemImg",
-      "FdShellBarProductSwitcherItemTitle"
+      "FdShellBarProductSwitcherItemTitle",
+      "FdShellBarActionButton"
     ]
   };
 };

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

@@ -0,0 +1,17 @@
+<template>
+  <button v-on="$listeners" class="fd-button--shell" v-fd-icon="icon">
+    <slot /></button
+></template>
+
+<script>
+import { Icon } from "@/mixins";
+import { icon } from "@/directives";
+
+export default {
+  name: "FdShellBarActionButton",
+  mixins: [Icon],
+  directives: {
+    "fd-icon": icon
+  }
+};
+</script>

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

@@ -1,12 +1,15 @@
 <template>
   <div class="fd-shellbar__product">
+    <FdShellBarProductTitle v-if="productTitle != null">{{
+      productTitle
+    }}</FdShellBarProductTitle>
     <slot />
   </div>
 </template>
 
-<script lang="ts">
-import Vue from "vue";
-export default Vue.extend({
-  name: "FdShellBarProduct"
-});
+<script>
+export default {
+  name: "FdShellBarProduct",
+  props: { productTitle: { type: String, default: null } }
+};
 </script>

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

@@ -4,10 +4,8 @@
   </span>
 </template>
 
-<script lang="ts">
-import Vue from "vue";
-
-export default Vue.extend({
+<script>
+export default {
   name: "FdShellBarProductSwitcherItemTitle"
-});
+};
 </script>

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

@@ -0,0 +1,20 @@
+import FdShellBarProduct from "./../ShellBarProduct.vue";
+import { mount } from "@vue/test-utils";
+
+describe("ShellBarProduct", () => {
+  it("renders title prop", () => {
+    const wrapper = mount({
+      components: { FdShellBarProduct },
+      template: `<FdShellBarProduct productTitle="hello" />`
+    });
+    expect(wrapper.text()).toBe("hello");
+  });
+
+  it("renders default slot is no product title is given", () => {
+    const wrapper = mount({
+      components: { FdShellBarProduct },
+      template: `<FdShellBarProduct>default$slot</FdShellBarProduct>`
+    });
+    expect(wrapper.text()).toBe("default$slot");
+  });
+});