feat(cxl-ui): light-card progress updates, header top margin fix

https://app.clickup.com/t/86aydn6th
conversionxl · Nov 6, 2023 · ec11a44 · ec11a44
1 parent 62b2854
commit ec11a44
Show file tree

Hide file tree

Showing 12 changed files with 84 additions and 55 deletions.
diff --git a/packages/cxl-lumo-styles/scss/color.scss b/packages/cxl-lumo-styles/scss/color.scss
@@ -58,6 +58,7 @@ html,
   --lumo-primary-color: hsl(355.8, 74.7%, 48%);
   --lumo-primary-color-2pct: hsla(355.8, 74.7%, 48%, 0.02);
   --lumo-primary-color-10pct: hsla(355.8, 74.7%, 48%, 0.1);
+  --lumo-primary-color-20pct: hsla(355.8, 74.7%, 48%, 0.2);
   --lumo-primary-color-50pct: hsla(355.8, 74.7%, 48%, 0.5);
 
   /**

diff --git a/packages/cxl-ui/scss/cxl-dashboard-header.scss b/packages/cxl-ui/scss/cxl-dashboard-header.scss
@@ -74,18 +74,47 @@
     }
   }
 
+  .header-flex {
+    display: flex;
+    justify-content: space-between;
+
+    @media #{mq.$medium} {
+      flex-direction: column;
+    }
+
+    @media #{mq.$large} {
+      flex-direction: row;
+    }
+  }
+
   .edit-roadmap {
     display: flex;
     align-items: center;
     max-width: fit-content;
     height: fit-content;
     padding: 0 var(--lumo-space-s);
-    margin: 0 auto 0 var(--lumo-space-m);
+    margin-left: var(--lumo-space-s);
     color: var(--lumo-primary-color);
     cursor: pointer;
     background-color: var(--lumo-primary-contrast-color);
     border-radius: var(--lumo-border-radius-s);
 
+    @media #{mq.$medium} {
+      margin-left: 0;
+    }
+
+    @media #{mq.$large} {
+      margin-left: var(--lumo-space-m);
+    }
+
+    .edit-roadmap-text-affix {
+      display: none;
+
+      @media #{mq.$medium} {
+        display: inline;
+      }
+    }
+
     &::part(label) {
       line-height: 1.5;
     }
@@ -118,11 +147,10 @@
   }
 
   .content {
-    margin-top: var(--lumo-space-l);
-
     & + .content {
+      margin-top: var(--lumo-space-l);
       padding-top: var(--lumo-space-l);
-      border-top: 1px solid #d2d5da;
+      border-top: 1px solid var(--lumo-shade-20pct);
     }
   }
 }
diff --git a/packages/cxl-ui/src/components/cxl-dashboard-header.js b/packages/cxl-ui/src/components/cxl-dashboard-header.js
@@ -16,7 +16,7 @@ export class CXLDashboardHeaderElement extends LitElement {
 
   @property({ type: Number, attribute: 'notification-count' }) notificationCount = 0;
 
-  @property({ type: String }) notificationTitle = "What's new in CXL";
+  @property({ type: String, attribute: 'notification-title' }) notificationTitle = "What's new in CXL";
 
   @property({ type: Object }) notificationData = null;
 
@@ -26,25 +26,21 @@ export class CXLDashboardHeaderElement extends LitElement {
 
   @property({ type: String }) name = '';
 
-  @property({ type: Boolean }) showCompletedStats = false;
+  @property({ type: Boolean, attribute: 'show-completed-stats' }) showCompletedStats = false;
 
-  @property({ type: Boolean }) showContinueSlider = false;
+  @property({ type: Boolean, attribute: 'show-continue-slider' }) showContinueSlider = false;
 
-  @property({ type: Boolean }) showRoadmap = false;
+  @property({ type: Boolean, attribute: 'show-roadmap' }) showRoadmap = false;
 
-  @property({ type: Boolean }) showRoadmapStats = false;
+  @property({ type: Boolean, attribute: 'show-roadmap-stats' }) showRoadmapStats = false;
 
-  @property({ type: Boolean }) showRoadmapSlider = false;
+  @property({ type: Boolean, attribute: 'show-roadmap-slider' }) showRoadmapSlider = false;
 
-  @property({ type: String }) editRoadmapLinkUrl = '';
+  @property({ type: String, attribute: 'edit-roadmap-link-url' }) editRoadmapLinkUrl = '';
 
-  @property({ type: String }) editRoadmapLinkText = 'Edit roadmap';
+  @property({ type: String, attribute: 'create-roadmap-link-url' }) createRoadmapLinkUrl = '';
 
-  @property({ type: String }) createRoadmapLinkUrl = '';
-
-  @property({ type: String }) createRoadmapLinkText = 'Create your personal learning roadmap';
-
-  @property({ type: Boolean }) showMinidegrees = false;
+  @property({ type: Boolean, attribute: 'show-minidegrees' }) showMinidegrees = false;
 
   _renderNotifications() {
     if (this.notificationCount > 0) {
@@ -88,21 +84,23 @@ export class CXLDashboardHeaderElement extends LitElement {
       return html`
         <section class="content">
           <header>
-            <h2 class="title">Training Roadmap</h2>
-            ${this.showRoadmapStats ? html`
-              <vaadin-button class="edit-roadmap" onclick="window.location.href='${this.editRoadmapLinkUrl}'">
-                <vaadin-icon slot="prefix" icon="lumo:edit"></vaadin-icon>
-                ${this.editRoadmapLinkText}
-              </vaadin-button>
-              <slot name="roadmap-stats" class="roadmap-stats"></slot>
-            ` : nothing}
+            <div class="header-flex">
+              <h2 class="title">Training Roadmap</h2>
+              ${this.showRoadmapStats ? html`
+                <vaadin-button class="edit-roadmap" onclick="window.location.href='${this.editRoadmapLinkUrl}'">
+                  <vaadin-icon slot="prefix" icon="lumo:edit"></vaadin-icon>
+                  Edit <span class="edit-roadmap-text-affix">roadmap</span>
+                </vaadin-button>
+              ` : nothing}
+            </div>
+            ${this.showRoadmapStats ? html`<slot name="roadmap-stats" class="roadmap-stats"></slot>` : nothing}
           </header>
           ${!this.showRoadmapStats && !this.showRoadmapSlider ? html`
             <vaadin-button
               class="roadmap"
               onclick="window.location.href='${this.createRoadmapLinkUrl}'"
             >
-              ${this.createRoadmapLinkText}
+              Create your personal learning roadmap
               <vaadin-icon icon="lumo:arrow-right"></vaadin-icon>
             </vaadin-button>
           ` : nothing}

diff --git a/packages/cxl-ui/src/components/cxl-light-card.js b/packages/cxl-ui/src/components/cxl-light-card.js
@@ -14,9 +14,11 @@ export class CXLLightCardElement extends CXLBaseCardElement {
     return [...super.styles, cxlLightCardStyles];
   }
 
-  @property({ type: Number }) progress = 0;
+  @property({ type: Boolean }) showProgress = false;
 
-  @property({ type: Number }) lessons = 0;
+  @property({ type: Number, attribute: 'progress-completed' }) progressCompleted = 0;
+
+  @property({ type: Number, attribute: 'progress-total' }) progressTotal = 0;
 
   constructor() {
     super();
@@ -49,14 +51,16 @@ export class CXLLightCardElement extends CXLBaseCardElement {
   }
 
   _renderProgress() {
-    if ( this.progress && this.lessons ) {
+    if ( this.showProgress || ( this.progressCompleted && this.progressTotal ) ) {
       return html`
         <div class="progress">
           <span class="progress-title">
-            Completed ${this.progress} of ${this.lessons}
+            Completed ${this.progressCompleted} of ${this.progressTotal}
           </span>
-          <vaadin-progress-bar value="${this.progress / this.lessons}">
-            Completed ${this.progress} of ${this.lessons}
+          <vaadin-progress-bar
+            value="${this.progressCompleted / this.progressTotal}"
+          >
+            Completed ${this.progressCompleted} of ${this.progressTotal}
           </vaadin-progress-bar>
         </div>
       `;

diff --git a/packages/storybook/cxl-ui/cxl-dashboard-header/dashboard-header.stories.js b/packages/storybook/cxl-ui/cxl-dashboard-header/dashboard-header.stories.js
@@ -19,6 +19,5 @@ CXLDashboardHeader.args = {
   showRoadmapStats: true,
   showRoadmapSlider: true,
   editRoadmapLinkUrl: 'https://cxl.com',
-  editRoadmapLinkText: 'Edit roadmap',
   showMinidegrees: true
 };
diff --git a/packages/storybook/cxl-ui/cxl-dashboard-header/no-history.stories.js b/packages/storybook/cxl-ui/cxl-dashboard-header/no-history.stories.js
@@ -18,6 +18,5 @@ CXLDashboardHeaderNoHistory.args = {
   showRoadmapStats: false,
   showRoadmapSlider: false,
   createRoadmapLinkUrl: 'https://cxl.com',
-  createRoadmapLinkText: 'Create your personal learning roadmap',
   showMinidegrees: false
 };
diff --git a/packages/storybook/cxl-ui/cxl-dashboard-header/template.js b/packages/storybook/cxl-ui/cxl-dashboard-header/template.js
@@ -14,16 +14,14 @@ export const DashboardHeaderTemplate = (header) => html`
     name=${header.name}
     notification-count=${header.notificationCount}
     .notificationData=${notificationData}
-    .showCompletedStats=${header.showCompletedStats}
-    .showContinueSlider=${header.showContinueSlider}
-    .showRoadmap=${header.showRoadmap}
-    .showRoadmapStats=${header.showRoadmapStats}
-    .showRoadmapSlider=${header.showRoadmapSlider}
-    .editRoadmapLinkUrl=${header.editRoadmapLinkUrl}
-    .editRoadmapLinkText=${header.editRoadmapLinkText}
-    .createRoadmapLinkUrl=${header.createRoadmapLinkUrl}
-    .createRoadmapLinkText=${header.createRoadmapLinkText}
-    .showMinidegrees=${header.showMinidegrees}
+    ?show-completed-stats=${header.showCompletedStats}
+    ?show-continue-slider=${header.showContinueSlider}
+    ?show-roadmap=${header.showRoadmap}
+    ?show-roadmap-stats=${header.showRoadmapStats}
+    ?show-roadmap-slider=${header.showRoadmapSlider}
+    ?edit-roadmap-link-url=${header.editRoadmapLinkUrl}
+    ?create-roadmap-link-url=${header.createRoadmapLinkUrl}
+    ?show-minidegrees=${header.showMinidegrees}
   >
     <div slot="completed-stats">
       ${CXLStats({ theme: 'cxl-stats-dashboard-header completed', statsCount: 3 })}
@@ -35,7 +33,11 @@ export const DashboardHeaderTemplate = (header) => html`
       ${CXLLightCardSlider({ theme: 'cxl-slider-dashboard-header', length: 8 })}
     </div>
     <div slot="next-slider">
-      ${CXLLightCardSlider({ theme: 'cxl-slider-dashboard-header portrait', length: 16, args: { theme: 'portrait' } })}
+      ${CXLLightCardSlider({
+        theme: 'cxl-slider-dashboard-header portrait',
+        length: 16,
+        args: { theme: 'portrait' }
+      })}
     </div>
     <div slot="minidegree-slider">
       ${CXLLightCardSlider({ theme: 'cxl-slider-dashboard-header', length: 8, args: { theme: 'minidegree', progress: null, avatar: '' } })}

diff --git a/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-layout.stories.js b/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-layout.stories.js
@@ -21,7 +21,6 @@ export const CXLDashboard = () => {
     showRoadmapStats: true,
     showRoadmapSlider: true,
     editRoadmapLinkUrl: 'https://cxl.com',
-    editRoadmapLinkText: 'Edit roadmap',
     showMinidegrees: true
   };
 

diff --git a/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-no-content.stories.js b/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-no-content.stories.js
@@ -20,7 +20,6 @@ export const CXLDashboardNoContent = () => {
     showRoadmapStats: true,
     showRoadmapSlider: true,
     editRoadmapLinkUrl: 'https://cxl.com',
-    editRoadmapLinkText: 'Edit roadmap',
     showMinidegrees: true
   };
 

diff --git a/packages/storybook/cxl-ui/cxl-light-card/default.stories.js b/packages/storybook/cxl-ui/cxl-light-card/default.stories.js
@@ -27,8 +27,8 @@ CXLLightCard.args = {
 CXLLightCardProgress.args = {
   theme: 'light-card',
   name: 'Account based marketing',
-  progress: 3,
-  lessons: 10,
+  progressCompleted: 3,
+  progressTotal: 10,
   avatar: 'https://cxl.com/institute/wp-content/uploads/2020/07/ben-labay_team_headshot-1x1-bw-min-150x150.png',
 };
 

diff --git a/packages/storybook/cxl-ui/cxl-light-card/light-card-slider.stories.js b/packages/storybook/cxl-ui/cxl-light-card/light-card-slider.stories.js
@@ -13,17 +13,17 @@ CXLLightCard.args = {
   theme: 'light-card',
   name: 'Account based marketing',
   avatar: 'https://cxl.com/institute/wp-content/uploads/2020/05/48192546_10156982340630746_8127333122065825792_n-wpv_400pxx400px_center_center.jpg',
-  progress: 3,
-  lessons: 12
+  progressCompleted: 3,
+  progressTotal: 12
 };
 
 const CXLLightCard2 = Template.bind({});
 CXLLightCard2.args = {
   ...CXLLightCard.args,
   name: 'Basics of Casual Inference',
   avatar: '',
-  progress: 7,
-  lessons: 9
+  progressCompleted: 7,
+  progressTotal: 9
 };
 
 const CXLLightCard3 = Template.bind({});

diff --git a/packages/storybook/cxl-ui/cxl-light-card/template.js b/packages/storybook/cxl-ui/cxl-light-card/template.js
@@ -8,8 +8,8 @@ export const Template = (card) => html`
     time="${card.time}"
     instructor="${card.instructor}"
     avatar="${card.avatar}"
-    progress="${card.progress}"
-    lessons="${card.lessons}"
+    progress-completed="${card.progressCompleted}"
+    progress-total="${card.progressTotal}"
     .new="${card.new}"
     .completed="${card.completed}"
   >