fix directive

umbraco · Aug 20, 2024 · bacaf11 · bacaf11
1 parent bc02955
commit bacaf11
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 27 deletions.
diff --git 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,17 +148,15 @@ 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>`;
   },
 };
 
 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
@@ -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]);
     });
   }
 }