@internetarchive/ia-menu-slider - npm Package Compare versions

Comparing version 0.2.0-alpha4 to 1.0.0-alpha1

package.json

 {
   "name": "@internetarchive/ia-menu-slider",
-  "version": "0.2.0-alpha4",
+  "version": "1.0.0-alpha1",
   "description": "Menu slider used in ia-topnav",
@@ -5,0 +5,0 @@ "author": "ia-menu-slider",

src/ia-menu-slider.js

@@ -23,2 +23,3 @@ import { nothing } from 'lit-html';
       animateMenuOpen: { type: Boolean },
+      manuallyHandleClose: { type: Boolean },
     };
@@ -85,3 +86,3 @@ }
     const animate = this.animateMenuOpen ? 'animate' : '';
-    const state = this.open ? 'open' : 'closed';
+    const state = this.open ? 'open' : '';
     return `${animate} ${state}`;
@@ -91,3 +92,3 @@ }
   get selectedMenuClass() {
-    return this.selectedMenu ? 'open' : 'closed';
+    return this.selectedMenu ? 'open' : '';
   }
@@ -143,2 +144,3 @@
     return html`
+      <div class="main">
       <div class="menu ${this.sliderDetailsClass}">
@@ -151,9 +153,12 @@ ${this.closeButton}
           ${this.renderMenuHeader}
-          <section class="selected-menu">
-            ${this.selectedMenuComponent}
+          <section>
+            <div class="selected-menu">
+              ${this.selectedMenuComponent}
+            </div>
           </section>
         </div>
       </div>
+      </div>
     `;
   }
 }

src/styles/menu-slider.js

 import { css } from 'lit-element';
 
 const menuButtonWidth = css`42px`;
+const sliderWidth = css`var(--menuWidth, 320px)`;
+const transitionTiming = css`var(--animationTiming, 200ms)`;
 
 export default css`
 
+  .main {
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  .animate {
+    transition: transform ${transitionTiming} ease-out;
+  }
+
   .menu {
@@ -12,4 +25,4 @@ position: absolute;
     bottom: 0;
-    width: 100%;
-    padding: .5rem .5rem .5rem 0;
+    width: ${sliderWidth};
+    padding: .5rem .5rem 0 0;
     box-sizing: border-box;
@@ -19,5 +32,5 @@ font-size: 1.4rem;
     background: var(--menuSliderBg);
-    transform: translateX(calc(100% * -1));
-    transition: transform var(--animationTiming) ease-out;
+    transform: translateX(calc(${sliderWidth} * -1));
   }
+
   .menu:before {
@@ -34,2 +47,6 @@ position: absolute;
 
+  .menu > button.close {
+    right: 0.7rem;
+  }
+
   button {
@@ -41,3 +58,3 @@ outline: none;
   header {
-    margin: .2rem 0 .5rem 0;
+    margin: 0 0 .5rem 0;
   }
@@ -91,8 +108,8 @@
     z-index: 1;
-    transform: translateX(calc(100% * -1));
-    transition: transform var(--animationTiming) ease-out;
+    transform: translateX(calc(${sliderWidth} * -1));
+    transition: transform ${transitionTiming} ease-out;
     background: var(--activeButtonBg);
     border-right: .2rem solid;
     border-color: var(--subpanelRightBorderColor);
-    padding: .5rem 0 .5rem .5rem;
+    padding: .5rem 0 0 .5rem;
   }
@@ -114,8 +131,15 @@
 
+  .content section {
+    height: 100%;
+    position: relative;
+    width: 100%;
+  }
+
   .content .selected-menu {
     overflow: auto;
     position: absolute;
-    width: 98%;
-    bottom: 0;
-    top: 4rem;
+    top: 0;
+    width: 100%;
+    padding-bottom: 2rem;
+    height: inherit;
   }
@@ -125,3 +149,4 @@
     display: block;
+    padding-bottom: 3rem;
   }
 `;

test/ia-menu-slider.test.js

@@ -188,3 +188,2 @@ import { html, fixture, expect } from '@open-wc/testing';
 
-    // display
     it('creates a header section', async () => {
@@ -218,3 +217,2 @@ const el = await fixture(container([menu]));
 
-    // // custom action
     it('can click on the custom action', async () => {
@@ -242,3 +240,2 @@ const el = await fixture(container([menu]));
 
-  // // close action
   describe('Close behavior', () => {
@@ -268,4 +265,3 @@ it('emits a custom event when the drawer closes', async () => {
 
-      el.addEventListener('menuSliderClosed', (e) => {
-        console.log('ERRRR', e.detail);
+      el.addEventListener('menuSliderClosed', () => {
         sliderEmittedEvent = true;
@@ -272,0 +268,0 @@ });

No alert changes

Improved metrics

Total package byte prevSize

70915

increased by5.1%

Lines of code

804

increased by2.68%

No dependency changes