@internetarchive/collection-browser 0.2.10 → 0.2.11

package/src/empty-placeholder.ts

@@ -0,0 +1,79 @@
+import { css, html, LitElement, CSSResultGroup, nothing } 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;
+@customElement('empty-placeholder')
+export class EmptyPlaceholder extends LitElement {
+  @property({ type: String }) placeholderType: PlaceholderType = null;
+
+  @property({ type: Boolean }) isMobileView?: false;
+
+  render() {
+    return this.placeholderType ? html`${this.placeholderTemplate}` : nothing;
+  }
+
+  private get placeholderTemplate() {
+    return html`
+      <div
+        class="placeholder ${this.placeholderType} ${this.isMobileView
+          ? 'mobile'
+          : 'desktop'}"
+      >
+        ${choose(this.placeholderType, [
+          ['empty-query', () => this.emptyQueryTemplate],
+          ['null-result', () => this.nullResultTemplate],
+        ])}
+      </div>
+    `;
+  }
+
+  private get emptyQueryTemplate() {
+    return html`
+      <h2 class="title">
+        To begin searching, enter a search term in the box above and hit "Go".
+      </h2>
+      <div>${emptyQueryIcon}</div>
+    `;
+  }
+
+  private get nullResultTemplate() {
+    return html`
+      <h2 class="title">
+        Your search did not match any items in the Archive. Try different
+        keywords or a more general search.
+      </h2>
+      <div>${nullResultIcon}</div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        text-align: center;
+        width: 100%;
+      }
+
+      .placeholder {
+        display: block;
+      }
+
+      .desktop svg {
+        max-height: 40rem;
+      }
+      .desktop .title {
+        margin: 4rem 0;
+      }
+
+      .mobile svg {
+        max-height: 20rem;
+      }
+      .mobile .title {
+        margin: 2rem 0.5;
+      }
+    `;
+  }
+}

package/test/collection-browser.test.ts

@@ -12,6 +12,9 @@ describe('Collection Browser', () => {
       html`<collection-browser></collection-browser>`
     );
 
+    el.baseQuery = 'hello';
+    await el.updateComplete;
+
     const facets = el.shadowRoot?.querySelector('collection-facets');
     const sortBar = el.shadowRoot?.querySelector('sort-filter-bar');
     const infiniteScroller = el.shadowRoot?.querySelector('infinite-scroller');

package/test/empty-placeholder.test.ts

@@ -0,0 +1,46 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import { EmptyPlaceholder } from '../src/empty-placeholder';
+import '../src/empty-placeholder';
+
+describe('Empty Placeholder', () => {
+  it('should render with empty-query placeholder', async () => {
+    const el = await fixture<EmptyPlaceholder>(
+      html`<empty-placeholder></empty-placeholder>`
+    );
+
+    el.placeholderType = 'empty-query';
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('.empty-query')).to.exist;
+    expect(el.shadowRoot?.querySelector('.null-result')).to.not.exist;
+    expect(el.shadowRoot?.querySelector('infinite-scroller')).to.not.exist;
+  });
+
+  it('should render with null-result placeholder', async () => {
+    const el = await fixture<EmptyPlaceholder>(
+      html`<empty-placeholder></empty-placeholder>`
+    );
+
+    el.placeholderType = 'null-result';
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('.null-result')).to.exist;
+    expect(el.shadowRoot?.querySelector('.empty-query')).to.not.exist;
+    expect(el.shadowRoot?.querySelector('collection-facets')).to.not.exist;
+  });
+
+  it('should not render any empty placeholder', async () => {
+    const el = await fixture<EmptyPlaceholder>(
+      html`<empty-placeholder></empty-placeholder>`
+    );
+
+    el.placeholderType = null;
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('.empty-query')).to.not.exist;
+    expect(el.shadowRoot?.querySelector('.null-result')).to.not.exist;
+    expect(el.shadowRoot?.querySelector('collection-facets')).to.not.exist;
+  });
+});