Merge pull request #431 from conversionxl/anoblet/feat/locked

conversionxl · Aug 19, 2024 · dfb02e1 · dfb02e1
2 parents 5674d31 + b22795a
commit dfb02e1
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 4 deletions.
diff --git a/packages/cxl-lumo-styles/src/icons.js b/packages/cxl-lumo-styles/src/icons.js
diff --git a/packages/cxl-ui/scss/cxl-base-card.scss b/packages/cxl-ui/scss/cxl-base-card.scss
@@ -220,6 +220,15 @@ header {
   display: none;
 }
 
+.icon-lock {
+  color: var(--lumo-body-text-color);
+
+  :host([theme~="category"]) &,
+  :host([theme~="minidegree"]) & {
+    color: var(--lumo-tint);
+  }
+}
+
 :host([new]) {
   .icon-new {
     position: absolute;
@@ -249,3 +258,10 @@ vaadin-button {
     }
   }
 }
+
+:host([locked]) {
+  header, .content-wrapper {
+    opacity: 0.6;
+  }
+
+}
diff --git a/packages/cxl-ui/scss/cxl-light-card.scss b/packages/cxl-ui/scss/cxl-light-card.scss
@@ -177,3 +177,12 @@
     }
   }
 }
+
+.icon-lock {
+  position: absolute;
+  top: var(--lumo-space-s);
+  right: var(--lumo-space-s);
+  z-index: 2;
+  width: var(--lumo-icon-size-s);
+  height: var(--lumo-icon-size-s);
+}
diff --git a/packages/cxl-ui/src/components/cxl-base-card.js b/packages/cxl-ui/src/components/cxl-base-card.js
@@ -18,6 +18,10 @@ export class CXLBaseCardElement extends LitElement {
 
   @property({ type: String }) id = '';
 
+  @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 = '';
@@ -50,6 +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 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-light-card.js b/packages/cxl-ui/src/components/cxl-light-card.js
@@ -43,9 +43,10 @@ export class CXLLightCardElement extends CXLBaseCardElement {
   _renderHeaderName() {
     return html`
       <h3 class="name" title=${this.name}>
-          ${unsafeHTML(this.name)}${
-      this.completed ? html`<vaadin-icon icon="lumo:checkmark"></vaadin-icon>` : nothing
-    }
+        ${unsafeHTML(this.name)}${
+          this.completed ? html`<vaadin-icon icon="lumo:checkmark"></vaadin-icon>` : nothing
+        }
+        ${this.locked ? html`<vaadin-icon class="icon-lock" icon="vaadin:lock"><vaadin-tooltip slot="tooltip" text="${this.lockedMessage}"></vaadin-tooltip></vaadin-icon>` : ''}
       </h3>
     `;
   }

diff --git a/packages/storybook/cxl-ui/cxl-course-card/template.js b/packages/storybook/cxl-ui/cxl-course-card/template.js
@@ -9,6 +9,7 @@ export const CourseCardTemplate = (course) => html`
   <cxl-course-card
     id=${course.id}
     class=${course.classes || ''}
+    ?locked=${course.locked}
     theme=${course.theme}
     name=${course.name}
     time=${course.time}
@@ -26,6 +27,7 @@ export const CourseCardTemplate = (course) => html`
 
 export const args = {
   id: 'cxl-course-1',
+  locked: false,
   name: 'Account based marketing',
   time: '3h 00min',
   instructor: 'Tom Wesseling',

diff --git a/packages/storybook/cxl-ui/cxl-light-card/default.stories.js b/packages/storybook/cxl-ui/cxl-light-card/default.stories.js
@@ -16,6 +16,7 @@ export const CXLLightCardMinidegree = Template.bind({});
 export const CXLLightCardFooter = Template.bind({});
 
 CXLLightCard.args = {
+  locked: false,
   theme: 'light-card',
   new: false,
   completed: false,

diff --git a/packages/storybook/cxl-ui/cxl-light-card/template.js b/packages/storybook/cxl-ui/cxl-light-card/template.js
@@ -3,6 +3,7 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 export const Template = (card) => html`
   <cxl-light-card
+    ?locked="${card.locked}"
     theme="${card.theme}"
     name="${card.name}"
     time="${card.time}"