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

conversionxl · Oct 12, 2023 · b4a4fa3 · b4a4fa3
1 parent 4d9b0d3
commit b4a4fa3
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 39 deletions.
diff --git a/packages/cxl-ui/scss/cxl-base-card.scss b/packages/cxl-ui/scss/cxl-base-card.scss
@@ -148,6 +148,15 @@ header {
       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 +224,14 @@ header {
 vaadin-button {
   &:hover {
     cursor: pointer;
+
+    &::before {
+      opacity: 0.05;
+      transition: opacity 0.3s ease;
+    }
+
+    &::part(label) {
+      text-decoration: underline;
+    }
   }
 }
diff --git a/packages/cxl-ui/src/components/cxl-course-card.js b/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,10 @@ export class CXLCourseCardElement extends CXLBaseCardElement {
     this[`_${name}HasChildren`] = !!children.length;
   }
 
+  _renderHeaderName() {
+    return html`<div class="name"><a href=${this.ctaUrl}>${unsafeHTML(this.name)}</a></div>`;
+  }
+
   render() {
     return html`
       <div class="container">

diff --git a/packages/cxl-ui/src/components/cxl-course-dialog.js b/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>
           `,
           []
         )}

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
@@ -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,

diff --git a/packages/storybook/cxl-ui/cxl-course-card/course-dashboard-varying-heights.stories.js b/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 = {

diff --git a/packages/storybook/cxl-ui/cxl-course-card/template.js b/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:

diff --git a/packages/storybook/cxl-ui/cxl-course-dialog/default.stories.js b/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/',
-  }
+  },
 };