feat(cxl-ui): cxl-dashboard-section info area, stats count updates

https://app.clickup.com/t/86ayg4prn
conversionxl · Dec 14, 2023 · c26cc3b · c26cc3b
1 parent 9b77640
commit c26cc3b
Show file tree

Hide file tree

Showing 11 changed files with 99 additions and 13 deletions.
diff --git a/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss b/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss
@@ -263,7 +263,7 @@
   }
 }
 
-:host([theme~="cxl-course-slider"][theme~="cxl-slider-dashboard-header"]) {
+:host([theme~="cxl-course-slider"][theme~="portrait"]) {
   ::slotted(vaadin-tab) {
     width: auto;
     max-width: 300px;

diff --git a/packages/cxl-ui/scss/cxl-app-layout/_layout.scss b/packages/cxl-ui/scss/cxl-app-layout/_layout.scss
@@ -125,3 +125,16 @@ slot[name="action-bar"]::slotted(div) {
     }
   }
 }
+
+/**
+ * Course layout
+ */
+:host([layout^="1c"][theme~="cxl-course"]:not([layout="1c"])) {
+  overflow: hidden;
+
+  main {
+    > slot {
+      padding: 0;
+    }
+  }
+}
diff --git a/packages/cxl-ui/scss/cxl-section.scss b/packages/cxl-ui/scss/cxl-section.scss
@@ -15,12 +15,6 @@
   }
 }
 
-:host([theme~="cxl-section-certificate-unfinished"]) {
-  @media #{mq.$medium} {
-    @include cxl-mixins.pesudo-element-full-width(var(--cxl-color-medium-gray));
-  }
-}
-
 /**
  * Avoid margin collapse with background.
  */
@@ -66,6 +60,11 @@
     padding-top: var(--lumo-space-m);
     padding-bottom: var(--lumo-space-xl);
   }
+
+  :host([theme~="course-section"]) > & {
+    margin-top: var(--lumo-space-xl);
+    margin-bottom: var(--lumo-space-xl);
+  }
 }
 
 :host(.has-gray-background-color) {

diff --git a/packages/cxl-ui/scss/cxl-stats.scss b/packages/cxl-ui/scss/cxl-stats.scss
@@ -27,3 +27,9 @@
     grid-template-columns: repeat(3, 1fr);
   }
 }
+
+:host([theme~="cxl-stats-categories"]) {
+  @media #{mq.$medium} {
+    gap: var(--lumo-space-l);
+  }
+}
diff --git a/packages/cxl-ui/scss/global/cxl-dashboard-section.scss b/packages/cxl-ui/scss/global/cxl-dashboard-section.scss
@@ -124,6 +124,43 @@ cxl-dashboard-section {
     color: var(--cxl-color-black-50pct);
   }
 
+  .info-2 {
+    display: block;
+    margin-top: var(--lumo-space-l);
+    margin-bottom: var(--lumo-space-l);
+
+    @media #{mq.$medium} {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: var(--lumo-space-m);
+      margin-bottom: var(--lumo-space-m);
+    }
+  }
+
+  .cta {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-top: var(--lumo-space-m);
+    font-family: var(--cxl-lumo-font-secondary);
+
+    @media #{mq.$medium} {
+      flex-direction: row;
+      align-items: center;
+      gap: var(--lumo-space-l);
+      margin-top: 0;
+    }
+
+    vaadin-button {
+      margin-top: var(--lumo-space-s);
+
+      @media #{mq.$medium} {
+        margin-top: 0;
+      }
+    }
+  }
+
   cxl-tabs-slider {
     padding: var(--lumo-space-s) 0;
   }

diff --git a/packages/cxl-ui/scss/global/cxl-section.scss b/packages/cxl-ui/scss/global/cxl-section.scss
@@ -29,3 +29,9 @@ cxl-section#view-hero, cxl-section[theme~="cxl-hero"] {
   }
 
 }
+
+cxl-section[theme~="course-section"] {
+  & + & {
+    border-top: 1px solid var(--cxl-color-medium-gray);
+  }
+}
diff --git a/packages/cxl-ui/scss/global/cxl-stats.scss b/packages/cxl-ui/scss/global/cxl-stats.scss
@@ -15,14 +15,23 @@ cxl-stats {
   }
 
   .stat-count {
+    display: flex;
+    align-items: center;
+    gap: var(--lumo-space-xs);
     margin: 0;
     font-size: var(--lumo-font-size-xxl);
+    font-family: var(--lumo-font-family);
     font-weight: 700;
     line-height: 1.3;
 
     small {
       font-size: var(--lumo-font-size-l);
     }
+
+    vaadin-icon {
+      width: calc(var(--lumo-icon-size-m) / 2);
+      height: calc(var(--lumo-icon-size-m) / 2);
+    }
   }
 
   .stat-item.featured .stat-count {

diff --git a/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-section.stories.js b/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-section.stories.js
@@ -4,6 +4,7 @@ import '@conversionxl/cxl-lumo-styles';
 import '@conversionxl/cxl-ui/src/components/cxl-dashboard-section.js';
 import '@vaadin/progress-bar';
 import { CXLLightCardSlider } from '../cxl-light-card/light-card-slider.stories';
+import { CXLStats } from '../cxl-stats/default.stories';
 
 export default {
   title: 'CXL UI/cxl-dashboard',
@@ -46,14 +47,21 @@ const Template = (section) => html`
           <span class="progress-label">Progress: </span>
           <vaadin-progress-bar value="0.5"></vaadin-progress-bar>
         </div>
+        <div class="info-2">
+          ${CXLStats({ theme: 'cxl-stats-categories', statsCount: 3 })}
+          <div class="cta">
+            Feeling ready for the exam?
+            <vaadin-button theme="primary small">${section.title} exam</vaadin-button>
+          </div>
+        </div>
         <div class="section-3">
           <div class="section-4">
             <div class="entry-title">
               <h6 class="title-3">Demand Creation</h6>
               /
               <h6 class="title-4">Organic Content</h6>
             </div>
-            ${CXLLightCardSlider(CXLLightCardSlider.args)}
+            ${CXLLightCardSlider({ ...CXLLightCardSlider.args, theme: 'cxl-category-slider' })}
           </div>
         </div>
       </div>

diff --git a/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-sections.stories.js b/packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-sections.stories.js
@@ -5,6 +5,7 @@ import '@conversionxl/cxl-ui/src/components/cxl-dashboard-section.js';
 import '@vaadin/progress-bar';
 import categoryData from '../cxl-vaadin-accordion/theme=cxl-dashboard-category.data.json';
 import { CXLLightCardSlider } from '../cxl-light-card/light-card-slider.stories';
+import { CXLStats } from '../cxl-stats/default.stories';
 
 export default {
   title: 'CXL UI/cxl-dashboard',
@@ -37,6 +38,13 @@ export const CXLDashboardSections = () => html`
                     <span class="progress-label">Progress: </span>
                     <vaadin-progress-bar value="${section.progress}"></vaadin-progress-bar>
                   </div>
+                  <div class="info-2">
+                    ${CXLStats({ theme: 'cxl-stats-categories', statsCount: 3 })}
+                    <div class="cta">
+                      Feeling ready for the exam?
+                      <vaadin-button theme="primary small">${section.title} exam</vaadin-button>
+                    </div>
+                  </div>
                   ${section.sections.map(
                     (item) => html`
                       <div class="section-3">
@@ -48,7 +56,7 @@ export const CXLDashboardSections = () => html`
                                 /
                                 <h6 class="title-4">${itemSection.title}</h6>
                               </div>
-                              ${CXLLightCardSlider(CXLLightCardSlider.args)}
+                              ${CXLLightCardSlider({ ...CXLLightCardSlider.args, theme: 'cxl-category-slider' })}
                             </div>
                           `
                         )}

diff --git a/packages/storybook/cxl-ui/cxl-stats/cxl-stats.data.json b/packages/storybook/cxl-ui/cxl-stats/cxl-stats.data.json
@@ -1,12 +1,12 @@
 [
   {
     "title": "Lessons<br>completed",
-    "count": "30"
+    "count": "<small>96%</small><vaadin-icon icon=\"lumo:arrow-right\"></vaadin-icon>100%"
   },
   {
     "title": "Courses<br>completed",
     "count": "1",
-    "link": "https://cxl.com"
+    "featured": true
   },
   {
     "title": "Certificates<br>completed",

diff --git a/packages/storybook/cxl-ui/cxl-stats/default.stories.js b/packages/storybook/cxl-ui/cxl-stats/default.stories.js
@@ -25,8 +25,8 @@ export const CXLStats = ({ theme, statsCount }) => {
         <div class="stat-item ${el.featured ? 'featured' : ''}">
           <h4 class="stat-title">${unsafeHTML(el.title)}</h4>
           ${el.link
-            ? html`<a class="stat-count" href="${el.link}">${el.count}</a>`
-            : html`<p class="stat-count">${el.count}</p>`}
+            ? html`<a class="stat-count" href="${el.link}">${unsafeHTML(el.count)}</a>`
+            : html`<p class="stat-count">${unsafeHTML(el.count)}</p>`}
         </div>
       `)}
     </cxl-stats>
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,3 +29,9 @@ cxl-section#view-hero, cxl-section[theme~="cxl-hero"] { @@
       }
     }
+    cxl-section[theme~="course-section"] {
+      & + & {
+        border-top: 1px solid var(--cxl-color-medium-gray);
+      }
+    }