feat(cxl-ui): implement dashboard card design

conversionxl · Jul 10, 2023 · 2014f41 · 2014f41
1 parent 193eba7
commit 2014f41
Show file tree

Hide file tree

Showing 3 changed files with 242 additions and 3 deletions.
diff --git a/packages/cxl-lumo-styles/src/icons.js b/packages/cxl-lumo-styles/src/icons.js
diff --git 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
@@ -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`<span> | </span>`;
+
+  @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` <slot></slot> `;
+    return html`
+      <!-- Generic Slot, kept for backwards compatibility with current usage of theme="cxl-testimonial" and any other slotted content targeted by global styles -->
+      <slot></slot>
+      <div class="container">
+        <header>
+          <div class="info">
+            <div class="tags">
+              <span class="tag">${this.type}</span>
+              ${this.tags.map(tag => html`${this.separator}<span class="tag" title="${tag}">${tag}</span>`)}
+              ${this.new ? html`${this.separator}<span class="tag new">NEW</span>` : '' } 
+            </div>
+            <div class="title">
+              ${this.title}
+            </div>
+            <div class="attributes">
+              <div class="time">
+                ${this.type === 'Video' ? '' : html`<vaadin-icon icon="lumo:clock"></vaadin-icon>`}
+                ${this.time}
+              </div>
+              <div class="instructor">
+                By: ${this.instructor}
+              </div>
+            </div>
+          </div>
+          <div class="instructor-image">
+            <img
+              src=${this.avatarImage}
+              alt="${this.instructor}"
+            />
+          </div> 
+        </header>
+        <section class="content">
+          <slot name="content"></slot>
+          <div class="tags">
+            ${this.contentTags.map((tag, i) => html`${i === 0 ? '' : this.separator}<span class="tag" title="${tag}"><span>${tag}</span></span>`)}
+          </div>
+        </section>
+        <footer>
+          <vaadin-details theme="reverse">
+            <div slot="summary">Read more</div>
+            <slot name="footer"></slot>
+          </vaadin-details>
+          <vaadin-button class="cta" theme="tertiary">${this.ctaLabel} ${this.type}<vaadin-icon icon="lumo:angle-right"></vaadin-icon> </vaadin-button>
+        </footer>
+        <vaadin-icon class="badge-new" icon="cxl:new"></vaadin-icon>
+      </div> 
+    `;
   }
 
   firstUpdated(_changedProperties) {