@internetarchive/collection-browser 3.3.3 → 3.3.4-alpha-webdev7761.0

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

@@ -1,90 +1,90 @@
-import { css, CSSResultGroup, html, TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { baseTileStyles } from './styles/tile-grid-shared-styles';
-import { BaseTileComponent } from '../base-tile-component';
-import '../image-block';
-
-@customElement('search-tile')
-export class SearchTile extends BaseTileComponent {
-  /*
-   * Reactive properties inherited from BaseTileComponent:
-   *  - model?: TileModel;
-   *  - currentWidth?: number;
-   *  - currentHeight?: number;
-   *  - baseNavigationUrl?: string;
-   *  - baseImageUrl?: string;
-   *  - collectionPagePath?: string;
-   *  - sortParam: SortParam | null = null;
-   *  - creatorFilter?: string;
-   *  - mobileBreakpoint?: number;
-   *  - loggedIn = false;
-   *  - suppressBlurring = false;
-   */
-
-  @property({ type: Boolean }) showInfoButton = false;
-
-  render() {
-    return html`
-      <div class="container">
-        <div class="tile-details">
-          <div class="item-info">
-            ${this.getImageBlockTemplate} ${this.getTitleTemplate}
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  private get getImageBlockTemplate(): TemplateResult {
-    return html`
-      <image-block
-        .model=${this.model}
-        .baseImageUrl=${this.baseImageUrl}
-        .viewSize=${'grid'}
-        .suppressBlurring=${this.suppressBlurring}
-      >
-      </image-block>
-    `;
-  }
-
-  private get getTitleTemplate() {
-    return html`<div id="title">
-      <h3 class="truncated">${this.model?.title}</h3>
-    </div>`;
-  }
-
-  static get styles(): CSSResultGroup {
-    const tileBorderColor = css`var(--tileBorderColor, #555555)`;
-    const tileBackgroundColor = css`var(--tileBackgroundColor, #666666)`;
-    const whiteColor = css`#fff`;
-
-    return [
-      baseTileStyles,
-      css`
-        .container {
-          background-color: ${tileBackgroundColor};
-          border: 1px solid ${tileBorderColor};
-        }
-
-        .item-info {
-          flex-grow: initial;
-        }
-
-        h4.truncated,
-        h3.truncated {
-          color: ${whiteColor};
-          -webkit-line-clamp: 4;
-        }
-
-        .container:hover > #title {
-          text-decoration: underline;
-        }
-
-        /* this is a workaround for Safari 15 where the hover effects are not working */
-        image-block:hover > #title {
-          text-decoration: underline;
-        }
-      `,
-    ];
-  }
-}
+import { css, CSSResultGroup, html, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { baseTileStyles } from './styles/tile-grid-shared-styles';
+import { BaseTileComponent } from '../base-tile-component';
+import '../image-block';
+
+@customElement('search-tile')
+export class SearchTile extends BaseTileComponent {
+  /*
+   * Reactive properties inherited from BaseTileComponent:
+   *  - model?: TileModel;
+   *  - currentWidth?: number;
+   *  - currentHeight?: number;
+   *  - baseNavigationUrl?: string;
+   *  - baseImageUrl?: string;
+   *  - collectionPagePath?: string;
+   *  - sortParam: SortParam | null = null;
+   *  - creatorFilter?: string;
+   *  - mobileBreakpoint?: number;
+   *  - loggedIn = false;
+   *  - suppressBlurring = false;
+   */
+
+  @property({ type: Boolean }) showInfoButton = false;
+
+  render() {
+    return html`
+      <div class="container">
+        <div class="tile-details">
+          <div class="item-info">
+            ${this.getImageBlockTemplate} ${this.getTitleTemplate}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private get getImageBlockTemplate(): TemplateResult {
+    return html`
+      <image-block
+        .model=${this.model}
+        .baseImageUrl=${this.baseImageUrl}
+        .viewSize=${'grid'}
+        .suppressBlurring=${this.suppressBlurring}
+      >
+      </image-block>
+    `;
+  }
+
+  private get getTitleTemplate() {
+    return html`<div id="title">
+      <h3 class="truncated">${this.model?.title}</h3>
+    </div>`;
+  }
+
+  static get styles(): CSSResultGroup {
+    const tileBorderColor = css`var(--tileBorderColor, #555555)`;
+    const tileBackgroundColor = css`var(--tileBackgroundColor, #666666)`;
+    const whiteColor = css`#fff`;
+
+    return [
+      baseTileStyles,
+      css`
+        .container {
+          background-color: ${tileBackgroundColor};
+          border: 1px solid ${tileBorderColor};
+        }
+
+        .item-info {
+          flex-grow: initial;
+        }
+
+        h4.truncated,
+        h3.truncated {
+          color: ${whiteColor};
+          -webkit-line-clamp: 4;
+        }
+
+        .container:hover > #title {
+          text-decoration: underline;
+        }
+
+        /* this is a workaround for Safari 15 where the hover effects are not working */
+        image-block:hover > #title {
+          text-decoration: underline;
+        }
+      `,
+    ];
+  }
+}

package/src/tiles/grid/styles/tile-grid-shared-styles.ts

@@ -1,130 +1,130 @@
-import { css } from 'lit';
-import { srOnlyStyle } from '../../../styles/sr-only';
-
-/**
- * Base tile styles
- */
-
-const tileBackgroundColor = css`var(--tileBackgroundColor, #ffffff)`;
-const tileCornerRadius = css`var(--tileCornerRadius, 4px)`;
-
-export const baseTileStyles = css`
-  /* Include .sr-only styles for all tiles */
-  ${srOnlyStyle}
-
-  .container {
-    background-color: ${tileBackgroundColor};
-    border: 1px #2c2c2c;
-    border-radius: ${tileCornerRadius};
-    box-shadow: var(--tileBoxShadow, 1px 1px 2px 0);
-    box-sizing: border-box;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-
-  image-block {
-    display: block;
-    position: relative;
-    text-align: center;
-  }
-
-  .tile-details {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    row-gap: 10px;
-    font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
-  }
-
-  .item-info {
-    display: flex;
-    flex-direction: column;
-    row-gap: 5px;
-    flex-grow: 1;
-  }
-
-  #title {
-    padding: 0 5px;
-  }
-
-  .created-by,
-  .date-sorted-by,
-  .volume-issue,
-  .archivist-since {
-    display: flex;
-    justify-content: left;
-    align-items: flex-start;
-    padding: 0 5px;
-  }
-
-  .truncated {
-    flex: 1;
-    color: #2c2c2c;
-    min-width: 0; /* Important for long words! */
-    text-align: left;
-    line-height: 15px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    word-wrap: break-word;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-  }
-
-  h4.truncated,
-  h3.truncated {
-    display: -webkit-box;
-    margin: 0px;
-    line-height: 15px;
-    font-size: 14px;
-    font-weight: 500;
-    padding-bottom: 1px;
-  }
-
-  span {
-    display: -webkit-box;
-    font-size: 1.4rem;
-    line-height: 15px;
-    overflow: hidden;
-    word-wrap: break-word;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-    padding-bottom: 1px;
-  }
-
-  .container:hover > .tile-details > .item-info > #title > .truncated {
-    text-decoration: underline;
-  }
-
-  /** this is a workaround for Safari 15 where the hover effects are not working */
-  #title:hover > .truncated {
-    text-decoration: underline;
-  }
-
-  .info-button {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    margin: 0;
-    padding: 0;
-    border: none;
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: rgba(220, 220, 220, 0.5);
-    color: white;
-    font-size: 2.4rem;
-    font-weight: bold;
-    line-height: 1;
-    text-shadow: black 1px 1px 3px;
-    overflow: visible;
-    aspect-ratio: 1 / 1;
-    z-index: 1;
-  }
-
-  .hidden {
-    display: none;
-  }
-`;
+import { css } from 'lit';
+import { srOnlyStyle } from '../../../styles/sr-only';
+
+/**
+ * Base tile styles
+ */
+
+const tileBackgroundColor = css`var(--tileBackgroundColor, #ffffff)`;
+const tileCornerRadius = css`var(--tileCornerRadius, 4px)`;
+
+export const baseTileStyles = css`
+  /* Include .sr-only styles for all tiles */
+  ${srOnlyStyle}
+
+  .container {
+    background-color: ${tileBackgroundColor};
+    border: 1px #2c2c2c;
+    border-radius: ${tileCornerRadius};
+    box-shadow: var(--tileBoxShadow, 1px 1px 2px 0);
+    box-sizing: border-box;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  image-block {
+    display: block;
+    position: relative;
+    text-align: center;
+  }
+
+  .tile-details {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    row-gap: 10px;
+    font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
+  }
+
+  .item-info {
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+    flex-grow: 1;
+  }
+
+  #title {
+    padding: 0 5px;
+  }
+
+  .created-by,
+  .date-sorted-by,
+  .volume-issue,
+  .archivist-since {
+    display: flex;
+    justify-content: left;
+    align-items: flex-start;
+    padding: 0 5px;
+  }
+
+  .truncated {
+    flex: 1;
+    color: #2c2c2c;
+    min-width: 0; /* Important for long words! */
+    text-align: left;
+    line-height: 15px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    word-wrap: break-word;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+
+  h4.truncated,
+  h3.truncated {
+    display: -webkit-box;
+    margin: 0px;
+    line-height: 15px;
+    font-size: 14px;
+    font-weight: 500;
+    padding-bottom: 1px;
+  }
+
+  span {
+    display: -webkit-box;
+    font-size: 1.4rem;
+    line-height: 15px;
+    overflow: hidden;
+    word-wrap: break-word;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    padding-bottom: 1px;
+  }
+
+  .container:hover > .tile-details > .item-info > #title > .truncated {
+    text-decoration: underline;
+  }
+
+  /** this is a workaround for Safari 15 where the hover effects are not working */
+  #title:hover > .truncated {
+    text-decoration: underline;
+  }
+
+  .info-button {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(220, 220, 220, 0.5);
+    color: white;
+    font-size: 2.4rem;
+    font-weight: bold;
+    line-height: 1;
+    text-shadow: black 1px 1px 3px;
+    overflow: visible;
+    aspect-ratio: 1 / 1;
+    z-index: 1;
+  }
+
+  .hidden {
+    display: none;
+  }
+`;

package/test/collection-browser.test.ts

@@ -1087,7 +1087,7 @@ describe('Collection Browser', () => {
     });
   });
 
-  it('applies correct search filter when TV clip filter set to commercials', async () => {
+  it('applies correct TV search filter for commercials', async () => {
     const searchService = new MockSearchService();
     const el = await fixture<CollectionBrowser>(
       html`<collection-browser .searchService=${searchService}>
@@ -1096,16 +1096,20 @@ describe('Collection Browser', () => {
 
     el.baseQuery = 'tv-fields';
     el.searchType = SearchType.TV;
-    el.tvClipFilter = 'commercials';
+    el.selectedFacets = {
+      clip_type: {
+        commercial: { key: 'commercial', count: 1, state: 'selected' },
+      },
+    };
     await el.updateComplete;
     await el.initialSearchComplete;
 
-    expect(searchService.searchParams?.filters?.ad_id?.['*']).to.equal(
+    expect(searchService.searchParams?.filters?.clip_type?.commercial).to.equal(
       FilterConstraint.INCLUDE,
     );
   });
 
-  it('applies correct search filter when TV clip filter set to factchecks', async () => {
+  it('applies correct TV search filter for fact checks', async () => {
     const searchService = new MockSearchService();
     const el = await fixture<CollectionBrowser>(
       html`<collection-browser .searchService=${searchService}>
@@ -1114,16 +1118,20 @@ describe('Collection Browser', () => {
 
     el.baseQuery = 'tv-fields';
     el.searchType = SearchType.TV;
-    el.tvClipFilter = 'factchecks';
+    el.selectedFacets = {
+      clip_type: {
+        'fact check': { key: 'fact check', count: 1, state: 'selected' },
+      },
+    };
     await el.updateComplete;
     await el.initialSearchComplete;
 
-    expect(searchService.searchParams?.filters?.factcheck?.['*']).to.equal(
-      FilterConstraint.INCLUDE,
-    );
+    expect(
+      searchService.searchParams?.filters?.clip_type?.['fact check'],
+    ).to.equal(FilterConstraint.INCLUDE);
   });
 
-  it('applies correct search filter when TV clip filter set to quotes', async () => {
+  it('applies correct TV search filter for quotes', async () => {
     const searchService = new MockSearchService();
     const el = await fixture<CollectionBrowser>(
       html`<collection-browser .searchService=${searchService}>
@@ -1132,11 +1140,13 @@ describe('Collection Browser', () => {
 
     el.baseQuery = 'tv-fields';
     el.searchType = SearchType.TV;
-    el.tvClipFilter = 'quotes';
+    el.selectedFacets = {
+      clip_type: { quote: { key: 'quote', count: 1, state: 'selected' } },
+    };
     await el.updateComplete;
     await el.initialSearchComplete;
 
-    expect(searchService.searchParams?.filters?.clip?.['1']).to.equal(
+    expect(searchService.searchParams?.filters?.clip_type?.quote).to.equal(
       FilterConstraint.INCLUDE,
     );
   });