fix(sidebar-nav): set initial collapsible state (#839)

telekom · Feb 2, 2022 · fad731e · fad731e
1 parent ccb1753
commit fad731e
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 19 deletions.
diff --git a/packages/components/src/components/sidebar-nav/__snapshots__/sidebar-nav.spec.ts.snap b/packages/components/src/components/sidebar-nav/__snapshots__/sidebar-nav.spec.ts.snap
@@ -20,10 +20,14 @@ exports[`SidebarNav should handle click 1`] = `
 `;
 
 exports[`SidebarNav should handle scale-sidebar-nav-collapsuible child 1`] = `
-<scale-sidebar-nav>
+<scale-sidebar-nav collapsible="">
   <mock:shadow-root>
-    <div class="sidebar-nav" part="sidebar-nav">
-      <nav part="nav">
+    <div class="sidebar-nav sidebar-nav--collapsible" part="sidebar-nav collapsible">
+      <button aria-expanded="false" class="sidebar-nav__toggle-button" part="toggle-button">
+        Menu
+        <scale-icon-navigation-collapse-down class="sidebar-nav__icon" part="icon" size="16"></scale-icon-navigation-collapse-down>
+      </button>
+      <nav hidden="" part="nav">
         <ul class="sidebar-nav__list" part="list" role="list">
           <slot></slot>
         </ul>
@@ -35,10 +39,14 @@ exports[`SidebarNav should handle scale-sidebar-nav-collapsuible child 1`] = `
 `;
 
 exports[`SidebarNav should handle scale-sidebar-nav-collapsuible child level 1 1`] = `
-<scale-sidebar-nav>
+<scale-sidebar-nav collapsible="">
   <mock:shadow-root>
-    <div class="sidebar-nav" part="sidebar-nav">
-      <nav part="nav">
+    <div class="sidebar-nav sidebar-nav--collapsible" part="sidebar-nav collapsible">
+      <button aria-expanded="false" class="sidebar-nav__toggle-button" part="toggle-button">
+        Menu
+        <scale-icon-navigation-collapse-down class="sidebar-nav__icon" part="icon" size="16"></scale-icon-navigation-collapse-down>
+      </button>
+      <nav hidden="" part="nav">
         <ul class="sidebar-nav__list" part="list" role="list">
           <slot></slot>
         </ul>
@@ -52,10 +60,14 @@ exports[`SidebarNav should handle scale-sidebar-nav-collapsuible child level 1 1
 `;
 
 exports[`SidebarNav should handle scale-sidebar-nav-collapsuible child level 2 1`] = `
-<scale-sidebar-nav>
+<scale-sidebar-nav collapsible="">
   <mock:shadow-root>
-    <div class="sidebar-nav" part="sidebar-nav">
-      <nav part="nav">
+    <div class="sidebar-nav sidebar-nav--collapsible" part="sidebar-nav collapsible">
+      <button aria-expanded="false" class="sidebar-nav__toggle-button" part="toggle-button">
+        Menu
+        <scale-icon-navigation-collapse-down class="sidebar-nav__icon" part="icon" size="16"></scale-icon-navigation-collapse-down>
+      </button>
+      <nav hidden="" part="nav">
         <ul class="sidebar-nav__list" part="list" role="list">
           <slot></slot>
         </ul>
@@ -71,10 +83,14 @@ exports[`SidebarNav should handle scale-sidebar-nav-collapsuible child level 2 1
 `;
 
 exports[`SidebarNav should handle scale-sidebar-nav-collapsuible child level 2 2`] = `
-<scale-sidebar-nav>
+<scale-sidebar-nav collapsible="">
   <mock:shadow-root>
-    <div class="sidebar-nav" part="sidebar-nav">
-      <nav part="nav">
+    <div class="sidebar-nav sidebar-nav--collapsible" part="sidebar-nav collapsible">
+      <button aria-expanded="false" class="sidebar-nav__toggle-button" part="toggle-button">
+        Menu
+        <scale-icon-navigation-collapse-down class="sidebar-nav__icon" part="icon" size="16"></scale-icon-navigation-collapse-down>
+      </button>
+      <nav hidden="" part="nav">
         <ul class="sidebar-nav__list" part="list" role="list">
           <slot></slot>
         </ul>
@@ -91,10 +107,14 @@ exports[`SidebarNav should handle scale-sidebar-nav-collapsuible child level 2 2
 `;
 
 exports[`SidebarNav should handle scale-sidebar-nav-item child 1`] = `
-<scale-sidebar-nav>
+<scale-sidebar-nav collapsible="">
   <mock:shadow-root>
-    <div class="sidebar-nav" part="sidebar-nav">
-      <nav part="nav">
+    <div class="sidebar-nav sidebar-nav--collapsible" part="sidebar-nav collapsible">
+      <button aria-expanded="false" class="sidebar-nav__toggle-button" part="toggle-button">
+        Menu
+        <scale-icon-navigation-collapse-down class="sidebar-nav__icon" part="icon" size="16"></scale-icon-navigation-collapse-down>
+      </button>
+      <nav hidden="" part="nav">
         <ul class="sidebar-nav__list" part="list" role="list">
           <slot></slot>
         </ul>
@@ -106,10 +126,14 @@ exports[`SidebarNav should handle scale-sidebar-nav-item child 1`] = `
 `;
 
 exports[`SidebarNav should match snapshot 1`] = `
-<scale-sidebar-nav>
+<scale-sidebar-nav collapsible="">
   <mock:shadow-root>
-    <div class="sidebar-nav" part="sidebar-nav">
-      <nav part="nav">
+    <div class="sidebar-nav sidebar-nav--collapsible" part="sidebar-nav collapsible">
+      <button aria-expanded="false" class="sidebar-nav__toggle-button" part="toggle-button">
+        Menu
+        <scale-icon-navigation-collapse-down class="sidebar-nav__icon" part="icon" size="16"></scale-icon-navigation-collapse-down>
+      </button>
+      <nav hidden="" part="nav">
         <ul class="sidebar-nav__list" part="list" role="list">
           <slot></slot>
         </ul>

diff --git a/packages/components/src/components/sidebar-nav/sidebar-nav.spec.ts b/packages/components/src/components/sidebar-nav/sidebar-nav.spec.ts
@@ -18,7 +18,7 @@ describe('SidebarNav', () => {
     Object.defineProperty(window, 'matchMedia', {
       writable: true,
       value: jest.fn().mockImplementation((query) => ({
-        matches: false,
+        matches: true,
         media: query,
         onchange: null,
         addListener: jest.fn(),

diff --git a/packages/components/src/components/sidebar-nav/sidebar-nav.tsx b/packages/components/src/components/sidebar-nav/sidebar-nav.tsx
@@ -87,6 +87,7 @@ export class SidebarNav {
       // Recent versions of Safari throw with `addEventListener`
       // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener
       this.mq.addListener(this.handleMediaQueryChange);
+      this.collapsible = this.mq.matches;
     }
   }