@internetarchive/collection-browser 2.0.0 → 2.0.1-alpha.1

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

@@ -11,6 +11,7 @@ import { BaseTileComponent } from '../base-tile-component';
 
 import { baseTileStyles } from './styles/tile-grid-shared-styles';
 import '../image-block';
+import '../review-block';
 import '../text-snippet-block';
 import '../item-image';
 import '../mediatype-icon';
@@ -59,6 +60,7 @@ export class ItemTile extends BaseTileComponent {
               ? this.sortedDateInfoTemplate
               : this.creatorTemplate}
             ${this.webArchivesCaptureDatesTemplate} ${this.textSnippetsTemplate}
+            ${this.reviewBlockTemplate}
           </div>
 
           <tile-stats
@@ -152,6 +154,21 @@ export class ItemTile extends BaseTileComponent {
       : nothing;
   }
 
+  private get reviewBlockTemplate(): TemplateResult | typeof nothing {
+    if (!this.model?.review) return nothing;
+
+    const { title, body, stars } = this.model.review;
+    return html`
+      <review-block
+        viewsize="grid"
+        .title=${title}
+        .body=${body}
+        .starRating=${stars}
+      >
+      </review-block>
+    `;
+  }
+
   private get textSnippetsTemplate(): TemplateResult | typeof nothing {
     if (!this.hasSnippets) return nothing;
 
@@ -239,6 +256,7 @@ export class ItemTile extends BaseTileComponent {
           list-style-type: none;
         }
 
+        review-block,
         text-snippet-block {
           --containerLeftMargin: 5px;
           --containerTopMargin: 5px;

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

@@ -16,6 +16,8 @@ import { formatDate, DateFormat } from '../../utils/format-date';
 import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';
 
 import '../image-block';
+import '../review-block';
+import '../text-snippet-block';
 import '../mediatype-icon';
 
 @customElement('tile-list')
@@ -114,6 +116,7 @@ export class TileList extends BaseTileComponent {
       </div>
       ${this.topicsTemplate} ${this.collectionsTemplate}
       ${this.descriptionTemplate} ${this.textSnippetsTemplate}
+      ${this.reviewBlockTemplate}
     `;
   }
 
@@ -298,6 +301,21 @@ export class TileList extends BaseTileComponent {
     );
   }
 
+  private get reviewBlockTemplate(): TemplateResult | typeof nothing {
+    if (!this.model?.review) return nothing;
+
+    const { title, body, stars } = this.model.review;
+    return html`
+      <review-block
+        viewsize="list"
+        .title=${title}
+        .body=${body}
+        .starRating=${stars}
+      >
+      </review-block>
+    `;
+  }
+
   private get textSnippetsTemplate(): TemplateResult | typeof nothing {
     if (!this.hasSnippets) return nothing;
 

package/src/tiles/review-block.ts

@@ -0,0 +1,130 @@
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  TemplateResult,
+} from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
+import { favoriteFilledIcon } from '../assets/img/icons/favorite-filled';
+import { favoriteUnfilledIcon } from '../assets/img/icons/favorite-unfilled';
+import { srOnlyStyle } from '../styles/sr-only';
+
+@customElement('review-block')
+export class ReviewBlock extends LitElement {
+  @property({ type: String }) title = '';
+
+  @property({ type: String }) body = '';
+
+  @property({ type: Number }) starRating = 0;
+
+  @property({ type: String }) viewSize = 'desktop';
+
+  render() {
+    if (!this.title && !this.body && !this.starRating) return nothing;
+
+    return html`
+      <div class="review-container">
+        <div class="snippet-view ${this.viewSize}">
+          ${this.starsTemplate}
+          <p class="review-title">${this.title}</p>
+          <p class="review-body">${this.body}</p>
+        </div>
+      </div>
+    `;
+  }
+
+  private get starsTemplate(): TemplateResult | typeof nothing {
+    if (this.starRating <= 0) return nothing;
+
+    const numFilledStars = Math.min(5, this.starRating);
+    const numUnfilledStars = Math.min(5, 5 - this.starRating);
+    return html`
+      <div class="star-rating">
+        <span class="sr-only">${this.starRating} ${msg('out of 5 stars')}</span>
+        ${Array(numFilledStars).fill(this.filledStarTemplate)}
+        ${Array(numUnfilledStars).fill(this.unfilledStarTemplate)}
+      </div>
+    `;
+  }
+
+  private get filledStarTemplate(): TemplateResult {
+    return html`<span aria-hidden="true">${favoriteFilledIcon}</span>`;
+  }
+
+  private get unfilledStarTemplate(): TemplateResult {
+    return html`
+      <span class="unfilled-star" aria-hidden="true">
+        ${favoriteUnfilledIcon}
+      </span>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      srOnlyStyle,
+      css`
+        .review-container {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          width: calc(100% - 10px);
+          border: 1px solid #ccc;
+          margin-top: var(--containerTopMargin, 10px);
+          margin-left: var(--containerLeftMargin, 0px);
+          padding: 5px;
+          box-sizing: border-box;
+        }
+
+        .review-title,
+        .review-body {
+          display: -webkit-box;
+          font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+          overflow: hidden;
+          overflow-wrap: break-word;
+          word-break: break-word;
+          -webkit-line-clamp: var(--maxLines, 3);
+          -webkit-box-orient: vertical;
+          margin: 0;
+        }
+
+        .review-title {
+          font-size: 1.4rem;
+          line-height: 2rem;
+          max-height: 6rem;
+        }
+
+        .review-title > a[href] {
+          color: inherit;
+          text-decoration: none;
+        }
+
+        .review-title > a[href]:hover {
+          text-decoration: underline;
+        }
+
+        .review-body {
+          font-size: 1rem;
+          line-height: 1.4rem;
+          max-height: 4.2rem;
+        }
+
+        .star-rating svg {
+          width: 10px;
+          height: 10px;
+        }
+
+        .unfilled-star {
+          fill: #ccc;
+        }
+
+        .list {
+          margin: 0;
+          padding-left: 5px;
+        }
+      `,
+    ];
+  }
+}