feat: add dashboard lightweight card

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

Hide file tree

Showing 6 changed files with 169 additions and 0 deletions.
diff --git a/packages/cxl-lumo-styles/scss/badge.scss b/packages/cxl-lumo-styles/scss/badge.scss
@@ -7,6 +7,11 @@
   color: var(--lumo-primary-text-color);
 }
 
+[theme~='badge'][theme~='secondary'] {
+  color: var(--lumo-primary-contrast-color);
+  background-color: var(--cxl-color-brand-blue);
+}
+
 .course-skills {
   [theme~="badge"] {
     margin-right: var(--lumo-space-s);

diff --git a/packages/cxl-lumo-styles/scss/global.scss b/packages/cxl-lumo-styles/scss/global.scss
@@ -6,6 +6,7 @@ html {
   --cxl-content-width: 36em;
   --cxl-wrap-width: 72rem;
   --cxl-wrap-padding: var(--lumo-space-m);
+  --cxl-color-brand-blue: hsla(214, 61%, 25%, 1);
 
   /**
    * Lumo Icons have a documented 4px "safe area" around them. Vaadin Icons don't, for unknown reasons.

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,67 @@ cxl-card {
       display: block;
     }
   }
+
+  &[theme~="cxl-course"] {
+    .entry-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+
+      .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;
+      }
+    }
+
+    [icon="cxl:new"] {
+      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%;
+    }
+
+    .entry-title {
+      margin-bottom: var(--lumo-space-s);
+      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);
+      }
+    }
+
+    .entry-summary {
+      margin-top: var(--lumo-space-l);
+    }
+  }
+
+  &[theme~="cxl-course"][theme~="cxl-course-completed"] {
+    opacity: 0.6;
+  }
+
+  &[theme~="cxl-course"][theme~="cxl-course-new"] {
+    overflow: initial;
+  }
 }
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,67 @@
+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',
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+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="lumo:checkmark"></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>
+        ${State === 'with-roadmaps'
+          ? html`
+            <div class="entry-summary">
+              <span theme="badge primary pill">Team Roadmap</span>
+              <span theme="badge secondary pill">Personal Roadmap</span>
+            </div>`
+          : html``}
+      </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', 'with-roadmaps'],
+      type: 'inline-radio',
+    },
+  },
+};
+
+CXLCourse.story = {
+  name: '[theme=cxl-course]',
+};
diff --git a/packages/storybook/cxl-ui/cxl-tabs-slider/cxl-course-slider.stories.js b/packages/storybook/cxl-ui/cxl-tabs-slider/cxl-course-slider.stories.js
@@ -0,0 +1,30 @@
+import '@conversionxl/cxl-ui/src/components/cxl-card';
+import '@conversionxl/cxl-ui/src/components/cxl-tabs-slider';
+import { html } from 'lit';
+import { CXLCourse } from '../cxl-card/[theme=cxl-course].stories';
+import archiveData from '../cxl-vaadin-accordion/theme=cxl-archive.data.json';
+
+export default {
+  title: 'CXL UI/cxl-tabs-slider',
+};
+
+export const CXLCourseSlider = ({ Cards }) => html`
+  <style>
+    vaadin-tab {
+      max-width: calc(var(--cxl-content-width) / 2);
+    }
+  </style>
+
+  <cxl-tabs-slider orientation="horizontal" theme="minimal">
+    ${archiveData
+      .slice(0, Cards)
+      .map((el) => html` <vaadin-tab>${CXLCourse({ el })}</vaadin-tab> `)}
+  </cxl-tabs-slider>
+`;
+
+Object.assign(CXLCourseSlider, {
+  args: {
+    Cards: 8,
+  },
+  storyName: '[orientation=horizontal]',
+});