feat: add dashboard lightweight card

https://app.clickup.com/t/861n0qm47
conversionxl · Jul 5, 2023 · 8d0f8ab · 8d0f8ab
1 parent 3bdb785
commit 8d0f8ab
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 0 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/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
@@ -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]',
+};