fix: css classes and visibility for CMS layout element (#460)

* fix(helpers): merging visibility and classes

* feat(cms-base): use css classes and visibility on cms layout level

* chore: changeset

.changeset/curvy-games-unite.md

@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/helpers-next": patch
+---
+
+Proper visibility and css classes merging

.changeset/plenty-dancers-live.md

@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/cms-base": patch
+---
+
+Apply visibility and css classes for CMS layout

packages/cms-base/components/public/cms/CmsPage.vue

@@ -45,7 +45,7 @@ const DynamicRender = () => {
       return h(componentObject.component, {
         content: componentObject.section,
         class: {
-          [cssClasses ?? ""]: true,
+          ...cssClasses,
           "max-w-screen-2xl mx-auto": layoutStyles?.sizingMode === "boxed",
         },
         style: {

packages/cms-base/components/public/cms/section/CmsSectionDefault.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import type { CmsSectionDefault } from "@shopware-pwa/composables-next";
+import { getCmsLayoutConfiguration } from "@shopware-pwa/helpers-next";
 
-defineProps<{
+const props = defineProps<{
   content: CmsSectionDefault;
 }>();
+
+const { cssClasses, layoutStyles } = getCmsLayoutConfiguration(props.content);
 </script>
 
 <template>
-  <div class="cms-section-default">
+  <div class="cms-section-default" :class="cssClasses" :styles="layoutStyles">
     <CmsGenericBlock
       v-for="cmsBlock in content.blocks"
       class="overflow-auto"

packages/helpers/src/cms/getCmsLayoutConfiguration.ts

@@ -19,7 +19,9 @@ export type LayoutConfiguration = {
     marginRight?: string | null | undefined;
     marginTop?: string | null | undefined;
   };
-  cssClasses: string | null;
+  cssClasses: {
+    [cssClass: string]: boolean;
+  } | null;
 };
 
 // predicate types
@@ -94,11 +96,21 @@ export function getCmsLayoutConfiguration(
       layoutStyles: {},
     } as LayoutConfiguration;
   }
-
   const visibilityCssClasses = getVisibilityClasses(content);
+  // convert css classes string into object in format { "css-class-name": true }
+  const mappedCssClasses =
+    typeof content.cssClass === "string"
+      ? {
+          ...content.cssClass.split(" ").reduce((accumulator, cssClass) => {
+            return { ...accumulator, [cssClass]: true };
+          }, {}),
+        }
+      : {};
+
+  // append visibility classes to the css classes object
   const cssClasses = Object.keys(visibilityCssClasses).length
-    ? Object.assign({}, content.cssClass, visibilityCssClasses)
-    : content.cssClass;
+    ? Object.assign({}, mappedCssClasses, visibilityCssClasses)
+    : mappedCssClasses;
 
   return {
     cssClasses,