@akinon/pz-theme 2.0.35-rc.0 → 2.0.35

package/src/sections/notification-banner-section.tsx

@@ -8,6 +8,7 @@ import { twMerge } from 'tailwind-merge';
 import clsx from 'clsx';
 import ThemeBlock from '../theme-block';
 
+import { postToEditor } from '../editor-bridge';
 interface NotificationBannerSectionProps {
   section: Section;
   currentBreakpoint?: string;
@@ -30,30 +31,74 @@ export default function NotificationBannerSection({
   const properties = section.properties || {};
 
   const gradientStart = resolveThemeCssVariables(
-    getResponsiveValue(styles['background-gradient-start'], currentBreakpoint, '#a8e063') as string,
+    getResponsiveValue(
+      styles['background-gradient-start'],
+      currentBreakpoint,
+      '#a8e063'
+    ) as string,
     themeSettings
   );
   const gradientEnd = resolveThemeCssVariables(
-    getResponsiveValue(styles['background-gradient-end'], currentBreakpoint, '#d4fc79') as string,
+    getResponsiveValue(
+      styles['background-gradient-end'],
+      currentBreakpoint,
+      '#d4fc79'
+    ) as string,
     themeSettings
   );
-  const borderRadius = getResponsiveValue(styles['border-radius'], currentBreakpoint, '16px') as string;
-  const paddingTop = getResponsiveValue(styles['padding-top'], currentBreakpoint, 20);
-  const paddingRight = getResponsiveValue(styles['padding-right'], currentBreakpoint, 24);
-  const paddingBottom = getResponsiveValue(styles['padding-bottom'], currentBreakpoint, 20);
-  const paddingLeft = getResponsiveValue(styles['padding-left'], currentBreakpoint, 24);
+  const borderRadius = getResponsiveValue(
+    styles['border-radius'],
+    currentBreakpoint,
+    '16px'
+  ) as string;
+  const paddingTop = getResponsiveValue(
+    styles['padding-top'],
+    currentBreakpoint,
+    20
+  );
+  const paddingRight = getResponsiveValue(
+    styles['padding-right'],
+    currentBreakpoint,
+    24
+  );
+  const paddingBottom = getResponsiveValue(
+    styles['padding-bottom'],
+    currentBreakpoint,
+    20
+  );
+  const paddingLeft = getResponsiveValue(
+    styles['padding-left'],
+    currentBreakpoint,
+    24
+  );
   const gap = getResponsiveValue(styles.gap, currentBreakpoint, 16);
-  const maxWidth = getResponsiveValue(styles['max-width'], currentBreakpoint, 'normal') as string;
+  const maxWidth = getResponsiveValue(
+    styles['max-width'],
+    currentBreakpoint,
+    'normal'
+  ) as string;
   const closeButtonColor = resolveThemeCssVariables(
-    getResponsiveValue(styles['close-button-color'], currentBreakpoint, '#33691e') as string,
+    getResponsiveValue(
+      styles['close-button-color'],
+      currentBreakpoint,
+      '#33691e'
+    ) as string,
     themeSettings
   );
   const iconBgColor = resolveThemeCssVariables(
-    getResponsiveValue(styles['icon-background-color'], currentBreakpoint, '#ffffff40') as string,
+    getResponsiveValue(
+      styles['icon-background-color'],
+      currentBreakpoint,
+      '#ffffff40'
+    ) as string,
     themeSettings
   );
 
-  const dismissible = getResponsiveValue(properties.dismissible, currentBreakpoint, true);
+  const dismissible = getResponsiveValue(
+    properties.dismissible,
+    currentBreakpoint,
+    true
+  );
 
   const maxWidthClass =
     maxWidth === 'narrow'
@@ -78,22 +123,51 @@ export default function NotificationBannerSection({
         selectedBlockId={selectedBlockId}
         currentBreakpoint={currentBreakpoint}
         onMoveUp={() => {
-          if (window.parent) window.parent.postMessage({ type: 'MOVE_BLOCK_UP', data: { placeholderId, sectionId: section.id, blockId: block.id } }, '*');
+          if (window.parent)
+            postToEditor({
+              type: 'MOVE_BLOCK_UP',
+              data: { placeholderId, sectionId: section.id, blockId: block.id }
+            });
         }}
         onMoveDown={() => {
-          if (window.parent) window.parent.postMessage({ type: 'MOVE_BLOCK_DOWN', data: { placeholderId, sectionId: section.id, blockId: block.id } }, '*');
+          if (window.parent)
+            postToEditor({
+              type: 'MOVE_BLOCK_DOWN',
+              data: { placeholderId, sectionId: section.id, blockId: block.id }
+            });
         }}
         onDuplicate={() => {
-          if (window.parent) window.parent.postMessage({ type: 'DUPLICATE_BLOCK', data: { placeholderId, sectionId: section.id, blockId: block.id } }, '*');
+          if (window.parent)
+            postToEditor({
+              type: 'DUPLICATE_BLOCK',
+              data: { placeholderId, sectionId: section.id, blockId: block.id }
+            });
         }}
         onToggleVisibility={() => {
-          if (window.parent) window.parent.postMessage({ type: 'TOGGLE_BLOCK_VISIBILITY', data: { placeholderId, sectionId: section.id, blockId: block.id } }, '*');
+          if (window.parent)
+            postToEditor({
+              type: 'TOGGLE_BLOCK_VISIBILITY',
+              data: { placeholderId, sectionId: section.id, blockId: block.id }
+            });
         }}
         onDelete={() => {
-          if (window.parent) window.parent.postMessage({ type: 'DELETE_BLOCK', data: { placeholderId, sectionId: section.id, blockId: block.id } }, '*');
+          if (window.parent)
+            postToEditor({
+              type: 'DELETE_BLOCK',
+              data: { placeholderId, sectionId: section.id, blockId: block.id }
+            });
         }}
         onRename={(newLabel) => {
-          if (window.parent) window.parent.postMessage({ type: 'RENAME_BLOCK', data: { placeholderId, sectionId: section.id, blockId: block.id, label: newLabel } }, '*');
+          if (window.parent)
+            postToEditor({
+              type: 'RENAME_BLOCK',
+              data: {
+                placeholderId,
+                sectionId: section.id,
+                blockId: block.id,
+                label: newLabel
+              }
+            });
         }}
       />
     );
@@ -103,8 +177,8 @@ export default function NotificationBannerSection({
     return null;
   }
 
-  const iconBlock = section.blocks?.find(b => b.type === 'icon');
-  const contentBlocks = section.blocks?.filter(b => b.type !== 'icon') || [];
+  const iconBlock = section.blocks?.find((b) => b.type === 'icon');
+  const contentBlocks = section.blocks?.filter((b) => b.type !== 'icon') || [];
 
   return (
     <div
@@ -119,11 +193,23 @@ export default function NotificationBannerSection({
       style={{
         background: `linear-gradient(135deg, ${gradientStart} 0%, ${gradientEnd} 100%)`,
         borderRadius,
-        paddingTop: typeof paddingTop === 'number' ? `${paddingTop}px` : paddingTop as string,
-        paddingRight: typeof paddingRight === 'number' ? `${paddingRight}px` : paddingRight as string,
-        paddingBottom: typeof paddingBottom === 'number' ? `${paddingBottom}px` : paddingBottom as string,
-        paddingLeft: typeof paddingLeft === 'number' ? `${paddingLeft}px` : paddingLeft as string,
-        gap: typeof gap === 'number' ? `${gap}px` : gap as string
+        paddingTop:
+          typeof paddingTop === 'number'
+            ? `${paddingTop}px`
+            : (paddingTop as string),
+        paddingRight:
+          typeof paddingRight === 'number'
+            ? `${paddingRight}px`
+            : (paddingRight as string),
+        paddingBottom:
+          typeof paddingBottom === 'number'
+            ? `${paddingBottom}px`
+            : (paddingBottom as string),
+        paddingLeft:
+          typeof paddingLeft === 'number'
+            ? `${paddingLeft}px`
+            : (paddingLeft as string),
+        gap: typeof gap === 'number' ? `${gap}px` : (gap as string)
       }}
     >
       {iconBlock && (
@@ -140,7 +226,7 @@ export default function NotificationBannerSection({
       )}
 
       <div className="flex-1 min-w-0">
-        {contentBlocks.map(block => renderBlock(block))}
+        {contentBlocks.map((block) => renderBlock(block))}
       </div>
 
       {Boolean(dismissible) && (