fix(cxl-ui): add missing card hover styles

packages/cxl-ui/scss/cxl-base-card.scss

@@ -75,6 +75,20 @@
   .attributes {
     color: var(--lumo-tint);
   }
+
+  .name a {
+    color: var(--lumo-tint);
+  }
+
+  vaadin-button {
+    &:hover {
+      cursor: pointer;
+
+      &::before {
+        opacity: 0.2;
+      }
+    }
+  }
 }
 
 :host([theme~="lesson"]),
@@ -142,12 +156,21 @@ header {
     }
 
     .name {
-      @include mixins.ellipsis-for-lines(3);
+      @include mixins.ellipsis-for-lines(2);
       font-family: var(--lumo-font-family);
       font-size: var(--lumo-font-size-xl);
       font-style: normal;
       font-weight: 700;
       line-height: var(--lumo-line-height-xs);
+
+      a {
+        color: var(--lumo-body-text-color);
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
     }
 
     .attributes {
@@ -215,5 +238,10 @@ header {
 vaadin-button {
   &:hover {
     cursor: pointer;
+
+    &::before {
+      opacity: 0.05;
+      transition: opacity 0.3s ease;
+    }
   }
 }

packages/cxl-ui/scss/cxl-course-card.scss

@@ -4,7 +4,7 @@
 @use "~@conversionxl/cxl-ui/scss/mixins";
 
 :host {
-  height: 345px;
+  height: 280px;
 }
 
 :host(:hover) {
@@ -28,11 +28,12 @@ header {
 
 .content-wrapper {
   height: 100%;
-  min-height: calc(var(--lumo-line-height-s) * 6); // Six standard line-heights
+  min-height: calc(var(--lumo-line-height-s) * 3); // three standard line-heights
   line-height: var(--lumo-line-height-s);
 
   .content {
-    @include mixins.ellipsis-for-lines(5);
+    @include mixins.ellipsis-for-lines(3);
+    min-height: calc(var(--lumo-line-height-s) * 3); // three standard line-heights
 
     ::slotted(p) {
       margin-top: 0 !important;

packages/cxl-ui/src/components/cxl-course-card.js

@@ -1,5 +1,6 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { customElement, property, state } from 'lit/decorators.js';
 import '@vaadin/details';
 import '@vaadin/button';
@@ -25,6 +26,12 @@ export class CXLCourseCardElement extends CXLBaseCardElement {
     this[`_${name}HasChildren`] = !!children.length;
   }
 
+  _renderHeaderName() {
+    return html`<div class="name" title=${this.name}>
+      <a href=${this.ctaUrl}>${unsafeHTML(this.name)}</a>
+    </div>`;
+  }
+
   render() {
     return html`
       <div class="container">

packages/cxl-ui/src/components/cxl-course-dialog.js

@@ -34,15 +34,16 @@ export class CXLCourseDialogElement extends LitElement {
     });
   }
 
-  renderTags = (tags) => tags.map((tag) => html`<span> | </span><span class="tag" title="${tag}">${tag}</span>`);
-
-  renderContentTags = (tags) => tags.map((tag, i) => html`${i > 0 ? html`<span> | </span>` : ''}<span class="content-tag" title="${tag}">${tag}</span>`);
+  renderTags = (tags) =>
+    tags.map((tag) => html`<span> | </span><span class="tag" title="${tag}">${tag}</span>`);
 
   renderContent = () => html`
     <div class="header">
       <div class="info">
         <div class="tags">
-          <span class="tag">${this.course.theme}</span>${this.course.tags ? this.renderTags(this.course.tags): ''}
+          <span class="tag">${this.course.theme}</span>${this.course.tags
+            ? this.renderTags(this.course.tags)
+            : ''}
           ${this.course.new ? html`<span> | </span><span class="tag new">NEW</span>` : ''}
         </div>
         <vaadin-icon @click="${this.close}" class="icon-close" icon="lumo:cross"></vaadin-icon>
@@ -62,21 +63,19 @@ export class CXLCourseDialogElement extends LitElement {
       </div>
     </div>
     <section>
-      ${this.video ? html`
-        <jw-player
-          ?captions=${this.video.captions}
-          media-id=${this.video.mediaId}
-          minimum-search-length=${this.video.minimumSearchLength}
-          player-id=${this.video.playerId}
-          playlist-id=${this.video.playlistId}
-          plugin-path="${this.video.pluginPath}"
-        ></jw-player>` : ''
-      }
+      ${this.video
+        ? html` <jw-player
+            ?captions=${this.video.captions}
+            media-id=${this.video.mediaId}
+            minimum-search-length=${this.video.minimumSearchLength}
+            player-id=${this.video.playerId}
+            playlist-id=${this.video.playlistId}
+            plugin-path="${this.video.pluginPath}"
+          ></jw-player>`
+        : ''}
       <div class="content">
         <p>${this.course.description}</p>
-        <div class="content-tags">
-          ${this.course.contentTags ? this.renderContentTags(this.course.contentTags): ''}
-        </div>
+        <div class="content-tags"></div>
         <p>${this.course.more}</p>
       </div>
     </section>
@@ -95,7 +94,9 @@ export class CXLCourseDialogElement extends LitElement {
         ${dialogFooterRenderer(
           () => html`
             <vaadin-button theme="secondary" @click="${this.close}">Close</vaadin-button>
-            <vaadin-button theme="primary" @click="${this.close}">Add to training<vaadin-icon class="icon-plus" icon="lumo:plus"></vaadin-icon></vaadin-button>
+            <vaadin-button theme="primary" @click="${this.close}"
+              >Add to training<vaadin-icon class="icon-plus" icon="lumo:plus"></vaadin-icon
+            ></vaadin-button>
           `,
           []
         )}

packages/storybook/cxl-ui/cxl-course-card/[theme=video].stories.js

@@ -17,7 +17,6 @@ CXLCourseCardVideo.args = {
   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.',
-  contentTags: 'running experiments | customer base studies | prioritization',
   tags: 'CRO',
   time: '4 days ago',
   new: true,

packages/storybook/cxl-ui/cxl-course-card/course-dashboard-varying-heights.stories.js

@@ -17,7 +17,6 @@ const ExtraCardVideoArgs = {
   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.
   One more line to test the layout behavior on longer descriptions, with at least four line of text.`,
-  contentTags: 'B2B | campaigns | pilot planning',
 };
 
 const ExtraCardTrainingArgs = {

packages/storybook/cxl-ui/cxl-course-card/template.js

@@ -17,13 +17,7 @@ export const CourseCardTemplate = (course) => html`
     .showTimeIcon=${course.showTimeIcon}
   >
     ${course.tags ? renderTags(course.tags, 'tags') : ''}
-    <p slot="content" title=${course.description + '\n\n' + (course.contentTags || '')}>
-      ${course.description}
-      ${course.contentTags
-        ? html`<br /><br />
-            <em>${course.contentTags}</em>`
-        : ''}
-    </p>
+    <p slot="content" title=${course.description}>${course.description}</p>
     ${course.more ? html`<p slot="more">${course.more}</p>` : ''}
   </cxl-course-card>
 `;
@@ -35,7 +29,6 @@ export const args = {
   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, Growth, Demand Capture',
   avatar:
@@ -67,7 +60,7 @@ export const sectionStyles = html`
       grid: auto-flow / repeat(2, calc(50% - var(--lumo-space-l) / 2));
       margin: 60px auto;
       justify-items: center;
-      max-width: 900px;
+      max-width: 843px;
       grid-gap: var(--lumo-space-l);
       padding: var(--lumo-space-l);
     }

packages/storybook/cxl-ui/cxl-course-dialog/default.stories.js

@@ -7,11 +7,7 @@ export default {
 };
 
 const Template = (dialog) => html`
-  <cxl-course-dialog
-    .course=${dialog.course}
-    .video=${dialog.video}
-  >
-  </cxl-course-dialog>
+  <cxl-course-dialog .course=${dialog.course} .video=${dialog.video}> </cxl-course-dialog>
 `;
 
 export const CXLCourseDialog = Template.bind({});
@@ -23,14 +19,15 @@ CXLCourseDialog.args = {
     name: 'Account based marketing',
     time: '3h 00min',
     instructor: 'Tom Wesseling',
-    description: 'Continue to build your focus on practical ways you can use AI for CRO, building on the original “Applied AI for Marketers” course.',
-    contentTags: ['B2B', 'campaigns', 'pilot planning'],
+    description:
+      'Continue to build your focus on practical ways you can use AI for CRO, building on the original “Applied AI for Marketers” course.',
     theme: 'Course',
     tags: ['Marketing', 'Analytics'],
-    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',
     more: "This course fills that gap. It's the most in-depth guide to what a team considering implementing GA4 needs to know to make their implementation successful.",
-    new: false
-  }
+    new: false,
+  },
 };
 
 CXLCourseDialogVideo.args = {
@@ -41,5 +38,5 @@ CXLCourseDialogVideo.args = {
     playerId: '5CFJNXKb',
     playlistId: '',
     pluginPath: 'https://cxl.com/institute/wp-content/plugins/cxl-jwplayer/',
-  }
+  },
 };

packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-layout.stories.js

@@ -37,7 +37,7 @@ export const CXLDashboard = () => {
 
   CXLFeatureadCourseCard.args = {
     id: 'cxl-featured-course-1',
-    theme: 'Featured course',
+    theme: 'Featured',
     name: 'Get ahead with <strong>Google Analytics 4</strong>',
     time: '5h 04min',
     instructor: 'Fred Pike',

packages/storybook/cxl-ui/cxl-dashboard/cxl-dashboard-no-content.stories.js

@@ -36,7 +36,7 @@ export const CXLDashboardNoContent = () => {
 
   CXLFeatureadCourseCard.args = {
     id: 'cxl-featured-course-1',
-    theme: 'Featured course',
+    theme: 'Featured',
     name: 'Get ahead with <strong>Google Analytics 4</strong>',
     time: '5h 04min',
     instructor: 'Fred Pike',