@internetarchive/collection-browser 4.4.1 → 4.5.0

package/src/collection-facets/facets-template.ts

@@ -1,83 +1,85 @@
-import {
-  css,
-  html,
-  LitElement,
-  TemplateResult,
-  CSSResultGroup,
-  nothing,
-} from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { repeat } from 'lit/directives/repeat.js';
-import type { FacetGroup, FacetBucket, FacetEventDetails } from '../models';
-import type { CollectionTitles } from '../data-source/models';
-import './facet-row';
-
-@customElement('facets-template')
-export class FacetsTemplate extends LitElement {
-  @property({ type: Object }) facetGroup?: FacetGroup;
-
-  @property({ type: Object })
-  collectionTitles?: CollectionTitles;
-
-  private facetClicked(e: CustomEvent<FacetEventDetails>) {
-    this.dispatchFacetClickEvent(e.detail);
-  }
-
-  private dispatchFacetClickEvent(detail: FacetEventDetails) {
-    const event = new CustomEvent<FacetEventDetails>('facetClick', {
-      detail,
-      composed: true,
-    });
-    this.dispatchEvent(event);
-  }
-
-  private get facetsTemplate(): TemplateResult | typeof nothing {
-    const { facetGroup } = this;
-    if (!facetGroup) return nothing;
-
-    const facetBuckets = facetGroup.buckets as FacetBucket[];
-
-    // Added data-testid for Playwright testing
-    // Using className and aria-labels is not ideal for Playwright locator
-    return html`
-      <div class="facet-rows" data-testid="facets-on-${facetGroup.key}">
-        ${repeat(
-          facetBuckets,
-          bucket => `${facetGroup.key}:${bucket.key}`,
-          bucket =>
-            html`<facet-row
-              .facetType=${facetGroup.key}
-              .bucket=${bucket}
-              .collectionTitles=${this.collectionTitles}
-              @facetClick=${this.facetClicked}
-            ></facet-row>`,
-        )}
-      </div>
-    `;
-  }
-
-  render() {
-    return html`${this.facetsTemplate}`;
-  }
-
-  static get styles(): CSSResultGroup {
-    const columnCount = css`var(--facetsColumnCount, 1)`;
-    const columnGap = css`var(--facetsColumnGap, 15px)`;
-
-    return css`
-      .facet-rows {
-        column-count: ${columnCount};
-        column-gap: ${columnGap};
-      }
-
-      a:link,
-      a:visited {
-        text-decoration: none;
-        color: var(--ia-theme-link-color, #4b64ff);
-      }
-      a:hover {
-        text-decoration: underline;
-      }
-    `;
-  }
-}
+import {
+  css,
+  html,
+  LitElement,
+  TemplateResult,
+  CSSResultGroup,
+  nothing,
+} from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import type { FacetGroup, FacetBucket, FacetEventDetails } from '../models';
+import type { CollectionTitles } from '../data-source/models';
+import './facet-row';
+
+@customElement('facets-template')
+export class FacetsTemplate extends LitElement {
+  @property({ type: Object }) facetGroup?: FacetGroup;
+
+  @property({ type: Object })
+  collectionTitles?: CollectionTitles;
+
+  private facetClicked(e: CustomEvent<FacetEventDetails>) {
+    this.dispatchFacetClickEvent(e.detail);
+  }
+
+  private dispatchFacetClickEvent(detail: FacetEventDetails) {
+    const event = new CustomEvent<FacetEventDetails>('facetClick', {
+      detail,
+      composed: true,
+    });
+    this.dispatchEvent(event);
+  }
+
+  private get facetsTemplate(): TemplateResult | typeof nothing {
+    const { facetGroup } = this;
+    if (!facetGroup) return nothing;
+
+    const facetBuckets = facetGroup.buckets as FacetBucket[];
+    const isLoneBucket = facetBuckets.length === 1;
+
+    // Added data-testid for Playwright testing
+    // Using className and aria-labels is not ideal for Playwright locator
+    return html`
+      <div class="facet-rows" data-testid="facets-on-${facetGroup.key}">
+        ${repeat(
+          facetBuckets,
+          bucket => `${facetGroup.key}:${bucket.key}`,
+          bucket =>
+            html`<facet-row
+              .facetType=${facetGroup.key}
+              .bucket=${bucket}
+              .collectionTitles=${this.collectionTitles}
+              ?omitHideButton=${isLoneBucket}
+              @facetClick=${this.facetClicked}
+            ></facet-row>`,
+        )}
+      </div>
+    `;
+  }
+
+  render() {
+    return html`${this.facetsTemplate}`;
+  }
+
+  static get styles(): CSSResultGroup {
+    const columnCount = css`var(--facetsColumnCount, 1)`;
+    const columnGap = css`var(--facetsColumnGap, 15px)`;
+
+    return css`
+      .facet-rows {
+        column-count: ${columnCount};
+        column-gap: ${columnGap};
+      }
+
+      a:link,
+      a:visited {
+        text-decoration: none;
+        color: var(--ia-theme-link-color, #4b64ff);
+      }
+      a:hover {
+        text-decoration: underline;
+      }
+    `;
+  }
+}

package/src/styles/tile-action-styles.ts

@@ -0,0 +1,59 @@
+import { css } from 'lit';
+
+/**
+ * Shared styles for tile action buttons rendered in grid, list-detail, and
+ * list-compact display modes. Layout positioning is handled by each tile
+ * component; these styles cover only the button appearance and the row
+ * container's default flex behavior.
+ *
+ * Customizable via CSS custom properties:
+ *  - `--tileActionColor` (defaults to --primaryErrorCTAFill, then #d9534f)
+ *  - `--tileActionBg` (default: #fff)
+ *  - `--tileActionBorderColor` (defaults to --primaryErrorCTAFill, then #d9534f)
+ *  - `--tileActionHoverBg` (defaults to --primaryErrorCTAFillRGB at 20% alpha)
+ *  - `--tileActionHoverColor` (defaults to --tileActionColor)
+ */
+export const tileActionStyles = css`
+  .tile-actions {
+    flex-shrink: 0;
+    display: flex;
+    gap: var(--tileActionGap, 0);
+  }
+
+  .tile-action-btn {
+    flex: 1;
+    padding: 6px 5px;
+    border: 2px solid
+      var(--tileActionBorderColor, var(--primaryErrorCTAFill, #d9534f));
+    border-radius: var(--tileActionBorderRadius, 0);
+    /* Inherit from the surrounding tile rather than the UA default for <button> */
+    font-family: inherit;
+    font-size: 1.2rem;
+    font-weight: bold;
+    cursor: pointer;
+    color: var(--tileActionColor, var(--primaryErrorCTAFill, #d9534f));
+    background: var(--tileActionBg, #fff);
+    transition:
+      background 0.15s,
+      color 0.15s;
+  }
+
+  /*
+   * When buttons are flush against each other (no gap), overlap their shared
+   * edge by 1px so adjacent borders don't double up.
+   */
+  .tile-action-btn + .tile-action-btn {
+    margin-left: -1px;
+  }
+
+  .tile-action-btn:hover {
+    background: var(
+      --tileActionHoverBg,
+      rgba(var(--primaryErrorCTAFillRGB, 229, 28, 38), 0.2)
+    );
+    color: var(
+      --tileActionHoverColor,
+      var(--tileActionColor, var(--primaryErrorCTAFill, #d9534f))
+    );
+  }
+`;

package/src/tiles/base-tile-component.ts

@@ -1,65 +1,124 @@
-import { LitElement, PropertyValues } from 'lit';
-import { property } from 'lit/decorators.js';
-import type { SortParam } from '@internetarchive/search-service';
-import { TileDisplayValueProvider } from './tile-display-value-provider';
-import type { TileModel } from '../models';
-import { DateFormat, formatDate } from '../utils/format-date';
-
-export abstract class BaseTileComponent extends LitElement {
-  @property({ type: Object }) model?: TileModel;
-
-  @property({ type: Number }) currentWidth?: number;
-
-  @property({ type: Number }) currentHeight?: number;
-
-  @property({ type: String }) baseNavigationUrl?: string;
-
-  @property({ type: String }) baseImageUrl?: string;
-
-  @property({ type: String }) collectionPagePath?: string;
-
-  @property({ type: Object }) sortParam: SortParam | null = null;
-
-  @property({ type: Object }) defaultSortParam: SortParam | null = null;
-
-  @property({ type: String }) creatorFilter?: string;
-
-  @property({ type: Number }) mobileBreakpoint?: number;
-
-  @property({ type: Boolean }) loggedIn = false;
-
-  @property({ type: Boolean }) suppressBlurring = false;
-
-  @property({ type: Boolean }) useLocalTime = false;
-
-  protected displayValueProvider = new TileDisplayValueProvider();
-
-  protected willUpdate(changed: PropertyValues<this>) {
-    // Ensure the TileDisplayValueProvider stays up-to-date as properties change
-    if (
-      changed.has('model') ||
-      changed.has('baseNavigationUrl') ||
-      changed.has('collectionPagePath') ||
-      changed.has('sortParam') ||
-      changed.has('defaultSortParam') ||
-      changed.has('creatorFilter')
-    ) {
-      this.displayValueProvider = new TileDisplayValueProvider({
-        model: this.model,
-        baseNavigationUrl: this.baseNavigationUrl,
-        collectionPagePath: this.collectionPagePath,
-        sortParam: this.sortParam ?? this.defaultSortParam ?? undefined,
-        creatorFilter: this.creatorFilter,
-      });
-    }
-  }
-
-  /**
-   * The formatted date string for given date and format type, taking into
-   * account whether this tile component should be using local time or UTC.
-   */
-  protected getFormattedDate(date?: Date, format?: DateFormat): string {
-    const { useLocalTime } = this;
-    return formatDate(date, format, { useLocalTime });
-  }
-}
+import { html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import type { SortParam } from '@internetarchive/search-service';
+import { TileDisplayValueProvider } from './tile-display-value-provider';
+import type { TileModel } from '../models';
+import { DateFormat, formatDate } from '../utils/format-date';
+import type { TileAction } from './models';
+
+export abstract class BaseTileComponent extends LitElement {
+  @property({ type: Object }) model?: TileModel;
+
+  /** Action buttons to display on this tile (rendered by subclasses) */
+  @property({ type: Array }) tileActions: TileAction[] = [];
+
+  @property({ type: Number }) currentWidth?: number;
+
+  @property({ type: Number }) currentHeight?: number;
+
+  @property({ type: String }) baseNavigationUrl?: string;
+
+  @property({ type: String }) baseImageUrl?: string;
+
+  @property({ type: String }) collectionPagePath?: string;
+
+  @property({ type: Object }) sortParam: SortParam | null = null;
+
+  @property({ type: Object }) defaultSortParam: SortParam | null = null;
+
+  @property({ type: String }) creatorFilter?: string;
+
+  @property({ type: Number }) mobileBreakpoint?: number;
+
+  @property({ type: Boolean }) loggedIn = false;
+
+  @property({ type: Boolean }) suppressBlurring = false;
+
+  @property({ type: Boolean }) useLocalTime = false;
+
+  protected displayValueProvider = new TileDisplayValueProvider();
+
+  protected willUpdate(changed: PropertyValues<this>) {
+    // Ensure the TileDisplayValueProvider stays up-to-date as properties change
+    if (
+      changed.has('model') ||
+      changed.has('baseNavigationUrl') ||
+      changed.has('collectionPagePath') ||
+      changed.has('sortParam') ||
+      changed.has('defaultSortParam') ||
+      changed.has('creatorFilter')
+    ) {
+      this.displayValueProvider = new TileDisplayValueProvider({
+        model: this.model,
+        baseNavigationUrl: this.baseNavigationUrl,
+        collectionPagePath: this.collectionPagePath,
+        sortParam: this.sortParam ?? this.defaultSortParam ?? undefined,
+        creatorFilter: this.creatorFilter,
+      });
+    }
+  }
+
+  /**
+   * The formatted date string for given date and format type, taking into
+   * account whether this tile component should be using local time or UTC.
+   */
+  protected getFormattedDate(date?: Date, format?: DateFormat): string {
+    const { useLocalTime } = this;
+    return formatDate(date, format, { useLocalTime });
+  }
+
+  /**
+   * Renders the action buttons configured for this tile, or `nothing` if
+   * there are none. Optional `extraClass` is appended to the container's
+   * class list so subclasses can target their own layout tweaks.
+   */
+  protected renderTileActions(
+    extraClass: string = '',
+  ): TemplateResult | typeof nothing {
+    if (!this.tileActions.length) return nothing;
+
+    const containerClasses = classMap({
+      'tile-actions': true,
+      ...(extraClass && { [extraClass]: true }),
+    });
+
+    return html`
+      <div class=${containerClasses}>
+        ${this.tileActions.map(
+          action => html`
+            <button
+              class="tile-action-btn"
+              @click=${(e: Event) => this.handleTileActionClick(e, action)}
+            >
+              ${action.label}
+            </button>
+          `,
+        )}
+      </div>
+    `;
+  }
+
+  /**
+   * Click handler for tile action buttons. Stops propagation so the click
+   * doesn't activate a wrapping tile link, and dispatches a
+   * `tileActionClicked` event (bubbling + composed) carrying the action ID
+   * and the tile model.
+   */
+  protected handleTileActionClick(e: Event, action: TileAction): void {
+    e.preventDefault();
+    e.stopPropagation();
+    // Pre-set the hover pane controller's clicking flag so that focus
+    // restoration after a consumer-opened modal won't trigger the hover pane.
+    this.dispatchEvent(
+      new PointerEvent('pointerdown', { bubbles: true, composed: true }),
+    );
+    this.dispatchEvent(
+      new CustomEvent('tileActionClicked', {
+        detail: { actionId: action.id, model: this.model },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+}