feat(cxl-ui): improve cxl-base-card component

https://app.clickup.com/t/861n0qm47
conversionxl · Aug 7, 2023 · 1a688fa · 1a688fa
1 parent 1fae565
commit 1a688fa
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 56 deletions.
diff --git a/packages/cxl-ui/scss/cxl-time.scss b/packages/cxl-ui/scss/cxl-time.scss
@@ -1,5 +1,6 @@
 :host {
   display: flex;
+  align-items: center;
   gap: var(--lumo-space-xs);
   color: var(--lumo-shade-60pct);
 }
diff --git a/packages/cxl-ui/src/components/cxl-base-card.js b/packages/cxl-ui/src/components/cxl-base-card.js
@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import { LitElement, html } from 'lit';
+import { LitElement, html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import '@vaadin/details';
 import '@vaadin/button';
@@ -31,6 +31,10 @@ export class CXLBaseCardElement extends LitElement {
 
   @property({ type: Boolean, reflect: true }) new = false;
 
+  @property({ type: Boolean, reflect: true }) completed = false;
+
+  @property({ type: Boolean, reflect: true, attribute: 'show-time-icon' }) showTimeIcon = false;
+
   _slotHasChildren(e) {
     const slot = e.target;
     const { name } = slot;
@@ -50,16 +54,19 @@ export class CXLBaseCardElement extends LitElement {
   }
 
   _renderHeaderName() {
-    return html` <div class="name">${this.name}</div> `;
+    return html`
+      <div class="name">
+        ${this.name}${this.completed
+          ? html`<vaadin-icon icon="lumo:checkmark"></vaadin-icon>`
+          : nothing}
+      </div>
+    `;
   }
 
   _renderHeaderAttributes() {
     return html`
       <div class="attributes">
-        <cxl-time
-          time=${this.time}
-          ?show-icon=${!!(this.theme.toLowerCase() === 'course')}
-        ></cxl-time>
+        <cxl-time time=${this.time} ?show-icon=${this.showTimeIcon}></cxl-time>
         <div class="instructor">By: ${this.instructor}</div>
       </div>
     `;

diff --git a/packages/storybook/cxl-ui/cxl-course-card/[theme=playbook].stories.js b/packages/storybook/cxl-ui/cxl-course-card/[theme=playbook].stories.js
@@ -1,23 +1,24 @@
-import { CourseCardTemplate, args } from './template.js'
+import { CourseCardTemplate, args } from './template.js';
 import '@conversionxl/cxl-ui/src/components/cxl-course-card.js';
 import '@conversionxl/cxl-lumo-styles';
 
 export default {
   title: 'CXL UI/cxl-course-card',
   parameters: {
-    layout: 'centered'
-  }
+    layout: 'centered',
+  },
 };
 
-
 export const CXLCourseCardPlaybook = CourseCardTemplate.bind({});
 
 CXLCourseCardPlaybook.args = {
   ...args,
   theme: 'playbook',
   name: 'The Why’s and How’s of Marketing Attribution',
   time: '12 days ago',
-  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.',
+  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: [],
-  tags: ['Growth Marketing']
+  tags: ['Growth Marketing'],
+  showTimeIcon: false,
 };
diff --git a/packages/storybook/cxl-ui/cxl-course-card/[theme=training].stories.js b/packages/storybook/cxl-ui/cxl-course-card/[theme=training].stories.js
@@ -1,23 +1,24 @@
-import { CourseCardTemplate, args } from './template.js'
+import { CourseCardTemplate, args } from './template.js';
 import '@conversionxl/cxl-ui/src/components/cxl-course-card.js';
 import '@conversionxl/cxl-lumo-styles';
 
 export default {
   title: 'CXL UI/cxl-course-card',
   parameters: {
-    layout: 'centered'
-  }
+    layout: 'centered',
+  },
 };
 
-
 export const CXLCourseCardTraining = CourseCardTemplate.bind({});
 
 CXLCourseCardTraining.args = {
   ...args,
   theme: 'training',
   name: 'A/B testing mastery',
-  description: 'Understand testing approaches that work (and pitfalls that don’t) to get more wins and insights from optimization efforts.',
+  description:
+    'Understand testing approaches that work (and pitfalls that don’t) to get more wins and insights from optimization efforts.',
   tags: ['CRO', 'Branding'],
   contentTags: [],
-  more: ''
+  more: '',
+  showTimeIcon: false,
 };
diff --git a/packages/storybook/cxl-ui/cxl-course-card/[theme=video].stories.js b/packages/storybook/cxl-ui/cxl-course-card/[theme=video].stories.js
@@ -1,24 +1,25 @@
-import { CourseCardTemplate, args } from './template.js'
+import { CourseCardTemplate, args } from './template.js';
 import '@conversionxl/cxl-ui/src/components/cxl-course-card.js';
 import '@conversionxl/cxl-lumo-styles';
 
 export default {
   title: 'CXL UI/cxl-course-card',
   parameters: {
-    layout: 'centered'
-  }
+    layout: 'centered',
+  },
 };
 
-
 export const CXLCourseCardVideo = CourseCardTemplate.bind({});
 
 CXLCourseCardVideo.args = {
   ...args,
   theme: 'video',
   name: 'A/B testing mastery',
-  description: 'Understand testing approaches that work (and pitfalls that don’t) to get more wins and insights from optimization efforts.',
+  description:
+    'Understand testing approaches that work (and pitfalls that don’t) to get more wins and insights from optimization efforts.',
   tags: ['CRO'],
-  contentTags: ['running experiments', 'customer base studies', 'prioritization' ],
+  contentTags: ['running experiments', 'customer base studies', 'prioritization'],
   time: '4 days ago',
-  new: true
+  new: true,
+  showTimeIcon: false,
 };
diff --git a/packages/storybook/cxl-ui/cxl-course-card/template.js b/packages/storybook/cxl-ui/cxl-course-card/template.js
@@ -1,38 +1,51 @@
 import { html } from 'lit';
 
-const renderTags = (tags, slot) => tags.map((tag, i) => html`${i > 0 ? html`<span slot=${slot}> | </span>` : ''}<span class="tag" slot=${slot} title="${tag}">${tag}</span>`);
+const renderTags = (tags, slot) =>
+  tags.map(
+    (tag, i) =>
+      html`${i > 0 ? html`<span slot=${slot}> | </span>` : ''}<span
+          class="tag"
+          slot=${slot}
+          title="${tag}"
+          >${tag}</span
+        >`
+  );
 
 export const CourseCardTemplate = (course) => html`
-    <cxl-course-card
-      id=${course.id}
-      theme=${course.theme}
-      name=${course.name}
-      time=${course.time}
-      instructor=${course.instructor}
-      avatar=${course.avatar}
-      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') : ''}
-      ${course.more ? html`<p slot="more"> ${course.more}</p>` : ''}
-    </cxl-course-card>
+  <cxl-course-card
+    id=${course.id}
+    theme=${course.theme}
+    name=${course.name}
+    time=${course.time}
+    instructor=${course.instructor}
+    avatar=${course.avatar}
+    cta-url=${course.ctaUrl}
+    .new=${course.new}
+    .showTimeIcon=${course.showTimeIcon}
+  >
+    ${course.tags ? renderTags(course.tags, 'tags') : ''}
+    <p slot="content">${course.description}</p>
+    ${course.contentTags ? renderTags(course.contentTags, 'content-tags') : ''}
+    ${course.more ? html`<p slot="more">${course.more}</p>` : ''}
+  </cxl-course-card>
 `;
 
 export const args = {
-    id: 'cxl-course-1',
-    name: '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'],
-    theme: 'course',
-    tags: ['Marketing', 'Analytics'],
-    avatar: '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.",
-    new: false
-}
+  id: 'cxl-course-1',
+  name: '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'],
+  theme: 'course',
+  tags: ['Marketing', 'Analytics'],
+  avatar:
+    '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.',
+  new: false,
+  showTimeIcon: true,
+};
 
 export const sectionStyles = html`
   <style>
@@ -57,12 +70,11 @@ export const sectionStyles = html`
     @media (max-width: 360px) {
       section {
         padding: 0;
-
       }
 
-      section  > * {
+      section > * {
         max-width: calc(100vw - 2 * var(--lumo-space-xs) - var(--lumo-space-m));
       }
     }
   </style>
-`
+`;