feat(image card): update class names & fix collection error

ithaka · Feb 10, 2025 · 6bbd55a · 6bbd55a
1 parent aeb4a5d
commit 6bbd55a
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 29 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
@@ -11,13 +11,13 @@
   width: 100%;
 }
 
-.card__link-container {
+.card__image-container {
   display: flex;
   margin-bottom: var(--pharos-spacing-1-x);
   position: relative;
 }
 
-.card__link--image {
+.card__image {
   contain: unset;
   position: relative;
   display: block;
@@ -45,15 +45,15 @@
   }
 }
 
-.card__link--image.card__link--selected {
+.card__image.card__image--selected {
   @include card-selected;
 }
 
-:host([disabled]) .card__link--image.card__link--selected {
+:host([disabled]) .card__image.card__image--selected {
   outline: solid 2px var(--pharos-color-marble-gray-50);
 }
 
-:host([disabled]) .card__link--image {
+:host([disabled]) .card__image {
   color: var(--pharos-color-marble-gray-50);
   cursor: not-allowed;
   text-decoration: none;
@@ -82,7 +82,7 @@ slot[name='image']::slotted(img) {
   color: var(--pharos-color-marble-gray-50);
 }
 
-:host([variant='promotional']) .card__link--image {
+:host([variant='promotional']) .card__image {
   height: unset;
 }
 
@@ -165,13 +165,18 @@ slot[name='image']::slotted(img) {
   margin-bottom: var(--pharos-spacing-one-half-x);
 }
 
-.card__link--collection {
+.card__image--collection {
   display: grid;
   align-self: end;
   cursor: pointer;
 }
 
-.card__link--collection--error {
+.card__image--collection-container {
+  display: inline-flex;
+  min-width: 0;
+}
+
+.card__image--collection--error {
   background-color: var(--pharos-color-marble-gray-94);
   display: flex;
   width: 100vw;
@@ -187,15 +192,15 @@ slot[name='image']::slotted(img) {
   }
 }
 
-.card__link--collection.card__link--selected {
+.card__image--collection.card__image--selected {
   @include card-selected;
 }
 
-:host([disabled]) .card__link--collection.card__link--selected {
+:host([disabled]) .card__image--collection.card__image--selected {
   outline: solid 2px var(--pharos-color-marble-gray-50);
 }
 
-:host([disabled]) .card__link--collection {
+:host([disabled]) .card__image--collection {
   color: var(--pharos-color-marble-gray-50);
   cursor: not-allowed;
   text-decoration: none;
@@ -237,16 +242,16 @@ slot[name='image']::slotted(img) {
   margin-left: var(--pharos-spacing-one-quarter-x);
 }
 
-.card__link--image.card__link--selectable {
+.card__image.card__image--selectable {
   background-color: var(--pharos-color-marble-gray-94);
 }
 
-.card__link--image.card__link--select-hover {
+.card__image.card__image--select-hover {
   background-color: var(--pharos-color-marble-gray-base);
   transition: background-color var(--pharos-transition-duration-short) ease-in-out;
 }
 
-:host([subtle]) .card__link--image {
+:host([subtle]) .card__image {
   &:hover,
   &:focus-within {
     .card__metadata--hover {

diff --git a/packages/pharos/src/components/image-card/pharos-image-card.ts b/packages/pharos/src/components/image-card/pharos-image-card.ts
@@ -223,13 +223,15 @@ export class PharosImageCard extends ScopedRegistryMixin(FocusMixin(PharosElemen
   private _renderCollectionImageLinkContent(): TemplateResult {
     return this.error
       ? html`
-          <div
-            class=${classMap({
-              [`card__link--collection--error`]: true,
-            })}
-          >
-            <pharos-icon name="exclamation-inverse" a11y-hidden="true"></pharos-icon>
-            <span class="unavailable-text">Image preview not available</span>
+          <div class="card__image--collection-container">
+            <div
+              class=${classMap({
+                [`card__image--collection--error`]: true,
+              })}
+            >
+              <pharos-icon name="exclamation-inverse" a11y-hidden="true"></pharos-icon>
+              <span class="unavailable-text">Image preview not available</span>
+            </div>
           </div>
         `
       : html`
@@ -240,16 +242,16 @@ export class PharosImageCard extends ScopedRegistryMixin(FocusMixin(PharosElemen
 
   private _renderCollectionImage(): TemplateResult {
     return html`<div
-      class="card__link-container"
+      class="card__image-container"
       @keydown=${this._handleForwardNavigation}
       @mouseenter=${this._handleImageMouseEnter}
       @mouseleave=${this._handleImageMouseLeave}
       @click=${this._cardToggleSelect}
     >
       <div
         class=${classMap({
-          [`card__link--collection`]: true,
-          [`card__link--selected`]: this._isSelected,
+          [`card__image--collection`]: true,
+          [`card__image--selected`]: this._isSelected,
         })}
         @click=${this._handleImageClick}
       >
@@ -286,22 +288,22 @@ export class PharosImageCard extends ScopedRegistryMixin(FocusMixin(PharosElemen
 
   private _renderBaseImage(): TemplateResult {
     return html`<div
-      class="card__link-container"
+      class="card__image-container"
       @keydown=${this._handleForwardNavigation}
       @mouseenter=${this._handleImageMouseEnter}
       @mouseleave=${this._handleImageMouseLeave}
       @click=${this._cardToggleSelect}
     >
       <div
         class=${classMap({
-          [`card__link--image`]: true,
-          [`card__link--selectable`]:
+          [`card__image`]: true,
+          [`card__image--selectable`]:
             (this._isSubtleSelectHover() ||
               this._isSelectableViaCard() ||
               this._isDisabledSelectable()) &&
             !this._isSelected,
-          [`card__link--selected`]: this._isSelected,
-          [`card__link--select-hover`]: this._isSelectableCardHover() && !this._isSelected,
+          [`card__image--selected`]: this._isSelected,
+          [`card__image--select-hover`]: this._isSelectableCardHover() && !this._isSelected,
         })}
         @click=${this._handleImageClick}
       >