fix: apply margin to wrapperStyles when drag wrapper is enabled [ALT-1293]

packages/components/src/components/Divider/ContentfulDivider.css

@@ -1,7 +1,11 @@
 .cf-divider {
+  display: contents;
   position: relative;
   width: 100%;
   height: 100%;
+}
+
+.cf-divider hr {
   border: none;
 }
 

packages/components/src/components/Divider/ContentfulDivider.tsx

@@ -1,22 +1,14 @@
 import React from 'react';
 import './ContentfulDivider.css';
-import { css, cx } from 'emotion';
-
-const styles = {
-  hr: css({
-    border: 'none',
-  }),
-};
 
 export type ContentfulDividerProps = {
   className?: string;
 };
 
-export const ContentfulDivider = (props: ContentfulDividerProps) => {
-  const { className } = props;
+export const ContentfulDivider = ({ className = '', ...props }: ContentfulDividerProps) => {
   return (
     <div className="cf-divider" {...props}>
-      <hr className={cx(styles.hr, className)} />
+      <hr className={className} />
     </div>
   );
 };

packages/components/src/components/Image/Image.tsx

@@ -30,8 +30,10 @@ export const Image: React.FC<ImageProps> = ({ className = '', src, cfImageAsset,
     );
   }
 
+  const imageClasses = combineClasses('cf-image', className);
+
   if (typeof cfImageAsset === 'string') {
-    return <img src={cfImageAsset} className={'cf-image ' + className} {...props} />;
+    return <img src={cfImageAsset} className={imageClasses} {...props} />;
   }
 
   if (cfImageAsset) {
@@ -41,13 +43,13 @@ export const Image: React.FC<ImageProps> = ({ className = '', src, cfImageAsset,
         srcSet={cfImageAsset.srcSet?.length ? cfImageAsset.srcSet?.join(', ') : undefined}
         sizes={cfImageAsset.sizes ? cfImageAsset.sizes : undefined}
         loading={cfImageAsset.loading}
-        className={'cf-image ' + className}
+        className={imageClasses}
         {...props}
       />
     );
   }
 
   if (src) {
-    return <img src={src} className={'cf-image ' + className} {...props} />;
+    return <img src={src} className={imageClasses} {...props} />;
   }
 };

packages/visual-editor/src/hooks/useComponent.tsx

@@ -64,6 +64,10 @@ export const useComponent = ({
   }, [node]);
 
   const componentId = node.data.id;
+  const isAssembly = node.type === 'assembly';
+  const isStructureComponent = isContentfulStructureComponent(node.data.blockId);
+  const requiresDragWrapper =
+    !isAssembly && !isStructureComponent && !componentRegistration?.options?.wrapComponent;
 
   const { componentProps, wrapperStyles } = useComponentProps({
     node,
@@ -72,6 +76,7 @@ export const useComponent = ({
     renderDropzone,
     definition: componentRegistration?.definition,
     userIsDragging,
+    requiresDragWrapper,
   });
 
   const elementToRender = (props?: { dragProps?: DragWrapperProps; rest?: unknown }) => {
@@ -88,14 +93,9 @@ export const useComponent = ({
       ...customComponentProps
     } = componentProps;
 
-    const isStructureComponent = isContentfulStructureComponent(node.data.blockId);
-    const isAssembly = node.type === 'assembly';
     const modifiedProps =
       isStructureComponent || isAssembly ? componentProps : customComponentProps;
 
-    const requiresDragWrapper =
-      !isStructureComponent && componentRegistration.options?.wrapComponent === false;
-
     const element = React.createElement(
       ImportedComponentErrorBoundary,
       { componentId: node.data.blockId },
@@ -105,7 +105,7 @@ export const useComponent = ({
       }),
     );
 
-    if (!requiresDragWrapper || isAssembly) {
+    if (!requiresDragWrapper) {
       return element;
     }
 

packages/visual-editor/src/hooks/useComponentProps.spec.ts

@@ -1,4 +1,4 @@
-import { ASSEMBLY_NODE_TYPE } from '@contentful/experiences-core/constants';
+import { ASSEMBLY_NODE_TYPE, CONTENTFUL_COMPONENTS } from '@contentful/experiences-core/constants';
 import { useComponentProps } from './useComponentProps';
 import { ComponentDefinition, ExperienceTreeNode } from '@contentful/experiences-core/types';
 import { vi } from 'vitest';
@@ -102,8 +102,8 @@ describe('useComponentProps', () => {
 
   describe('structure components', () => {
     const definition: ComponentDefinition = {
-      id: 'contentful-section',
-      name: 'Section',
+      id: CONTENTFUL_COMPONENTS.section.id,
+      name: CONTENTFUL_COMPONENTS.section.name,
       variables: {
         cfWidth: { type: 'Text' },
         cfHeight: { type: 'Text' },
@@ -113,7 +113,7 @@ describe('useComponentProps', () => {
       data: {
         id: 'id',
         // This block id will identify the component as a structure component
-        blockId: 'contentful-section',
+        blockId: CONTENTFUL_COMPONENTS.section.id,
         props: {
           cfWidth: {
             type: 'DesignValue',
@@ -160,6 +160,8 @@ describe('useComponentProps', () => {
       variables: {
         cfWidth: { type: 'Text' },
         cfHeight: { type: 'Text' },
+        cfMaxWidth: { type: 'Text' },
+        cfMargin: { type: 'Text' },
       },
     };
     const node: ExperienceTreeNode = {
@@ -180,6 +182,18 @@ describe('useComponentProps', () => {
               [desktop.id]: '50%',
             },
           },
+          cfMaxWidth: {
+            type: 'DesignValue',
+            valuesByBreakpoint: {
+              [desktop.id]: '50%',
+            },
+          },
+          cfMargin: {
+            type: 'DesignValue',
+            valuesByBreakpoint: {
+              [desktop.id]: '10px 0 10px 0',
+            },
+          },
         },
         unboundValues: {},
         dataSource: {},
@@ -189,22 +203,47 @@ describe('useComponentProps', () => {
       type: 'block',
     };
 
-    it('should set the component size in wrapperStyles and set 100% size in componentStyles', () => {
+    it('should set the component size in wrapperStyles when drag wrapper is enabled', () => {
       const { result } = renderHook(() =>
         useComponentProps({
           node,
           areEntitiesFetched,
           resolveDesignValue,
           renderDropzone,
           definition,
+          requiresDragWrapper: true,
           userIsDragging,
         }),
       );
 
       expect(result.current.wrapperStyles.width).toEqual('50%');
       expect(result.current.wrapperStyles.height).toEqual('50%');
+      expect(result.current.wrapperStyles.maxWidth).toEqual('50%');
+      expect(result.current.wrapperStyles.margin).toEqual('10px 0 10px 0');
+
       expect(result.current.componentStyles.width).toEqual('100%');
       expect(result.current.componentStyles.height).toEqual('100%');
+      expect(result.current.componentStyles.maxWidth).toEqual('none');
+      expect(result.current.componentStyles.margin).toEqual('0');
+    });
+
+    it('should set the component size in componentStyles when drag wrapper is disabled', () => {
+      const { result } = renderHook(() =>
+        useComponentProps({
+          node,
+          areEntitiesFetched,
+          resolveDesignValue,
+          renderDropzone,
+          definition,
+          requiresDragWrapper: false,
+          userIsDragging,
+        }),
+      );
+
+      expect(result.current.componentStyles.width).toEqual('50%');
+      expect(result.current.componentStyles.height).toEqual('50%');
+      expect(result.current.componentStyles.maxWidth).toEqual('50%');
+      expect(result.current.componentStyles.margin).toEqual('10px 0 10px 0');
     });
   });
 });

packages/visual-editor/src/hooks/useComponentProps.ts

@@ -51,6 +51,7 @@ type UseComponentProps = {
   renderDropzone: RenderDropzoneFunction;
   userIsDragging: boolean;
   slotId?: string;
+  requiresDragWrapper?: boolean;
 };
 
 export const useComponentProps = ({
@@ -60,6 +61,7 @@ export const useComponentProps = ({
   renderDropzone,
   definition,
   userIsDragging,
+  requiresDragWrapper,
 }: UseComponentProps) => {
   const unboundValues = useEditorStore((state) => state.unboundValues);
   const hyperlinkPattern = useEditorStore((state) => state.hyperLinkPattern);
@@ -223,18 +225,27 @@ export const useComponentProps = ({
 
   // Move size styles to the wrapping div and override the component styles
   const overrideStyles: CSSProperties = {};
-  const wrapperStyles: CSSProperties = {
-    width: cfStyles.width,
-    maxWidth: cfStyles.maxWidth,
-  };
-  if (!isStructureComponent) {
+  const wrapperStyles: CSSProperties = {};
+  if (requiresDragWrapper) {
     if (cfStyles.height) {
       wrapperStyles.height = cfStyles.height;
       overrideStyles.height = '100%';
     }
+
     if (cfStyles.width) {
+      wrapperStyles.width = cfStyles.width;
       overrideStyles.width = '100%';
     }
+
+    if (cfStyles.maxWidth) {
+      wrapperStyles.maxWidth = cfStyles.maxWidth;
+      overrideStyles.maxWidth = 'none';
+    }
+
+    if (cfStyles.margin) {
+      wrapperStyles.margin = cfStyles.margin;
+      overrideStyles.margin = '0';
+    }
   }
 
   // Styles that will be applied to the component element