blocks-dusted 0.1.12 → 0.1.13

package/templates/blocks/DD-GooeyInfo/config.ts

@@ -1,135 +1,136 @@
-import type { Block } from 'payload'
-import { BlocksFeature } from '@payloadcms/richtext-lexical'
-
-import { MediaBlock } from '@/blocks/MediaBlock/config'
-import { DDIcon } from '@/blocks/DD-Icon/config'
-import { DDAnimText } from '@/blocks/DD-AnimText/config'
-import { DDIconButton } from '@/blocks/DD-IconButton/config'
-import { defaultLexical } from '@/fields/defaultLexical'
-
-export const DDGooeyInfo: Block = {
-  slug: 'DD-GooeyInfo',
-  interfaceName: 'DDGooeyInfo',
-  labels: {
-    singular: 'Button Gooey Info',
-    plural: 'Button Gooey Info Blocks'
-  },
-  fields: [
-    {
-      type: 'row',
-      fields: [
-        {
-          name: 'buttonLabel',
-          type: 'text',
-          label: 'Button Label/Icon',
-          defaultValue: 'i',
-          admin: {
-            width: '50%',
-            description: 'Text or single character to display on button (e.g., "i", "?", "N")'
-          }
-        },
-        {
-          name: 'xOffset',
-          type: 'number',
-          label: 'Panel X Offset',
-          defaultValue: 110,
-          admin: {
-            width: '50%',
-            description: 'Horizontal distance from button to panel in pixels'
-          }
-        }
-      ]
-    },
-    {
-      type: 'row',
-      fields: [
-        {
-          name: 'panelWidth',
-          type: 'text',
-          label: 'Panel Width',
-          defaultValue: '16rem',
-          admin: {
-            width: '33.33%',
-            description: 'Width of info panel (e.g., 16rem, 300px)'
-          }
-        },
-        {
-          name: 'buttonBgColor',
-          type: 'text',
-          label: 'Button Background',
-          defaultValue: 'black',
-          admin: {
-            width: '33.33%',
-            description: 'CSS color (e.g., black, #000, var(--primary))'
-          }
-        },
-        {
-          name: 'buttonTextColor',
-          type: 'text',
-          label: 'Button Text Color',
-          defaultValue: 'white',
-          admin: {
-            width: '33.33%',
-            description: 'CSS color for button text'
-          }
-        }
-      ]
-    },
-    {
-      type: 'row',
-      fields: [
-        {
-          name: 'panelBgColor',
-          type: 'text',
-          label: 'Panel Background',
-          defaultValue: 'black',
-          admin: {
-            width: '50%',
-            description: 'CSS color for panel background'
-          }
-        },
-        {
-          name: 'panelTextColor',
-          type: 'text',
-          label: 'Panel Text Color',
-          defaultValue: 'white',
-          admin: {
-            width: '50%',
-            description: 'CSS color for panel text'
-          }
-        }
-      ]
-    },
-    {
-      type: 'row',
-      fields: [
-        {
-          name: 'className',
-          type: 'text',
-          label: 'Container CSS Classes',
-          admin: {
-            width: '50%',
-            description: 'Additional CSS classes for the outer container'
-          }
-        },
-        {
-          name: 'panelClassName',
-          type: 'text',
-          label: 'Panel CSS Classes',
-          admin: {
-            width: '50%',
-            description: 'Additional CSS classes for the info panel'
-          }
-        }
-      ]
-    },
-    {
-      name: 'richTextData',
-      type: 'richText',
-      editor: defaultLexical,
-      label: 'Panel Content'
-    }
-  ]
-}
-
-export default DDGooeyInfo
+import type { Block } from 'payload'
+import { BlocksFeature } from '@payloadcms/richtext-lexical'
+
+import { MediaBlock } from '@/blocks/MediaBlock/config'
+import { DDIcon } from '@/blocks/DD-Icon/config'
+import { DDAnimText } from '@/blocks/DD-AnimText/config'
+import { DDIconButton } from '@/blocks/DD-IconButton/config'
+import { defaultLexical } from '@/fields/defaultLexical'
+
+export const DDGooeyInfo: Block = {
+  slug: 'DD-GooeyInfo',
+  interfaceName: 'DDGooeyInfo',
+  labels: {
+    singular: 'Button Gooey Info',
+    plural: 'Button Gooey Info Blocks',
+  },
+  fields: [
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'buttonLabel',
+          type: 'text',
+          label: 'Button Label/Icon',
+          defaultValue: 'i',
+          admin: {
+            width: '50%',
+            description: 'Text or single character to display on button (e.g., "i", "?", "N")',
+          },
+        },
+        {
+          name: 'xOffset',
+          type: 'number',
+          label: 'Panel X Offset',
+          defaultValue: 48,
+          admin: {
+            width: '50%',
+            description:
+              'Horizontal panel offset in pixels. Keep at or below 48 so the panel stays connected to the button',
+          },
+        },
+      ],
+    },
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'panelWidth',
+          type: 'text',
+          label: 'Panel Width',
+          defaultValue: '16rem',
+          admin: {
+            width: '33.33%',
+            description: 'Width of info panel (e.g., 16rem, 300px)',
+          },
+        },
+        {
+          name: 'buttonBgColor',
+          type: 'text',
+          label: 'Button Background',
+          defaultValue: 'black',
+          admin: {
+            width: '33.33%',
+            description: 'CSS color (e.g., black, #000, var(--primary))',
+          },
+        },
+        {
+          name: 'buttonTextColor',
+          type: 'text',
+          label: 'Button Text Color',
+          defaultValue: 'white',
+          admin: {
+            width: '33.33%',
+            description: 'CSS color for button text',
+          },
+        },
+      ],
+    },
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'panelBgColor',
+          type: 'text',
+          label: 'Panel Background',
+          defaultValue: 'black',
+          admin: {
+            width: '50%',
+            description: 'CSS color for panel background',
+          },
+        },
+        {
+          name: 'panelTextColor',
+          type: 'text',
+          label: 'Panel Text Color',
+          defaultValue: 'white',
+          admin: {
+            width: '50%',
+            description: 'CSS color for panel text',
+          },
+        },
+      ],
+    },
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'className',
+          type: 'text',
+          label: 'Container CSS Classes',
+          admin: {
+            width: '50%',
+            description: 'Additional CSS classes for the outer container',
+          },
+        },
+        {
+          name: 'panelClassName',
+          type: 'text',
+          label: 'Panel CSS Classes',
+          admin: {
+            width: '50%',
+            description: 'Additional CSS classes for the info panel',
+          },
+        },
+      ],
+    },
+    {
+      name: 'richTextData',
+      type: 'richText',
+      editor: defaultLexical,
+      label: 'Panel Content',
+    },
+  ],
+}
+
+export default DDGooeyInfo