From 8d0f8abfa867a69ee86e43458c5865e96f8e7aef Mon Sep 17 00:00:00 2001
From: Kertu Ilves <k@kertu.me>
Date: Wed, 5 Jul 2023 11:38:06 +0300
Subject: [PATCH] feat: add dashboard lightweight card
 https://app.clickup.com/t/861n0qm47

---
 packages/cxl-lumo-styles/src/icons.js         |  6 ++
 packages/cxl-ui/scss/global/cxl-card.scss     | 54 ++++++++++++++++++
 .../cxl-card/[theme=cxl-course].stories.js    | 57 +++++++++++++++++++
 3 files changed, 117 insertions(+)
 create mode 100644 packages/storybook/cxl-ui/cxl-card/[theme=cxl-course].stories.js

diff --git a/packages/cxl-lumo-styles/src/icons.js b/packages/cxl-lumo-styles/src/icons.js
index 677423744..83668e554 100644
--- a/packages/cxl-lumo-styles/src/icons.js
+++ b/packages/cxl-lumo-styles/src/icons.js
@@ -53,6 +53,12 @@ $documentContainer.innerHTML = `
           <path d="M5.614.416a4.538 4.538 0 011.824.086A4.259 4.259 0 005.614.416zM2.322 12.449l.002.009c-.747-1.19-.94-.39-.97-.224-.587-1.581-.96-2.743-.96-2.743a10.93 10.93 0 01-.15-.61L.22 8.77c-.034-.168-.063-.33-.09-.484v-.003a16.671 16.671 0 01-.077-.583C-.04 6.725.04 5.89.23 5.176c.011-.039.02-.08.034-.117.01-.034.02-.07.033-.102.335-1.039.72-1.273.72-1.273 1-.892.963.434.963.434-1.05 2.304.227 7.84.338 8.312.003.006.003.013.005.019zM3.472 1.432A4.452 4.452 0 015.24.492a4.102 4.102 0 00-1.768.94z"/>
           <path d="M1.355 12.234l-.006.029A17.108 17.108 0 01.243 8.88c.043.2.094.403.15.61 0 0 .374 1.16.962 2.743zM.054 7.7C-.064 6.576.05 5.967.05 5.967c.055-.3.116-.563.18-.79-.19.714-.269 1.549-.175 2.525z"/>
         </g>
+        <g id="new" width="20" height="20" viewBox="0 0 20 20">
+          <path d="M9.99995 1.12872C10.3458 1.12872 10.6524 1.35092 10.7601 1.67952L11.5362 4.04692C12.1631 5.9592 13.5616 7.52186 15.393 8.35618L17.4027 9.27176C17.6879 9.40172 17.871 9.6863 17.871 9.99977C17.871 10.3132 17.6879 10.5978 17.4027 10.7278L15.393 11.6433C13.5617 12.4776 12.1631 14.0403 11.5362 15.9526L10.7602 18.32C10.6524 18.6486 10.3458 18.8708 9.99995 18.8708C9.65414 18.8708 9.34748 18.6486 9.23976 18.32L8.4637 15.9526C7.83683 14.0403 6.43824 12.4776 4.6069 11.6433L2.59724 10.7278C2.31199 10.5978 2.12891 10.3132 2.12891 9.99977C2.12891 9.6863 2.31198 9.40172 2.59724 9.27176L4.60694 8.35618C6.43826 7.52186 7.83683 5.9592 8.4637 4.04692L9.23976 1.67952C9.34748 1.35092 9.65414 1.12872 9.99995 1.12872ZM9.99995 4.49693L9.98409 4.54532C9.21792 6.88256 7.50855 8.79248 5.27028 9.81219L4.85857 9.99976L5.27022 10.1873C7.50853 11.207 9.21792 13.117 9.9841 15.4542L9.99995 15.5026L10.0158 15.4542C10.782 13.117 12.4914 11.207 14.7297 10.1873L15.1413 9.99976L14.7296 9.81219C12.4914 8.79248 10.782 6.88256 10.0158 4.54532L9.99995 4.49693Z"/>
+        </g>
+        <g id="check" width="24" height="24" viewBox="0 0 24 24">
+          <path d="M11.1 18.6L4 13.4L5.7 11L10.5 14.5L17.1 6L19.4 7.8L11.1 18.6Z"/>
+        </g>
       </defs>
     </svg>
   </vaadin-iconset>
diff --git a/packages/cxl-ui/scss/global/cxl-card.scss b/packages/cxl-ui/scss/global/cxl-card.scss
index 1ae5ad441..aff81d02d 100644
--- a/packages/cxl-ui/scss/global/cxl-card.scss
+++ b/packages/cxl-ui/scss/global/cxl-card.scss
@@ -24,4 +24,58 @@ cxl-card {
       display: block;
     }
   }
+
+  &[theme~="cxl-course"] {
+    .entry-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+
+      > vaadin-icon {
+        position: absolute;
+        top: calc(var(--lumo-space-m) * -1);
+        right: 0;
+        width: calc(var(--lumo-space-m) * 2);
+        height: calc(var(--lumo-space-m) * 2);
+        padding: 6px;
+        color: var(--lumo-primary-contrast-color);
+        background-color: var(--lumo-primary-color);
+        border-radius: 100%;
+      }
+
+      .thumbnail {
+        width: calc(var(--lumo-icon-size-s) * 4);
+        height: calc(var(--lumo-icon-size-s) * 4);
+        margin: 0 0 0 var(--lumo-space-s);
+        border: 0;
+      }
+    }
+
+    .entry-title {
+      font-weight: 600;
+
+      > vaadin-icon {
+        margin-top: calc(var(--lumo-space-xs) * -1);
+        color: var(--lumo-primary-color);
+      }
+    }
+
+    .entry-byline {
+      color: var(--lumo-contrast-70pct);
+
+      > div {
+        display: flex;
+        align-items: center;
+      }
+
+      vaadin-icon {
+        margin-right: var(--lumo-space-xs);
+        font-size: var(--lumo-font-size-m);
+      }
+    }
+  }
+
+  &[theme~="cxl-course"][theme~="cxl-course-completed"] {
+    opacity: 0.6;
+  }
 }
diff --git a/packages/storybook/cxl-ui/cxl-card/[theme=cxl-course].stories.js b/packages/storybook/cxl-ui/cxl-card/[theme=cxl-course].stories.js
new file mode 100644
index 000000000..45f3b29fa
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-card/[theme=cxl-course].stories.js
@@ -0,0 +1,57 @@
+import { html } from 'lit';
+import '@conversionxl/cxl-ui/src/components/cxl-card.js';
+import '@conversionxl/cxl-lumo-styles';
+
+export default {
+  title: 'CXL UI/cxl-card',
+};
+
+const Template = ({ el, State }) => html`
+  <cxl-card
+    id="${el.cxl_hybrid_attr_post['@attributes'].id}"
+    class="${el.cxl_hybrid_attr_post['@attributes'].class}"
+    theme="cxl-course cxl-course-${State}"
+  >
+    <header class="entry-header">
+      ${State === 'new'
+      ? html`<vaadin-icon icon="cxl:new"></vaadin-icon>`
+      : html``}
+      <div>
+        <div class="entry-title">
+          Account based marketing
+          ${State === 'completed'
+            ? html`<vaadin-icon icon="cxl:check"></vaadin-icon>`
+            : html``}
+        </div>
+        <div class="entry-byline">
+          <div><vaadin-icon icon="lumo:clock"></vaadin-icon>3h 00min</div>
+          <div>By: Ton Wesseling</div>
+        </div>
+      </div>
+      <img
+        class="thumbnail"
+        src="https://cxl.com/institute/wp-content/uploads/2020/05/48192546_10156982340630746_8127333122065825792_n-wpv_400pxx400px_center_center.jpg"
+      />
+    </header>
+  </cxl-card>
+`;
+
+export const CXLCourse = Template.bind({});
+
+CXLCourse.args = {
+  el: { cxl_hybrid_attr_post: { '@attributes': {} } },
+  State: 'default',
+};
+
+CXLCourse.argTypes = {
+  State: {
+    control: {
+      options: ['default', 'new', 'completed'],
+      type: 'inline-radio',
+    },
+  },
+};
+
+CXLCourse.story = {
+  name: '[theme=cxl-course]',
+};