From c4194a8135f8b6258c6271caa40dadea34e29d6e Mon Sep 17 00:00:00 2001
From: Mikael Arvola <marvel@illinois.edu>
Date: Wed, 11 Sep 2024 19:55:29 -0500
Subject: [PATCH] Improve spacing when the card has an icon with no image.

---
 src/ilw-card.js         | 4 ++++
 src/ilw-card.styles.css | 6 +++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/ilw-card.js b/src/ilw-card.js
index 5b709c4..7d552d4 100644
--- a/src/ilw-card.js
+++ b/src/ilw-card.js
@@ -12,6 +12,7 @@ class Card extends LitElement {
             align: {},
             aspectRatio: {},
             _hasGraphic: { state: true, type: Boolean },
+            _iconOnly: { state: true, type: Boolean },
         };
     }
 
@@ -26,6 +27,7 @@ class Card extends LitElement {
         this.aspectRatio = "";
         this.clickable = false;
         this._hasGraphic = false;
+        this._iconOnly = false;
 
         this._click = (ev) => {
             /**
@@ -54,6 +56,7 @@ class Card extends LitElement {
         }
         const icons = this.shadowRoot.querySelector("slot[name=icon]");
         if (icons.assignedElements().length > 0) {
+            this._iconOnly = true;
             this._hasGraphic = true;
             return;
         }
@@ -66,6 +69,7 @@ class Card extends LitElement {
             // Only add the force-ratio class if we are in fact forcing an aspect ratio
             "force-ratio": !!this.aspectRatio,
             graphic: this._hasGraphic,
+            "icon-only": this._iconOnly
         };
         const styles = {
             "--ilw-card--aspect-ratio": this.aspectRatio
diff --git a/src/ilw-card.styles.css b/src/ilw-card.styles.css
index b444262..ac57696 100644
--- a/src/ilw-card.styles.css
+++ b/src/ilw-card.styles.css
@@ -265,7 +265,7 @@ article {
 
 .card-icon {
     position: absolute;
-    top: var(--ilw-card--content-padding-top);
+    top: 0;
     left: 0;
     right: 0;
     bottom: 0;
@@ -300,6 +300,10 @@ article {
     flex: 1;
 }
 
+.icon-only .card-content {
+    padding-top: 0;
+}
+
 .card-footer {
     padding: 0 var(--ilw-card--content-padding-right) var(--ilw-card--content-padding-bottom) var(--ilw-card--content-padding-left);
 }