From 4119af15285588ec56a425acc5771737beeaff5c Mon Sep 17 00:00:00 2001 From: Mikael Arvola Date: Mon, 30 Sep 2024 18:05:32 -0500 Subject: [PATCH] WIP implementation. --- README.md | 1 + package-lock.json | 10 ++++++++ package.json | 3 ++- samples/index.html | 24 +++++++++---------- src/ilw-profile-card.css | 28 ++++++++++++++++++++++ src/ilw-profile-card.js | 27 ++++++++++++++++----- src/ilw-profile-card.styles.css | 42 ++++++++++++++++++++++++++++++++- 7 files changed, 115 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 54444b1..eb67902 100644 --- 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 index ccd7f73..59d7116 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "MIT", "dependencies": { "@illinois-toolkit/ilw-card": "^1.0.0-beta1", + "@illinois-toolkit/ilw-icon": "^1.0.0-beta", "lit": "3.1.3" }, "devDependencies": { @@ -415,6 +416,15 @@ "lit": "3.1.3" } }, + "node_modules/@illinois-toolkit/ilw-icon": { + "version": "1.0.0-beta", + "resolved": "https://registry.npmjs.org/@illinois-toolkit/ilw-icon/-/ilw-icon-1.0.0-beta.tgz", + "integrity": "sha512-T2qkci2GeLaQG+SkbM751NhhzF48ZDnKZ83pkJsdG9mttRt3oaCJ30TVDSs+hjqEYqmZ+D2fznH9JEnjMuLsow==", + "license": "MIT", + "dependencies": { + "lit": "3.1.3" + } + }, "node_modules/@lit-labs/ssr-dom-shim": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.1.tgz", diff --git a/package.json b/package.json index 1dd3083..23be3e7 100644 --- 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 index 5eb3b4e..67de461 100644 --- a/samples/index.html +++ b/samples/index.html @@ -24,23 +24,23 @@ Photo of First Last in front of the Illini Union.

First & Last Name

Job Title or Description

-
-

110A Education

-

M/C 708

-
+

+ 110A Education + M/C 708 +

217-333-0000

-

example@illinois.edu

+

example@illinois.edu

- + Photo of First Last in front of the Illini Union. -

First & Last Name

+

First & Last Name

Job Title or Description

-
-

110A Education

-

M/C 708

-
+

+ 110A Education + M/C 708 +

217-333-0000

-

example@illinois.edu

+

example@illinois.edu

 diff --git a/src/ilw-profile-card.css b/src/ilw-profile-card.css index e69de29..71dec19 100644 --- 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; + } + } +} \ No newline at end of file diff --git a/src/ilw-profile-card.js b/src/ilw-profile-card.js index 4eac207..4468465 100644 --- a/src/ilw-profile-card.js +++ b/src/ilw-profile-card.js @@ -4,6 +4,7 @@ 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 { @@ -11,6 +12,7 @@ class ProfileCard extends LitElement { 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` - +
- - ${ this._hasAddress ? html`
` : '' } - ${ this._hasAddress ? html`
` : '' } - ${ this._hasAddress ? html`` : '' } - +
+ +
+ + +
+
+ + +
+ + +
`; } diff --git a/src/ilw-profile-card.styles.css b/src/ilw-profile-card.styles.css index ba97aa4..9c8f30b 100644 --- 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; + } } \ No newline at end of file