From bacaf111ad4a7bd1230d32794881f9d729c5d079 Mon Sep 17 00:00:00 2001
From: JesmoDev <26099018+JesmoDev@users.noreply.github.com>
Date: Tue, 20 Aug 2024 10:56:34 +0200
Subject: [PATCH] fix directive

---
 packages/uui-button/lib/uui-button.stories.ts | 18 +++++-----
 storyhelpers/spread-directive.ts              | 33 +++++++++----------
 2 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/packages/uui-button/lib/uui-button.stories.ts b/packages/uui-button/lib/uui-button.stories.ts
index 6b1657890..bc1030858 100644
--- a/packages/uui-button/lib/uui-button.stories.ts
+++ b/packages/uui-button/lib/uui-button.stories.ts
@@ -59,7 +59,7 @@ const meta: Meta = {
     ...cssProps,
   },
   render: args => {
-    return html`<uui-button ${spread(args, cssProps)}></uui-button>`;
+    return html`<uui-button ${spread(args)}></uui-button>`;
   },
 };
 
@@ -88,7 +88,7 @@ export const Anchor: Story = {
 
 export const Badge: Story = {
   render: args => {
-    return html`<uui-button ${spread(args, cssProps)}>
+    return html`<uui-button ${spread(args)}>
       <uui-badge color="danger">2</uui-badge>
       Button
     </uui-button> `;
@@ -99,7 +99,7 @@ export const Icon: Story = {
   render: args => {
     return html`
       <uui-icon-registry-essential>
-        <uui-button ${spread(args, cssProps)}>
+        <uui-button ${spread(args)}>
           <uui-icon name="favorite"></uui-icon>
           Button
         </uui-button>
@@ -118,7 +118,7 @@ export const IconSolo: Story = {
   render: args => {
     return html`
       <uui-icon-registry-essential>
-        <uui-button ${spread(args, cssProps)}>
+        <uui-button ${spread(args)}>
           <uui-icon name="favorite"></uui-icon>
         </uui-button>
       </uui-icon-registry-essential>
@@ -133,7 +133,7 @@ export const Sizing: Story = {
   render: args => {
     return html`<uui-button
       style="font-size: ${args['font-size']}"
-      ${spread(args, cssProps, ['font-size'])}></uui-button>`;
+      ${spread(args, ['font-size'])}></uui-button>`;
   },
 };
 
@@ -148,9 +148,7 @@ export const ContentAlign: Story = {
     '--uui-button-content-align': 'left',
   },
   render: args => {
-    return html`<uui-button
-      style="width: 400px"
-      ${spread(args, cssProps)}></uui-button>`;
+    return html`<uui-button style="width: 400px" ${spread(args)}></uui-button>`;
   },
 };
 
@@ -158,7 +156,7 @@ export const SlottedContent: Story = {
   render: args => {
     return html`
       <uui-icon-registry-essential>
-        <uui-button ${spread(args, cssProps)}>
+        <uui-button ${spread(args)}>
           <div
             style="display: flex; flex-direction: column; align-items: center; gap: 3px">
             <uui-icon name="settings"></uui-icon>
@@ -191,7 +189,7 @@ export const LooksAndColors: Story = {
             ${looks.map(
               look =>
                 html` <uui-button
-                  ${spread(args, cssProps, ['label', 'look', 'color'])}
+                  ${spread(args, ['label', 'look', 'color'])}
                   look=${look}
                   color=${color}
                   label=${uppercaseFirstLetter(look)}></uui-button>`,
diff --git a/storyhelpers/spread-directive.ts b/storyhelpers/spread-directive.ts
index 1cd16d4ca..4d8e896c6 100644
--- a/storyhelpers/spread-directive.ts
+++ b/storyhelpers/spread-directive.ts
@@ -5,39 +5,38 @@ import { directive, Directive } from 'lit/directive.js';
 
 class UUIStoryBookSpreadDirective extends Directive {
   // TODO: We don't need the render method, but it's required by the Directive class
-  render(
-    props: object,
-    cssProps: Partial<ArgTypes<Args>> = {},
-    excludeProps: string[] = [],
-  ): unknown {
+  render(props: object, excludeProps: string[] = []): unknown {
     return this.render(props);
   }
-  update(
-    part: any,
-    [props, cssProps = {}, excludeProps = []]: [
-      any,
-      Partial<ArgTypes<Args>>,
-      string[],
-    ],
-  ): void {
+  update(part: any, [props, excludeProps = []]: [any, string[]]): void {
     // Remove Storybooks onClick event from props
     delete props.onClick;
 
     const excludeSet = new Set(excludeProps);
-    const cssPropSet = new Set(Object.keys(cssProps));
 
     // Apply each property from props to the element
     Object.keys(props).forEach(key => {
       if (excludeSet.has(key)) return;
 
-      // Check if the property is a CSS property
-      if (cssPropSet.has(key)) {
+      // Check if the property is a CSS property (starts with --)
+      if (key.startsWith('--')) {
         (part.element as HTMLElement).style.setProperty(key, props[key]);
         return;
       }
 
       part.element[key] = props[key];
-      // (part.element as HTMLElement).setAttribute(key, props[key]); Not needed for now
+
+      // If the property is a boolean, toggle the attribute
+      if (typeof props[key] === 'boolean') {
+        if (props[key]) {
+          (part.element as HTMLElement).setAttribute(key, '');
+        } else {
+          (part.element as HTMLElement).removeAttribute(key);
+        }
+        return;
+      }
+
+      (part.element as HTMLElement).setAttribute(key, props[key]);
     });
   }
 }