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

conversionxl · Apr 6, 2023 · 44201af · 44201af
1 parent 4f66ea9
commit 44201af
Show file tree

Hide file tree

Showing 3 changed files with 49 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
@@ -1,3 +1,4 @@
+import { CXLVaadinAccordionMinidegree } from './cxl-vaadin-accordion/cxl-accordion-card-minidegree.story';
 import { CXLVaadinAccordionThemeArchive } from './cxl-vaadin-accordion/cxl-accordion-card.story';
 import { CXLPlaybookAccordion } from './cxl-vaadin-accordion/cxl-playbook-accordion.story';
 import { CXLVaadinAccordionThemeVaadin } from './cxl-vaadin-accordion/vaadin-accordion-panel[theme=vaadin].story';
@@ -26,6 +27,7 @@ CXLHubsAndPlaybooks.storyName = 'cxl-hubs-and-playbooks';
 
 export {
   CXLPlaybookAccordion,
+  CXLVaadinAccordionMinidegree,
   CXLVaadinAccordionThemeArchive,
   CXLVaadinAccordionThemeFaq,
   CXLVaadinAccordionThemeMinidegreeTrack,

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,28 @@
+import '@conversionxl/cxl-ui/src/components/cxl-accordion-card.js';
+import '@conversionxl/cxl-ui/src/components/cxl-vaadin-accordion.js';
+import { html } from 'lit';
+
+export const CXLVaadinAccordionMinidegree = () => {
+  return html`
+    <cxl-vaadin-accordion theme="cxl-accordion-card cxl-minidegree-card">
+      <cxl-accordion-card class="entry" theme="dark">
+        <header class="entry-header" slot="summary">
+          <label class="entry-type"> Course </label>
+          <h3 class="entry-title" itemprop="headline">
+            <a href="#" rel="bookmark" itemprop="url">Sample Title</a>
+          </h3>
+          <div class="entry-byline">
+            <a href="#">View training</a>
+          </div>
+          <div class="entry-byline">
+            Program duration: 1h
+            <hr />
+          </div>
+        </header>
+        <div class="entry-summary" itemprop="description">
+          This is an example of extended content.
+        </div>
+      </cxl-accordion-card>
+    </cxl-vaadin-accordion>
+  `;
+};