refactor(cxl-ui): course cards locked state

Simplify previous work. 356376
conversionxl · Aug 14, 2024 · 5b3241d · 5b3241d
1 parent 3563767
commit 5b3241d
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 29 deletions.
diff --git a/packages/cxl-ui/scss/cxl-base-card.scss b/packages/cxl-ui/scss/cxl-base-card.scss
@@ -220,6 +220,14 @@ header {
   display: none;
 }
 
+.icon-lock {
+  color: var(--lumo-body-text-color);
+
+  &:hover {
+    color: var(--cxl-color-black);
+  }
+}
+
 :host([new]) {
   .icon-new {
     position: absolute;
@@ -250,21 +258,9 @@ vaadin-button {
   }
 }
 
-:host([locked]) .locked {
-  background: rgba(255, 255, 255, 0.8);
-  border-radius: var(--lumo-border-radius-l);
-  display: flex;
-  flex-direction: column;
-  inset: 0;
-  justify-content: space-evenly;
-  padding: var(--lumo-space-s);
-  position: absolute;
-  text-align: center;
-
-  h4 {
-    font-weight: 700;
-    margin: 0.25rem;
-    margin-block-start: 0;
-    margin-block-end: 0;
+:host([locked]) {
+  header, .content-wrapper {
+    opacity: 0.6;
   }
+
 }
diff --git a/packages/cxl-ui/src/components/cxl-base-card.js b/packages/cxl-ui/src/components/cxl-base-card.js
@@ -20,6 +20,8 @@ export class CXLBaseCardElement extends LitElement {
 
   @property({ type: Boolean, reflect: true }) locked;
 
+  @property({ type: String, attribute: 'locked-message' }) lockedMessage = 'Purchase an All-Access subscription to unlock this course.';
+
   @property({ type: String }) theme = '';
 
   @property({ type: String }) name = '';
@@ -52,7 +54,7 @@ export class CXLBaseCardElement extends LitElement {
         ${this.theme && this._tagsHasChildren ? this.separator : ''}
         <slot name="tags" @slotchange=${this._slotHasChildren}></slot>
         ${this.new ? html`${this.theme ? this.separator : ''}<span class="tag new">NEW</span>` : ''}
-        ${this.locked ? html`${this.theme ? this.separator : ''}<span><vaadin-icon icon="vaadin:lock"></vaadin-icon></span>` : ''}
+        ${this.locked ? html`${this.theme ? this.separator : ''}<span><vaadin-icon class="icon-lock" icon="vaadin:lock"><vaadin-tooltip slot="tooltip" text="${this.lockedMessage}"></vaadin-tooltip></vaadin-icon></span>` : ''}
       </div>
     `;
   }

diff --git a/packages/cxl-ui/src/components/cxl-course-card.js b/packages/cxl-ui/src/components/cxl-course-card.js
@@ -70,12 +70,6 @@ export class CXLCourseCardElement extends CXLBaseCardElement {
             <vaadin-icon icon="lumo:angle-right"></vaadin-icon>
           </vaadin-button>
         </footer>
-        ${this.locked ? html`
-          <div class="locked">
-          <h4>You need to purchase a CXL All Access subscription to view this content.</h4>
-          <a href="https://cxl.com/institute/all-access/"><vaadin-button theme="primary">Get CXL All Access</vaadin-button></a>
-          </div>
-        ` : nothing}
       </div>
     `;
   }

diff --git a/packages/cxl-ui/src/components/cxl-light-card.js b/packages/cxl-ui/src/components/cxl-light-card.js
@@ -76,12 +76,6 @@ export class CXLLightCardElement extends CXLBaseCardElement {
         ${this._renderProgress()}
         <slot name="footer"></slot>
         ${this._renderNewBadge()}
-        ${this.locked ? html`
-          <div class="locked">
-          <h4>You need to purchase a CXL All Access subscription to view this content.</h4>
-          <a href="https://cxl.com/institute/all-access/"><vaadin-button theme="primary">Get CXL All Access</vaadin-button></a>
-          </div>
-        ` : nothing}
       </div>
     `;
   }