feat(cxl-ui): [cxl-vaadin-accordion] add cxl-minidegree-card theme

conversionxl · Apr 10, 2023 · 9e1ac30 · 9e1ac30
1 parent 4f66ea9
commit 9e1ac30
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 0 deletions.
diff --git a/packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss b/packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss
@@ -55,6 +55,25 @@ cxl-vaadin-accordion {
     }
   }
 
+  /**
+   * Theme "cxl-minidegree-card".
+   */
+  &[theme~="cxl-minidegree-card"] {
+    .entry-byline a {
+      text-decoration: underline;
+    }
+
+    .entry-title {
+      height: initial;
+      margin: 0;
+      margin-top: var(--lumo-space-s);
+    }
+
+    .entry-title a {
+      color: inherit;
+    }
+  }
+
   /**
    * Theme "cxl-minidegree-track".
    */

diff --git a/packages/storybook/cxl-ui/cxl-vaadin-accordion.stories.js b/packages/storybook/cxl-ui/cxl-vaadin-accordion.stories.js
@@ -2,6 +2,7 @@ import { CXLVaadinAccordionThemeArchive } from './cxl-vaadin-accordion/cxl-accor
 import { CXLPlaybookAccordion } from './cxl-vaadin-accordion/cxl-playbook-accordion.story';
 import { CXLVaadinAccordionThemeVaadin } from './cxl-vaadin-accordion/vaadin-accordion-panel[theme=vaadin].story';
 import { CXLVaadinAccordionThemeFaq } from './cxl-vaadin-accordion/theme=cxl-faq.story';
+import { CXLVaadinAccordionThemeMinidegree } from './cxl-vaadin-accordion/cxl-accordion-card-minidegree.story';
 import { CXLVaadinAccordionThemeMinidegreeTrack } from './cxl-vaadin-accordion/theme=cxl-minidegree-track.story';
 import { CXLHubsAndPlaybooks } from './cxl-vaadin-accordion/cxl-hubs-and-playbooks.story';
 
@@ -28,6 +29,7 @@ export {
   CXLPlaybookAccordion,
   CXLVaadinAccordionThemeArchive,
   CXLVaadinAccordionThemeFaq,
+  CXLVaadinAccordionThemeMinidegree,
   CXLVaadinAccordionThemeMinidegreeTrack,
   CXLVaadinAccordionThemeVaadin,
   CXLHubsAndPlaybooks,

diff --git a/packages/storybook/cxl-ui/cxl-vaadin-accordion/cxl-accordion-card-minidegree.story.js b/packages/storybook/cxl-ui/cxl-vaadin-accordion/cxl-accordion-card-minidegree.story.js
@@ -0,0 +1,34 @@
+import '@conversionxl/cxl-ui/src/components/cxl-accordion-card.js';
+import '@conversionxl/cxl-ui/src/components/cxl-vaadin-accordion.js';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import archiveData from './theme=cxl-archive.data.json';
+
+export const CXLVaadinAccordionThemeMinidegree = () => html`
+  <cxl-vaadin-accordion theme="cxl-accordion-card cxl-minidegree-card">
+    ${archiveData.map(
+      (el) => html`
+        <cxl-accordion-card class="entry" theme="dark">
+          <header class="entry-header" slot="summary">
+            <label class="entry-type">Minidegree</label>
+            <h3 class="entry-title" itemprop="headline">
+              <a href=${el.conversionxl_certificate_sales_page} rel="bookmark" itemprop="url"
+                >${el.title.raw}</a
+              >
+            </h3>
+            <div class="entry-byline">
+              <a href=${el.conversionxl_certificate_sales_page}>View training</a>
+            </div>
+            <div class="entry-byline">
+              Program duration: ${el.conversionxl_live_course_duration}
+              <hr />
+            </div>
+          </header>
+          <div class="entry-summary" itemprop="description">
+            ${unsafeHTML(String(el.content.cxl_get_extended_main))}
+          </div>
+        </cxl-accordion-card>
+      `
+    )}
+  </cxl-vaadin-accordion>
+`;