@internetarchive/collection-browser 0.4.11 → 0.4.13-alpha.1

package/src/tiles/grid/item-tile.ts

@@ -35,6 +35,10 @@ export class ItemTile extends LitElement {
 
   render() {
     const itemTitle = this.model?.title;
+    const [viewCount, viewLabel] =
+      this.sortParam?.field === 'week'
+        ? [this.model?.weeklyViewCount, 'weekly views']
+        : [this.model?.viewCount, 'all-time views'];
 
     return html`
       <div class="container">
@@ -58,7 +62,8 @@ export class ItemTile extends LitElement {
 
           <tile-stats
             .mediatype=${this.model?.mediatype}
-            .viewCount=${this.model?.viewCount}
+            .viewCount=${viewCount}
+            .viewLabel=${viewLabel}
             .favCount=${this.model?.favCount}
             .commentCount=${this.model?.commentCount}
           >

package/src/tiles/grid/tile-stats.ts

@@ -16,6 +16,8 @@ export class TileStats extends LitElement {
 
   @property({ type: Number }) viewCount?: number;
 
+  @property({ type: String }) viewLabel?: number;
+
   @property({ type: Number }) favCount?: number;
 
   @property({ type: Number }) commentCount?: number;
@@ -31,7 +33,7 @@ export class TileStats extends LitElement {
     const uploadsOrViewsTitle =
       this.mediatype === 'account'
         ? `${this.itemCount} uploads`
-        : `${this.viewCount} all-time views`;
+        : `${this.viewCount} ${this.viewLabel ?? 'all-time views'}`;
 
     return html`
       <div class="item-stats">

package/src/tiles/list/tile-list-compact.ts

@@ -41,7 +41,9 @@ export class TileListCompact extends LitElement {
           .loggedIn=${this.loggedIn}
         >
         </image-block>
-        <div id="title">${DOMPurify.sanitize(this.model?.title ?? '')}</div>
+        <a href=${this.href} id="title"
+          >${DOMPurify.sanitize(this.model?.title ?? '')}</a
+        >
         <div id="creator">
           ${this.model?.mediatype === 'account'
             ? accountLabel(this.model?.dateAdded)
@@ -60,6 +62,14 @@ export class TileListCompact extends LitElement {
     `;
   }
 
+  private get href(): string {
+    // Use the server-specified href if available.
+    // Otherwise, construct a details page URL from the item identifier.
+    return this.model?.href
+      ? `${this.baseNavigationUrl}${this.model.href}`
+      : `${this.baseNavigationUrl}/details/${this.model?.identifier}`;
+  }
+
   /*
    * TODO: fix field names to match model in src/collection-browser.ts
    * private get dateSortSelector()
@@ -145,10 +155,13 @@ export class TileListCompact extends LitElement {
       }
 
       #title {
-        color: #4b64ff;
         text-decoration: none;
       }
 
+      #title:link {
+        color: var(--ia-theme-link-color, #4b64ff);
+      }
+
       #title,
       #creator {
         text-overflow: ellipsis;

package/src/tiles/list/tile-list.ts

@@ -453,6 +453,9 @@ export class TileList extends LitElement {
 
       div a {
         text-decoration: none;
+      }
+
+      div a:link {
         color: var(--ia-theme-link-color, #4b64ff);
       }
 

package/test/collection-facets/toggle-switch.test.ts

@@ -0,0 +1,154 @@
+import { expect, fixture } from '@open-wc/testing';
+import sinon from 'sinon';
+import { html } from 'lit';
+import type { ToggleSwitch } from '../../src/collection-facets/toggle-switch';
+
+import '../../src/collection-facets/toggle-switch';
+
+describe('Toggle switch', () => {
+  it('renders component', async () => {
+    const el = await fixture<ToggleSwitch>(
+      html`<toggle-switch></toggle-switch>`
+    );
+
+    expect(el.shadowRoot?.querySelector('#switch-button')).to.exist;
+    expect(el.shadowRoot?.querySelector('#knob')).to.exist;
+  });
+
+  it('renders provided L/R values', async () => {
+    const el = await fixture<ToggleSwitch>(
+      html`<toggle-switch .leftValue=${'L'} .rightValue=${'R'}></toggle-switch>`
+    );
+
+    expect(el.value).to.equal('L');
+    expect(el.selectedLabel).to.equal('L');
+
+    expect(
+      el.shadowRoot
+        ?.querySelector('label[for=switch-left]')
+        ?.textContent?.trim()
+    ).to.equal('L');
+    expect(
+      el.shadowRoot
+        ?.querySelector('label[for=switch-right]')
+        ?.textContent?.trim()
+    ).to.equal('R');
+  });
+
+  it('renders provided L/R labels instead of values', async () => {
+    const el = await fixture<ToggleSwitch>(
+      html`<toggle-switch
+        .leftValue=${'L'}
+        .leftLabel=${'L-label'}
+        .rightValue=${'R'}
+        .rightLabel=${'R-label'}
+      ></toggle-switch>`
+    );
+
+    expect(el.value).to.equal('L');
+    expect(el.selectedLabel).to.equal('L-label');
+
+    expect(
+      (el.shadowRoot?.querySelector('#switch-left') as HTMLInputElement)?.value
+    ).to.equal('L');
+    expect(
+      (el.shadowRoot?.querySelector('#switch-right') as HTMLInputElement)?.value
+    ).to.equal('R');
+
+    expect(
+      el.shadowRoot
+        ?.querySelector('label[for=switch-left]')
+        ?.textContent?.trim()
+    ).to.equal('L-label');
+    expect(
+      el.shadowRoot
+        ?.querySelector('label[for=switch-right]')
+        ?.textContent?.trim()
+    ).to.equal('R-label');
+  });
+
+  it('sets the initial side', async () => {
+    const el = await fixture<ToggleSwitch>(
+      html`<toggle-switch
+        .leftValue=${'L'}
+        .rightValue=${'R'}
+        .side=${'right'}
+      ></toggle-switch>`
+    );
+
+    expect(el.value).to.equal('R');
+    expect(el.selectedLabel).to.equal('R');
+  });
+
+  it('toggles on click', async () => {
+    const el = await fixture<ToggleSwitch>(
+      html`<toggle-switch .leftValue=${'L'} .rightValue=${'R'}></toggle-switch>`
+    );
+
+    const button = el.shadowRoot?.querySelector(
+      '#switch-button'
+    ) as HTMLButtonElement;
+
+    expect(el.value).to.equal('L');
+    button.click();
+    await el.updateComplete;
+
+    expect(el.value).to.equal('R');
+    button.click();
+    await el.updateComplete;
+
+    expect(el.value).to.equal('L');
+  });
+
+  it('toggles on radio change', async () => {
+    const el = await fixture<ToggleSwitch>(
+      html`<toggle-switch .leftValue=${'L'} .rightValue=${'R'}></toggle-switch>`
+    );
+
+    const leftRadio = el.shadowRoot?.querySelector(
+      '#switch-left'
+    ) as HTMLInputElement;
+    const rightRadio = el.shadowRoot?.querySelector(
+      '#switch-right'
+    ) as HTMLInputElement;
+
+    expect(el.value).to.equal('L');
+    rightRadio.click();
+    await el.updateComplete;
+
+    expect(el.value).to.equal('R');
+    leftRadio.click();
+    await el.updateComplete;
+
+    expect(el.value).to.equal('L');
+  });
+
+  it('emits change event when toggled', async () => {
+    const changeSpy = sinon.spy();
+    const el = await fixture<ToggleSwitch>(
+      html`<toggle-switch
+        .leftValue=${'L'}
+        .rightValue=${'R'}
+        @change=${changeSpy}
+      ></toggle-switch>`
+    );
+
+    const button = el.shadowRoot?.querySelector(
+      '#switch-button'
+    ) as HTMLButtonElement;
+
+    button.click();
+    await el.updateComplete;
+
+    expect(changeSpy.callCount).to.equal(1);
+
+    const leftRadio = el.shadowRoot?.querySelector(
+      '#switch-left'
+    ) as HTMLInputElement;
+
+    leftRadio.click();
+    await el.updateComplete;
+
+    expect(changeSpy.callCount).to.equal(2);
+  });
+});