@internetarchive/collection-browser 0.4.10 → 0.4.12

package/src/empty-placeholder.ts

@@ -1,22 +1,35 @@
-import { css, html, LitElement, CSSResultGroup, nothing } from 'lit';
+import {
+  css,
+  html,
+  LitElement,
+  CSSResultGroup,
+  nothing,
+  TemplateResult,
+} from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { choose } from 'lit/directives/choose.js';
 
 import emptyQueryIcon from './assets/img/icons/empty-query';
 import nullResultIcon from './assets/img/icons/null-result';
 
-export type PlaceholderType = 'empty-query' | 'null-result' | null;
+export type PlaceholderType =
+  | 'empty-query'
+  | 'null-result'
+  | 'query-error'
+  | null;
 @customElement('empty-placeholder')
 export class EmptyPlaceholder extends LitElement {
   @property({ type: String }) placeholderType: PlaceholderType = null;
 
   @property({ type: Boolean }) isMobileView?: false;
 
+  @property({ type: String }) detailMessage?: string = '';
+
   render() {
     return this.placeholderType ? html`${this.placeholderTemplate}` : nothing;
   }
 
-  private get placeholderTemplate() {
+  private get placeholderTemplate(): TemplateResult {
     return html`
       <div
         class="placeholder ${this.placeholderType} ${this.isMobileView
@@ -26,12 +39,13 @@ export class EmptyPlaceholder extends LitElement {
         ${choose(this.placeholderType, [
           ['empty-query', () => this.emptyQueryTemplate],
           ['null-result', () => this.nullResultTemplate],
+          ['query-error', () => this.queryErrorTemplate],
         ])}
       </div>
     `;
   }
 
-  private get emptyQueryTemplate() {
+  private get emptyQueryTemplate(): TemplateResult {
     return html`
       <h2 class="title">
         To begin searching, enter a search term in the box above and hit "Go".
@@ -40,7 +54,7 @@ export class EmptyPlaceholder extends LitElement {
     `;
   }
 
-  private get nullResultTemplate() {
+  private get nullResultTemplate(): TemplateResult {
     return html`
       <h2 class="title">
         Your search did not match any items in the Archive. Try different
@@ -50,6 +64,22 @@ export class EmptyPlaceholder extends LitElement {
     `;
   }
 
+  private get queryErrorTemplate(): TemplateResult {
+    return html`
+      <h2 class="title">
+        The search engine encountered an error, which might be related to your
+        search query.
+        <a
+          href="https://help.archive.org/help/search-building-powerful-complex-queries/"
+        >
+          Tips for constructing search queries.
+        </a>
+      </h2>
+      <div>${nullResultIcon}</div>
+      <p class="error-details">Error details: ${this.detailMessage}</p>
+    `;
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       :host {
@@ -57,6 +87,16 @@ export class EmptyPlaceholder extends LitElement {
         width: 100%;
       }
 
+      a {
+        text-decoration: none;
+      }
+      a:link {
+        color: var(--ia-theme-link-color, #4b64ff);
+      }
+      a:hover {
+        text-decoration: underline;
+      }
+
       .placeholder {
         display: block;
       }
@@ -64,16 +104,22 @@ export class EmptyPlaceholder extends LitElement {
       .desktop svg {
         max-height: 40rem;
       }
-      .desktop .title {
+      .desktop .title,
+      .desktop .error-details {
         margin: 4rem 0;
       }
 
       .mobile svg {
         max-height: 20rem;
       }
-      .mobile .title {
+      .mobile .title,
+      .mobile .error-details {
         margin: 2rem 0.5;
       }
+
+      .error-details {
+        font-size: 1.2rem;
+      }
     `;
   }
 }

package/src/sort-filter-bar/alpha-bar.ts

@@ -233,5 +233,13 @@ export class AlphaBar extends LitElement {
     alpha-bar-tooltip.fade-in {
       opacity: 1;
     }
+
+    /* Make alphabet bar a 2-row container in small screen widths */
+    @media screen and (max-width: 768px) {
+      ul {
+        display: grid;
+        grid-template-columns: repeat(13, 1fr);
+      }
+    }
   `;
 }

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);
+  });
+});

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

@@ -37,6 +37,20 @@ describe('List Tile Compact', () => {
     expect(creator).to.exist;
   });
 
+  it('should render title link with model href if provided', async () => {
+    const el = await fixture<TileListCompact>(html`
+      <tile-list-compact
+        .baseNavigationUrl=${''}
+        .model=${{ title: 'foo', href: '/foo/bar' }}
+      ></tile-list-compact>
+    `);
+
+    const title = el.shadowRoot?.querySelector('#title');
+
+    expect(title).to.exist;
+    expect(title?.getAttribute('href')).to.equal('/foo/bar');
+  });
+
   it('should render weekly views when sorting by week', async () => {
     const el = await fixture<TileListCompact>(html`
       <tile-list-compact

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

@@ -37,6 +37,20 @@ describe('List Tile', () => {
     expect(bottomLine).to.exist;
   });
 
+  it('should render title link with model href if provided', async () => {
+    const el = await fixture<TileList>(html`
+      <tile-list
+        .baseNavigationUrl=${''}
+        .model=${{ title: 'foo', href: '/foo/bar' }}
+      ></tile-list>
+    `);
+
+    const title = el.shadowRoot?.querySelector('#title > a');
+
+    expect(title).to.exist;
+    expect(title?.getAttribute('href')).to.equal('/foo/bar');
+  });
+
   it('should render with creator element but not dates', async () => {
     const el = await fixture<TileList>(html`
       <tile-list .model=${{ creators: ['someone'] }}></tile-list>