forked from web-padawan/aybolit
-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(cxl-ui): implement dashboard card design
- Loading branch information
1 parent
b8fe9e0
commit cbdccd8
Showing
6 changed files
with
335 additions
and
3 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
41 changes: 41 additions & 0 deletions
41
packages/storybook/cxl-ui/cxl-card/[theme=cxl-course]-dashboard.stories.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import { html } from 'lit'; | ||
| import '@conversionxl/cxl-ui/src/components/cxl-card.js'; | ||
| import '@conversionxl/cxl-lumo-styles'; | ||
| import { CourseCardTemplate } from './template.js'; | ||
| import { CXLCourseCard } from './[theme=cxl-course].stories.js'; | ||
|
|
||
| export default { | ||
| title: 'CXL UI/cxl-card', | ||
| }; | ||
|
|
||
| const CXLCourseCard2 = CourseCardTemplate.bind({}); | ||
| CXLCourseCard2.args = { | ||
| ...CXLCourseCard.args, | ||
| new: true, | ||
| time: '2 days ago', | ||
| type: 'Video' | ||
| } | ||
|
|
||
| const Template = () => html` | ||
| <style> | ||
| section { | ||
| display: grid; | ||
| grid: auto-flow / repeat(2, 1fr); | ||
| margin: 60px auto; | ||
| max-width: 900px; | ||
| grid-gap: var(--lumo-space-l); | ||
| padding: var(--lumo-space-l); | ||
| } | ||
| </style> | ||
| <section> | ||
| ${CXLCourseCard(CXLCourseCard.args)} | ||
| ${CXLCourseCard(CXLCourseCard.args)} | ||
| ${CXLCourseCard(CXLCourseCard.args)} | ||
| ${CXLCourseCard2(CXLCourseCard2.args)} | ||
| </section> | ||
| `; | ||
|
|
||
| export const CXLCourseCardDashboard = Template.bind({}); |
12 changes: 12 additions & 0 deletions
12
packages/storybook/cxl-ui/cxl-card/[theme=cxl-course].stories.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { CourseCardTemplate, args } from './template.js' | ||
| import '@conversionxl/cxl-ui/src/components/cxl-card.js'; | ||
| import '@conversionxl/cxl-lumo-styles'; | ||
|
|
||
| export default { | ||
| title: 'CXL UI/cxl-card', | ||
| }; | ||
|
|
||
|
|
||
| export const CXLCourseCard = CourseCardTemplate.bind({}); | ||
|
|
||
| CXLCourseCard.args = args |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { html } from 'lit'; | ||
|
|
||
| const renderTags = (tags, slot) => tags.map((tag, i) => html`${i > 0 ? html`<span slot=${slot}> | </span>` : ''}<span slot=${slot}>${tag}</span>`); | ||
|
|
||
| export const CourseCardTemplate = (course) => html` | ||
| <cxl-card | ||
| id=${course.id} | ||
| theme="cxl-course" | ||
| type=${course.type} | ||
| title=${course.title} | ||
| time=${course.time} | ||
| instructor=${course.instructor} | ||
| avatar-image=${course.avatarImage} | ||
| cta-url=${course.ctaUrl} | ||
| .new=${course.new} | ||
| > | ||
| ${course.tags ? renderTags(course.tags, 'tags') : ''} | ||
| <p slot="content">${course.description}</p> | ||
| ${course.contentTags ? renderTags(course.contentTags, 'content-tags') : ''} | ||
| <p slot="footer"> ${course.more}</p> | ||
| </cxl-card> | ||
| `; | ||
|
|
||
| export const args = { | ||
| id: 'cxl-course-1', | ||
| title: 'Account based marketing', | ||
| time: '3h 00min', | ||
| instructor: 'Tom Wesseling', | ||
| description: 'Master the strategies, tactics, metrics, and wisdom you need to become an ABM leader and accelerate the growth of your company and of your career.', | ||
| contentTags: ['B2B', 'campaigns', 'pilot planning'], | ||
| type: 'Course', | ||
| tags: ['Marketing', 'Analytics'], | ||
| avatarImage: 'https://cxl.com/institute/wp-content/uploads/2020/05/48192546_10156982340630746_8127333122065825792_n-wpv_400pxx400px_center_center.jpg', | ||
| more: "Lorem ipsum dolor sit amet consectetur adipisicing elit." | ||
| } |