- ${CXLDashboardHeader(CXLDashboardHeader.args)} ${DashboardSlider()} ${CXLStats(statsCount)}
+
+ ${DashboardSlider()}
+ ${CXLDashboardHeader(CXLDashboardHeader.args)}
${CXLVaadinAccordionThemeCategory()}
${CXLFooterNav()}
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
index cf2b6fc0b..83a70e1f3 100644
--- 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
@@ -1,12 +1,9 @@
import { html } from 'lit';
-import { text } from '@storybook/addon-knobs';
import '@conversionxl/cxl-ui/src/components/cxl-app-layout.js';
import '@conversionxl/cxl-ui/src/components/cxl-marketing-nav.js';
import { CXLMarketingNav } from '../cxl-marketing-nav.stories';
import { CXLDashboardHeader } from '../cxl-dashboard-header/dashboard-header.stories';
-import { CXLFeatureadCourseCard } from '../cxl-featured-course-card/default.stories';
import { DashboardSlider } from '../cxl-featured-course-card/dashboard-slider.stories';
-import { CXLStats } from '../cxl-stats/default.stories';
import { CXLFooterNav } from '../footer-nav.stories';
export default {
@@ -14,45 +11,19 @@ export default {
};
export const CXLDashboardNoContent = () => {
- const boxShadow = text('Box-shadow', 'var(--lumo-box-shadow-l)');
- const statsCount = 4;
-
CXLDashboardHeader.args = {
name: 'Mathias Z',
- lastCourseTitle: 'Advanced experimentation analysis',
- lastCourseLink: 'https://cxl.com',
- hasRoadmap: true,
- notificationCount: '6',
- progress: '0.34',
- lessonsCompleted: '2',
- lessonsTotal: '6',
- cta1: 'Browse all courses',
- cta2: 'Browse fast skills',
- cta3: 'Create your personal learning roadmap',
- cta1Link: 'https://cxl.com',
- cta2Link: 'https://cxl.com',
- cta3Link: 'https://cxl.com',
- };
-
- CXLFeatureadCourseCard.args = {
- id: 'cxl-featured-course-1',
- theme: 'Featured',
- name: 'Get ahead with
Google Analytics 4',
- time: '5h 04min',
- instructor: 'Fred Pike',
- description:
- "
GA4 is packed with new capabilities that help you improve acquisition, engagement, revenue, and retention for your website.
In five hours, we'll have you confident, capable, and armed with new insights into your business and your website. This course pays back for you real quick.
",
- tags: ['Marketing', 'Analytics'],
- ctaUrl: 'https://cxl.com',
- avatar:
- 'https://cxl.com/institute/wp-content/uploads/2020/04/fred-pike-instructor-headshot-1x1-color-bw-min-1024x1024.png',
+ notificationCount: 6,
+ showCompletedStats: true,
+ showContinueSlider: true,
};
return html`
${CXLMarketingNav()}
-
- ${CXLDashboardHeader(CXLDashboardHeader.args)} ${DashboardSlider()} ${CXLStats(statsCount)}
+
+ ${DashboardSlider()}
+ ${CXLDashboardHeader(CXLDashboardHeader.args)}
${CXLFooterNav()}
diff --git a/packages/storybook/cxl-ui/cxl-stats/cxl-stats.data.json b/packages/storybook/cxl-ui/cxl-stats/cxl-stats.data.json
index 54eaef5c9..a12c5c0d2 100644
--- a/packages/storybook/cxl-ui/cxl-stats/cxl-stats.data.json
+++ b/packages/storybook/cxl-ui/cxl-stats/cxl-stats.data.json
@@ -1,18 +1,16 @@
[
{
- "title": "Categories
completed",
- "count": "1"
- },
- {
- "title": "Courses
completed",
+ "title": "Lessons
completed",
"count": "30"
},
{
- "title": "Lessons
completed",
- "count": "95"
+ "title": "Courses
completed",
+ "count": "1",
+ "link": "https://cxl.com"
},
{
- "title": "Complete
library",
- "count": "12%"
+ "title": "Certificates
completed",
+ "count": "95",
+ "link": "https://cxl.com"
}
]
diff --git a/packages/storybook/cxl-ui/cxl-stats/default.stories.js b/packages/storybook/cxl-ui/cxl-stats/default.stories.js
index 69efd0e85..6ba7817ea 100644
--- a/packages/storybook/cxl-ui/cxl-stats/default.stories.js
+++ b/packages/storybook/cxl-ui/cxl-stats/default.stories.js
@@ -8,7 +8,7 @@ export default {
title: 'CXL UI/cxl-stats',
};
-export const CXLStats = ({ statsCount }) => {
+export const CXLStats = ({ statsCount, theme }) => {
for (let i = 0; i < statsCount; i += 1) {
const newItem = {
title: 'Complete
library',
@@ -19,12 +19,14 @@ export const CXLStats = ({ statsCount }) => {
}
return html`
-
+
${statsData.slice(0, statsCount).map(
(el) => html`
-
+
${unsafeHTML(el.title)}
-
${el.count}
+ ${el.link
+ ? html`
${el.count}`
+ : html`
${el.count}
`}
`
)}
@@ -34,7 +36,7 @@ export const CXLStats = ({ statsCount }) => {
Object.assign(CXLStats, {
args: {
- statsCount: 4,
+ statsCount: 3,
},
storyName: 'CXL Stats',
});
diff --git a/packages/storybook/cxl-ui/cxl-stats/theme=cxl-dashboard-header.data.json b/packages/storybook/cxl-ui/cxl-stats/theme=cxl-dashboard-header.data.json
index eadc976b9..a12c5c0d2 100644
--- a/packages/storybook/cxl-ui/cxl-stats/theme=cxl-dashboard-header.data.json
+++ b/packages/storybook/cxl-ui/cxl-stats/theme=cxl-dashboard-header.data.json
@@ -1,15 +1,16 @@
[
{
- "title": "Roadmapped",
- "count": "1
trainings",
- "link": "View"
+ "title": "Lessons
completed",
+ "count": "30"
},
{
- "title": "Completed",
- "count": "2
trainings"
+ "title": "Courses
completed",
+ "count": "1",
+ "link": "https://cxl.com"
},
{
- "title": "Study commitment",
- "count": "2h
/week"
+ "title": "Certificates
completed",
+ "count": "95",
+ "link": "https://cxl.com"
}
]