From c122aa70a0e2203879eb3794a54e58e51204c3b2 Mon Sep 17 00:00:00 2001
From: Andrew Noblet <andrewbnoblet@gmail.com>
Date: Thu, 30 May 2024 14:01:50 +0000
Subject: [PATCH] review

---
 packages/cxl-ui/scss/cxl-course-card.scss         |  7 -------
 packages/cxl-ui/scss/global/cxl-course-card.scss  |  8 ++++++++
 packages/cxl-ui/src/components/cxl-course-card.js | 13 ++++++++++++-
 3 files changed, 20 insertions(+), 8 deletions(-)
 create mode 100644 packages/cxl-ui/scss/global/cxl-course-card.scss

diff --git a/packages/cxl-ui/scss/cxl-course-card.scss b/packages/cxl-ui/scss/cxl-course-card.scss
index 5f25b7b60..5ce12a646 100644
--- a/packages/cxl-ui/scss/cxl-course-card.scss
+++ b/packages/cxl-ui/scss/cxl-course-card.scss
@@ -132,13 +132,6 @@ footer {
   }
 }
 
-:host([theme~="course"]) {
-  .name {
-    font-size: var(--lumo-font-size-m);
-    -webkit-line-clamp: unset;
-  }
-}
-
 :host([theme~="minidegree"]) {
   .info {
     max-width: unset;
diff --git a/packages/cxl-ui/scss/global/cxl-course-card.scss b/packages/cxl-ui/scss/global/cxl-course-card.scss
new file mode 100644
index 000000000..2e8a1d255
--- /dev/null
+++ b/packages/cxl-ui/scss/global/cxl-course-card.scss
@@ -0,0 +1,8 @@
+cxl-tabs-slider {
+  cxl-course-card[theme~="course"] {
+    &::part(name) {
+      font-size: var(--lumo-font-size-m);
+      --webkit-line-clamp: 3;
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/cxl-ui/src/components/cxl-course-card.js b/packages/cxl-ui/src/components/cxl-course-card.js
index 6d49da0c5..45e3a7e61 100644
--- a/packages/cxl-ui/src/components/cxl-course-card.js
+++ b/packages/cxl-ui/src/components/cxl-course-card.js
@@ -4,6 +4,8 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { customElement, property, state } from 'lit/decorators.js';
 import '@vaadin/details';
 import '@vaadin/button';
+import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils';
+import cxlCourseCardGlobalStyles from '../styles/global/cxl-course-card-css.js';
 import cxlCourseCardStyles from '../styles/cxl-course-card-css.js';
 import { CXLBaseCardElement } from './cxl-base-card.js';
 
@@ -27,12 +29,21 @@ export class CXLCourseCardElement extends CXLBaseCardElement {
   }
 
   _renderHeaderName() {
-    return html`<h3 class="name" title=${this.name}>
+    return html`<h3 class="name" part="name" title=${this.name}>
       <a href=${this.ctaUrl}>${unsafeHTML(this.name)}</a>
       ${this.completed ? html`<vaadin-icon icon="lumo:checkmark"></vaadin-icon>` : nothing}
     </h3>`;
   }
 
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+
+    // Global styles.
+    registerGlobalStyles(cxlCourseCardGlobalStyles, {
+      moduleId: 'cxl-course-card-global',
+    });
+  }
+
   render() {
     return html`
       <div class="container">