docs: change the icon of the button showing/hiding the second level o…

…f Side Nav (#2055) * fix: change the icon of the button showing/hiding the second level of Side Nav * update tests
SAP · Jan 14, 2021 · bb48e35 · bb48e35
1 parent 9d0c20b
commit bb48e35
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 3 deletions.
diff --git a/.storybook/static/preview-head.js b/.storybook/static/preview-head.js
@@ -345,3 +345,14 @@ function isSpaceOrEnter(event, buttonFn) {
             break;
     }
 }
+
+function toggleNestedListSubmenu(event) {
+    let button = event.target;
+    let icon = button.children[0];
+
+    if(button && button.classList.contains('is-expanded')) {
+        icon.classList = 'sap-icon--navigation-right-arrow';
+    } else {
+        icon.classList = 'sap-icon--navigation-down-arrow';
+    }
+}
diff --git a/stories/side-navigation/__snapshots__/side-navigation.stories.storyshot b/stories/side-navigation/__snapshots__/side-navigation.stories.storyshot
@@ -134,6 +134,7 @@ exports[`Storyshots Components/Side Navigation Complex (compact) 1`] = `
             aria-haspopup="true"
             aria-label="Expand submenu"
             class="fd-button fd-nested-list__button"
+            onclick="toggleNestedListSubmenu(event)"
           >
 
 
@@ -558,6 +559,7 @@ exports[`Storyshots Components/Side Navigation Complex 1`] = `
             aria-haspopup="true"
             aria-label="Expand submenu"
             class="fd-button fd-nested-list__button"
+            onclick="toggleNestedListSubmenu(event)"
           >
 
 
@@ -1686,6 +1688,7 @@ exports[`Storyshots Components/Side Navigation Group 1`] = `
             aria-haspopup="true"
             aria-label="Expand submenu"
             class="fd-button fd-nested-list__button"
+            onclick="toggleNestedListSubmenu(event)"
           >
 
 

diff --git a/stories/side-navigation/side-navigation.stories.js b/stories/side-navigation/side-navigation.stories.js
@@ -170,7 +170,9 @@ export const cozyGrouping = () => `<div class="fd-side-nav">
                         aria-controls="EX100L2" 
                         aria-haspopup="true" 
                         aria-expanded="false" 
-                        aria-label="Expand submenu">
+                        aria-label="Expand submenu"
+                        onclick="toggleNestedListSubmenu(event)"
+                        >
                         <i class="sap-icon--navigation-right-arrow" role="presentation"></i>    
                     </button>
                 </div>
@@ -263,7 +265,8 @@ export const complexCozySideNav = () => `<div class="fd-side-nav">
                         aria-controls="EX400L2" 
                         aria-haspopup="true" 
                         aria-expanded="false" 
-                        aria-label="Expand submenu">
+                        aria-label="Expand submenu"
+                        onclick="toggleNestedListSubmenu(event)">
                         <i class="sap-icon--navigation-right-arrow" role="presentation"></i>    
                     </button>
                 </div>
@@ -368,7 +371,8 @@ export const complexCompactSideNav = () => `<div class="fd-side-nav">
                         aria-controls="EX500L2" 
                         aria-haspopup="true" 
                         aria-expanded="false" 
-                        aria-label="Expand submenu">
+                        aria-label="Expand submenu"
+                        onclick="toggleNestedListSubmenu(event)">
                         <i class="sap-icon--navigation-right-arrow" role="presentation"></i>    
                     </button>
                 </div>