@internetarchive/collection-browser 0.2.5 → 0.2.6

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

@@ -1,16 +1,13 @@
 /* eslint-disable import/no-duplicates */
 import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { TileModel } from '../../models';
-import { formatCount } from '../../utils/format-count';
-
-import { favoriteFilledIcon } from './icons/favorite-filled';
-import { reviewsIcon } from './icons/reviews';
-import viewsIcon from './icons/views';
 
 import '../mediatype-icon';
 import '../item-image';
+import './tile-stats';
 
 @customElement('item-tile')
 export class ItemTile extends LitElement {
@@ -19,182 +16,112 @@ export class ItemTile extends LitElement {
   @property({ type: String }) baseImageUrl?: string;
 
   render() {
-    const itemTitle = this.model?.title || nothing;
+    const itemTitle = this.model?.title;
     const itemCreator = this.model?.creator;
     return html`
-      <div id="container">
-        <div id="title-image-container">
-          <h1 id="item-title" title=${itemTitle}>${itemTitle}</h1>
-          <div id="item-image-container">
-            <item-image .model=${this.model} .baseImageUrl=${this.baseImageUrl}>
+      <div class="container">
+        <div class="item-info">
+          <div id="title">
+            <h1 class="truncated" title=${ifDefined(
+              itemTitle
+            )}>${itemTitle}</h1>
+          </div>
+
+          <div id="image">
+            <item-image
+              .model=${this.model}
+              .baseImageUrl=${this.baseImageUrl}>
             </item-image>
           </div>
-          <div class="item-creator">
-            <div class="truncated">
-              ${itemCreator
-                ? html`<span>by&nbsp;${itemCreator}</span>`
-                : nothing}
-            </div>
+          <div class="created-by truncated">
+            ${itemCreator ? html`<span>by&nbsp;${itemCreator}</span>` : nothing}
           </div>
         </div>
 
-        <div class="hr"></div>
-
-        <div id="item-stats-container">
-          <div id="stats-holder">
-            <div class="col">
-              <mediatype-icon
-                .mediatype=${this.model?.mediatype}
-                .collection=${this.model?.collections}
-                style="--iconHeight:25px; --iconWidth:25px;"
-              >
-              </mediatype-icon>
-            </div>
-            <div class="col">
-              ${viewsIcon}
-              <p class="status-text">
-                ${formatCount(this.model?.viewCount, 'short', 'short')}
-              </p>
-            </div>
-            <div class="col">
-              ${favoriteFilledIcon}
-              <p class="status-text">
-                ${formatCount(this.model?.itemCount, 'short', 'short')}
-              </p>
-            </div>
-            <div class="col">
-              ${reviewsIcon}
-              <p class="status-text">
-                ${formatCount(this.model?.favCount, 'short', 'short')}
-              </p>
-            </div>
-          </div>
+        <tile-stats 
+          .mediatype=${this.model?.mediatype}
+          .viewCount=${this.model?.viewCount}
+          .favCount=${this.model?.favCount}
+          .commentCount=${this.model?.commentCount}>
+        </tile-stats>
         </div>
       </div>
     `;
   }
 
   static get styles(): CSSResultGroup {
-    const cornerRadiusCss = css`var(--collectionTileCornerRadius, 4px)`;
-
     return css`
-      #container {
+      .container {
         background-color: #ffffff;
-        border-radius: ${cornerRadiusCss};
+        border-radius: var(--collectionTileCornerRadius, 4px);
         box-shadow: 1px 1px 2px 0px;
         display: flex;
         flex-direction: column;
         height: 100%;
-        position: relative;
       }
 
-      #title-image-container {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        padding: 0.5rem 0.5rem 0 0.5rem;
+      .item-info {
+        padding: 5px 5px 0 5px;
+        flex-grow: 1;
       }
 
-      #item-title {
-        color: #2c2c2c;
-        font-size: 1.6rem;
-        text-align: center;
-        margin-top: 0rem;
-        margin-bottom: 0.5rem;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        line-height: 2rem;
-        height: 4rem;
+      #title {
+        flex-shrink: 0;
       }
 
-      #item-image-container {
+      #image {
         display: flex;
         justify-content: center;
         flex: 1;
+        height: 16rem;
       }
 
       .hidden {
         display: none;
       }
 
-      #container:hover > #title-image-container > .item-title {
+      .container:hover > .item-info > #title > .truncated {
         text-decoration: underline;
       }
 
       /** this is a workaround for Safari 15 where the hover effects are not working */
-      #title-image-container:hover > #item-title {
+      #title:hover > .truncated {
         text-decoration: underline;
       }
 
-      #container:hover > #item-title {
-        background-color: #fcfcfc;
-      }
-
-      .item-creator {
+      .created-by {
         display: flex;
         justify-content: center;
         align-items: flex-end; /* Important to start text from bottom */
         height: 3rem;
         padding-top: 1rem;
+        margin-top: 5px;
       }
 
       .truncated {
         flex: 1;
-        min-width: 0; /* Important for long words! */
-      }
-
-      .truncated span {
-        font-size: 1.4rem;
         color: #2c2c2c;
-        -webkit-line-clamp: 2;
+        min-width: 0; /* Important for long words! */
+        text-align: center;
+        line-height: 2rem;
         text-overflow: ellipsis;
         overflow: hidden;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
         word-wrap: break-word;
-        line-height: 2rem;
-        text-align: center;
-      }
-
-      .hr {
-        border: 0.5px solid #ccc;
-      }
-
-      #item-stats-container {
-        align-items: center;
-        display: flex;
-        height: 5.5rem;
-        padding-left: 1rem;
-        padding-right: 0.5rem;
-      }
-
-      #stats-holder {
-        align-items: center;
-        display: flex;
-        flex: 1;
-        justify-content: space-evenly;
-        text-align: center;
-        width: 100%;
-      }
-
-      svg {
-        height: 10px;
-        width: 10px;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
       }
 
-      .status-text {
-        font-size: 14px;
-        color: #2c2c2c;
-        margin: auto;
-        display: block;
-        text-align: center;
+      .truncated span {
+        font-size: 1.4rem;
+        display: -webkit-box;
       }
 
-      .col {
-        width: 25%;
+      h1.truncated {
+        margin-top: 0rem;
+        margin-bottom: 0.5rem;
+        font-size: 1.6rem;
+        height: 4rem;
+        display: -webkit-box;
       }
     `;
   }

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

@@ -0,0 +1,132 @@
+import { css, CSSResultGroup, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { favoriteFilledIcon } from '../../assets/img/icons/favorite-filled';
+import { reviewsIcon } from '../../assets/img/icons/reviews';
+import { uploadIcon } from '../../assets/img/icons/upload';
+import { viewsIcon } from '../../assets/img/icons/views';
+
+import { formatCount } from '../../utils/format-count';
+
+@customElement('tile-stats')
+export class TileStats extends LitElement {
+  @property({ type: String }) mediatype?: string;
+
+  @property({ type: Number }) itemCount?: number;
+
+  @property({ type: Number }) viewCount?: number;
+
+  @property({ type: Number }) favCount?: number;
+
+  @property({ type: Number }) commentCount?: number;
+
+  render() {
+    return html`
+      <div class="item-stats">
+        <p class="sr-only">
+          ${this.mediatype === 'account' ? 'Account Stats' : 'Item Stats'}
+        </p>
+        <ul id="stats-row">
+          <li class="col">
+            <p class="sr-only">Mediatype:</p>
+            <mediatype-icon .mediatype=${this.mediatype}></mediatype-icon>
+          </li>
+          <li class="col">
+            ${this.mediatype === 'account' ? uploadIcon : viewsIcon}
+            <p class="status-text">
+              <span class="sr-only">
+                ${this.mediatype === 'account' ? 'Uploads:' : 'Views:'}
+              </span>
+              ${formatCount(
+                this.mediatype === 'account' ? this.itemCount : this.viewCount,
+                'short',
+                'short'
+              )}
+            </p>
+          </li>
+          <li class="col">
+            ${favoriteFilledIcon}
+            <p class="status-text">
+              <span class="sr-only">Favorites:</span>
+              ${formatCount(this.favCount, 'short', 'short')}
+            </p>
+          </li>
+          <li class="col">
+            ${reviewsIcon}
+            <p class="status-text">
+              <span class="sr-only">Reviews:</span>
+              ${formatCount(this.commentCount, 'short', 'short')}
+            </p>
+          </li>
+        </ul>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      mediatype-icon {
+        --iconHeight: 25px;
+        --iconWidth: 25px;
+      }
+
+      ul {
+        all: unset; // unset all property values
+        list-style-type: none; // remove default list-style
+      }
+
+      li {
+        list-style-type: none; // remove default list-style
+      }
+
+      .item-stats {
+        height: 35px;
+      }
+
+      #stats-row {
+        border-top: 1px solid #bbb;
+        align-items: center;
+        display: flex;
+        flex: 1;
+        justify-content: space-evenly;
+        text-align: center;
+        width: 100%;
+        padding-top: 5px;
+        padding-bottom: 5px;
+      }
+
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        border: 0;
+      }
+
+      .col {
+        width: 25%;
+        height: 25px;
+      }
+
+      svg {
+        height: 10px;
+        width: 10px;
+        display: block;
+        margin: auto;
+      }
+
+      .status-text {
+        font-size: 14px;
+        height: 15px;
+        color: #2c2c2c;
+        line-height: 20px;
+        margin: auto;
+        display: block;
+        text-align: center;
+      }
+    `;
+  }
+}

package/src/tiles/mediatype-icon.ts

@@ -50,6 +50,10 @@ export class MediatypeIcon extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
+      #icon {
+        height: var(--iconHeight, 25px);
+      }
+
       .status-text {
         font-size: 14px;
         color: #2c2c2c;

package/test/tile-stats.test.ts

@@ -0,0 +1,57 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import { TileStats } from '../src/tiles/grid/tile-stats';
+
+import '../src/tiles/grid/tile-stats';
+
+describe('Tile Stats', () => {
+  it('should render initial component', async () => {
+    const el = await fixture<TileStats>(html`<tile-stats></tile-stats>`);
+
+    const itemStats = el.shadowRoot?.querySelector('.item-stats');
+    const statsRow = el.shadowRoot?.querySelector('#stats-row');
+    const statsRowCount = statsRow?.childElementCount;
+
+    expect(itemStats).to.exist;
+    expect(statsRow).to.exist;
+    expect(statsRowCount).to.equal(4);
+  });
+
+  it('should render component with value', async () => {
+    const el = await fixture<TileStats>(
+      html`
+        <tile-stats
+          .mediatype=${'account'}
+          .itemCount=${1}
+          .favCount=${2}
+          .commentCount=${3}
+        >
+        </tile-stats>
+      `
+    );
+
+    const statsRow = el.shadowRoot?.querySelector('#stats-row');
+
+    const mediatypeStat = statsRow?.children.item(0);
+    // get second column item in stats row
+    const itemStatCount = statsRow?.children
+      .item(1)
+      ?.querySelector('.status-text')?.textContent;
+    // get third column item in stats row
+    const favoritesStatCount = statsRow?.children
+      .item(2)
+      ?.querySelector('.status-text')?.textContent;
+    // get fourth column item in stats row
+    const reviewsStatCount = statsRow?.children
+      .item(3)
+      ?.querySelector('.status-text')?.textContent;
+
+    expect(mediatypeStat).to.exist;
+
+    // Snapshot testing - reference: https://open-wc.org/docs/testing/semantic-dom-diff/#snapshot-testing
+    expect(itemStatCount).to.equalSnapshot(1);
+    expect(favoritesStatCount).to.equalSnapshot(2);
+    expect(reviewsStatCount).to.equalSnapshot(3);
+  });
+});

package/dist/src/tiles/grid/icons/account.d.ts

@@ -1 +0,0 @@
-export declare const accountIcon: import("lit-html").TemplateResult<2>;

package/dist/src/tiles/grid/icons/account.js

@@ -1,12 +0,0 @@
-import { svg } from 'lit';
-export const accountIcon = svg `
-  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="m89.6854559 79.6500588c1.7300364 6.4823648 2.180423 13.3122689 3.3145441 20.3499412h-86c.5683151-15.8558542 2.98334063-30.7849367 15.1676149-41.6581341 22.9948067-20.518674 59.250299-9.0032844 67.517841 21.3081929zm-40.0998307-79.6500588c10.872402.0493248 19.9700408 9.25722341 19.917959 20.1421788-.0829413 11.042868-8.9616237 19.8492523-20.0602807 19.8578212-11.1181198 0-19.9397193-8.7904706-19.9397193-19.8908727-.0327543-11.11998815 9.0125781-20.17487063 20.082041-20.1091273z"
-      fill="#333"
-      fill-rule="evenodd"
-    />
-    <title>Icon of a person</title>
-  </svg>
-`;
-//# sourceMappingURL=account.js.map

package/dist/src/tiles/grid/icons/account.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"account.js","sourceRoot":"","sources":["../../../../../src/tiles/grid/icons/account.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;CAS7B,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const accountIcon = svg`\n  <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"m89.6854559 79.6500588c1.7300364 6.4823648 2.180423 13.3122689 3.3145441 20.3499412h-86c.5683151-15.8558542 2.98334063-30.7849367 15.1676149-41.6581341 22.9948067-20.518674 59.250299-9.0032844 67.517841 21.3081929zm-40.0998307-79.6500588c10.872402.0493248 19.9700408 9.25722341 19.917959 20.1421788-.0829413 11.042868-8.9616237 19.8492523-20.0602807 19.8578212-11.1181198 0-19.9397193-8.7904706-19.9397193-19.8908727-.0327543-11.11998815 9.0125781-20.17487063 20.082041-20.1091273z\"\n      fill=\"#333\"\n      fill-rule=\"evenodd\"\n    />\n    <title>Icon of a person</title>\n  </svg>\n`;\n"]}

package/dist/src/tiles/grid/icons/views.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("lit-html").TemplateResult<2>;
-export default _default;

package/dist/src/tiles/grid/icons/views.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"views.js","sourceRoot":"","sources":["../../../../../src/tiles/grid/icons/views.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;CAQjB,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport default svg`\n  <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"m98 50.5704143c-.2830293-.471515-.671154-1.1088947-1.1643742-1.9121392s-1.6003642-2.3617474-3.3214321-4.6755089c-1.7210678-2.3137614-3.522258-4.5325939-5.4035703-6.6564975-1.8813124-2.1239037-4.2828993-4.473133-7.2047606-7.0476881-2.9218612-2.5745551-5.8895067-4.7933876-8.9029363-6.6564976-3.0134295-1.86311-6.4628491-3.4330878-10.3482587-4.7099336-3.8854095-1.2768458-7.7822651-1.9142256-11.6905667-1.9121443-3.9083017.0020914-7.8051573.6154781-11.6905668 1.8401652-3.8854096 1.2246871-7.3702078 2.8301329-10.4543947 4.8163375-3.0841869 1.9862045-6.0278997 4.1695691-8.8311384 6.5500937s-5.2048256 4.7652219-7.2047605 7.1540919c-1.99993501 2.38887-3.75430043 4.5722346-5.26309632 6.5500938s-2.63883199 3.583305-3.39010829 4.8163374l-1.13003609 1.8401602c.2830293.4715149.67115403 1.1088946 1.16437421 1.9121391.49322017.8032445 1.5878776 2.3617475 3.28397229 4.6755089s3.47439274 4.521119 5.3348942 6.6220728c1.8605014 2.1009538 4.2506422 4.4387083 7.1704224 7.0132633 2.9197801 2.5745551 5.8874256 4.7819127 8.9029363 6.6220729 3.0155106 1.8401601 6.4774168 3.398663 10.3857184 4.6755088 3.9083017 1.2768458 7.8176438 1.9142256 11.7280266 1.9121443 3.9103827-.0020914 7.7957922-.6154781 11.6562286-1.8401652s7.3337886-2.818658 10.4200566-4.7819127 6.0299808-4.1351444 8.8311384-6.515669 5.2152311-4.7652219 7.2422203-7.1540919 3.8052873-4.5607597 5.3348942-6.515669c1.5296068-1.9549093 2.6721295-3.5488802 3.427568-4.7819127zm-24.5142913 0c0 6.467683-2.3079374 12.0152859-6.9238123 16.6428087s-10.1495139 6.9412843-16.600917 6.9412843c-6.4992683 0-12.0453939-2.3137615-16.6383767-6.9412843s-6.8894742-10.1751257-6.8894742-16.6428087 2.2964914-12.003811 6.8894742-16.608384 10.1391084-6.9068595 16.6383767-6.9068595c6.4534842 0 11.9871232 2.3022865 16.600917 6.9068595s6.9217312 10.140701 6.9238123 16.608384zm-23.5247293-10.552755c2.8261308 0 5.2870289 1.0619518 7.3826944 3.1858555 2.0956655 2.1239036 3.1434982 4.5795368 3.1434982 7.3668995 0 2.8332624-1.0478327 5.2888956-3.1434982 7.3668995-2.0956655 2.078004-4.5565636 3.1170059-7.3826944 3.1170059-2.873996 0-5.3348941-1.0264838-7.3826944-3.0794516-2.0478002-2.0529677-3.0717003-4.5200758-3.0717003-7.4013243 0-2.8332624 1.0239001-5.3003705 3.0717003-7.4013243 2.0478003-2.1009538 4.5086984-3.1514307 7.3826944-3.1514307z\"\n      fill=\"#333\"\n    />\n    <title>Eye icon</title>\n  </svg>\n`;\n"]}

package/src/tiles/grid/icons/account.ts

@@ -1,12 +0,0 @@
-import { svg } from 'lit';
-
-export const accountIcon = svg`
-  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="m89.6854559 79.6500588c1.7300364 6.4823648 2.180423 13.3122689 3.3145441 20.3499412h-86c.5683151-15.8558542 2.98334063-30.7849367 15.1676149-41.6581341 22.9948067-20.518674 59.250299-9.0032844 67.517841 21.3081929zm-40.0998307-79.6500588c10.872402.0493248 19.9700408 9.25722341 19.917959 20.1421788-.0829413 11.042868-8.9616237 19.8492523-20.0602807 19.8578212-11.1181198 0-19.9397193-8.7904706-19.9397193-19.8908727-.0327543-11.11998815 9.0125781-20.17487063 20.082041-20.1091273z"
-      fill="#333"
-      fill-rule="evenodd"
-    />
-    <title>Icon of a person</title>
-  </svg>
-`;