Add function which allow to get the footer container (#2488)

SAP · Jan 31, 2022 · d943f7c · d943f7c
1 parent eaf9334
commit d943f7c
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 5 deletions.
diff --git a/core/src/core-api/dom-elements.js b/core/src/core-api/dom-elements.js
@@ -109,6 +109,18 @@ class LuigiElements {
   getCurrentMicrofrontendIframe() {
     return IframeHelpers.getCurrentMicrofrontendIframe();
   }
+
+  /**
+   * Returns a navigation footer container.
+   * @returns {HTMLElement} the navigation footer DOM element
+   * @memberof Elements
+   * @since NEXTRELEASE
+   * @example
+   * Luigi.elements().getNavFooterContainer();
+   */
+  getNavFooterContainer() {
+    return document.getElementsByClassName('lui-side-nav__footer')[0];
+  }
 }
 
 export const elements = new LuigiElements();
diff --git a/core/src/navigation/LeftNav.svelte b/core/src/navigation/LeftNav.svelte
@@ -816,8 +816,10 @@
     </div>
     {#if footerText || semiCollapsibleButton}
       <div class="fd-side-nav__utility">
-        <span class="lui-side-nav__footer">
-          <span class="lui-side-nav__footer--text fd-has-type-minus-1"
+        <span class="lui-side-nav__footer" data-testid="lui-side-nav__footer">
+          <span
+            class="lui-side-nav__footer--text fd-has-type-minus-1"
+            data-testid="lui-side-nav__footer--text"
             >{footerText ? footerText : ''}</span
           >
           {#if semiCollapsibleButton}
@@ -1044,7 +1046,7 @@
 
   .lui-side-nav__footer {
     display: flex;
-    justify-content: space-between;
+    justify-content: space-evenly;
     align-items: center;
     border-top: var(--sapList_BorderWidth, 0.0625rem) solid
       var(--sapList_BorderColor, #e4e4e4);
@@ -1054,7 +1056,7 @@
       color: var(--sapTextColor, #32363a);
       white-space: nowrap;
       width: auto;
-      padding: $footerPaddingVertical 20px;
+      padding: $footerPaddingVertical 15px;
       @include transition(all 0.1s linear);
       text-overflow: ellipsis;
       overflow: hidden;
@@ -1063,7 +1065,7 @@
 
     &--icon {
       cursor: pointer;
-      padding: $footerPaddingVertical 20px;
+      padding: $footerPaddingVertical 15px;
     }
   }
 

diff --git a/docs/general-settings.md b/docs/general-settings.md
@@ -102,6 +102,7 @@ burgerTooltip = {
   };
 ```
 * **sideNavFooterText** is a string displayed in a sticky footer inside the side navigation. It is a good place to display the version of your application.
+* **getNavFooterContainer** in addition to **sideNavFooterText** a client can insert custom HTML under the footer section. 
 * **sideNavCompactMode** reduces the dimensions of the side navigation and allows you to display more information.
 * **customTranslationImplementation** provides a custom localization implementation. It can be an Object or a Function returning an Object. This Object must provide the **getTranslation** Function as property:
 ```javascript

diff --git a/docs/luigi-core-api.md b/docs/luigi-core-api.md
@@ -347,6 +347,22 @@ Returns **[HTMLElement](https://developer.mozilla.org/docs/Web/HTML/Element)** t
 
 -   **since**: 0.4.12
 
+#### getNavFooterContainer
+
+Returns a navigation footer container.
+
+##### Examples
+
+```javascript
+Luigi.elements().getNavFooterContainer();
+```
+
+Returns **[HTMLElement](https://developer.mozilla.org/docs/Web/HTML/Element)** the navigation footer DOM element
+
+**Meta**
+
+-   **since**: NEXTRELEASE
+
 ## Luigi.auth()
 
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->

diff --git a/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js b/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js
@@ -905,4 +905,35 @@ describe('Fiddle', () => {
       cy.get('.lui-nav-title .fd-nested-list__title').should('contain', 'test');
     });
   });
+
+  describe('Custom text in the footer', () => {
+    it('checks if the text in footer exist, defined by settings', () => {
+      cy.window().then(win => {
+        //define Footer text as part of the global config
+        const config = win.Luigi.getConfig();
+        config.settings.sideNavFooterText = 'Luigi Footer';
+        win.Luigi.configChanged();
+
+        cy.get('[data-testid="lui-side-nav__footer--text"]').should('exist');
+        cy.get('[data-testid="lui-side-nav__footer--text"]').contains('Luigi Footer');
+      });
+    });
+
+    it('checks if getNavFooterContainer() working', () => {
+      cy.window().then(win => {
+        //define Footer text as part of the global config
+        const config = win.Luigi.getConfig();
+        config.settings.sideNavFooterText = 'Luigi Footer';
+        win.Luigi.configChanged();
+
+        //Checks if the DOM element required by getNavFooterContainer() exist
+        cy.get('[data-testid="lui-side-nav__footer"]').should('exist');
+
+        const FooterContainer = win.Luigi.elements().getNavFooterContainer();
+
+        //Checks if Luigi.elements().getNavFooterContainer() reads the appropriate DOM element.
+        cy.get(FooterContainer).contains('Luigi Footer');
+      });
+    });
+  });
 });