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

Comparing version 0.1.3-alpha6 to 0.1.3

package.json

 {
   "name": "@internetarchive/ia-menu-slider",
-  "version": "0.1.3-alpha6",
+  "version": "0.1.3",
   "description": "Menu slider used in ia-topnav",
@@ -5,0 +5,0 @@ "author": "ia-menu-slider",

src/ia-menu-slider.js

@@ -79,2 +79,3 @@ import { nothing } from 'lit-html';
             .label=${menu.label}
+            .menuDetails=${menu.menuDetails}
             .id=${menu.id}
@@ -91,3 +92,3 @@ .selected=${menu.id === this.selectedMenu}
   get renderMenuHeader() {
-    const { title = '', menuDetails = '', actionButton } = this.selectedMenuDetails || {};
+    const { label = '', menuDetails = '', actionButton } = this.selectedMenuDetails || {};
     const actionSection = actionButton
@@ -100,3 +101,3 @@ ? html`<div class="custom-action">${actionButton}</div>`
         <div class="details">
-          <h3>${title}</h3>
+          <h3>${label}</h3>
           <span class="extra-details">${menuDetails}</span>
@@ -103,0 +104,0 @@ </div>

src/menu-button.js

@@ -14,2 +14,3 @@ import { html, LitElement } from 'lit-element';
       label: { type: String },
+      menuDetails: { type: String },
       id: { type: String },
@@ -26,2 +27,3 @@ selected: { type: Boolean },
     this.label = '';
+    this.menuDetails = '';
     this.id = '';
@@ -61,2 +63,3 @@ this.selected = false;
       <span class="label">${this.label}</span>
+      <span class="menu-details">${this.menuDetails}</span>
     `;
@@ -63,0 +66,0 @@ }

src/styles/menu-button.js

@@ -38,2 +38,10 @@ import { css } from 'lit-element';
 
+  .menu-details {
+    color: var(--primaryTextColor);
+    display: inline-block;
+    margin-left: 5px;
+    font-style: italic;
+    font-size: 1.5rem;
+  }
+
   .menu-item > .icon {
@@ -40,0 +48,0 @@ position: relative;

src/styles/menu-slider.js

@@ -45,2 +45,3 @@ import { css } from 'lit-element';
   header .details {
+    font-weight: bold;
     width: 80%;
@@ -47,0 +48,0 @@ }

test/ia-menu-slider.test.js

@@ -13,2 +13,3 @@ import { html, fixture, expect } from '@open-wc/testing';
   label: 'Icon 1',
+  menuDetails: '(this icon is rad)',
   id: 'menu-1',
@@ -143,2 +144,17 @@ component: html`
 
+  describe('Menu list', async () => {
+    const el = await fixture(container(menus));
+    const menuList = el
+      .shadowRoot
+      .querySelectorAll('menu-button');
+
+    it('shows menu details when available', () => {
+      const firstMenuItem = menuList[0].shadowRoot.querySelector('.menu-details');
+      expect(firstMenuItem.innerText).to.equal(menus[0].menuDetails);
+
+      const secondMenuItem = menuList[1].shadowRoot.querySelector('.menu-details');
+      expect(secondMenuItem.innerText).to.be.empty;
+    });
+  });
+
   describe('Header section', async () => {
@@ -145,0 +161,0 @@ let extraButtonClicked = false;

No alert changes

Improved metrics

Total package byte prevSize

64281

increased by1.42%

Lines of code

727

increased by3.56%

No dependency changes