diff --git a/packages/pharos/src/components/image-card/pharos-image-card.scss b/packages/pharos/src/components/image-card/pharos-image-card.scss index 5fcdfdbf..3a61ee58 100644 --- 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 index a23ffc9c..afa55e32 100644 --- 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} > - ${this._renderCollectionImageLinkContent()} - + ${this._renderCheckbox()} `; } @@ -299,7 +292,7 @@ export class PharosImageCard extends ScopedRegistryMixin(FocusMixin(PharosElemen @mouseleave=${this._handleImageMouseLeave} @click=${this._cardToggleSelect} > - ${this._renderLinkContent()}${this._renderHoverMetadata()} - + ${this._showSubtleOverlay() ? nothing : this._renderCheckbox()} `;