From b22795a5a11b564c55ccb4f3fb1c629c85f55284 Mon Sep 17 00:00:00 2001
From: Andrew Noblet <andrewbnoblet@gmail.com>
Date: Tue, 13 Aug 2024 16:11:34 +0000
Subject: [PATCH] refactor(cxl-ui): add course cards locked state

https://app.clickup.com/t/86b1nztyh
---
 packages/cxl-lumo-styles/src/icons.js            |  3 ++-
 packages/cxl-ui/scss/cxl-base-card.scss          | 16 ++++++++++++++++
 packages/cxl-ui/scss/cxl-light-card.scss         |  9 +++++++++
 packages/cxl-ui/src/components/cxl-base-card.js  |  5 +++++
 packages/cxl-ui/src/components/cxl-light-card.js |  7 ++++---
 .../storybook/cxl-ui/cxl-course-card/template.js |  2 ++
 .../cxl-ui/cxl-light-card/default.stories.js     |  1 +
 .../storybook/cxl-ui/cxl-light-card/template.js  |  1 +
 8 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/packages/cxl-lumo-styles/src/icons.js b/packages/cxl-lumo-styles/src/icons.js
index 6671987ed..92fb25f6f 100644
--- a/packages/cxl-lumo-styles/src/icons.js
+++ b/packages/cxl-lumo-styles/src/icons.js
@@ -80,6 +80,7 @@ $documentContainer.innerHTML = `
         <g id="facebook"><path d="M7.2 16v-7.5h-2v-2.7h2c0 0 0-1.1 0-2.3 0-1.8 1.2-3.5 3.9-3.5 1.1 0 1.9 0.1 1.9 0.1l-0.1 2.5c0 0-0.8 0-1.7 0-1 0-1.1 0.4-1.1 1.2 0 0.6 0-1.3 0 2h2.9l-0.1 2.7h-2.8v7.5h-2.9z"/></g>
         <g id="globe-wire"><path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8c4.418 0 8-3.582 8-8s-3.582-8-8-8zM14.8 9.5c0 0.5-0.7 0.66-2 1 0.124-0.589 0.206-1.277 0.229-1.98l2.001-0.020c0 0.36-0.080 0.5-0.16 1v0zM1.2 9.5v0c-0.1-0.5-0.15-0.64-0.2-1h2c0.024 0.723 0.106 1.411 0.244 2.079-1.344-0.419-2.044-0.579-2.044-1.079zM1.2 6.5c0-0.5 0.7-0.66 2-1-0.115 0.594-0.187 1.284-0.2 1.989l-2 0.011c0-0.36 0.080-0.5 0.16-1v0zM8.5 5c1.13 0.013 2.226 0.107 3.298 0.277 0.047 0.643 0.165 1.41 0.201 2.199l-3.499 0.025v-2.5zM8.5 4v-2.94c1.17 0.27 2.2 1.47 2.84 3.15-0.836-0.116-1.819-0.192-2.817-0.21zM7.5 1.060v2.94c-1.017 0.015-2.001 0.087-2.968 0.214 0.768-1.684 1.798-2.884 2.968-3.154zM7.5 5v2.5h-3.5c0.031-0.806 0.142-1.571 0.326-2.307 0.932-0.080 2.035-0.177 3.158-0.193zM4 8.5h3.5v2.5c-1.13-0.013-2.226-0.107-3.298-0.277-0.047-0.643-0.165-1.41-0.201-2.199zM7.5 12v2.94c-1.17-0.27-2.2-1.47-2.84-3.15 0.836 0.116 1.819 0.192 2.817 0.21zM8.5 14.94v-2.94c1.017-0.015 2.001-0.087 2.968-0.214-0.768 1.684-1.798 2.884-2.968 3.154zM8.5 11v-2.5h3.5c-0.031 0.806-0.142 1.571-0.326 2.307-0.932 0.080-2.035 0.177-3.158 0.193zM15 7.5h-2c-0.024-0.723-0.106-1.411-0.244-2.079 1.354 0.399 2.014 0.559 2.014 1.079v0c0.13 0.5 0.18 0.64 0.23 1zM14.3 4.91c-0.506-0.204-1.106-0.38-1.726-0.5-0.361-1.019-0.809-1.898-1.389-2.672 1.355 0.726 2.413 1.811 3.067 3.131zM4.84 1.76c-0.568 0.752-1.019 1.631-1.305 2.581-0.699 0.189-1.299 0.365-1.874 0.593 0.751-1.39 1.823-2.475 3.139-3.156zM1.73 11.090c0.506 0.204 1.106 0.38 1.726 0.5 0.361 1.019 0.809 1.898 1.389 2.672-1.367-0.722-2.436-1.807-3.097-3.131zM11.17 14.24c0.564-0.753 1.012-1.631 1.295-2.581 0.699-0.189 1.299-0.365 1.874-0.593-0.751 1.39-1.823 2.475-3.139 3.156z"/></g>
         <g id="link"><path d="M14.9 1.1c-1.4-1.4-3.7-1.4-5.1 0l-4.4 4.3c-1.4 1.5-1.4 3.7 0 5.2 0.1 0.1 0.3 0.2 0.4 0.3l1.5-1.5c-0.1-0.1-0.3-0.2-0.4-0.3-0.6-0.6-0.6-1.6 0-2.2l4.4-4.4c0.6-0.6 1.6-0.6 2.2 0s0.6 1.6 0 2.2l-1.3 1.3c0.4 0.8 0.5 1.7 0.4 2.5l2.3-2.3c1.5-1.4 1.5-3.7 0-5.1z"/><path d="M10.2 5.1l-1.5 1.5c0 0 0.3 0.2 0.4 0.3 0.6 0.6 0.6 1.6 0 2.2l-4.4 4.4c-0.6 0.6-1.6 0.6-2.2 0s-0.6-1.6 0-2.2l1.3-1.3c-0.4-0.8-0.1-1.3-0.4-2.5l-2.3 2.3c-1.4 1.4-1.4 3.7 0 5.1s3.7 1.4 5.1 0l4.4-4.4c1.4-1.4 1.4-3.7 0-5.1-0.2-0.1-0.4-0.3-0.4-0.3z"/></g>
+        <g id="lock"><path d="M12 8v-3.1c0-2.2-1.6-3.9-3.8-3.9h-0.3c-2.1 0-3.9 1.7-3.9 3.9v3.1h-1l0.1 5c0 0-0.1 3 4.9 3s5-3 5-3v-5h-1zM9 14h-1v-2c-0.6 0-1-0.4-1-1s0.4-1 1-1 1 0.4 1 1v3zM10 8h-4v-3.1c0-1.1 0.9-1.9 1.9-1.9h0.3c1 0 1.8 0.8 1.8 1.9v3.1z"/></g>
         <g id="play-circle-o"><path d="M8 1c3.9 0 7 3.1 7 7s-3.1 7-7 7-7-3.1-7-7 3.1-7 7-7zM8 0c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8v0z"/><path d="M6 4v8l6-4z"/></g>
         <g id="quote-right"><path d="M9 9v-7h7v7.1c0 4.8-4.5 5.4-4.5 5.4l-0.6-1.4c0 0 2-0.3 2.4-1.9 0.4-1.2-0.4-2.2-0.4-2.2h-3.9z"/><path d="M0 9v-7h7v7.1c0 4.8-4.5 5.4-4.5 5.4l-0.6-1.4c0 0 2-0.3 2.4-1.9 0.4-1.2-0.4-2.2-0.4-2.2h-3.9z"/></g>
         <g id="star"><path d="M12.9 15.4l-4.9-2.6-4.9 2.6 0.9-5.4-4-3.9 5.5-0.8 2.4-5 2.4 5 5.5 0.8-3.8 3.9 0.9 5.4z"/></g>
@@ -96,7 +97,7 @@ $documentContainer.innerHTML = `
       font-family: vaadin-icons;
       font-style: normal;
       font-weight: initial;
-      src: url(data:application/octet-stream;base64,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) format("woff2");
+      src: url(data:application/octet-stream;base64,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);
     }
 
     html {
diff --git a/packages/cxl-ui/scss/cxl-base-card.scss b/packages/cxl-ui/scss/cxl-base-card.scss
index 0c4d0db8c..8fe881b54 100644
--- 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
index bcd06e11f..17ed32611 100644
--- 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
index cdd50d10b..f5f5b0dec 100644
--- 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
index 33855ecf0..feda2b485 100644
--- 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
index 3be7e825d..034b57ffc 100644
--- 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
index 55f9f3320..27b3a706e 100644
--- 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
index 354920d9b..f887cf9ee 100644
--- 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}"