feat(image card): refactor image card without link

Removed the pharos-link from wrapping the image creating a click handler on the image to navigate to item's link. Added styles to convey interactivity
ithaka · Feb 7, 2025 · 2aee5c7 · 2aee5c7
1 parent c74ad0b
commit 2aee5c7
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 21 deletions.
diff --git a/packages/pharos/src/components/image-card/pharos-image-card.scss b/packages/pharos/src/components/image-card/pharos-image-card.scss
@@ -23,6 +23,7 @@
   display: block;
   height: 14rem;
   width: 100%;
+  cursor: pointer;
 }
 
 .card__link--title {
@@ -167,6 +168,7 @@ slot[name='image']::slotted(img) {
 .card__link--collection {
   display: grid;
   align-self: end;
+  cursor: pointer;
 }
 
 .card__link--collection--error {

diff --git a/packages/pharos/src/components/image-card/pharos-image-card.ts b/packages/pharos/src/components/image-card/pharos-image-card.ts
@@ -3,7 +3,7 @@ import { html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { state } from 'lit/decorators.js';
 import { property, query } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
+// import { ifDefined } from 'lit/directives/if-defined.js';
 import type { TemplateResult, CSSResultArray, PropertyValues } from 'lit';
 import { imageCardStyles } from './pharos-image-card.css';
 import type { PharosDropdownMenu } from '../dropdown-menu/pharos-dropdown-menu';
@@ -77,13 +77,6 @@ export class PharosImageCard extends ScopedRegistryMixin(FocusMixin(PharosElemen
   @property({ type: String, reflect: true })
   public link = '';
 
-  /**
-   * Indicates the label to apply to the image link.
-   * @attr image-link-label
-   */
-  @property({ type: String, reflect: true, attribute: 'image-link-label' })
-  public imageLinkLabel?: string;
-
   /**
    * Indicates the variant of card.
    * @attr variant
@@ -195,6 +188,10 @@ export class PharosImageCard extends ScopedRegistryMixin(FocusMixin(PharosElemen
     menu?.openWithTrigger(trigger);
   }
 
+  private _handleImageClick(): void {
+    document.location = this.link;
+  }
+
   private _handleImageMouseEnter(): void {
     if (!this.disabled) {
       this._title['_hover'] = true;
@@ -249,19 +246,15 @@ export class PharosImageCard extends ScopedRegistryMixin(FocusMixin(PharosElemen
       @mouseleave=${this._handleImageMouseLeave}
       @click=${this._cardToggleSelect}
     >
-      <pharos-link
+      <div
         class=${classMap({
           [`card__link--collection`]: true,
           [`card__link--selected`]: this._isSelected,
         })}
-        href="${this.link}"
-        a11y-label=${ifDefined(this.imageLinkLabel)}
-        subtle
-        flex
-        no-hover
+        @click=${this._handleImageClick}
       >
         ${this._renderCollectionImageLinkContent()}
-      </pharos-link>
+      </div>
       ${this._renderCheckbox()}
     </div>`;
   }
@@ -299,7 +292,7 @@ export class PharosImageCard extends ScopedRegistryMixin(FocusMixin(PharosElemen
       @mouseleave=${this._handleImageMouseLeave}
       @click=${this._cardToggleSelect}
     >
-      <pharos-link
+      <div
         class=${classMap({
           [`card__link--image`]: true,
           [`card__link--selectable`]:
@@ -310,13 +303,10 @@ export class PharosImageCard extends ScopedRegistryMixin(FocusMixin(PharosElemen
           [`card__link--selected`]: this._isSelected,
           [`card__link--select-hover`]: this._isSelectableCardHover() && !this._isSelected,
         })}
-        href="${this.link}"
-        a11y-label=${ifDefined(this.imageLinkLabel)}
-        subtle
-        no-hover
+        @click=${this._handleImageClick}
       >
         ${this._renderLinkContent()}${this._renderHoverMetadata()}
-      </pharos-link>
+      </div>
       ${this._showSubtleOverlay() ? nothing : this._renderCheckbox()}
       <slot name="overlay"></slot>
     </div>`;