@warp-ds/elements 2.5.1 → 2.6.0-next.2

package/dist/.storybook/utilities.d.ts

@@ -3,6 +3,7 @@
  *
  * - Empty strings are treated as not set.
  * - Boolean false don't get set.
+ * - camelCase property names are converted to kebab-case attribute names.
  *
  * @example
  * ```ts

package/dist/.storybook/utilities.js

@@ -1,8 +1,16 @@
+/**
+ * Converts camelCase to kebab-case.
+ * @example camelToKebab('openOnFocus') // 'open-on-focus'
+ */
+function camelToKebab(str) {
+    return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
 /**
  * Massages storybook args before being spread to HTML attributes.
  *
  * - Empty strings are treated as not set.
  * - Boolean false don't get set.
+ * - camelCase property names are converted to kebab-case attribute names.
  *
  * @example
  * ```ts
@@ -26,27 +34,27 @@
  * ```
  */
 export function prespread(args) {
-    const newArgs = {
-        ...args,
-    };
-    for (const field of Object.keys(newArgs)) {
+    const newArgs = {};
+    for (const field of Object.keys(args)) {
         const value = args[field];
+        // Skip empty strings
+        if (value === '') {
+            continue;
+        }
+        // Convert camelCase to kebab-case for attribute names
+        const attrName = camelToKebab(field);
         // Add Lit syntax for boolean attributes
         if (typeof value === 'boolean') {
-            newArgs[`?${field}`] = value;
-            delete newArgs[field];
+            newArgs[`?${attrName}`] = value;
+            continue;
         }
-        // Add Lit syntax for complex properties
+        // Add Lit syntax for complex properties (keep camelCase for properties)
         if (typeof value === 'object') {
             newArgs[`.${field}`] = value;
-            delete newArgs[field];
-        }
-        // The manifest has a bunch of default empty strings (which we should probably investigate)
-        // that turn on features that should be off in Storybook canvases.
-        // Remove the empty strings.
-        if (newArgs[field] === '') {
-            delete newArgs[field];
+            continue;
         }
+        // String and number values use kebab-case attribute names
+        newArgs[attrName] = value;
     }
     return newArgs;
 }