fix(dropdown): replace hardcoded icon with a slot (#189)

statistikZH · Jun 5, 2024 · 8954616 · 8954616
1 parent 78c3e68
commit 8954616
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 7 deletions.
diff --git a/src/components/dropdown/Dropdown.js b/src/components/dropdown/Dropdown.js
@@ -1,13 +1,15 @@
-import { html, LitElement } from "lit"
+import { html, LitElement, nothing } from "lit"
 import { createRef, ref } from "lit/directives/ref.js"
 
-import styles from "./dropdown.css"
+import { HasSlotController } from "../../lib/hasSlotController.js"
 
 import "../button/leu-button.js"
 import "../menu/leu-menu.js"
 import "../menu/leu-menu-item.js"
 import "../popup/leu-popup.js"
 
+import styles from "./dropdown.css"
+
 /**
  * @tagname leu-dropdown
  */
@@ -19,6 +21,8 @@ export class LeuDropdown extends LitElement {
     expanded: { type: Boolean, reflect: true },
   }
 
+  hasSlotController = new HasSlotController(this, ["icon"])
+
   constructor() {
     super()
 
@@ -114,6 +118,7 @@ export class LeuDropdown extends LitElement {
   }
 
   render() {
+    const hasIcon = this.hasSlotController.test("icon")
     return html`
       <leu-popup
         ?active=${this.expanded}
@@ -133,11 +138,11 @@ export class LeuDropdown extends LitElement {
           @click=${this._handleToggleClick}
           @keyup=${this._keyUpToggleHandler}
         >
-          <leu-icon name="download" slot="before"></leu-icon>${this
-            .label}</leu-button
+          ${hasIcon ? html`<slot name="icon" slot="before"></slot>` : nothing}
+          ${this.label}</leu-button
         >
         <div id="content" class="content" ?hidden=${!this.expanded}>
-          <slot @slotchange=${this._handleSlotChange}></slot>
+          <slot></slot>
         </div>
       </leu-popup>
     `

diff --git a/src/components/dropdown/stories/dropdown.stories.js b/src/components/dropdown/stories/dropdown.stories.js
@@ -1,6 +1,12 @@
-import { html } from "lit"
+import { html, nothing } from "lit"
 import "../leu-dropdown.js"
+import "../../icon/leu-icon.js"
 
+import { paths as iconPaths } from "../../icon/paths.js"
+
+/**
+ * @type {import("@storybook/web-components").Meta}
+ */
 export default {
   title: "Dropdown",
   component: "leu-dropdown",
@@ -10,10 +16,17 @@ export default {
       url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=136815-217650&mode=design&t=lzVrtq8lxYVJU5TB-11",
     },
   },
+  argTypes: {
+    icon: {
+      control: "select",
+      options: Object.keys(iconPaths),
+    },
+  },
 }
 
-function Template({ label, expanded }) {
+function Template({ label, expanded, icon }) {
   return html` <leu-dropdown label=${label} ?expanded=${expanded}>
+    ${icon ? html`<leu-icon name=${icon} slot="icon"></leu-icon>` : nothing}
     <leu-menu>
       <leu-menu-item>Als CSV Tabelle</leu-menu-item>
       <leu-menu-item>Als XLS Tabelle</leu-menu-item>
@@ -28,4 +41,10 @@ function Template({ label, expanded }) {
 export const Regular = Template.bind({})
 Regular.args = {
   label: "Download",
+  icon: "download",
+}
+
+export const WithoutIcon = Template.bind({})
+WithoutIcon.args = {
+  label: "Download",
 }