- ${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..6eb7ddce2 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,24 @@ 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,
+ showRoadmap: true,
+ showRoadmapStats: true,
+ showRoadmapSlider: true,
+ editRoadmapLinkUrl: 'https://cxl.com',
+ showMinidegrees: true
};
return html`
${CXLMarketingNav()}
-
- ${CXLDashboardHeader(CXLDashboardHeader.args)} ${DashboardSlider()} ${CXLStats(statsCount)}
+
+ ${DashboardSlider()}
+ ${CXLDashboardHeader(CXLDashboardHeader.args)}
${CXLFooterNav()}
diff --git a/packages/storybook/cxl-ui/cxl-light-card/default.stories.js b/packages/storybook/cxl-ui/cxl-light-card/default.stories.js
index 1af5e1fad..55f9f3320 100644
--- 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
index 88c67a5da..58fbdf8a2 100644
--- 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
@@ -12,55 +12,46 @@ const CXLLightCard = Template.bind({});
CXLLightCard.args = {
theme: 'light-card',
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',
+ avatar: 'https://cxl.com/institute/wp-content/uploads/2020/05/48192546_10156982340630746_8127333122065825792_n-wpv_400pxx400px_center_center.jpg',
+ progressCompleted: 3,
+ progressTotal: 12
};
const CXLLightCard2 = Template.bind({});
CXLLightCard2.args = {
...CXLLightCard.args,
name: 'Basics of Casual Inference',
- time: '',
- instructor: 'Georgi Georgiev',
avatar: '',
+ progressCompleted: 7,
+ progressTotal: 9
};
const CXLLightCard3 = Template.bind({});
CXLLightCard3.args = {
...CXLLightCard.args,
name: 'Best Practices',
- time: '1h 30min',
- instructor: 'Peep Laja',
- avatar: 'https://cxl.com/institute/wp-content/uploads/2019/09/peep-1x1-transparent-150x150.png',
+ avatar: 'https://cxl.com/institute/wp-content/uploads/2019/09/peep-1x1-transparent-150x150.png'
};
-export const CXLLightCardSlider = ({ numberOfCards, theme }) => html`
+export const CXLLightCardSlider = ({ theme, length, args }) => html`
${Array.from(
- { length: Math.floor(numberOfCards / 3) },
+ { length: Math.floor(length / 3) },
() => html`
- ${CXLLightCard({
- ...CXLLightCard.args,
- })}
- ${CXLLightCard2({
- ...CXLLightCard2.args,
- })}
- ${CXLLightCard3({
- ...CXLLightCard3.args,
- })}
+
+ ${CXLLightCard({ ...CXLLightCard.args, ...args })}
+
+
+ ${CXLLightCard2({ ...CXLLightCard2.args, ...args })}
+
+
+ ${CXLLightCard3({ ...CXLLightCard3.args, ...args })}
+
`
)}
`;
CXLLightCardSlider.args = {
- numberOfCards: 3,
+ length: 3,
};
diff --git a/packages/storybook/cxl-ui/cxl-light-card/template.js b/packages/storybook/cxl-ui/cxl-light-card/template.js
index 44a4bf38d..354920d9b 100644
--- a/packages/storybook/cxl-ui/cxl-light-card/template.js
+++ b/packages/storybook/cxl-ui/cxl-light-card/template.js
@@ -8,11 +8,11 @@ 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}"
>
- ${card.footer ? html`
${unsafeHTML(card.footer)} ` : nothing}
+ ${card.footer ? html`
${unsafeHTML(card.footer)}
` : nothing}
`;
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..f3a4f742f 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 = ({ theme, statsCount }) => {
for (let i = 0; i < statsCount; i += 1) {
const newItem = {
title: 'Complete
library',
@@ -19,22 +19,24 @@ export const CXLStats = ({ statsCount }) => {
}
return html`
-
+
${statsData.slice(0, statsCount).map(
- (el) => html`
-
+ (el) => html`
+
${unsafeHTML(el.title)}
-
${el.count}
+ ${el.link
+ ? html`
${el.count} `
+ : html`
${el.count}
`}
`
- )}
+ )}
`;
};
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"
}
]
diff --git a/packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-dashboard-category.story.js b/packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-dashboard-category.story.js
index ccfce3552..67b69d13b 100644
--- a/packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-dashboard-category.story.js
+++ b/packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-dashboard-category.story.js
@@ -54,7 +54,7 @@ export const CXLVaadinAccordionThemeCategory = () => html`
Object.assign(CXLLightCardSlider, {
args: {
- numberOfCards: 8,
+ length: 8,
theme: 'cxl-category-accordion',
},
});