OEL-4185: Extending drupal attributes and comments.

Author: tibi2303

.storybook/drupal-attribute.js

@@ -0,0 +1,56 @@
+const { DrupalAttribute } = require("drupal-attribute");
+
+/**
+ * Storybook-specific DrupalAttribute variant.
+ *
+ * Aligns the JS implementation with Drupal's PHP Attribute behavior by keeping
+ * empty-string attribute values (e.g. `hidden=""`) instead of dropping them.
+ */
+class StorybookDrupalAttribute extends DrupalAttribute {
+  toString() {
+    const components = [];
+
+    for (const key of this.keys()) {
+      let value = this.get(key);
+
+      if (value === null || value === undefined || value === false) {
+        continue;
+      }
+
+      if (value === true) {
+        components.push(key);
+        continue;
+      }
+
+      if (Array.isArray(value)) {
+        const filtered = value
+          .filter((v) => v !== null && v !== undefined && v !== "")
+          .map(String);
+
+        if (filtered.length === 0) {
+          continue;
+        }
+
+        value = filtered.join(" ");
+      }
+
+      if (value === key) {
+        components.push(key);
+        continue;
+      }
+
+      if (value === "") {
+        components.push(`${key}=""`);
+        continue;
+      }
+
+      components.push(`${key}="${String(value)}"`);
+    }
+
+    return components.length ? ` ${components.join(" ")}` : "";
+  }
+}
+
+module.exports = {
+  StorybookDrupalAttribute,
+};

.storybook/environment.js

@@ -6,7 +6,7 @@ const {
   createFilesystemLoader,
   createFunction,
 } = require("twing");
-const { DrupalAttribute } = require("drupal-attribute");
+const { StorybookDrupalAttribute } = require("./drupal-attribute");
 
 const projComponentsAbsPath = path.resolve(__dirname, "../src/components");
 const projCompositionsAbsPath = path.resolve(__dirname, "../src/compositions");
@@ -23,7 +23,7 @@ try {
 
   const createAttribute = createFunction(
     "create_attribute",
-    () => Promise.resolve(new DrupalAttribute()),
+    () => Promise.resolve(new StorybookDrupalAttribute()),
     [],
   );
 

src/components/bcl-carousel/__snapshots__/carousel.test.js.snap

@@ -11,7 +11,7 @@ exports[`OE - carousel renders correctly 1`] = `
       class="carousel-indicators d-none d-md-flex"
     >
       <button
-        aria-current="aria-current"
+        aria-current
         aria-label="Slide 1"
         class="active"
         data-bs-slide-to="0"
@@ -175,7 +175,7 @@ exports[`OE - carousel renders correctly when touch swipe is disabled 1`] = `
       class="carousel-indicators d-none d-md-flex"
     >
       <button
-        aria-current="aria-current"
+        aria-current
         aria-label="Slide 1"
         class="active"
         data-bs-slide-to="0"
@@ -338,7 +338,7 @@ exports[`OE - carousel renders correctly with caption title and no caption 1`] =
       class="carousel-indicators d-none d-md-flex"
     >
       <button
-        aria-current="aria-current"
+        aria-current
         aria-label="Slide 1"
         class="active"
         data-bs-slide-to="0"
@@ -489,7 +489,7 @@ exports[`OE - carousel renders correctly with custom intervals 1`] = `
       class="carousel-indicators d-none d-md-flex"
     >
       <button
-        aria-current="aria-current"
+        aria-current
         aria-label="Slide 1"
         class="active"
         data-bs-slide-to="0"
@@ -656,7 +656,7 @@ exports[`OE - carousel renders correctly with dark variant 1`] = `
       class="carousel-indicators d-none d-md-flex"
     >
       <button
-        aria-current="aria-current"
+        aria-current
         aria-label="Slide 1"
         class="active"
         data-bs-slide-to="0"
@@ -819,7 +819,7 @@ exports[`OE - carousel renders correctly with fade and dark variant 1`] = `
       class="carousel-indicators d-none d-md-flex"
     >
       <button
-        aria-current="aria-current"
+        aria-current
         aria-label="Slide 1"
         class="active"
         data-bs-slide-to="0"
@@ -982,7 +982,7 @@ exports[`OE - carousel renders correctly with fade transition 1`] = `
       class="carousel-indicators d-none d-md-flex"
     >
       <button
-        aria-current="aria-current"
+        aria-current
         aria-label="Slide 1"
         class="active"
         data-bs-slide-to="0"
@@ -1145,7 +1145,7 @@ exports[`OE - carousel renders correctly with rounded indicators 1`] = `
       class="carousel-indicators d-none d-md-flex"
     >
       <button
-        aria-current="aria-current"
+        aria-current
         aria-label="Slide 1"
         class="active"
         data-bs-slide-to="0"
@@ -1314,7 +1314,7 @@ exports[`OE - carousel renders correctly with specific slide 1`] = `
         type="button"
       />
       <button
-        aria-current="aria-current"
+        aria-current
         aria-label="Slide 2"
         class="active"
         data-bs-slide-to="1"
@@ -1481,7 +1481,7 @@ exports[`OE - carousel renders correctly with title 1`] = `
       class="carousel-indicators d-none d-md-flex"
     >
       <button
-        aria-current="aria-current"
+        aria-current
         aria-label="Slide 1"
         class="active"
         data-bs-slide-to="0"
@@ -1643,7 +1643,7 @@ exports[`OE - carousel renders correctly without autoplay 1`] = `
       class="carousel-indicators d-none d-md-flex"
     >
       <button
-        aria-current="aria-current"
+        aria-current
         aria-label="Slide 1"
         class="active"
         data-bs-slide-to="0"
@@ -1806,7 +1806,7 @@ exports[`OE - carousel renders correctly without controls 1`] = `
       class="carousel-indicators d-none d-md-flex"
     >
       <button
-        aria-current="aria-current"
+        aria-current
         aria-label="Slide 1"
         class="active"
         data-bs-slide-to="0"

src/components/bcl-dropdown/__snapshots__/dropdown.test.js.snap

@@ -44,7 +44,7 @@ exports[`OE - dropdown renders correctly 1`] = `
         <button
           aria-disabled="true"
           class="dropdown-item"
-          disabled="disabled"
+          disabled
           type="button"
         >
           I'm a disabled button
@@ -107,7 +107,7 @@ exports[`OE - dropdown renders correctly with alignment end 1`] = `
         <button
           aria-disabled="true"
           class="dropdown-item"
-          disabled="disabled"
+          disabled
           type="button"
         >
           I'm a disabled button
@@ -170,7 +170,7 @@ exports[`OE - dropdown renders correctly with dark mode 1`] = `
         <button
           aria-disabled="true"
           class="dropdown-item"
-          disabled="disabled"
+          disabled
           type="button"
         >
           I'm a disabled button
@@ -233,7 +233,7 @@ exports[`OE - dropdown renders correctly with direction dropup 1`] = `
         <button
           aria-disabled="true"
           class="dropdown-item"
-          disabled="disabled"
+          disabled
           type="button"
         >
           I'm a disabled button
@@ -296,7 +296,7 @@ exports[`OE - dropdown renders correctly with trigger link 1`] = `
         <button
           aria-disabled="true"
           class="dropdown-item"
-          disabled="disabled"
+          disabled
           type="button"
         >
           I'm a disabled button
@@ -356,7 +356,7 @@ exports[`OE - dropdown renders correctly without wrapper 1`] = `
       <button
         aria-disabled="true"
         class="dropdown-item"
-        disabled="disabled"
+        disabled
         type="button"
       >
         I'm a disabled button

src/components/bcl-form-input/__snapshots__/form-input.test.js.snap

@@ -218,7 +218,7 @@ exports[`OE - Form Input renders correctly when disabled 1`] = `
   <input
     aria-describedby="helperText"
     class="form-control"
-    disabled="disabled"
+    disabled
     id="example-form-input-1"
     type="text"
   />
@@ -323,7 +323,7 @@ exports[`OE - Form Input renders correctly when readonly 1`] = `
     aria-describedby="helperText"
     class="form-control"
     id="example-form-input-1"
-    readonly="readonly"
+    readonly
     type="text"
   />
   <div
@@ -357,7 +357,7 @@ exports[`OE - Form Input renders correctly when required 1`] = `
     aria-describedby="helperText"
     class="form-control"
     id="example-form-input-1"
-    required="required"
+    required
     type="text"
   />
   <div