diff --git a/packages/cxl-lumo-styles/src/icons.js b/packages/cxl-lumo-styles/src/icons.js index 677423744..a35fb45d1 100644 --- a/packages/cxl-lumo-styles/src/icons.js +++ b/packages/cxl-lumo-styles/src/icons.js @@ -53,6 +53,9 @@ $documentContainer.innerHTML = ` + + + diff --git a/packages/cxl-ui/scss/cxl-card.scss b/packages/cxl-ui/scss/cxl-card.scss index afc382f35..0a0bd6c1f 100644 --- a/packages/cxl-ui/scss/cxl-card.scss +++ b/packages/cxl-ui/scss/cxl-card.scss @@ -1,6 +1,6 @@ :host { display: block; - padding: var(--lumo-space-m); + padding: var(--lumo-space-m) var(--lumo-space-l); margin-top: var(--lumo-space-m); margin-bottom: var(--lumo-space-m); overflow: hidden; // CSS columns @see https://stackoverflow.com/a/19348665/35946 @@ -10,6 +10,10 @@ box-shadow: var(--lumo-box-shadow-xs); break-inside: avoid; transform: translateZ(0); // CSS columns @see https://stackoverflow.com/a/55110789/35946 + + .container { + display: none; + } } :host(:hover) { @@ -32,6 +36,165 @@ background-color: var(--lumo-contrast); } +/** + * CXL 2.0 +*/ + +:host([theme~="cxl-course"]) { + position: relative; + margin-top: initial; + margin-bottom: initial; + height: max-content; + overflow: initial; + font-size: var(--lumo-font-size-s); + + .container { + display: flex; + flex-direction: column; + gap: var(--lumo-space-s); + } + + header { + display: flex; + align-items: start; + justify-content: space-between; + gap: var(--lumo-space-m); + + .info { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: var(--lumo-space-xs); + flex: 1 0 0; + align-self: stretch; + max-width: calc(100% - var(--lumo-space-m) - 80px); + overflow: hidden; + + .title { + color: #1A1A1A; + font-size: var(--lumo-font-size-xl); + font-family: Roboto; + font-style: normal; + font-weight: 700; + line-height: var(--lumo-line-height-xs); + } + + .attributes { + display: flex; + padding: var(--lumo-space-s) 0; + align-items: flex-start; + gap: var(--lumo-space-s); + align-self: stretch; + color: var(--lumo-shade-60pct); + } + } + + .instructor-image { + height: 92px; + width: 80px; + + img { + height: 80px; + border-radius: 100px; + overflow: hidden; + } + } + + .tag { + &:first-child, &.new { + color: var(--lumo-primary-color) + } + } + } + + .tags { + display: flex; + gap: var(--lumo-space-s); + max-width: 100%; + overflow: hidden; + + .tag:not(:first-child) { + overflow: hidden; + text-overflow: ellipsis; + } + } + + .content { + .tags { + span { + font-style: italic; + } + } + } + + footer { + position: relative; + + vaadin-details[theme="reverse"] { + &::part(summary) { + justify-content: flex-start; + gap: var(--lumo-space-s); + font-size: var(--lumo-font-size-s); + } + + &::part(toggle) { + padding: calc(var(--lumo-space-xs) / 4); + margin-left: initial; + font-size: var(--lumo-font-size-m); + transform: rotate(90deg); + } + + &[opened]::part(toggle) { + transform: rotate(-90deg); + } + + &::part(summary-content) { + color: var(--lumo-contrast); + font-weight: bold; + } + + &::part(content) { + padding-bottom: 0; + } + } + + vaadin-button.cta { + position: absolute; + top: 0; + right: 0; + font-weight: bold; + + vaadin-icon { + background: var(--lumo-primary-color-10pct); + border-radius: 100%; + margin-left: var(--lumo-space-xs); + height: var(--lumo-icon-size-s); + width: var(--lumo-icon-size-s); + padding: calc(var(--lumo-space-xs) / 2); + } + } + } + + vaadin-icon.badge-new { + display: none; + } +} + +:host([theme="cxl-dashboard"][new]) { + vaadin-icon.badge-new { + display: block; + position: absolute; + top: calc(-1 * var(--lumo-space-s)); + right: calc(-1 * var(--lumo-space-s)); + height: calc(2 * var(--lumo-space-m)); + width: calc(2 * var(--lumo-space-m)); + background: var(--lumo-primary-color); + padding: 6px; + color: var(--lumo-primary-contrast-color); + border-radius: 100%; + } +} + /** * Slots. */ diff --git a/packages/cxl-ui/src/components/cxl-card.js b/packages/cxl-ui/src/components/cxl-card.js index 5df7a37d1..5ccc1b72a 100644 --- a/packages/cxl-ui/src/components/cxl-card.js +++ b/packages/cxl-ui/src/components/cxl-card.js @@ -1,5 +1,6 @@ +/* eslint-disable import/no-extraneous-dependencies */ import { LitElement, html } from 'lit'; -import { customElement } from 'lit/decorators.js'; +import { customElement, property } from 'lit/decorators.js'; import '@conversionxl/cxl-lumo-styles'; import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils'; import cxlCardGlobalStyles from '../styles/global/cxl-card-css.js'; @@ -11,8 +12,80 @@ export class CXLCardElement extends LitElement { return [cxlCardStyles]; } + separator = html` | `; + + @property({ type: String }) id = ''; + + @property({ type: String }) type = 'Course'; + + @property({ type: Array }) tags = []; + + @property({ type: Array, attribute: 'content-tags' }) contentTags = []; + + @property({ type: String }) title = ''; + + @property({ type: String }) time = ''; + + @property({ type: String }) instructor = ''; + + @property({ type: String, attribute: 'avatar-image' }) avatarImage = ''; + + @property({ type: Boolean, reflect: true }) new = false; + + @property({ type: String, attribute: 'cta-label' }) ctaLabel = 'View'; + + @property({ type: Boolean, attribute: 'cta-url' }) ctaUrl = false; + + @property({ type: String, attribute: 'more' }) more = ''; + render() { - return html` `; + return html` + + +
+
+
+
+ ${this.type} + ${this.tags.map(tag => html`${this.separator}${tag}`)} + ${this.new ? html`${this.separator}NEW` : '' } +
+
+ ${this.title} +
+
+
+ ${this.type === 'Video' ? '' : html``} + ${this.time} +
+
+ By: ${this.instructor} +
+
+
+
+ ${this.instructor} +
+
+
+ +
+ ${this.contentTags.map((tag, i) => html`${i === 0 ? '' : this.separator}${tag}`)} +
+
+
+ +
Read more
+ + + ${this.ctaLabel} ${this.type} +
+ +
+ `; } firstUpdated(_changedProperties) {