Product Switcher documentation and configurable label and icon (SAP#703)

Added product switcher configurable icon and label, documentation
stanleychh · Aug 6, 2019 · d0d1019 · d0d1019
1 parent b16dc72
commit d0d1019
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 15 deletions.
diff --git a/core/examples/luigi-sample-angular/src/luigi-config/extended/navigation.js b/core/examples/luigi-sample-angular/src/luigi-config/extended/navigation.js
@@ -272,8 +272,11 @@ class Navigation {
     return items;
   };
 
-  // The following configuration will be used to render a product switcher component
+  // The following configuration will be used to render a product switcher at the end of the top navigation
   productSwitcher = {
+    label: 'My Products',
+    icon: 'grid',
+    // icon: '/assets/favicon-sap.ico',
     items: this.getProductSwitcherItems
   };
 

diff --git a/core/src/navigation/ProductSwitcher.html b/core/src/navigation/ProductSwitcher.html
@@ -7,13 +7,28 @@
   <div class="fd-product-switcher">
     <div class="fd-popover fd-popover--right">
       <div class="fd-popover__control" on:click="event.stopPropagation()">
+        <!-- default: sap-icon--grid -->
+        {#if hasOpenUIicon(config)}
         <button
-          class="fd-button--shell sap-icon--grid"
+          class="fd-button--shell sap-icon--{config.icon}"
           aria-expanded="{dropDownStates.productSwitcherPopover || false}"
           aria-haspopup="true"
           on:click="toggleDropdownState()"
           data-cy="desktop-product-switcher"
+          title="{config.label}"
         ></button>
+        {:else}
+        <button
+          class="fd-button--shell"
+          aria-expanded="{dropDownStates.productSwitcherPopover || false}"
+          aria-haspopup="true"
+          on:click="toggleDropdownState()"
+          data-cy="desktop-product-switcher"
+          title="{config.label}"
+        >
+          <img src="{config.icon}">
+        </button>
+        {/if}
       </div>
       <div
         class="fd-popover__body fd-popover__body--right"
@@ -68,7 +83,7 @@
           ></button>
         </div>
         <div class="fd-action-bar__header">
-          <h5 class="fd-action-bar__title fd-has-type-1">My Products</h5>
+          <h5 class="fd-action-bar__title fd-has-type-1">{config.label}</h5>
         </div>
       </div>
       <div class="fd-modal__body">
@@ -112,13 +127,9 @@ <h5 class="fd-action-bar__title fd-has-type-1">My Products</h5>
   export default {
     async oncreate() {
       StateHelpers.doOnStoreChange(this.store, async () => {
-        const productSwitcherConfig = LuigiConfig.getConfigValue(
-          'navigation.productSwitcher'
-        );
-        this.set({
-          config: productSwitcherConfig
-        });
-        if (productSwitcherConfig) {
+        const config = NavigationHelpers.getProductSwitcherConfig();
+        this.set({ config });
+        if (config) {
           const productSwitcherItems = await LuigiConfig.getConfigValueAsync(
             'navigation.productSwitcher.items'
           );

diff --git a/core/src/navigation/TopNav.html b/core/src/navigation/TopNav.html
@@ -208,8 +208,17 @@
                       on:click="openMobileProductSwitcher(event)"
                       data-cy="mobile-product-switcher"
                     >
-                      <span class="fd-top-nav__icon sap-icon--grid sap-icon--m"></span>
-                      My Products
+                      {#if hasOpenUIicon(productSwitcherConfig) || !productSwitcherConfig.icon}
+                      <span
+                        class="fd-top-nav__icon sap-icon--{productSwitcherConfig.icon || 'grid'} sap-icon--m"
+                      ></span>
+                      {:else}
+                      <img
+                        class="fd-top-nav__icon nav-icon"
+                        src="{productSwitcherConfig.icon}"
+                      >
+                      {/if}
+                      {productSwitcherConfig.label}
                     </a>
                   </li>
                   {/if}
@@ -336,7 +345,8 @@
           ),
           responsiveNavSetting: LuigiConfig.getConfigValue(
             'settings.responsiveNavigation'
-          )
+          ),
+          productSwitcherConfig: NavigationHelpers.getProductSwitcherConfig()
         });
       });
       this.set({

diff --git a/core/src/utilities/helpers/navigation-helpers.js b/core/src/utilities/helpers/navigation-helpers.js
@@ -9,6 +9,11 @@ class NavigationHelpersClass {
     this.virtualGroupPrefix = '___';
   }
 
+  getProductSwitcherConfig() {
+    const userConfig = LuigiConfig.getConfigValue('navigation.productSwitcher');
+    return Object.assign({ icon: 'grid', label: 'My Products' }, userConfig);
+  }
+
   isNodeAccessPermitted(nodeToCheckPermissionFor, parentNode, currentContext) {
     if (LuigiAuth.isAuthorizationEnabled()) {
       const loggedIn = AuthHelpers.isLoggedIn();

diff --git a/docs/navigation-parameters-reference.md b/docs/navigation-parameters-reference.md
@@ -131,7 +131,26 @@ Luigi.setConfig({
           link: '/projects/pr1'
         }
       ]
-    }
+    },
+    productSwitcher: {
+      label: 'My Products',
+      icon: 'grid',
+      items: [
+        {
+          icon: '',
+          label: 'Luigi in Github',
+          externalLink: {
+            url: 'https://github.com/SAP/luigi',
+            sameWindow: false
+          }
+        },
+        {
+          icon: '',
+          label: 'Project 1',
+          link: '/projects/pr1'
+        }
+      ]
+    },
   }
 });
 ```
@@ -199,7 +218,7 @@ The node parameters are as follows:
 
 ## Context switcher
 
-The context switcher is a drop-down list available in the top navigation bar. It allows you to switch between a curated list of navigation elements such as Environments.
+The context switcher is a drop-down list available in the top navigation bar. It allows you to switch between a curated list of navigation elements such as Environments. To do so, add the **contextSwitcher** property to the **navigation** object using the following optional properties:
 
 - **defaultLabel** specifies the default label that is shown if no context is selected.
 - **parentNodePath** specifies the base path, that is prepended to **options[].pathValue**. It must be an absolute path.
@@ -231,3 +250,16 @@ The profile section is a configurable drop-down list available in the top naviga
     - **url** is the external URL that the link leads to.
 
 
+## Product switcher
+
+The product switcher is a pop-up window available in the top navigation bar. It allows you to switch between the navigation elements displayed in the pop-up. To do so, add the **productSwitcher** property to the **navigation** object using the following optional properties:
+
+- **label** defines the label of the product switcher. It is displayed as a title attribute on hover in the top navigation and as a headline in the mobile pop-up.
+- **icon** is the name of an icon, without the `sap-icon--` prefix. Its source may be [OpenUI](https://openui5.hana.ondemand.com/1.40.10/iconExplorer.html) or a custom link (relative or absolute) to an image. The icon is displayed without label in the top navigation.
+- **items** is an array of objects, each one being a link to a Luigi navigation node or an external URL. An item can have the following parameters:
+  - **label** defines the text for the link. 
+  - **icon** is the name of an icon from the [OpenUI](https://openui5.hana.ondemand.com/1.40.10/iconExplorer.html) or a custom link (relative or absolute) to an image displayed next to the label or instead of it.
+  - **link** defines an absolute link to a **node**.
+  - **externalLink** is an object which indicates that the node links to an external URL. If this parameter is defined, the **link** parameter is ignored. It has the following properties:
+    - **sameWindow** defines if the external URL is opened in the current tab or in a new one. The default value for this parameter is `false`.
+    - **url** is the external URL that the link leads to.