feat: add locked state to cards

https://app.clickup.com/t/86b1nztyh
conversionxl · Aug 13, 2024 · 3563767 · 3563767
1 parent de80449
commit 3563767
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 1 deletion.
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
@@ -249,3 +249,22 @@ 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;
+  }
+}
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,8 @@ export class CXLBaseCardElement extends LitElement {
 
   @property({ type: String }) id = '';
 
+  @property({ type: Boolean, reflect: true }) locked;
+
   @property({ type: String }) theme = '';
 
   @property({ type: String }) name = '';
@@ -50,6 +52,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>` : ''}
       </div>
     `;
   }

diff --git a/packages/cxl-ui/src/components/cxl-course-card.js b/packages/cxl-ui/src/components/cxl-course-card.js
@@ -70,6 +70,12 @@ 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,6 +76,12 @@ 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>
     `;
   }

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}"