@internetarchive/collection-browser 0.2.5 → 0.2.6

package/dist/src/tiles/grid/tile-stats.js

@@ -0,0 +1,134 @@
+import { __decorate } from "tslib";
+import { css, 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';
+let TileStats = class TileStats extends LitElement {
+    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() {
+        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;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TileStats.prototype, "mediatype", void 0);
+__decorate([
+    property({ type: Number })
+], TileStats.prototype, "itemCount", void 0);
+__decorate([
+    property({ type: Number })
+], TileStats.prototype, "viewCount", void 0);
+__decorate([
+    property({ type: Number })
+], TileStats.prototype, "favCount", void 0);
+__decorate([
+    property({ type: Number })
+], TileStats.prototype, "commentCount", void 0);
+TileStats = __decorate([
+    customElement('tile-stats')
+], TileStats);
+export { TileStats };
+//# sourceMappingURL=tile-stats.js.map

package/dist/src/tiles/grid/tile-stats.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile-stats.js","sourceRoot":"","sources":["../../../../src/tiles/grid/tile-stats.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAWvC,MAAM;QACJ,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY;;;;;yCAKhC,IAAI,CAAC,SAAS;;;cAGzC,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS;;;kBAGjD,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ;;gBAEtD,WAAW,CACX,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAC9D,OAAO,EACP,OAAO,CACR;;;;cAID,kBAAkB;;;gBAGhB,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC;;;;cAI9C,WAAW;;;gBAGT,WAAW,CAAC,IAAI,CAAC,YAAY,EAAE,OAAO,EAAE,OAAO,CAAC;;;;;KAK3D,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+DT,CAAC;IACJ,CAAC;CACF,CAAA;AAvH6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAuB;AATvC,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAwHrB;SAxHY,SAAS","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { favoriteFilledIcon } from '../../assets/img/icons/favorite-filled';\nimport { reviewsIcon } from '../../assets/img/icons/reviews';\nimport { uploadIcon } from '../../assets/img/icons/upload';\nimport { viewsIcon } from '../../assets/img/icons/views';\n\nimport { formatCount } from '../../utils/format-count';\n\n@customElement('tile-stats')\nexport class TileStats extends LitElement {\n  @property({ type: String }) mediatype?: string;\n\n  @property({ type: Number }) itemCount?: number;\n\n  @property({ type: Number }) viewCount?: number;\n\n  @property({ type: Number }) favCount?: number;\n\n  @property({ type: Number }) commentCount?: number;\n\n  render() {\n    return html`\n      <div class=\"item-stats\">\n        <p class=\"sr-only\">\n          ${this.mediatype === 'account' ? 'Account Stats' : 'Item Stats'}\n        </p>\n        <ul id=\"stats-row\">\n          <li class=\"col\">\n            <p class=\"sr-only\">Mediatype:</p>\n            <mediatype-icon .mediatype=${this.mediatype}></mediatype-icon>\n          </li>\n          <li class=\"col\">\n            ${this.mediatype === 'account' ? uploadIcon : viewsIcon}\n            <p class=\"status-text\">\n              <span class=\"sr-only\">\n                ${this.mediatype === 'account' ? 'Uploads:' : 'Views:'}\n              </span>\n              ${formatCount(\n                this.mediatype === 'account' ? this.itemCount : this.viewCount,\n                'short',\n                'short'\n              )}\n            </p>\n          </li>\n          <li class=\"col\">\n            ${favoriteFilledIcon}\n            <p class=\"status-text\">\n              <span class=\"sr-only\">Favorites:</span>\n              ${formatCount(this.favCount, 'short', 'short')}\n            </p>\n          </li>\n          <li class=\"col\">\n            ${reviewsIcon}\n            <p class=\"status-text\">\n              <span class=\"sr-only\">Reviews:</span>\n              ${formatCount(this.commentCount, 'short', 'short')}\n            </p>\n          </li>\n        </ul>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      mediatype-icon {\n        --iconHeight: 25px;\n        --iconWidth: 25px;\n      }\n\n      ul {\n        all: unset; // unset all property values\n        list-style-type: none; // remove default list-style\n      }\n\n      li {\n        list-style-type: none; // remove default list-style\n      }\n\n      .item-stats {\n        height: 35px;\n      }\n\n      #stats-row {\n        border-top: 1px solid #bbb;\n        align-items: center;\n        display: flex;\n        flex: 1;\n        justify-content: space-evenly;\n        text-align: center;\n        width: 100%;\n        padding-top: 5px;\n        padding-bottom: 5px;\n      }\n\n      .sr-only {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        padding: 0;\n        margin: -1px;\n        overflow: hidden;\n        clip: rect(0, 0, 0, 0);\n        border: 0;\n      }\n\n      .col {\n        width: 25%;\n        height: 25px;\n      }\n\n      svg {\n        height: 10px;\n        width: 10px;\n        display: block;\n        margin: auto;\n      }\n\n      .status-text {\n        font-size: 14px;\n        height: 15px;\n        color: #2c2c2c;\n        line-height: 20px;\n        margin: auto;\n        display: block;\n        text-align: center;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/tiles/mediatype-icon.js

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

package/dist/src/tiles/mediatype-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"mediatype-icon.js","sourceRoot":"","sources":["../../../src/tiles/mediatype-icon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAGhE,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAK+B,aAAQ,GAAG,KAAK,CAAC;IA+DhD,CAAC;IA7DC,IAAY,gBAAgB;;QAC1B,MAAM,YAAY,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC;QAC3D,MAAM,eAAe,GAAG,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QAElD,IACE,IAAI,CAAC,SAAS,KAAK,QAAQ;aAC3B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA,EAC3D;YACA,OAAO,IAAI,CAAC;SACb;QACD,IACE,IAAI,CAAC,SAAS,KAAK,OAAO;aAC1B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA,EAC9D;YACA,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM;QACJ,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACtD,IAAI,CAAC,MAAM,EAAE;YACX,OAAO,IAAI,CAAA,EAAE,CAAC;SACf;QAED,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;kCACxB,MAAM,CAAC,KAAK;;UAEpC,MAAM,CAAC,IAAI;iCACY,MAAM,CAAC,IAAI;;KAEvC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;KAqBT,CAAC;IACJ,CAAC;CACF,CAAA;AAnE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA+B;AAE/B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAmC;AAEhC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAkB;AALnC,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAoEzB;SApEY,aAAa","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { mediatypeConfig } from '../mediatype/mediatype-config';\n\n@customElement('mediatype-icon')\nexport class MediatypeIcon extends LitElement {\n  @property({ type: String }) mediatype: string | undefined;\n\n  @property({ type: Array }) collections: string[] | undefined;\n\n  @property({ type: Boolean }) showText = false;\n\n  private get displayMediatype(): string {\n    const tvIdentifier = ['tvnews', 'tvarchive', 'television'];\n    const radioIdentifier = ['radio', 'radioprogram'];\n\n    if (\n      this.mediatype === 'movies' &&\n      this.collections?.some(id => tvIdentifier.indexOf(id) >= 0)\n    ) {\n      return 'tv';\n    }\n    if (\n      this.mediatype === 'audio' &&\n      this.collections?.some(id => radioIdentifier.indexOf(id) >= 0)\n    ) {\n      return 'radio';\n    }\n    return this.mediatype || '';\n  }\n\n  render() {\n    const config = mediatypeConfig[this.displayMediatype];\n    if (!config) {\n      return html``;\n    }\n\n    return html`\n      <div\n        id=\"icon\"\n        class=\"${this.showText ? 'show-text' : 'hide-text'}\"\n        style=\"--iconFillColor: ${config.color}\"\n      >\n        ${config.icon}\n        <p class=\"status-text\">${config.text}</p>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .status-text {\n        font-size: 14px;\n        color: #2c2c2c;\n        margin: auto;\n        display: block;\n        text-align: var(--iconTextAlign, center);\n      }\n\n      #icon.hide-text p {\n        display: none;\n      }\n\n      svg {\n        height: var(--iconHeight, 10px);\n        width: var(--iconWidth, 10px);\n      }\n\n      .fill-color {\n        fill: var(--iconFillColor, '#000000');\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"mediatype-icon.js","sourceRoot":"","sources":["../../../src/tiles/mediatype-icon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAGhE,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAK+B,aAAQ,GAAG,KAAK,CAAC;IAmEhD,CAAC;IAjEC,IAAY,gBAAgB;;QAC1B,MAAM,YAAY,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC;QAC3D,MAAM,eAAe,GAAG,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QAElD,IACE,IAAI,CAAC,SAAS,KAAK,QAAQ;aAC3B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA,EAC3D;YACA,OAAO,IAAI,CAAC;SACb;QACD,IACE,IAAI,CAAC,SAAS,KAAK,OAAO;aAC1B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA,EAC9D;YACA,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM;QACJ,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACtD,IAAI,CAAC,MAAM,EAAE;YACX,OAAO,IAAI,CAAA,EAAE,CAAC;SACf;QAED,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;kCACxB,MAAM,CAAC,KAAK;;UAEpC,MAAM,CAAC,IAAI;iCACY,MAAM,CAAC,IAAI;;KAEvC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;KAyBT,CAAC;IACJ,CAAC;CACF,CAAA;AAvE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA+B;AAE/B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAmC;AAEhC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAkB;AALnC,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAwEzB;SAxEY,aAAa","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { mediatypeConfig } from '../mediatype/mediatype-config';\n\n@customElement('mediatype-icon')\nexport class MediatypeIcon extends LitElement {\n  @property({ type: String }) mediatype: string | undefined;\n\n  @property({ type: Array }) collections: string[] | undefined;\n\n  @property({ type: Boolean }) showText = false;\n\n  private get displayMediatype(): string {\n    const tvIdentifier = ['tvnews', 'tvarchive', 'television'];\n    const radioIdentifier = ['radio', 'radioprogram'];\n\n    if (\n      this.mediatype === 'movies' &&\n      this.collections?.some(id => tvIdentifier.indexOf(id) >= 0)\n    ) {\n      return 'tv';\n    }\n    if (\n      this.mediatype === 'audio' &&\n      this.collections?.some(id => radioIdentifier.indexOf(id) >= 0)\n    ) {\n      return 'radio';\n    }\n    return this.mediatype || '';\n  }\n\n  render() {\n    const config = mediatypeConfig[this.displayMediatype];\n    if (!config) {\n      return html``;\n    }\n\n    return html`\n      <div\n        id=\"icon\"\n        class=\"${this.showText ? 'show-text' : 'hide-text'}\"\n        style=\"--iconFillColor: ${config.color}\"\n      >\n        ${config.icon}\n        <p class=\"status-text\">${config.text}</p>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      #icon {\n        height: var(--iconHeight, 25px);\n      }\n\n      .status-text {\n        font-size: 14px;\n        color: #2c2c2c;\n        margin: auto;\n        display: block;\n        text-align: var(--iconTextAlign, center);\n      }\n\n      #icon.hide-text p {\n        display: none;\n      }\n\n      svg {\n        height: var(--iconHeight, 10px);\n        width: var(--iconWidth, 10px);\n      }\n\n      .fill-color {\n        fill: var(--iconFillColor, '#000000');\n      }\n    `;\n  }\n}\n"]}

package/dist/test/tile-stats.test.d.ts

@@ -0,0 +1 @@
+import '../src/tiles/grid/tile-stats';

package/dist/test/tile-stats.test.js

@@ -0,0 +1,42 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import '../src/tiles/grid/tile-stats';
+describe('Tile Stats', () => {
+    it('should render initial component', async () => {
+        var _a, _b;
+        const el = await fixture(html `<tile-stats></tile-stats>`);
+        const itemStats = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.item-stats');
+        const statsRow = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#stats-row');
+        const statsRowCount = statsRow === null || statsRow === void 0 ? void 0 : statsRow.childElementCount;
+        expect(itemStats).to.exist;
+        expect(statsRow).to.exist;
+        expect(statsRowCount).to.equal(4);
+    });
+    it('should render component with value', async () => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const el = await fixture(html `
+        <tile-stats
+          .mediatype=${'account'}
+          .itemCount=${1}
+          .favCount=${2}
+          .commentCount=${3}
+        >
+        </tile-stats>
+      `);
+        const statsRow = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#stats-row');
+        const mediatypeStat = statsRow === null || statsRow === void 0 ? void 0 : statsRow.children.item(0);
+        // get second column item in stats row
+        const itemStatCount = (_c = (_b = statsRow === null || statsRow === void 0 ? void 0 : statsRow.children.item(1)) === null || _b === void 0 ? void 0 : _b.querySelector('.status-text')) === null || _c === void 0 ? void 0 : _c.textContent;
+        // get third column item in stats row
+        const favoritesStatCount = (_e = (_d = statsRow === null || statsRow === void 0 ? void 0 : statsRow.children.item(2)) === null || _d === void 0 ? void 0 : _d.querySelector('.status-text')) === null || _e === void 0 ? void 0 : _e.textContent;
+        // get fourth column item in stats row
+        const reviewsStatCount = (_g = (_f = statsRow === null || statsRow === void 0 ? void 0 : statsRow.children.item(3)) === null || _f === void 0 ? void 0 : _f.querySelector('.status-text')) === null || _g === void 0 ? void 0 : _g.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);
+    });
+});
+//# sourceMappingURL=tile-stats.test.js.map

package/dist/test/tile-stats.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile-stats.test.js","sourceRoot":"","sources":["../../test/tile-stats.test.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,8BAA8B,CAAC;AAEtC,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;;QAC/C,MAAM,EAAE,GAAG,MAAM,OAAO,CAAY,IAAI,CAAA,2BAA2B,CAAC,CAAC;QAErE,MAAM,SAAS,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,aAAa,CAAC,CAAC;QAC9D,MAAM,QAAQ,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,YAAY,CAAC,CAAC;QAC5D,MAAM,aAAa,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,iBAAiB,CAAC;QAElD,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC3B,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC1B,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;;QAClD,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,IAAI,CAAA;;uBAEa,SAAS;uBACT,CAAC;sBACF,CAAC;0BACG,CAAC;;;OAGpB,CACF,CAAC;QAEF,MAAM,QAAQ,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,YAAY,CAAC,CAAC;QAE5D,MAAM,aAAa,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QACjD,sCAAsC;QACtC,MAAM,aAAa,GAAG,MAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,CACrC,IAAI,CAAC,CAAC,CAAC,0CACN,aAAa,CAAC,cAAc,CAAC,0CAAE,WAAW,CAAC;QAC/C,qCAAqC;QACrC,MAAM,kBAAkB,GAAG,MAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,CAC1C,IAAI,CAAC,CAAC,CAAC,0CACN,aAAa,CAAC,cAAc,CAAC,0CAAE,WAAW,CAAC;QAC/C,sCAAsC;QACtC,MAAM,gBAAgB,GAAG,MAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,CACxC,IAAI,CAAC,CAAC,CAAC,0CACN,aAAa,CAAC,cAAc,CAAC,0CAAE,WAAW,CAAC;QAE/C,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAE/B,qGAAqG;QACrG,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;QAC1C,MAAM,CAAC,kBAAkB,CAAC,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;QAC/C,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;IAC/C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\nimport { TileStats } from '../src/tiles/grid/tile-stats';\n\nimport '../src/tiles/grid/tile-stats';\n\ndescribe('Tile Stats', () => {\n  it('should render initial component', async () => {\n    const el = await fixture<TileStats>(html`<tile-stats></tile-stats>`);\n\n    const itemStats = el.shadowRoot?.querySelector('.item-stats');\n    const statsRow = el.shadowRoot?.querySelector('#stats-row');\n    const statsRowCount = statsRow?.childElementCount;\n\n    expect(itemStats).to.exist;\n    expect(statsRow).to.exist;\n    expect(statsRowCount).to.equal(4);\n  });\n\n  it('should render component with value', async () => {\n    const el = await fixture<TileStats>(\n      html`\n        <tile-stats\n          .mediatype=${'account'}\n          .itemCount=${1}\n          .favCount=${2}\n          .commentCount=${3}\n        >\n        </tile-stats>\n      `\n    );\n\n    const statsRow = el.shadowRoot?.querySelector('#stats-row');\n\n    const mediatypeStat = statsRow?.children.item(0);\n    // get second column item in stats row\n    const itemStatCount = statsRow?.children\n      .item(1)\n      ?.querySelector('.status-text')?.textContent;\n    // get third column item in stats row\n    const favoritesStatCount = statsRow?.children\n      .item(2)\n      ?.querySelector('.status-text')?.textContent;\n    // get fourth column item in stats row\n    const reviewsStatCount = statsRow?.children\n      .item(3)\n      ?.querySelector('.status-text')?.textContent;\n\n    expect(mediatypeStat).to.exist;\n\n    // Snapshot testing - reference: https://open-wc.org/docs/testing/semantic-dom-diff/#snapshot-testing\n    expect(itemStatCount).to.equalSnapshot(1);\n    expect(favoritesStatCount).to.equalSnapshot(2);\n    expect(reviewsStatCount).to.equalSnapshot(3);\n  });\n});\n"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {

package/src/{tiles/grid → assets/img}/icons/views.ts

@@ -1,6 +1,6 @@
 import { svg } from 'lit';
 
-export default svg`
+export const viewsIcon = svg`
   <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
     <path
       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"

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

@@ -2,10 +2,7 @@ import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { TileModel } from '../../models';
 
-import { accountIcon } from './icons/account';
-import { favoriteFilledIcon } from './icons/favorite-filled';
-import { reviewsIcon } from './icons/reviews';
-import { uploadIcon } from './icons/upload';
+import './tile-stats';
 
 @customElement('account-tile')
 export class AccountTile extends LitElement {
@@ -13,44 +10,32 @@ export class AccountTile extends LitElement {
 
   render() {
     return html`
-      <div class="outer-holder">
-        <div class="inner-holder">
-          <div id="header-holder">
-            <div id="title-holder">
-              <h1 class="truncated">${this.model?.identifier}</h1>
-            </div>
-            <div id="avatar-holder">
-              <div
-                id="avatar"
-                style="background-image: url('https://archive.org/services/img/${this
-                  .model?.identifier}')"
-              ></div>
-            </div>
-          </div>
-          <div id="year-holder">
-            <div id="archivist-since">
-              <h3>Archivist Since</h3>
-            </div>
-            <div id="year-holder">
-              <h3>${this.model?.dateAdded?.getFullYear()}</h3>
-            </div>
-          </div>
-          <div id="status-holder">
-            <div id="patron-icon">${accountIcon}</div>
-            <div class="stat-icon">
-              ${uploadIcon}
-              <h3>${this.model?.itemCount}</h3>
-            </div>
-            <div class="stat-icon">
-              ${favoriteFilledIcon}
-              <h3>${this.model?.favCount}</h3>
-            </div>
-            <div class="stat-icon">
-              ${reviewsIcon}
-              <h3>${this.model?.commentCount}</h3>
-            </div>
+      <div class="account-tile-main">
+        <div id="title">
+          <h1 class="truncated">${this.model?.identifier}</h1>
+        </div>
+
+        <div class="account-info">
+          <div id="avatar-info">
+            <img
+              id="avatar"
+              alt="patron-avatar"
+              src="https://archive.org/services/img/${this.model?.identifier}"
+            />
           </div>
+
+          <span id="archivist-since">
+            Archivist since ${this.model?.dateAdded?.getFullYear()}
+          </span>
         </div>
+
+        <tile-stats
+          .mediatype=${this.model?.mediatype}
+          .itemCount=${this.model?.itemCount}
+          .favCount=${this.model?.favCount}
+          .commentCount=${this.model?.commentCount}
+        >
+        </tile-stats>
       </div>
     `;
   }
@@ -63,41 +48,45 @@ export class AccountTile extends LitElement {
         margin: 0;
       }
 
-      h3 {
+      span {
         font-size: 14px;
-        font-weight: bold;
         color: #2c2c2c;
         margin: 0px;
       }
 
-      .outer-holder {
+      .account-tile-main {
         background-color: #fcf5e6;
         border: 1px #2c2c2c;
         border-radius: 4px;
         box-shadow: 1px 1px 2px 0px;
         height: 100%;
         display: flex;
+        flex-direction: column;
         text-align: center;
         width: 100%;
       }
 
-      .inner-holder {
-        padding: 5px;
-        width: 100%;
-        display: flex;
-        flex-direction: column;
+      .account-info {
+        flex-grow: 1;
       }
 
-      #header-holder {
-        flex: 1;
+      #title {
+        padding: 5px 5px 0px 5px;
+        flex-shrink: 0;
+        height: 40px;
       }
 
-      #title-holder {
-        height: 40px;
-        margin-bottom: 5px;
+      .account-tile-main:hover > #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;
       }
 
-      #avatar-holder {
+      #avatar-info {
+        margin-top: 5px;
         margin-bottom: 5px;
         display: flex;
         align-items: center;
@@ -112,27 +101,11 @@ export class AccountTile extends LitElement {
         box-shadow: 1px 1px 2px #888888;
       }
 
-      #year-holder {
+      #archivist-since {
         margin-bottom: 5px;
         height: 40px;
       }
 
-      #year-holder {
-        margin: 0px;
-      }
-
-      #status-holder {
-        height: 25px;
-        display: flex;
-        justify-content: space-evenly;
-        line-height: initial;
-      }
-
-      #patron-icon {
-        height: 25px;
-        width: 25px;
-      }
-
       .truncated {
         flex: 1;
         min-width: 0; /* Important for long words! */
@@ -142,15 +115,9 @@ export class AccountTile extends LitElement {
         display: -webkit-box;
         -webkit-box-orient: vertical;
         word-wrap: break-word;
-        word-break: break-all;
         line-height: 2rem;
         text-align: center;
       }
-
-      .stat-icon {
-        height: 10px;
-        width: 10px;
-      }
     `;
   }
 }