using correct way to generate component-*.json files for UE

Author: joannehoazadobe

component-definition.json

@@ -127,7 +127,7 @@
             "da": {
               "name": "columns-row",
               "behaviour": "columns-row"
-            } 
+            }
           }
         },
         {

component-models.json

@@ -57,7 +57,7 @@
       },
       {
         "component": "select",
-        "name": "background-color",
+        "name": "data-background-color",
         "value": "",
         "label": "Background Color",
         "valueType": "string",
@@ -177,7 +177,7 @@
         "component": "text",
         "name": "root[data-text-color-t]",
         "value": "",
-        "label": "Try direct data attribute 2",
+        "label": "Try direct data attribute 3",
         "valueType": "string"
       }
     ]
@@ -319,4 +319,4 @@
       }
     ]
   }
-]
+]

package.json

@@ -28,10 +28,10 @@
     "eslint": "8.57.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-plugin-import": "2.29.1",
-    "stylelint": "16.7.0",
-    "stylelint-config-standard": "36.0.1",
     "husky": "^9.1.7",
     "merge-json-cli": "^1.0.4",
-    "npm-run-all": "^4.1.5"
+    "npm-run-all": "^4.1.5",
+    "stylelint": "16.7.0",
+    "stylelint-config-standard": "36.0.1"
   }
 }

ue/models/blocks/columns.json

@@ -27,7 +27,7 @@
       "id": "columns-cell",
       "plugins": {
         "da": {
-          "unsafeHTML": "<div></div>",
+          "unsafeHTML": "<div data-background-color=\"placeholder\"></div>",
           "behaviour": "columns-cell"
         }
       }
@@ -47,6 +47,27 @@
             "numberMin": 1,
             "numberMax": 6
           }
+        },
+        {
+          "component": "text",
+          "name": "div:nth-child(1)[data-background-color]",
+          "value": "",
+          "label": "Background Color",
+          "valueType": "string"
+        },
+        {
+          "component": "text",
+          "name": "div:nth-child(1)[data-text-color]",
+          "value": "",
+          "label": "Text Color",
+          "valueType": "string"
+        },
+        {
+          "component": "text",
+          "name": "root[data-text-color-t]",
+          "value": "",
+          "label": "Try direct data attribute 3",
+          "valueType": "string"
         }
       ]
     }

ue/models/blocks/hero.json

@@ -5,7 +5,7 @@
       "id": "hero",
       "plugins": {
         "da": {
-          "unsafeHTML": "<div class=\"hero\"><div><div><picture><source type=\"image/webp\" srcset=\"\"><source type=\"image/jpeg\" srcset=\"\"><img loading=\"lazy\"></picture><h1></h1></div></div></div>"
+          "unsafeHTML": "<div class=\"hero\"><div><div><picture><source type=\"image/webp\" srcset=\"\"><source type=\"image/jpeg\" srcset=\"\"><img loading=\"lazy\"></picture><div></div></div></div></div>"
         }
       }
     }
@@ -29,17 +29,10 @@
           "value": ""
         },
         {
-          "component": "text",
-          "name": "div:nth-child(1)>div:nth-child(1)>h1:nth-child(2)",
-          "value": "",
-          "label": "Text",
-          "valueType": "string"
-        },  
-        {
-          "component": "text",
-          "name": "div:nth-child(1)>div:nth-child(1)>p:nth-child(3)",
+          "component": "richtext",
+          "name": "div:nth-child(1)>div:nth-child(1)>div:nth-child(2)",
           "value": "",
-          "label": "CTA Text",
+          "label": "Text and CTA",
           "valueType": "string"
         }
       ]

ue/models/blocks/product-carousel.json

@@ -0,0 +1,29 @@
+{
+    "definitions": [
+      {
+        "title": "Product Carousel",
+        "id": "product-carousel",
+        "plugins": {
+          "da": {
+            "unsafeHTML": "<div class=\"product-carousel\"></div>"
+          }
+        }
+      }
+    ],
+    "models": [
+      {
+        "id": "product-carousel",
+        "fields": [
+          {
+            "component": "text",
+            "name": "div:nth-child(1)>div:nth-child(1)>p:nth-child(1)>a:nth-child(1)[href]",
+            "value": "",
+            "label": "JSON Spreadsheet URL",
+            "valueType": "string"
+          }
+        ]
+      }
+    ],
+    "filters": []
+  }
+  

ue/models/section.json

@@ -26,6 +26,23 @@
               "value": "highlight"
             }
           ]
+        },
+        {
+          "component": "select",
+          "name": "data-background-color",
+          "value": "",
+          "label": "Background Color",
+          "valueType": "string",
+          "options": [
+            {
+              "name": "Black",
+              "value": "black"
+            },
+            {
+              "name": "White",
+              "value": "white"
+            }
+          ]
         }
       ]
     }
@@ -43,6 +60,7 @@
         "form",
         "hero",
         "image",
+        "product-carousel",
         "quote",
         "search",
         "tabs",