From be96023c837797e9690cd2e4cd9ca7d656191fa3 Mon Sep 17 00:00:00 2001
From: Mikael Arvola <marvel@illinois.edu>
Date: Sun, 6 Oct 2024 19:15:30 -0500
Subject: [PATCH] Add tag option to change the internal article tag to div for
 very simple cards.

---
 samples/index.html      |  2 +-
 src/ilw-card.js         | 22 +++++++++++++++-------
 src/ilw-card.styles.css |  2 +-
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/samples/index.html b/samples/index.html
index 5c3d0a2..16afed1 100644
--- a/samples/index.html
+++ b/samples/index.html
@@ -80,7 +80,7 @@
 <h2>Grid 1</h2>
 
 <ilw-grid innerwidth="350px">
-    <ilw-card>
+    <ilw-card tag="div">
         <h3>Plain Card</h3>
         <p>A minimal card with a <a href="#">link to something</a>.</p>
     </ilw-card>
diff --git a/src/ilw-card.js b/src/ilw-card.js
index daffe6b..75b2323 100644
--- a/src/ilw-card.js
+++ b/src/ilw-card.js
@@ -1,4 +1,5 @@
-import { LitElement, html, unsafeCSS } from "lit";
+import { LitElement, unsafeCSS } from "lit";
+import { html, literal } from "lit/static-html.js";
 import styles from "./ilw-card.styles.css?inline";
 import "./ilw-card.css";
 import { classMap } from "lit/directives/class-map.js";
@@ -11,8 +12,9 @@ class Card extends LitElement {
             clickable: { type: Boolean },
             align: {},
             aspectRatio: {},
+            tag: {},
             _hasGraphic: { state: true, type: Boolean },
-            _iconOnly: { state: true, type: Boolean },
+            _iconOnly: { state: true, type: Boolean }
         };
     }
 
@@ -20,8 +22,12 @@ class Card extends LitElement {
         return unsafeCSS(styles);
     }
 
+    articleTag = literal`article`;
+    divTag = literal`div`;
+
     constructor() {
         super();
+        this.tag = "article";
         this.align = "left";
         this.theme = "white";
         this.aspectRatio = "";
@@ -39,7 +45,7 @@ class Card extends LitElement {
                 const link = this.querySelector("a");
                 link.click();
             }
-        }
+        };
     }
 
     /**
@@ -74,11 +80,13 @@ class Card extends LitElement {
         const styles = {
             "--ilw-card--aspect-ratio": this.aspectRatio
                 ? this.aspectRatio
-                : null,
+                : null
         };
+
+        let staticTag = this.tag === "div" ? this.divTag : this.articleTag;
         return html`
-            <article class=${classMap(classes)} style=${styleMap(styles)}
-                     @click="${this.clickable ? this._click : null}">
+            <${staticTag} class=${classMap(classes)} style=${styleMap(styles)}
+                         @click="${this.clickable ? this._click : null}">
                 <div class="card-content">
                     <slot></slot>
                 </div>
@@ -99,7 +107,7 @@ class Card extends LitElement {
                 <div class="card-footer">
                     <slot name="footer"></slot>
                 </div>
-            </article>
+            </${staticTag}>
         `;
     }
 }
diff --git a/src/ilw-card.styles.css b/src/ilw-card.styles.css
index e9f056f..fb438ba 100644
--- a/src/ilw-card.styles.css
+++ b/src/ilw-card.styles.css
@@ -246,7 +246,7 @@
     text-align: center;
 }
 
-article {
+.card {
     position: relative;
     flex: 1;
     display: flex;