feat(cxl-ui): cxl-course-card update styles when on large devices

https://cxlworld.slack.com/archives/C01HNLQNVA9/p1715760558848559
conversionxl · May 30, 2024 · 887fcbe · 887fcbe
1 parent 2aeb35b
commit 887fcbe
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git 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
@@ -0,0 +1,9 @@
+cxl-tabs-slider {
+  cxl-course-card[theme~="course"] {
+    &::part(name) {
+      -webkit-line-clamp: 3;
+
+      font-size: var(--lumo-font-size-m);
+    }
+  }
+}
diff --git 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">