Add tag option to change the internal article tag to div for very sim…

…ple cards.
web-illinois · Oct 7, 2024 · be96023 · be96023
1 parent 9828a21
commit be96023
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git 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
@@ -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,17 +12,22 @@ 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 }
         };
     }
 
     static get styles() {
         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
@@ -246,7 +246,7 @@
     text-align: center;
 }
 
-article {
+.card {
     position: relative;
     flex: 1;
     display: flex;