Merge pull request #4 from web-illinois/dev

Merge dev

README.md

@@ -113,6 +113,22 @@ those will utilize the first link in the contents.
 Note that [WCAG Label in Name](https://www.w3.org/WAI/WCAG21/Understanding/label-in-name) specifies that the
 name and label must begin with the same words, so the hidden portion should be at the end.
 
+## Upgrade Process
+
+When upgrading from the v2 toolkit component, the following changes are needed:
+
+- Rename all `il-card` to `ilw-card`.
+- Rename all `il-clickable-card` to `ilw-card` and add the `clickable` attribute.
+- Add `slot="image"` to the `img` tag in cards with images.
+- Add `slot="icon"` to the icon in cards with icons.
+- Replace uses of the theme classes with an attribute:
+  - `class="il-theme-gray"` -> `theme="gray"`
+  - `class="il-theme-blue"` -> `theme="blue"`
+  - `class="il-theme-white"` -> `theme="white"`
+  - `class="il-theme-blue-gradient"` -> `theme="blue-gradient"`
+  - `class="il-theme-orange"` -> `theme="orange"`
+  - `class="il-theme-orange-gradient"` -> `theme="orange-gradient"`
+
 ## External References
 
 - https://www.nngroup.com/articles/cards-component/

builder/ilw-card.json

@@ -7,5 +7,5 @@
     "description": "A card component that can be used as a container for grouping information.",
     "toolkit-version": "",
     "production-version": "",
-    "development-version": "1.0.0-alpha"
+    "development-version": "1.0.0-alpha1"
 }

builder/versions/ilw-card.1.0.0-alpha.json → builder/versions/ilw-card.1.0.0-alpha1.json

@@ -5,10 +5,10 @@
     "type": "web component",
     "element-name": "ilw-card",
     "description": "A card component that can be used as a container for grouping information.",
-    "version": "1.0.0-alpha",
+    "version": "1.0.0-alpha1",
     "date": "08/02/2024",
-    "css": "https://dev.toolkit.illinois.edu/ilw-card/1.0.0-alpha/ilw-card.css",
-    "js": "https://dev.toolkit.illinois.edu/ilw-card/1.0.0-alpha/ilw-card.js",
+    "css": "https://dev.toolkit.illinois.edu/ilw-card/1.0.0-alpha1/ilw-card.css",
+    "js": "https://dev.toolkit.illinois.edu/ilw-card/1.0.0-alpha1/ilw-card.js",
     "production": false,
     "notes": "",
     "parent-style": "margin: 0 auto; max-width: 400px; padding: 15px;",
@@ -90,122 +90,122 @@
         {
             "name": "--ilw-card--margin-top",
             "depreciated": false,
-            "description": "Margin above cards"
+            "description": "Margin above cards [default: 1rem]"
         },
         {
             "name": "--ilw-card--margin-bottom",
             "depreciated": false,
-            "description": "Margin below cards"
+            "description": "Margin below cards [default: 1rem]"
         },
         {
             "name": "--ilw-card--content-padding-top",
             "depreciated": false,
-            "description": "Top padding around main content in the card"
+            "description": "Top padding around main content in the card [default: 2.5rem]"
         },
         {
             "name": "--ilw-card--content-padding-right",
             "depreciated": false,
-            "description": "Right padding around main content in the card"
+            "description": "Right padding around main content in the card [default: 2rem]"
         },
         {
             "name": "--ilw-card--content-padding-bottom",
             "depreciated": false,
-            "description": "Bottom padding around main content in the card"
+            "description": "Bottom padding around main content in the card [default: 2rem]"
         },
         {
             "name": "--ilw-card--content-padding-left",
             "depreciated": false,
-            "description": "Left padding around main content in the card"
+            "description": "Left padding around main content in the card [default: 2rem]"
         },
         {
             "name": "--ilw-card--font-size",
             "depreciated": false,
-            "description": "Card text font size"
+            "description": "Card text font size [default: 1.2em]"
         },
         {
             "name": "--ilw-card--icon-width",
             "depreciated": false,
-            "description": "Limit for an icon's width"
+            "description": "Limit for an icon's width [default: 120px]"
         },
         {
             "name": "--ilw-card--icon-height",
             "depreciated": false,
-            "description": "Limit for an icon's height"
+            "description": "Limit for an icon's height [default: 80px]"
         },
         {
             "name": "--ilw-card--border-color",
             "depreciated": false,
-            "description": "Color of the border around the card"
+            "description": "Color of the border around the card [default: var(--il-blue)]"
         },
         {
             "name": "--ilw-card--background",
             "depreciated": false,
-            "description": "CSS background for the card"
+            "description": "CSS background for the card [default: var(--ilw-background--color)]"
         },
         {
             "name": "--ilw-card--heading-color",
             "depreciated": false,
-            "description": "Color of the heading in the card"
+            "description": "Color of the heading in the card [default: var(--il-orange)]"
         },
         {
             "name": "--ilw-card--icon-color",
             "depreciated": false,
-            "description": "Color of an icon in the card"
+            "description": "Color of an icon in the card [default: var(--ilw-text--color)]"
         },
         {
             "name": "--ilw-card--text-color",
             "depreciated": false,
-            "description": "Color of text in the card"
+            "description": "Color of text in the card [default: var(--ilw-text--color)]"
         },
         {
             "name": "--ilw-card--link",
             "depreciated": false,
-            "description": "Color for links inside the card "
+            "description": "Color for links inside the card  [default: var(--ilw-link--color)]"
         },
         {
             "name": "--ilw-card--link-focus",
             "depreciated": false,
-            "description": "Focus and hover color for links inside the card"
+            "description": "Focus and hover color for links inside the card [default: var(--ilw-link--focused-color)]"
         },
         {
             "name": "--ilw-card--link-visited",
             "depreciated": false,
-            "description": "Visited link color for inside the card"
+            "description": "Visited link color for inside the card [default: var(--ilw-link--visited-color)]"
         },
         {
             "name": "--ilw-card--clickable--heading-color",
             "depreciated": false,
-            "description": "Color of a clickable card heading"
+            "description": "Color of a clickable card heading [default: var(--ilw-card--heading-color)]"
         },
         {
             "name": "--ilw-card--hover--background",
             "depreciated": false,
-            "description": "Background for the hover state of a clickable card"
+            "description": "Background for the hover state of a clickable card [default: var(--il-blue)]"
         },
         {
             "name": "--ilw-card--hover--heading-color",
             "depreciated": false,
-            "description": "Color of the heading for the hover state of a clickable card"
+            "description": "Color of the heading for the hover state of a clickable card [default: #fff]"
         },
         {
             "name": "--ilw-card--hover--text-color",
             "depreciated": false,
-            "description": "Color of text for the hover state of a clickable card"
+            "description": "Color of text for the hover state of a clickable card [default: #fff]"
         },
         {
             "name": "--ilw-card--hover--clickable-border",
             "depreciated": false,
-            "description": "Color of the bottom wider border for the hover state of a clickable card"
+            "description": "Color of the bottom wider border for the hover state of a clickable card [default: var(--il-industrial-lighter-1)]"
         },
         {
             "name": "--ilw-card--hover--link",
             "depreciated": false,
-            "description": "Link color for links inside the hover state of a clickable card"
+            "description": "Link color for links inside the hover state of a clickable card [default: var(--ilw-card--hover--text-color)]"
         },
         {
             "name": "--ilw-card--hover--link-focus",
             "depreciated": false,
-            "description": "Focus and hover color for links inside the hover state of a clickable card"
+            "description": "Focus and hover color for links inside the hover state of a clickable card [default: var(--il-orange)]"
         }
     ]
 }

package.json

@@ -3,7 +3,7 @@
     "description": "Illinois Toolkit: A card component that can be used as a container for grouping information, reminiscent of a physical note or playing card.",
     "repository": "github:web-illinois/ilw-card",
     "private": false,
-    "version": "1.0.0-alpha.0",
+    "version": "1.0.0-alpha1",
     "type": "module",
     "files": [
       "src/**",

parse-vars.js

@@ -1,15 +1,15 @@
 import {readFileSync} from "fs";
 
 const contents = readFileSync("src/ilw-card.css", "utf-8");
-const regex = /^\s*(--[\w-]+):[^;]+;\s*\/\*\s*(var|vardep):\s*(.+)\*\s*\/$/gm;
+const regex = /^\s*(--[\w-]+):\s*([^;]+);\s*\/\*\s*(var|vardep):\s*(.+)\*\s*\/$/gm;
 
 let output = [];
 let m;
 while (m = regex.exec(contents)) {
     output.push({
         name: m[1],
-        depreciated: m[2] === "vardep",
-        description: m[3]
+        depreciated: m[3] === "vardep",
+        description: m[4] + ` [default: ${m[2]}]`
     })
 }
 

samples/index.html

@@ -144,14 +144,14 @@ <h3>
 <h2>Grid 2</h2>
 
 <ilw-grid>
-    <ilw-card clickable>
-        Clickable card with a <a href="#">link that makes sense</a> out of context.
+    <ilw-card>
+        Clickable card with a <a href="#none">link that makes sense</a> out of context.
     </ilw-card>
     <ilw-card clickable>
-        Clickable card with a <a href="#">link that makes sense</a> out of context.
+        Clickable card with a <a href="#one">link that makes sense</a> out of context.
     </ilw-card>
     <ilw-card clickable>
-        Clickable card with a <a href="#">link that makes sense</a> out of context.
+        Clickable card with a <a href="#two">link that makes sense</a> out of context.
     </ilw-card>
 </ilw-grid>
 

src/ilw-card.css

@@ -1,6 +1,6 @@
 @layer base {
     :root {
-        --ilw-card--margin-top: 1rem; /*vardep: Margin above cards*/
+        --ilw-card--margin-top: 1rem; /*var: Margin above cards*/
         --ilw-card--margin-bottom: 1rem; /*var: Margin below cards*/
         --ilw-card--aspect-ratio: 16/10;
         --ilw-card--content-padding-top: 2.5rem; /*var: Top padding around main content in the card*/

src/ilw-card.js

@@ -27,8 +27,7 @@ class Card extends LitElement {
         this.clickable = false;
         this._hasGraphic = false;
 
-        // Make the first link in a clickable card be the whole card's link
-        this.addEventListener("click", (ev) => {
+        this._click = (ev) => {
             /**
              * @type {HTMLElement}
              */
@@ -38,7 +37,7 @@ class Card extends LitElement {
                 const link = this.querySelector("a");
                 link.click();
             }
-        });
+        }
     }
 
     /**
@@ -74,7 +73,8 @@ class Card extends LitElement {
                 : null,
         };
         return html`
-            <article class=${classMap(classes)} style=${styleMap(styles)}>
+            <article class=${classMap(classes)} style=${styleMap(styles)}
+                     @click="${this.clickable ? this._click : null}">
                 <div class="card-graphic">
                     <div class="card-image">
                         <slot