Make the accordion item summary slottable (#1399)

sl-design-system · Jul 8, 2024 · de05a3b · de05a3b
1 parent bcac94f
commit de05a3b
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 20 deletions.
diff --git a/.changeset/witty-cameras-protect.md b/.changeset/witty-cameras-protect.md
@@ -0,0 +1,5 @@
+---
+'@sl-design-system/accordion': minor
+---
+
+Add the ability to slot a custom summary
diff --git a/packages/components/accordion/src/accordion-item.ts b/packages/components/accordion/src/accordion-item.ts
@@ -18,10 +18,11 @@ declare global {
  * @csspart panel - The body of the accordion-item
  *
  * @slot default - Body content for the accordion
+ * @slot summary - Header content for the accordion; use this if the `summary` property is not enough
  */
 @localized()
 export class AccordionItem extends LitElement {
-  /** @private */
+  /** @internal */
   static override styles: CSSResultGroup = styles;
 
   /** Whether we should actually animate opening/closing the wrapper. */
@@ -69,7 +70,7 @@ export class AccordionItem extends LitElement {
               <rect x="-1" y="-8" width="2" height="16" rx="0.824742" fill="currentColor" />
             </g>
           </svg>
-          ${this.summary}
+          <slot name="summary">${this.summary}</slot>
         </summary>
         <div class="wrapper">
           <div class="body">

diff --git a/packages/components/accordion/src/accordion.stories.ts b/packages/components/accordion/src/accordion.stories.ts
@@ -1,4 +1,5 @@
 import '@sl-design-system/button/register.js';
+import '@sl-design-system/icon/register.js';
 import { type Meta, type StoryObj } from '@storybook/web-components';
 import { type TemplateResult, html } from 'lit';
 import '../register.js';
@@ -23,24 +24,6 @@ export default {
   render: ({ items, single }) => html`<sl-accordion ?single=${single}>${items}</sl-accordion>`
 } satisfies Meta<Props>;
 
-export const All: Story = {
-  render: () => {
-    return html`
-      <sl-accordion>
-        <sl-accordion-item summary="Discovering Dinosaurs: A Prehistoric Adventure" open>
-          Embark on a thrilling journey back in time to the age of dinosaurs! 🌎🦕🌿🦖
-        </sl-accordion-item>
-        <sl-accordion-item summary="Journey Through Ancient Civilizations">
-          Pack your virtual bags and travel through time to ancient Egypt, Greece, Rome, and beyond 🌍🏛️🔍🏺
-        </sl-accordion-item>
-        <sl-accordion-item summary="Space Odyssey: Exploring Planets and Stars" disabled>
-          Buckle up for a cosmic adventure! 🚀🪐👽
-        </sl-accordion-item>
-      </sl-accordion>
-    `;
-  }
-};
-
 export const Basic: Story = {
   args: {
     items: html`
@@ -243,3 +226,58 @@ export const Sticky: Story = {
     `
   }
 };
+
+export const CustomSummary: Story = {
+  args: {
+    items: html`
+      <style>
+        div[slot] {
+          align-items: center;
+          display: flex;
+          flex: 1;
+          justify-content: space-between;
+          gap: 0.5rem;
+        }
+      </style>
+      <sl-accordion-item>
+        <div slot="summary">
+          Discovering Dinosaurs: A Prehistoric Adventure
+          <sl-icon name="circle-check-solid" size="lg"></sl-icon>
+        </div>
+        Embark on a thrilling journey back in time to the age of dinosaurs! 🌎🦕🌿🦖
+      </sl-accordion-item>
+      <sl-accordion-item>
+        <div slot="summary">
+          Journey Through Ancient Civilizations
+          <sl-icon name="octagon-exclamation-solid" size="lg"></sl-icon>
+        </div>
+        Pack your virtual bags and travel through time to ancient Egypt, Greece, Rome, and beyond 🌍🏛️🔍🏺
+      </sl-accordion-item>
+      <sl-accordion-item>
+        <div slot="summary">
+          Space Odyssey: Exploring Planets and Stars
+          <sl-icon name="info" size="lg"></sl-icon>
+        </div>
+        Buckle up for a cosmic adventure! 🚀🪐👽
+      </sl-accordion-item>
+    `
+  }
+};
+
+export const All: Story = {
+  render: () => {
+    return html`
+      <sl-accordion>
+        <sl-accordion-item summary="Discovering Dinosaurs: A Prehistoric Adventure" open>
+          Embark on a thrilling journey back in time to the age of dinosaurs! 🌎🦕🌿🦖
+        </sl-accordion-item>
+        <sl-accordion-item summary="Journey Through Ancient Civilizations">
+          Pack your virtual bags and travel through time to ancient Egypt, Greece, Rome, and beyond 🌍🏛️🔍🏺
+        </sl-accordion-item>
+        <sl-accordion-item summary="Space Odyssey: Exploring Planets and Stars" disabled>
+          Buckle up for a cosmic adventure! 🚀🪐👽
+        </sl-accordion-item>
+      </sl-accordion>
+    `;
+  }
+};