WIP implementation.

web-illinois · Sep 30, 2024 · 4119af1 · 4119af1
1 parent 3ed4998
commit 4119af1
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -13,6 +13,7 @@ The profile card can be controlled with the following attributes:
 
 - `round` clips the image into a round shape.
 - The aspect ratio of the `image` slot can be forced using `aspectratio`, for example `aspectratio="3/2"`.
+- `theme` can be `white` (default) or `gray`.
 
 ### Slots
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,7 +27,8 @@
     },
     "dependencies": {
         "lit": "3.1.3",
-        "@illinois-toolkit/ilw-card": "^1.0.0-beta1"
+        "@illinois-toolkit/ilw-card": "^1.0.0-beta1",
+        "@illinois-toolkit/ilw-icon": "^1.0.0-beta"
     },
     "devDependencies": {
         "vite": "^5.4.7"

diff --git a/samples/index.html b/samples/index.html
@@ -24,23 +24,23 @@
         <img src="https://fastly.picsum.photos/id/1025/500/400.jpg?hmac=MPFZjsU2UG1Mr3SjMkYP2F9jnhQWyatt6soxbOj0TN4" alt="Photo of First Last in front of the Illini Union." slot="image">
         <h2 slot="name"><a href="#">First & Last Name</a></h2>
         <p slot="title">Job Title or Description</p>
-        <div slot="address">
-            <p>110A Education</p>
-            <p>M/C 708</p>
-        </div>
+        <p slot="address">
+            <span>110A Education</span>
+            <span>M/C 708</span>
+        </p>
         <p slot="phone"><a href="#">217-333-0000</a></p>
-        <p slot="email "><a href="#">example@illinois.edu</a></p>
+        <p slot="email"><a href="#">example@illinois.edu</a></p>
     </ilw-profile-card>
-    <ilw-profile-card aspectratio="1/1">
+    <ilw-profile-card aspectratio="1/1" theme="gray">
         <img src="https://fastly.picsum.photos/id/1025/500/400.jpg?hmac=MPFZjsU2UG1Mr3SjMkYP2F9jnhQWyatt6soxbOj0TN4" alt="Photo of First Last in front of the Illini Union." slot="image">
-        <h2 slot="name"><a href="#">First & Last Name</a></h2>
+        <h2 slot="name">First & Last Name</h2>
         <p slot="title">Job Title or Description</p>
-        <div slot="address">
-            <p>110A Education</p>
-            <p>M/C 708</p>
-        </div>
+        <p slot="address">
+            <span>110A Education</span>
+            <span>M/C 708</span>
+        </p>
         <p slot="phone"><a href="#">217-333-0000</a></p>
-        <p slot="email "><a href="#">example@illinois.edu</a></p>
+        <p slot="email"><a href="#">example@illinois.edu</a></p>
     </ilw-profile-card>
 </main>
 </body>

diff --git a/src/ilw-profile-card.css b/src/ilw-profile-card.css
@@ -0,0 +1,28 @@
+ilw-profile-card {
+    a {
+        color: var(--ilw-profile-card--link);
+
+        &:focus {
+            color: var(--ilw-link--focus-color);
+            background-color: var(--ilw-link--focus-background-color);
+            outline: var(--ilw-link--focus-outline);
+        }
+
+        &:hover {
+            color: var(--ilw-profile-card--link-focus);
+        }
+    }
+
+    & > h2,
+    & > h3,
+    & > h4,
+    & > h5,
+    & > h6 {
+        color: var(--ilw-profile-card--heading-color);
+        font-size: var(--ilw-profile-card--heading--font-size);
+
+        &:first-of-type {
+            margin-top: 0;
+        }
+    }
+}
diff --git a/src/ilw-profile-card.js b/src/ilw-profile-card.js
@@ -4,13 +4,15 @@ import { styleMap } from "lit/directives/style-map.js";
 import styles from './ilw-profile-card.styles.css?inline';
 import './ilw-profile-card.css';
 import "@illinois-toolkit/ilw-card";
+import "@illinois-toolkit/ilw-icon";
 
 class ProfileCard extends LitElement {
 
     static get properties() {
         return {
             round: { type: Boolean },
             aspectratio: {},
+            theme: {},
             _hasAddress: { state: true, type: Boolean },
             _hasPhone: { state: true, type: Boolean },
             _hasEmail: { state: true, type: Boolean },
@@ -25,6 +27,7 @@ class ProfileCard extends LitElement {
         super();
         this.round = false;
         this.aspectratio = "";
+        this.theme = "white";
         this._hasAddress = false;
         this._hasPhone = false;
         this._hasEmail = false;
@@ -48,16 +51,28 @@ class ProfileCard extends LitElement {
             aspect: !!this.aspectratio
         }
         return html`
-            <ilw-card aspectRatio=${this.aspectratio ? this.aspectratio : nothing}>
+            <ilw-card aspectRatio=${this.aspectratio ? this.aspectratio : nothing}
+                      theme=${this.theme === "gray" ? "gray" : nothing}>
                 <div class=${classMap(imageClasses)} slot="image">
                     <slot name="image"></slot>
                 </div>
                 <slot name="name"></slot>
-                <slot name="title"></slot>
-                ${ this._hasAddress ? html`<div class="address"><slot name="address"></slot></div>` : '' }
-                ${ this._hasAddress ? html`<div class="phone"><slot name="phone"></slot></div>` : '' }
-                ${ this._hasAddress ? html`<div class="email"><slot name="email"></slot></div>` : '' }
-                <slot></slot>
+                <div class="content">
+                    <slot name="title"></slot>
+                    <div class="address ${this._hasAddress ? '' : 'hidden'}">
+                        <ilw-icon icon="location" size="1.5em"></ilw-icon>
+                        <slot name="address" @slotchange=${this._slotsChanged}></slot>
+                    </div>
+                    <div class="phone ${this._hasPhone ? '' : 'hidden'}">
+                        <ilw-icon icon="phone" size="1.5em"></ilw-icon>
+                        <slot name="phone" @slotchange=${this._slotsChanged}></slot>
+                    </div>
+                    <div class="email ${this._hasEmail ? '' : 'hidden'}">
+                        <ilw-icon icon="email" size="1.5em"></ilw-icon>
+                        <slot name="email" @slotchange=${this._slotsChanged}></slot>
+                    </div>
+                    <slot></slot>
+                </div>
             </ilw-card>
         `;
     }

diff --git a/src/ilw-profile-card.styles.css b/src/ilw-profile-card.styles.css
@@ -1,12 +1,28 @@
+/* Styleable variables are in the base layer so they can be overridden easily */
+@layer base {
+    :host {
+        --ilw-profile-card--font: var(--il-font-sans); /*var: Font for the card content*/
+
+        --ilw-profile-card--heading-color: var(--il-blue); /*var: Color of the heading in the card*/
+        --ilw-profile-card--text-color: var(--ilw-text--color); /*var: Color of text in the card*/
+        --ilw-profile-card--heading--font-size: 1.5em; /*var: Size of headings inside the card*/
+
+        --ilw-profile-card--link: var(--il-industrial); /*var: Color for links inside the card */
+        --ilw-profile-card--link-focus: var(--ilw-link--focused-color); /*var: Focus and hover color for links inside the card*/
+        --ilw-profile-card--link-visited: var(--il-industrial); /*var: Visited link color for inside the card*/
+    }
+}
+
 :host {
     display: block;
+    font-family: var(--ilw-profile-card--font);
 }
 
 .profile-image {
     width: 100%;
 
     ::slotted(*) {
-        max-width: 100%;
+        width: 100%;
     }
 
     &.aspect {
@@ -16,4 +32,28 @@
             object-fit: cover;
         }
     }
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+}
+
+.address, .phone, .email {
+    display: flex;
+    gap: 15px;
+
+    ::slotted(*) {
+        margin: 0;
+    }
+
+    ::slotted([slot=address]) {
+        display: flex;
+        flex-direction: column;
+    }
+
+    &.hidden {
+        display: none;
+    }
 }