feat(cms): created new block for forms (#1046)

packages/composables/src/internalHelpers/defaultApiParams.json

@@ -54,6 +54,7 @@
           "slots",
           "type",
           "id",
+          "backgroundColor",
           "backgroundMedia",
           "sectionPosition"
       ],
@@ -71,7 +72,6 @@
           "type",
           "config"
       ],
-
       "product": [
           "media",
           "productReviews",
@@ -153,7 +153,6 @@
           "translated"
       ]
     }
-
   },
   "useProduct": {
     "associations": [
@@ -196,7 +195,6 @@
               }
             ]
           }
-
         ]
       }
     ],

packages/default-theme/cms/blocks/CmsBlockForms.vue

@@ -0,0 +1,44 @@
+<template>
+  <CmsGenericElement
+    v-if="getContent"
+    :content="getContent"
+    :style="{
+      'background-color': getBackgroundColor,
+      'background-size': 'cover',
+      'background-repeat': 'no-repeat',
+    }"
+    class="cms-block-forms"
+  />
+</template>
+<script>
+import CmsGenericElement from "sw-cms/CmsGenericElement"
+export default {
+  name: "CmsBlockForms",
+  components: {
+    CmsGenericElement,
+  },
+  props: {
+    content: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    getSlots() {
+      return this.content.slots || []
+    },
+    getContent() {
+      return this.getSlots.length && this.getSlots[0]
+    },
+    getBackgroundColor() {
+      return this.content.backgroundColor
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+@import "../settings.scss";
+.cms-block-forms {
+  @include sizing-mode-boxed;
+}
+</style>

packages/default-theme/cms/cmsMap.json

@@ -27,7 +27,7 @@
     "text-three-column": "CmsBlockTextThreeColumn",
     "product-three-column": "CmsBlockProductThreeColumn",
     "text-two-column": "CmsBlockTextTwoColumn",
-    "form": "CmsBlockDefault"
+    "form": "CmsBlockForms"
   },
   "elements": {
     "product-box": "CmsElementProductCard",