feat(cxl-ui): cxl-light-card add portrait mode, progress bar

https://app.clickup.com/t/86ayhhg16
conversionxl · Oct 31, 2023 · dcb3e24 · dcb3e24
1 parent 8ce32ba
commit dcb3e24
Show file tree

Hide file tree

Showing 8 changed files with 164 additions and 15 deletions.
diff --git a/packages/cxl-lumo-styles/scss/badge.scss b/packages/cxl-lumo-styles/scss/badge.scss
@@ -12,6 +12,11 @@
   background-color: var(--cxl-color-brand-blue);
 }
 
+[theme~="badge"][theme~="tertiary"] {
+  color: var(--lumo-primary-contrast-color);
+  background-color: var(--cxl-color-dark-green);
+}
+
 .course-skills {
   [theme~="badge"] {
     margin-right: var(--lumo-space-s);

diff --git a/packages/cxl-lumo-styles/scss/global.scss b/packages/cxl-lumo-styles/scss/global.scss
@@ -13,6 +13,7 @@ html {
   --cxl-color-black-50pct: hsla(0, 0%, 0%, 0.5);
   --cxl-color-brand-blue: hsla(214, 61%, 25%, 1);
   --cxl-color-light-pink: hsl(353, 73%, 96%, 1);
+  --cxl-color-dark-green: hsl(148, 57%, 24%, 1);
 
   /**
    * Lumo Icons have a documented 4px "safe area" around them. Vaadin Icons don't, for unknown reasons.

diff --git a/packages/cxl-ui/scss/cxl-base-card.scss b/packages/cxl-ui/scss/cxl-base-card.scss
@@ -157,7 +157,7 @@ header {
     }
 
     .name {
-      @include mixins.ellipsis-for-lines(2);
+      @include mixins.ellipsis-for-lines(3);
       font-family: var(--lumo-font-family);
       font-size: var(--lumo-font-size-xl);
       font-style: normal;
@@ -213,12 +213,12 @@ header {
   }
 }
 
-.badge-new {
+.icon-new {
   display: none;
 }
 
 :host([new]) {
-  .badge-new {
+  .icon-new {
     position: absolute;
     top: calc(-1 * var(--lumo-space-s));
     right: calc(-1 * var(--lumo-space-s));

diff --git a/packages/cxl-ui/scss/cxl-light-card.scss b/packages/cxl-ui/scss/cxl-light-card.scss
@@ -3,14 +3,23 @@
   max-width: 300px;
   height: auto;
   min-height: calc(3 * var(--lumo-space-xl));
-  padding: var(--lumo-space-m);
+  padding: var(--lumo-space-m) var(--lumo-space-m) var(--lumo-space-s);
+  overflow: hidden;
 
-  .container > .attributes {
-    display: none;
+  .container {
+    padding-right: 112px; // image width
+
+    & > .attributes {
+      display: none;
+    }
   }
 
   header {
+    height: 100%;
+
     .info {
+      max-width: none;
+
       .name {
         font-size: var(--lumo-font-size-m);
         font-weight: 600;
@@ -20,6 +29,7 @@
         display: flex;
         flex-direction: column;
         align-items: flex-start;
+        margin-top: auto;
         padding-top: var(--lumo-space-xs);
         padding-bottom: 0;
         gap: var(--lumo-space-xs);
@@ -30,10 +40,58 @@
       }
     }
 
+    .instructor-preposition {
+      display: none;
+    }
+
     .instructor-image {
-      height: 80px;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 112px;
+      height: auto;
+      border-radius: 0;
+      border-bottom-right-radius: var(--lumo-border-radius-l);
+      overflow: hidden;
+
+      img {
+        display: block;
+        width: 100%;
+        height: auto;
+        margin-top: auto;
+      }
     }
   }
+
+  .progress {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    font-size: var(--lumo-font-size-xs);
+    line-height: var(--lumo-line-height-s);
+    color: var(--lumo-body-text-color);
+  }
+}
+
+.badge-new {
+  display: none;
+}
+
+:host([new]) {
+  .badge-new {
+    position: absolute;
+    right: var(--lumo-space-s);
+    bottom: var(--lumo-space-s);
+    display: block;
+    padding: calc(var(--lumo-space-xs) / 2) var(--lumo-space-s);
+    font-size: var(--lumo-font-size-s);
+    font-weight: 700;
+    line-height: var(--lumo-line-height-s);
+    color: var(--lumo-primary-contrast-color);
+    border-radius: calc(var(--lumo-border-radius-l) * 6);
+    background: var(--lumo-primary-color);
+    z-index: 2;
+  }
 }
 
 :host([completed]) {
@@ -66,3 +124,46 @@
     color: var(--lumo-tint-40pct);
   }
 }
+
+:host([theme~="portrait"]) {
+  display: block;
+  width: 175px;
+  min-width: 0;
+  padding: 0;
+
+  .container {
+    display: block;
+    padding: 0;
+  }
+
+  header {
+    display: block;
+  }
+
+  .info {
+    padding: var(--lumo-space-s);
+
+    .attributes {
+      display: none;
+    }
+  }
+
+  .progress {
+    display: none;
+  }
+
+  .instructor-image {
+    position: relative;
+    width: 100%;
+    height: auto;
+    margin-top: var(--lumo-space-s);
+    border-radius: 0;
+
+    img {
+      display: block;
+      width: 100%;
+      height: auto;
+      margin-top: auto;
+    }
+  }
+}
diff --git a/packages/cxl-ui/src/components/cxl-base-card.js b/packages/cxl-ui/src/components/cxl-base-card.js
@@ -66,7 +66,7 @@ export class CXLBaseCardElement extends LitElement {
               ? html`<cxl-time time=${this.time} ?show-icon=${this.showTimeIcon}></cxl-time>`
               : nothing}
             ${this.instructor
-              ? html`<div class="instructor">By: ${this.instructor}</div>`
+              ? html`<div class="instructor"><span class="instructor-preposition">By: </span>${this.instructor}</div>`
               : nothing}
           </div>`
         : nothing}

diff --git a/packages/cxl-ui/src/components/cxl-light-card.js b/packages/cxl-ui/src/components/cxl-light-card.js
@@ -3,6 +3,7 @@ import { html, nothing } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { customElement, property } from 'lit/decorators.js';
 import '@conversionxl/cxl-lumo-styles';
+import '@vaadin/progress-bar';
 import cxlLightCardStyles from '../styles/cxl-light-card-css.js';
 import { CXLBaseCardElement } from './cxl-base-card.js';
 
@@ -12,6 +13,10 @@ export class CXLLightCardElement extends CXLBaseCardElement {
     return [...super.styles, cxlLightCardStyles];
   }
 
+  @property({ type: Number }) progress = 0;
+
+  @property({ type: Number }) lessons = 0;
+
   constructor() {
     super();
     this.showTimeIcon = true;
@@ -28,6 +33,10 @@ export class CXLLightCardElement extends CXLBaseCardElement {
     this.requestUpdate('showTags', this._showTags);
   }
 
+  _renderNewBadge() {
+    return this.new ? html`<span class="badge-new">NEW</span>` : nothing;
+  }
+
   _renderHeaderName() {
     return html`
       <div class="name" title=${this.name}>
@@ -38,12 +47,30 @@ export class CXLLightCardElement extends CXLBaseCardElement {
     `;
   }
 
+  _renderProgress() {
+    if ( this.progress && this.lessons ) {
+      return html`
+        <div class="progress">
+          <span class="progress-title">
+            Completed ${this.progress} of ${this.lessons}
+          </span>
+          <vaadin-progress-bar value="${this.progress / this.lessons}">
+            Completed ${this.progress} of ${this.lessons}
+          </vaadin-progress-bar>
+        </div>
+      `;
+    }
+
+    return nothing;
+  }
+
   render() {
     return html`
       <div class="container">
         ${this._renderHeader()}
+        ${this._renderProgress()}
         <slot name="footer"></slot>
-        <vaadin-icon class="badge-new" icon="cxl:new"></vaadin-icon>
+        ${this._renderNewBadge()}
       </div>
     `;
   }

diff --git a/packages/storybook/cxl-ui/cxl-light-card/default.stories.js b/packages/storybook/cxl-ui/cxl-light-card/default.stories.js
@@ -10,6 +10,8 @@ export default {
 };
 
 export const CXLLightCard = Template.bind({});
+export const CXLLightCardProgress = Template.bind({});
+export const CXLLightCardPortrait = Template.bind({});
 export const CXLLightCardMinidegree = Template.bind({});
 export const CXLLightCardFooter = Template.bind({});
 
@@ -18,23 +20,34 @@ CXLLightCard.args = {
   new: false,
   completed: false,
   name: 'Account based marketing',
-  time: '3h 00min',
   instructor: 'Ton Wesseling',
-  avatar:
-    'https://cxl.com/institute/wp-content/uploads/2020/05/48192546_10156982340630746_8127333122065825792_n-wpv_400pxx400px_center_center.jpg',
-  footer: '',
+  avatar: 'https://cxl.com/institute/wp-content/uploads/2020/07/ben-labay_team_headshot-1x1-bw-min-150x150.png',
+};
+
+CXLLightCardProgress.args = {
+  theme: 'light-card',
+  name: 'Account based marketing',
+  progress: 3,
+  lessons: 10,
+  avatar: 'https://cxl.com/institute/wp-content/uploads/2020/07/ben-labay_team_headshot-1x1-bw-min-150x150.png',
+};
+
+CXLLightCardPortrait.args = {
+  theme: 'light-card portrait',
+  name: 'Account based marketing',
+  instructor: 'Ton Wesseling',
+  avatar: 'https://cxl.com/institute/wp-content/uploads/2020/07/ben-labay_team_headshot-1x1-bw-min-150x150.png',
 };
 
 CXLLightCardMinidegree.args = {
   theme: 'minidegree',
   new: false,
   completed: false,
   name: 'Digital analytics',
-  time: '43h 00min',
 };
 
 CXLLightCardFooter.args = {
   ...CXLLightCard.args,
   footer:
-    '<span theme="badge primary pill">Team Roadmap</span> <span theme="badge secondary pill">Personal Roadmap</span>',
+    '<span theme="badge tertiary pill">Team</span> <span theme="badge secondary pill">Personal</span>',
 };
diff --git a/packages/storybook/cxl-ui/cxl-light-card/template.js b/packages/storybook/cxl-ui/cxl-light-card/template.js
@@ -8,6 +8,8 @@ export const Template = (card) => html`
     time="${card.time}"
     instructor="${card.instructor}"
     avatar="${card.avatar}"
+    progress="${card.progress}"
+    lessons="${card.lessons}"
     .new="${card.new}"
     .completed="${card.completed}"
   >